Struggling to add a border while converting a PSD to HTML? Is it possible to apply a border to an image with a transparent background? For instance, let's consider the following image:
Imagine wanting to place a border around the caret in the image like this:
Any ideas on how to achieve the white border effect in the image?
One method involves the use of an additional (albeit necessary) element along with multiple pseudo elements.
To enhance visibility, I've utilized distinct colors for each 'caret' displayed.
HTML Structure
<div class="wrapper">
<img src="http://lorempixel.com/output/nightlife-q-c-500-200-9.jpg" alt="" />
<div class="main">
<div class="caret-border"></div> <!---additional div -->
</div>
</div>
CSS Styling
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: lightgrey;
}
.wrapper {
width:650px;
margin: 10px auto;
border:1px solid grey;
}
.wrapper img {
display: block;
width:100%;
height:auto;
}
.main {
position: relative;
min-height:150px;
background: #bada55;
}
.main:before,
.main:after {
position: absolute;
content:"";
height:0;
width:calc(50% - 16px);
height:0px;
transform:translateY(-100%);
//top:-16px;
z-index:2;
border-style:solid;
}
.main:before {
left:0;
border-width: 0px 16px 16px 0;
border-color:transparent transparent green transparent;
}
.main:after {
right:0;
border-width: 0px 0px 16px 16px;
border-color:transparent transparent green transparent;
}
.caret-border {
height:0px;
background: red;
position: absolute;
width:100%;
}
.caret-border:before,
.caret-border:after{
position: absolute;
content:"";
height:0px;
top:0;
width:calc(50% - 14px);
z-index:1;
border-style:solid;
transform:translateY(-100%);
//top:-18px;
}
.caret-border:before {
left:0;
border-width: 0px 16px 18px 0;
border-color:transparent transparent white transparent;
}
.caret-border:after{
right:0;
border-width: 0px 0px 18px 16px;
border-color:transparent transparent white transparent;
}
One option is to utilize a PNG image that has a transparent background.
#caret {
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
I'm experiencing an issue where the document.ondrop function seems to be working in Chrome, but not in Firefox. Here's a link to an example demonstrating the problem: In the example, if you try to drop a file onto the page, it should trigger an ...
Hello, I am currently developing a project in an ASP.NET environment and am in need of a framework that can generate interactive charts on the server side. It would be ideal if the framework is open source, and produces charts in HTML5 as I also plan to pu ...
Is there a function or method to trim a path that extends beyond the viewbox rather than simply concealing it? I am currently using svg-edit, which has a specific viewbox or canvas area. Any elements drawn outside of this canvas remain hidden. However, wh ...
Looking for a navigation sidebar design similar to Outlook for my web application. I have seen options available as Winform controls and through Visual WebGUI, but these are Microsoft-dependent solutions. We need a Javascript & CSS based solution that is s ...
Is there a way to dynamically reload the content of a div with just a specific part of a JSON object in it? The code provided works perfectly, but it displays the entire JSON object within curly braces. I want only one variable from the object to be shown ...
On the index.php page, there is a script that retrieves data from demo.php and presents the outcome in a div. <div class="leftbox"> <?php echo "<div id='proddisplay'>"; echo "</div>"; ?> </div&g ...
Check out this site for an example: Interested in how uikit.co/explore functions? By hovering over any file, a copy button will appear allowing you to easily paste it into your Figma artboard. Want to know how this works and how to implement it on your o ...
I've created a gallery using jQuery, CSS & HTML and now I want to implement next and previous image buttons. I have added the buttons to the page and written functions for them, but I am struggling with the implementation. Here is my code, if anyone h ...
I am currently using multer and fs to handle the upload of an image file. How can I modify the directory where uploaded files are stored? Currently, all files are saved in my "routes" folder instead of the "uploads" folder created by multer. Additionally, ...
It seems like I am struggling to identify the exact issue. The display on mobile looks fine but not on desktop. I attempted to tweak the isotope configuration without success. Even manipulating the server-side code didn't reveal any obvious problems. ...
I currently have a hidden element called "new element" that is controlled by v-if. My goal is to create a button labeled "display" that, upon clicking, will reveal the new element on top after sliding down an old element. How can I achieve this using CSS ...
It's strange that the ARIA role attribute doesn't seem to be functioning as expected for me in Angular 2. I attempted to assign a div role of "listbox" and set the children as role "option", but it still doesn't work. Could someone assist m ...
I am currently using JSF with RichFaces version v.3.3.1.GA. I am trying to decrease the height style of the rich:editor tag (using TinyMCE), but for some reason it does not seem to be changing. <rich:editor id="transactionResult" style="height: 10px;" ...
Here is the representation of my mat-card list in my Angular application: <div [ngClass]="verticalResultsBarStyle"> <div class="innerDiv"> <mat-card [ngClass]="barStyle" *ngFor="let card of obs | async | paginate: { id: 'paginato ...
My flex component looks like this: <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" ... width="100%" height="100%" creationComplete="init()"> ....... <components:Naviga ...
Seeking assistance with a test site here that is currently in development. I am attempting to make the notification at the top remain hidden once the close button is clicked. Below is my current script: <style type="text/css"> <!-- .hide { displ ...
I'm currently working on flipping a div/box, and while it's functioning correctly, I'm facing an issue with the height of the back side exceeding that of the front side. This causes the flipped div to always push down to the next element (e. ...
I am currently working on a form that will appear in a modal, but I need it to be centrally aligned so that I can reduce the size of the modal. Here is what I have implemented so far: It seems like there is some space being "reserved" for columns that are ...
I've implemented this code and it's working well, but I've noticed that it sends three requests to the webserver: var refreshspeed=1000 function moreSnow() { $("#uptimedynamic").load("index.html #uptimedynamic"); $("#cpuloa ...
In my Angular.js application, I currently have a row of buttons that open up new routes to display partial views. Now, I need to modify some of these buttons to trigger a ui.bootstrap Collapse feature with the view inside it. The template code from the ui. ...