I want to show the box shadow on every side except bottom.
Here is the css I'm using.
box-shadow: 0 0 12px 4px #ddd;
How to remove bottom shadow from it?
You can't change the dimensions of the shadow across one axis only (i.e you can't reduce just the height of the shadow). One trick is to add the shadow to a pseudo element and reduce the height of that element.
.shadow {
margin:20px;
width:400px;
height:200px;
background:red;
position:relative;
}
/* Pseudo element for adding shadow */
.shadow:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:16px;
box-shadow: 0 0 12px 4px #999;
z-index:-1;
}
<div class="shadow"></div>
You can use the negative value to push it off the edge.
div {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 0px -4px 12px 4px #888888;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div></div>
</body>
</html>
you may use more than 1 shadow:
body {
box-shadow:
-12px -10px 12px -4px /* negative value here decrease the size */#ddd,
12px -10px 12px -4px #ddd,
inset 0 -3px lime /* demo , show bottom */;
padding:4em 8em;
background:gray;
}
/* demo purpose */
html {
display:flex;
align-items:center;
justify-content:center;
height:100vh;
}
it can draw things like this
Related
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.
I'm attempting to recreate the shadow from the image below:
It's the shadow between the two colors I'm trying to recreate using box-shadow. But I can't figure it out.
Here's my code:
box-shadow: inset 0 0 2px 0px #000000;
The shadow appears on both sides and is too strong compared to what I'm trying to achieve. Any suggestions?
I've made the below fiddle from complete scratch, you can use it if you like it
Demo
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
.one {
background: #B4B300;
height: 100px;
}
.two {
background: #FD370A;
height: 100px;
box-shadow: 0 0 5px #212121;
}
.three {
background: #fff;
height: 5px;
}
Instead of using inset shadow, am using a shadow which renders from all sides, right left are hidden as the div spans entire row, the shadow at the bottom is hidden with another div using background: #fff;
Note: I forgot to add -moz and -webkit prefixes so be sure you use
them if you want to support the older browsers too.
http://jsfiddle.net/CQvBb/
<div class="first"></div>
<div class="second"></div>
.first {
background:#B4B300;
width:500px;
height:100px;
box-shadow: inset 0 -5px 5px -5px #000000;
-moz-box-shadow: inset 0 -5px 5px -5px #000000;
-webkit-box-shadow: inset 0 -5px 5px -5px #000000;
}
.second {
background:#FD370A;
width:500px;
height:100px;
}
I'm using the following css technique to design a box shadow around a div element...
-webkit-box-shadow:0 0 10px #303030;
-moz-box-shadow:0 0 10px #303030;
box-shadow:0 0 10px #303030;
But is there a way to tell the css to stop the shadow effect at the top of the div? I just want to the left, right and bottom of the div element to have the effect.
Thanks for any advice
Demo
div{
height: 300px;
width: 300px;
-webkit-box-shadow:0 5px 10px #303030;
-moz-box-shadow:0 5px 10px #303030;
box-shadow:0 5px 10px #303030;
}
To entirely get rid of the top shadow without lengthening the bottom shadow, my solution would be to include another element inside the div with a white background and absolutely position it to hide the top shadow.
<div>
<span></span>
</div>
div {
margin-top:20px;
height:300px;
width:300px;
-webkit-box-shadow:0 0 10px #303030;
position:relative;
}
span {
display:block;
position:absolute;
top:-10px;
height:10px;
width:100%;
background:#fff;
}
http://jsfiddle.net/QE8Bh/1/
According to the specifications, the second value is the vertical inset. Just update that value in order to have a "drop shadow" effect:
box-shadow: 0 10px 10px #303030;
Also, check this article for some other cool effects you can achieve with box-shadow.
I am trying to create an object with a drop shadow. I believe you need CSS3 to do this and I have something like this so far.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Add box shadows:
#thediv
{
width:300px;
height:100px;
-moz-box-shadow: 10px 10px 5px #888; /* firefox shadows*/
-webkit-box-shadow: 10px 10px 5px #888; /* chrome / safari shadows */
box-shadow: 10px 10px 5px #888; /* general browser support */
}
example on this fiddle but as a note, as this is CSS3 and IE6/7 are old, it will not work with them.
Add this style into your div tag
-moz-box-shadow: 10px 10px 5px #888888;
/* Firefox 3.6 and earlier */
box-shadow: 20px 20px 55px #888888;
It is my understanding that a display:block will automatically start in a new line. Why do the boxes collapse when a float:left is introduced inside a div with display:block? Here is a fiddle and below the code
#wrapper {
width:300px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px solid #a39b8b;
background-color:#fff;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
box-shadow: 0px 0px 10px #888;}
#header { width: 100%; display: block; }
#logo { width: 100px; height: 145px; background: #fde; }
#slogan {
display: block; background: #f9ebcd; height: 35px; -moz-box-shadow: 0px 3px 10px #888;
-webkit-box-shadow: 0px 3px 10px #888; box-shadow: 0px 3px 10px #888; border: 1px solid red;
}
.left { float:left;}
<div id="wrapper">
<div id="header">
<div id="logo"class="left">left</div>
</div>
<div id="slogan">slogan</div>
Floats move an element out of the normal flow of the page. If there's nothing left in the flow inside a containing element, it will 'collapse'.
Check the specs for more info.
I recommend you familiarize yourself with clearfix. It makes life easier.
Your example (revised): http://jsfiddle.net/HkHTk/4/
That's just what happens with float.
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.
The fix:
#wrapper {
overflow: auto;
}
Demo: http://jsfiddle.net/mattball/CjXNW/
You need to clear your float using the CSS clear property.
What are you trying to do? If you want the slogan box to appear beneath the logo box, you need to add clear:both; to the #slogan code.