Is there a way to apply a border onto the box shadow itself without having to create two individual divs?
Trying to create something like this:
This is how I would go about it with pseudo elements so you don't have to add anymore html.
HTML
<div class="box">
</div>
CSS
.box {
width: 300px;
height: 80px;
background: black;
position: relative;
}
.box:after {
content: "";
display: block;
width: 300px;
height: 80px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
position: absolute;
top: 10px;
left: 10px;
border: 1px solid black;
}
Finally a fiddle: Demo
Here is a fiddle with a box-shadow on it: Demo or Demo
You can use multiple box shadows like so:
http://jsfiddle.net/chriscoyier/Vm9aM/
img {
box-shadow:
0 0 0 10px hsl(0, 0%, 80%),
0 0 0 15px hsl(0, 0%, 90%);
}
Related
I have a div which looks something like this:
.box{
box-sizing: border-box;
border: solid 0.01rem #2e2e2e;
border-radius: 3px;
width:100px;
height:100px;
background:red;
}
<div class="box"/>
And I'm trying to achieve this effect. How can I make this box look with such shadows from the inside of the div?
linear gradient
blur filter
absolute positioning
pseudo-elements
flexbox
.box {
box-sizing: border-box;
border-radius: 10%;
width: 100px;
height: 100px;
background: linear-gradient(270deg, red, #c10606);
position: relative;
}
.box:before {
position: absolute;
content: '';
top: 10%;
right: 10%;
bottom: 10%;
left: 10%;
background: linear-gradient(90deg, red, #c10606);
border-radius: 12%;
filter: blur(1px); /* optional for a softer effect */
}
/* optional layout and styling for box contents */
.box {
display: flex;
align-items: center;
text-align: center;
font-family: arial;
color: #ddd;
font-weight: bold;
}
.box * {
position: relative; /* puts interior content over the pseudo-element */
}
<div class="box">
<span>Interior content</span>
</div>
CSS box-shadow
I think the answer posted by #isherwood works as the best one for your use-case. But, there is a way to make the shadow show on the inside of the element by setting the last parameter of box-shadow as inset.
There are a few catches for this solution though. A few things which I could not achieve:
I am unable to implement linear gradient to the shadow.
I am unable to give a border-radius to the inner boundary of the shadow.
div.box {
background: linear-gradient(90deg, hsl(26, 68%, 26%), hsl(26, 68%, 45%));
height: 100px;
width: 100px;
box-shadow: 0 0 0 12px hsl(26, 68%, 35%) inset;
border-radius: 10px;
}
<div class="box"></div>
Reference: How to create an inner shadow using CSS
Well, I edited your code. Here is the demo.
Basically, I added one more div and added some style. Hope it will give you an idea.
Also, I added a snippet down below:-
.box {
box-sizing: border-box;
border: solid 0.01rem #2e2e2e;
border-radius: 15px;
width: 100px;
height: 100px;
background: red;
padding: 10px 0px 10px 0px;
}
.inner-div {
box-sizing: border-box;
border-radius: 15px;
width: 78px;
height: 78px;
background: #ee1717;
margin: 0 auto;
}
<div class="box"/>
<div class="inner-div"></div>
<div>
box shadows are basically your shape blurred.
that means that at the edges the shadow is curved up.
what if you don't want that? what if your shadow is for a top bar and you don't want it to seems like it ends?
issue:
desired effect :
how do I obtain this?
html :
<div class="TopBar"> </div>
css :
.TopBar {
box-shadow: 0 4px 28px black;
}
Am I supposed to use an absolute positioned element that's bigger than screen width or something?
You can add a spread parameter to the shadow (not exactly the same appearance, but at least it does what you ask for):
html,
body {
margin: 0;
}
.TopBar {
height: 40px;
background: #444;
box-shadow: 0px 4px 24px 16px black;
}
<div class="TopBar"></div>
Fake it! You can use linear gradient and a pseudo element to get the effect you want:
.TopBar {
height: 50px;
background: gray;
position: relative;
}
.TopBar::after {
content: "";
background: linear-gradient(to bottom, rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 100%);
position: absolute;
width: 100%;
height: 20px;
top: 100%;
}
<div class="TopBar"> </div>
You can add a pseudo-element (:before) to extend it beyond your original container and therefore, get a wider shadow :
html, body { margin:0; padding: 0 }
.TopBar {
height: 50px;
position: relative;
}
.TopBar:before {
content: "";
display: block;
position: absolute;
height: 100%;
width: 100%;
background: #454545;
box-shadow: 0 4px 28px #000;
transform: scaleX(1.1);
z-index: -1;
}
.TopBar .content {
color: #add8e6;
}
<div class="TopBar">
<div class="content">Here's some text inside my top bar</div>
</div>
I've got 3 div's that I want to look like this:
Here's the HTML:
<section class="main-window">
<div id="topdiv"></div>
<div id="middiv"></div>
<div id="botdiv"></div>
</section>
And the CSS:
.main-window
{
vertical-align: middle;
border: 2px solid gray;
border-radius: 5px;
width: 90%;
height: 70%;
background-color: White;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#topdiv {
background-color: beige;
height: 40%;
border: 2px solid black;
}
#middiv {
background-color: lightblue;
height: 40%;
border: 2px solid black;
}
#botdiv {
background-color: lightgreen;
height: 20%;
border: 2px solid black;
}
Here's the fiddle.
Notice that I've added heights to the divs of 40%, 40% and 20% so that they fill the 100% of the parent div. However, after I added a border to each div, the total height is increased slightly beyond the parents boundaries.
My question is: can I set heights of 40% for the two top divs and make the bottom div stretch until the bottom of its parent div?
You should add this css to each child element:
box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
Working Fiddle
and if you make adjustments in border, it seems to look nice.
Updated Fiddle
include jQuery and write below jQuery for third div
$(document).ready(function () {
$("#botdiv").height($(".main-window").height() - $("#topdiv").height() - $("#middiv").height());
});
On a site I'm building I want to have a 3 coloured border example here for the body.
What is the easiest way to create this?
I tried the following but it didn't work out how I expected it to:
<div id="red">
<div id="white">
<div id="blue">
<!--SITE GOES HERE-->
</div>
</div>
</div>
#red {
width: 100%;
height: 100%;
padding: 16px;
background: #CC092F;
}
#white {
width: 100%;
height: 100%;
padding: 16px;
background: white;
position: absolute;
z-index: 2;
}
#blue{
width: 100%;
height: 100%;
padding: 16px;
background: #0C144E;
position: absolute;
z-index: 3;
}
The problem with that is the padding pushes the divs offscreen, I realise I'm going about it the wrong way… (If i use percentages i.e. 98% it obviously scales, which I do not want) but I can't think of an alternative. Thanks in advance.
try this (SEE FIDDLE):
<div id="red" class="site-border">
<div id="white" class="site-border">
<div id="blue" class="site-border">
<div id="content"></div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#content {
height: 500px;
background: #e3e3e3;
padding: 16px;
}
.site-border {
width:100%;
}
#red {
border: 16px solid #CC092F;
}
#white {
border: 16px solid #fff;
}
#blue {
border: 16px solid #0C144E;
}
Instead of scaling, you should use the below properties in your CSS, this way, the borders and paddings will be counted inside the element instead of outside as normal box model does.
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Also, you shouldn't use position: absolute; cuz I don't see any reason of using that over here.
You could try this css:
div {
width: 100px;
height: 200px;
border: 3px solid navy;
outline: 3px solid #fff;
box-shadow: 0 0 0px 6px darkred;
}
Fiddle: http://jsfiddle.net/BXFUk/2/
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>