I have a problem where I need to make a border-bottom, with a given offset in CSS
for example, in this JSFiddle, I have a black border-bottom.
https://jsfiddle.net/uexma4o6/343/
<div style="border-bottom: 2px solid black; width:500px; height:40px; background-color:lightcoral"></div>
but I want to give an offset to this 2px solid black border to be 5px above from where it is.
Is it possible?
This can be done with a linear-gradient:
.box {
background:
linear-gradient(black,black) 0 calc(100% - 5px)/100% 2px no-repeat,
lightcoral;
width: 500px;
height: 40px;
}
<div class="box"></div>
You can also do it like this:
.box {
background:
linear-gradient(black,black) bottom/100% 2px no-repeat,
lightcoral;
border-bottom:5px solid lightcoral;
width: 500px;
height: 40px;
box-sizing:border-box;
}
<div class="box"></div>
Another idea with box shadow:
.box {
background:lightcoral;
border-bottom:2px solid black;
box-shadow:0 5px 0 lightcoral;
width: 500px;
height: 40px;
}
<div class="box"></div>
And with inset shadow:
.box {
background:lightcoral;
box-shadow:
0 -5px 0 lightcoral inset,
0 -7px 0 black inset;
width: 500px;
height: 40px;
}
<div class="box"></div>
Solution
https://jsfiddle.net/StephanieSchellin/j7pmxkc3/
Use CSS ::after to add a pseudo element that has the border you are looking for. Then move the pseudo element around to position it how you like. This pseudo element will always be tied to its root element but you still have to take into account modifying it for #media query changes and such.
You see in the image below that this solution is layering the pseudo element over the root one. You can choose to use ::before or experiment with other positioning setups to accommodate your layout needs.
Always do plenty of cross browser testing when doing edge case things like this because its possible you will run into box model issues.
HTML
<div class='the-div'></div>
CSS
.the-div {
width:500px;
height:40px;
background-color:lightcoral;
position: relative
}
.the-div::after {
border-bottom: 2px solid black;
content: '';
width:500px;
position:absolute;
bottom:5px;
}
Further Reading
See https://css-tricks.com/pseudo-element-roundup/
There are lots of cool things you can do with pseudo elements.
Related
I need to create a solid color inset border. This is the bit of CSS I'm using:
border: 10px inset rgba(51,153,0,0.65);
Unfortunately that creates a 3D ridged border (ignore the squares and dark description box)
You could use box-shadow, possibly:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
<div id="something"></div>
This has the advantage that it will overlay the background-image of the div, but it is, of course, blurred (as you'd expect from the box-shadow property). To build up the density of the shadow you can add additional shadows of course:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
<div id="something"></div>
Edited because I realised that I'm an idiot, and forgot to offer the simplest solution first, which is using an otherwise-empty child element to apply the borders over the background:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
padding: 0;
position: relative;
}
#something div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(0, 255, 0, 0.6);
}
<div id="something">
<div></div>
</div>
Edited after #CoryDanielson's comment, below:
jsfiddle.net/dPcDu/2 you can add a 4th px parameter for the box-shadow that does the spread and will more easily reflect his images.
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
<div id="something"></div>
I would recomnend using box-sizing.
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
#bar{
border: 10px solid green;
}
To produce a border inset within an element the only solution I've found (and I've tried all the suggestions in this thread to no avail) is to use a pseudo-element such as :before
E.g.
.has-inset-border:before {
content: " "; /* to ensure it displays */
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
border: 4px dashed red;
pointer-events: none; /* user can't click on it */
}
The box-sizing property won't work, as the border always ends up outside everything.
The box-shadow options has the dual disadvantages of not really working and not being supported as widely (and costing more CPU cycles to render, if you care).
It's an old trick, but I still find the easiest way to do this is to use outline-offset with a negative value (example below uses -6px). Here's a fiddle of it—I've made the outer border red and the outline white to differentiate the two:
.outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}
<div class="outline-offset"></div>
If you want to make sure the border is on the inside of your element, you can use
box-sizing:border-box;
this will place the following border on the inside of the element:
border: 10px solid black;
(similar result you'd get using the additonal parameter inset on box-shadow, but instead this one is for the real border and you can still use your shadow for something else.)
Note to another answer above: as soon as you use any inset on box-shadow of a certain element, you are limited to a maximum of 2 box-shadows on that element and would require a wrapper div for further shadowing.
Both solutions should as well get you rid of the undesired 3D effects.
Also note both solutions are stackable (see the example I've added in 2018)
.example-border {
width:100px;
height:100px;
border:40px solid blue;
box-sizing:border-box;
float:left;
}
.example-shadow {
width:100px;
height:100px;
float:left;
margin-left:20px;
box-shadow:0 0 0 40px green inset;
}
.example-combined {
width:100px;
height:100px;
float:left;
margin-left:20px;
border:20px solid orange;
box-sizing:border-box;
box-shadow:0 0 0 20px red inset;
}
<div class="example-border"></div>
<div class="example-shadow"></div>
<div class="example-combined"></div>
I don't know what you are comparing to.
But a super simple way to have a border look inset when compared to other non-bordered items is to add a border: ?px solid transparent; to whatever items do not have a border.
It will make the bordered item look inset.
http://jsfiddle.net/cmunns/cgrtd/
Simple SCSS solution with pseudo-elements
Live demo: https://codepen.io/vlasterx/pen/xaMgag
// Change border size here
$border-width: 5px;
.element-with-border {
display: flex;
height: 100px;
width: 100%;
position: relative;
background-color: #f2f2f2;
box-sizing: border-box;
// Use pseudo-element to create inset border
&:before {
position: absolute;
content: ' ';
display: flex;
border: $border-width solid black;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: $border-width solid black;
// Important: We must deduct border size from width and height
width: calc(100% - $border-width);
height: calc(100% - $border-width);
}
}
<div class="element-with-border">
Lorem ipsum dolor sit amet
</div>
You can do this:
.thing {
border: 2px solid transparent;
}
.thing:hover {
border: 2px solid green;
}
If box-sizing is not an option, another way to do this is just to make it a child of the sized element.
Demo
CSS
.box {
width: 100px;
height: 100px;
display: inline-block;
margin-right: 5px;
}
.border {
border: 1px solid;
display: block;
}
.medium { border-width: 10px; }
.large { border-width: 25px; }
HTML
<div class="box">
<div class="border small">A</div>
</div>
<div class="box">
<div class="border medium">B</div>
</div>
<div class="box">
<div class="border large">C</div>
</div>
I know this is three years old, but thought it might be helpful to someone.
The concept is to use the :after (or :before) selector to position a border within the parent element.
.container{
position:relative; /*Position must be set to something*/
}
.container:after{
position:relative;
top: 0;
content:"";
left:0;
height: 100%; /*Set pixel height and width if not defined in parent element*/
width: 100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:1px solid #000; /*set your border style*/
}
You may use background-clip: border-box;
Example:
.example {
padding: 2em;
border: 10px solid rgba(51,153,0,0.65);
background-clip: border-box;
background-color: yellow;
}
<div class="example">Example with background-clip: border-box;</div>
So I was trying to have a border appear on hover but it moved the entire bottom bar of the main menu which didn't look all that good I fixed it with the following:
#top-menu .menu-item a:hover {
border-bottom:4px solid #ec1c24;
padding-bottom:14px !important;
}
#top-menu .menu-item a {
padding-bottom:18px !important;
}
I hope this will help someone out there.
Simpler + better | img tag | z-index | link image | "alt" attribute
I figured out a method where you do not need to use the image as a background image but use the img HTML tag inside the div, and using z-index of the div as a negative value.
Advantages:
The image can now become a link to a lightbox or to another page
The img:hover style can now change image itself, for example:
black/white to color, low to high opacity, and much more.
Animations of image are possible The image is more accessible because
of the alt tag you can use.
For SEO the alt tag is important for keywords
#borders {
margin: 10px auto;
width: 300px;
height: 300px;
position:relative;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right: 0;
z-index: -1;
}
<div id="borders">
<img src="https://i.stack.imgur.com/RL5UH.png">
</div>
I am having an unexpected 1px margin under a div residing in a fixed container. This issue only occurs in Edge (possibly in IE as well). After some testing, I was able to reproduce the bug with a bare bones example.
This picture, which you can reproduce running the snippet below, is composed of 3 square divs inside a fixed div. Firefox
In Edge, you can "fix" this issue by either disabling the property top: 50% in the container div, or by disabling border-*-right-radius: 6px in the divs inside it. Naturally, this isn't a fix, because I need both these properties to effectively implement this design.
How can I fix this? I tried adding borders the same color as the background, but the background is not opaque.
Edit: If you can't see it right away in IE/Edge, try to select the container div and slowly increase the value of the top property. In IE11, changing it from 5% to 6% already made the problem obvious again.
.box {
background-color: rgba(0,0,0,0.15);
height: 70px;
line-height: 70px;
text-align: center;
border-right: 1px solid rgba(0,0,0,0.2);
}
.box:hover {
background-color: rgba(50,50,100,0.15);
}
.box:first-child {
border-top-right-radius: 6px;
border-top: 1px solid rgba(0,0,0,0.2);
}
.box:last-child {
border-bottom-right-radius: 6px;
border-bottom:1px solid rgba(0,0,0,0.2);
}
.main {
width: 70px;
position: fixed;
left: 0;
top: 5%;
}
<div class="main">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Try to use border on parent div: http://jsfiddle.net/gtf0fa8n/1/
Border radius on parent does not brake inner divs rendering in IE
.main {
border: 1px solid rgba(0, 0, 0, 0.5);
border-left: 0;
border-radius: 0 6px 6px 0;
overflow: hidden;
}
.box {
background-color: rgba(0, 0, 0, 0.3);
height: 70px;
line-height: 70px;
text-align: center;
}
.box:hover {
background-color: rgba(50,50,100,0.15);
}
Just give boxshadow of 1px with same color on bottom.
box-shadow: #2a2e37 0px 1px 0px;
I'd like to produce a circle with the outer dashed border offset from the main circle. I've attached a pic for reference.
I have tried using box shadow to achieve this but no luck so far. Is there a way to do this?
I was able to get this effect by utilizing the pseudo-element selector ::before. (::after would work just as well)
Here is a DEMO
Given the element:
<div class="circle"></div>
Apply the following CSS rule:
.circle {
position: relative;
float: left;
border: 2px dotted black; /* This is the outer border (dotted) */
background-color: white; /* This is the color of the inner border */
padding: 10px; /* This is the size of the inner border */
border-radius: 50%;
}
.circle::before {
position: absolute;
display: block;
content: ' ';
background-color: #6abde7; /* This is the color of the inner circle */
width: 150px; /* This controls how wide the circle will be. Remember to subtract padding + border */
height: 150px; /* This controls how tall the circle will be. Remember to subtract padding + border */
border-radius: 50%;
}
You can adjust a few of the rules above. They are mainly there just to give shape to the circle for the demo. I've commented the ones that control the styles of the circle.
Explanation
You're basically adding an element inside of the container element via CSS. This won't work on elements that don't support content. (i. e. <input>)
DEMO
.circle {
height:200px;
width:200px;
border-radius:50%;
background-color:#cef;
border:3px dotted #000;
box-shadow:inset 0 0 0 10px #fff;
}
UPDATE
Using :after
DEMO
.circle {
height:200px;
width:200px;
border-radius:50%;
background-color:#fff;
border:3px dotted #000;
}
.circle:after {
content:' ';
display:block;
height:180px;
width:180px;
border-radius:50%;
background-color:#cef;
position:relative;
top:10px;
left:10px;
}
Is there a reason you can't have a second div, like so?
http://jsfiddle.net/gUYFF/1/
.outline {
float:left;
border: dotted 2px black;
width: 220px;
height: 220px;
border-radius: 110px;
box-shadow: 0 0 0 10px white inset;
}
.circle {
background-color: #6abde7;
width: 200px;
height: 200px;
border-radius: 100px;
margin:10px;
}
<div class="outline"><div class="circle"></div></div>
If I use box-sizing: "border-box" for images the images will get smaller, like on hover: Example JsFiddle
Is it possible to do the same effect without the image getting cropped?
Solution #1 Outline property. Try to use outline instead of border with negative outline-offset value equal to outline width:
img:hover {
box-sizing:border-box;
outline: solid 10px #f80;
outline-offset: -10px;
}
http://jsfiddle.net/dfsq/BPRyZ/2/
Also since IE does not understand this property you can leave box-sizing to be used by IE8+.
Solution #2 Using div as wrapper + :after:
<div class="img-wrap">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" class="img1" />
</div>
CSS:
.img-wrap:after {
border: 0;
}
.img-wrap:hover:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: solid 10px #f80;
}
http://jsfiddle.net/dfsq/BPRyZ/7/
The question you need to answer is, do you want the image itself to be 200px, or the entire box to be 200px. There are 4 different ways to code this depending on your answer to the previous question...
If you want the entire box to be 200px wide, then you can use border-box with the following code...
http://jsfiddle.net/BPRyZ/8/
img {
width:200px;
border: transparent 10px solid;
box-sizing:border-box;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
}
If you want the entire box to be 200px wide, then you could also use this code...
img {
width:180px;
border: transparent 10px solid;
}
img:hover{
border:solid 10px #f80;
}
If you want the image itself to be 200px, then you need this code... (this means your total box width is actually 220px)
img {
width:220px;
border: transparent 10px solid;
box-sizing:border-box;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
}
For the above you could also use...
img {
width:200px;
border: transparent 10px solid;
}
img:hover{
border:solid 10px #f80;
}
I updated your jsfiddle
CSS:
img {
width:200px;
border: transparent 10px solid;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
width:220px;
}
I want to create a banner that goes over part of the page, I'm probably not using the correct terminology...
I've seen this on more and more websites, but while trying to find website using this I've struggled to find ones to inspect. But I did find one interesting example.
http://www.bmbw.com
-Their header logo is larger than the rest of the content, with the bottom two edges angled in.
-Their "BMBW Updates" and "BMBW Snow Report" also have this effect on their respective edges.
This is the style I'm trying to do, but I was curious about the best way to do this.
The Updates, Snow Report, and Navigation (to make the header look 3d) have the effect built into the image.
But I've also seen the effect diagonally and it didn't interfere with functionality. I guess I'm just asking if there is another way to do this other than build it into the image itself.
Any Ideas?
You can actually accomplish this sort of effect without any images whatsoever using the CSS triangle hack. I've created a jsFiddle with a working example: http://jsfiddle.net/P8W7F/
CSS gradients and shadows are a good way to do it if you're using CSS3
I looked at their page, but they have done it with an image.
The most simple way is to have a second div with a thick top border. If you have this html:
<div class="banner">first content</div>
<div class="shadow_simple"></div>
<div class="next_content">next content block</div>
Then this css will do:
.banner {
width: 400px;
margin:auto;
text-align:center;
background-color:#eee8aa;
}
.shadow_simple {
margin:auto;
width: 360px;
height:12px;
border-top: 12px solid #daa520;
border-left: 20px solid white;
border-right: 20px solid white;
border-bottom: none;
}
.next_content {
width: 360px;
margin:auto;
text-align:center;
background-color:#eee8aa;
border: 1px solid #daa520;
margin-top:-24px;
}
The same, but with gradient triangles:
<div class="banner">first content</div>
<div class="shadow_gradient">
<div class="shadow_simple"></div>
</div>
<div class="next_content">next content block</div>
And the css:
.banner {
width: 400px;
margin:auto;
text-align:center;
background-color:#eee8aa;
}
.shadow_simple {
margin:auto;
width: 360px;
height:12px;
border-top: 12px solid transparent;
border-left: 20px solid white;
border-right: 20px solid white;
border-bottom: none;
}
.shadow_gradient {
width: 400px;
height:24px;
margin:auto;
margin-bottom:12px;
box-shadow: inset 0px 5px 12px #daa520;
}
.next_content {
width: 360px;
margin:auto;
text-align:center;
background-color:#eee8aa;
margin-top:-36px;
border:1px solid #daa520
}