Here is the code for the box I'm applying the shadow on.
width: 295px;
max-width:90%;
height: auto;
padding-bottom:20px;
float:left;
text-align:center;
margin-left:10px;
margin-top:50px;
background-color: white;
-webkit-box-shadow: 0px 0px 5px #CCC;
box-shadow: 0px 0px 5px #CCC;
-moz-box-shadow: 0px 0px 5px #CCC;
position:relative;
The 3 boxes of Beautiful Design Valid Code Structure and Seo Integrated all carry this box-shadow property but it doesn't appear at the bottom.
Is there a bounding box around these grouped elements that might have a size restriction applied to it that is somehow cutting off the box-shadow on the bottom of that last element?
Have you tried clearing your float?
Demo: http://jsfiddle.net/uriahjamesgd_73/5fQPV/
<!-- HTML -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box clear"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
/* CSS */
.box {
position:relative;
width: 75px;
max-width:90%;
height: 75px;
padding:0 0 20px 0;
float:left;
text-align:center;
margin: 10px 0 0 10px;
background-color: white;
-webkit-box-shadow: 0px 0px 5px #CCC;
-moz-box-shadow: 0px 0px 5px #CCC;
box-shadow: 0px 0px 5px #CCC;
}
.clear {
clear:left;
}
It seems the problem is with your box-shadow property.
Try this:
.box{
width: 295px;
max-width:90%;
height: auto;
padding-bottom:20px;
float:left;
text-align:center;
margin-left:10px;
margin-top:50px;
background-color: white;
-webkit-box-shadow: 0px 0px 5px 2px #ccc;
-moz-box-shadow: 0px 0px 5px 2px #ccc;
box-shadow: 0px 0px 5px 2px #ccc;
position:relative;
}
Check out this link for more experiments.
If it still doesn't work looks like some element might have a size restriction applied that is somehow cutting off the box-shadow on the bottom of that last element.
Hope it helps :)
Related
I want to render a box on another box's border, like shown in this image:
Expected Output
I tried doing this using flexbox, but couldn't come up with any solution.
How can I approach this design? Any help would be appreciated!
This is a reproduction as close as possible to that picture you showed.
The positioning is obtained using position:relative for the card container and position:absolute for its inner parts.
.card{
position:relative;
width: 400px;
height: 200px;
border: solid 2px gray;
border-radius: 15px;
padding: 5px 5px 5px 5px;
text-align: center;
background: linear-gradient(white 50%, #F1FAFF 50%);
margin-top: 100px;
}
.inner{
border: solid 1px lightgray;
border-top: none;
height: 80%;
width: calc(100% - 20px);
box-shadow: 0px 2px 2px lightgray;
position: absolute;
bottom: 10px;
left: 10px;
background: white;
}
.label{
position: absolute;
top: -15px;
left: 25px;
background: #F5F5F5;
padding: 5px 10px;
font-family: sans-serif;
font-weight: 600;
border-radius: 5px;
}
<div class="card">
<div class="label">13 Mar - 12 Apr</div>
<div class="inner">
</div>
</div>
That can be achieved using legend. If you want custom style, then use postiion: relative on parent div (what you call the box with border), use position: absolute on the child div and adjust top, left, margins or translate values.
You can use two div do to it.
first div with border
second div for shadow box
.outer{
border:2px solid #333;
width:200px;
height:150px;
border-radius:20px;
}
.inner{
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
width:180px;
height:130px;
margin:10px;
}
<div class="outer">
<div class="inner">
</div>
</div>
.part-two{
float: left;
height:300px;
width: 200px;
background-color:green;
box-shadow: -10px -10px 1px red;
}
<div id="part-two" class="part-two">
</div>
in the above code i have given an outer shadow using box-shadow property,instead of that i want to give the shadow on inside of the container,is it possible to give inner shadow using box-shadow method?if yes,how?
else ,is there any methods exists to giver inner shadow using css?
Yes it is possible to add inner-shadow to an element, you just need to add inset along with your properties in box-shadow.
The presence of the inset keyword changes the shadow to one inside the
frame (as if the content was depressed inside the box). Inset shadows
are drawn inside the border (even transparent ones), above the
background, but below content.
.part-two{
float: left;
height:300px;
width: 200px;
background-color:green;
box-shadow: inset 0px 1px 10px 20px orange;
}
<div id="part-two" class="part-two">
</div>
Use this box-shadow: 10px 10px 0px 0px red inset;
.part-two{
float: left;
height:300px;
width: 200px;
background-color:green;
box-shadow: 10px 10px 0px 0px red inset;
}
<div id="part-two" class="part-two">
</div>
used to this
box-shadow:inset 5px 5px 1px red, inset 15px 15px 1px yellow;
inset as like this
.part-two{
float: left;
height:300px;
width: 200px;
background-color:green;
box-shadow:inset 5px 5px 1px red, inset 15px 15px 1px yellow;
}
<div id="part-two" class="part-two">
</div>
you looking for something like this?
.part-two
{
float: left;
height:300px;
width: 200px;
background-color:green;
box-shadow: -10px -10px 1px red;
-moz-box-shadow: inset 0 0 10px red;
-webkit-box-shadow: inset 0 0 10px red;
box-shadow: inset 0 0 10px red;
}
<div id="part-two" class="part-two">
</div>
Try this:
.part-two{
float: left;
height:300px;
width: 200px;
background-color:green;
box-shadow: inset -10px -10px 1px red;
}
i want the shadow to appear in one side (Top) with css only,
i have tried many solutions but always there is a shadow in all sides
this is my try
.box-container{
width:100%;
height: 80px;
padding:10px 10%;
background-color: #f00;
}
.box-inner{
width:80%;
height: 100%;
background-color: #ff0;
box-shadow: inset 0 5px 5px rgba(0,0,0,0.5);
}
<div class="box-container">
<div class="box-inner"></div>
</div>
Try to use this:
.box-container{
width:100%;
height: 80px;
padding:10px 10%;
background-color: #f00;
}
.box-inner{
width:80%;
height: 100%;
background-color: #ff0;
box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
}
<div class="box-container">
<div class="box-inner"></div>
</div>
Please do try this box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7); for only top
Think this will help you...
try to use this
.box-container{
width:100%;
height: 80px;
padding:10px 10%;
background-color: #f00;
}
.box-inner{
width:80%;
height: 100%;
background-color: #ff0;
-moz-box-shadow: inset 0 8px 8px -8px rgba(0,0,0,0.8);
-webkit-box-shadow: inset 0 8px 8px -8px rgba(0,0,0,0.8);
box-shadow: inset 0 8px 8px -8px rgba(0,0,0,0.8);
}
<div class="box-container">
<div class="box-inner"></div>
</div>
Have a look at http://www.css3.info/preview/box-shadow/ for more information about box-shadow.
Hope this was what you were looking for!
I want to create something like this with CSS only, is it possible?
div {
height: 50px;
width: 200px;
background: #006B96;
box-shadow: 0px 0px 0px 4px #006B96;
border: 4px solid #fff;
margin: 0 auto;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
}
<div>
</div>
div{
height:50px;
width:200px;
background:#006B96;
box-shadow:0px 0px 0px 4px #006B96;
border:4px solid #fff;
margin:0 auto;
}
<div>
</div>
span {
display:inline-block;
padding:5px;
box-shadow:
0px 0px 0px 5px #000,
0px 0px 0px 10px #fff,
0px 0px 0px 15px #000;
}
http://jsfiddle.net/gwhq3uk6/
Try to go with Bootstrap and you will no longer have to worry about designing buttons because it is much easier get all kind of buttons and other stuff you need without writing a single line of code.
I have a few nested div blocks and my problem is that the last one left_navigation_container doesn't have a 7px spacing at the bottom margin and I'm not sure why (jsfiddle).
HTML:
<div class="left_navigation_outer">
<div class="left_navigation_header_outer">
<div class="left_navigation_header_logo">
<strong>Title</strong>
</div>
</div>
<div class="left_navigation_container">
</div>
</div>
CSS:
div.left_navigation_outer {
background: green;
background-repeat: repeat;
margin:10px;
-moz-box-shadow: 0px 0px 5px #ababab;
-webkit-box-shadow: 0px 0px 5px #ababab;
box-shadow: 0px 0px 5px #ababab;
}
div.left_navigation_header_outer {
background: blue;
background-repeat: repeat;
height: 50px;
border-top: 4px solid black;
}
div.left_navigation_header_logo {
line-height:50px;
color: #efefef;
text-shadow: 0 -1px #000;
text-align: center;
text-transform: uppercase;
}
div.left_navigation_container {
background: red;
background-repeat: repeat;
height: 50px;
margin: 7px;
}
Your problem is caused by the way of calculating margin for this element - it refers to the its siblings', not parent's position.
You can set margin for other div containing "TITLE" text and see same issue with margin-top.
EDIT: You can add <div style="width: 100%; height: 1px;"></div> after <div class="left_navigation_container"></div> to trigger bottom margin and make it visible.
You can fix that by giving div.left_navigation_outer a padding-bottom
Weird... not sure why but if you add a padding-bottom 1px to div.left_navigation_outer it fixes it - here's my fork of your fiddle
div.left_navigation_outer {
background: green;
background-repeat: repeat;
margin:10px;
-moz-box-shadow: 0px 0px 5px #ababab;
-webkit-box-shadow: 0px 0px 5px #ababab;
box-shadow: 0px 0px 5px #ababab;
padding-bottom:1px; /* tricky hack to get the bottom spacing */
}