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!
Related
I want to set box shadow inside a box or div but only at right and left sides.
I want something like this below. Please help me.
To get it to appear only on the sides you need to essentially have two different sets:
box-shadow:inset 5px 0 8px -5px #000,inset -5px 0 8px -5px #000;
You can create one inner div and one outer div. Then you need to set the shadow separately for both divs.
.outer, .inner {
width: 200px;
height: 50px;
display: inlin-block;
}
.outer {
-webkit-box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75);
-moz-box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75);
box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75);
}
.inner {
-webkit-box-shadow: inset -10px 0px 23px -9px rgba(0,0,0,0.75);
-moz-box-shadow: inset -10px 0px 23px -9px rgba(0,0,0,0.75);
box-shadow: inset -10px 0px 23px -9px rgba(0,0,0,0.75);
}
<div class="outer">
<div class="inner"></div>
</div>
Or you can use also one div, with 2 inset parameters:
.outer {
width: 200px;
height: 50px;
display: inlin-block;
-webkit-box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75), inset -10px 0px 23px -9px rgba(0,0,0,0.75);
-moz-box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75), inset -10px 0px 23px -9px rgba(0,0,0,0.75);
box-shadow: inset 5px 0 8px -5px #000,inset -5px 0 8px -5px #000, inset -10px 0px 23px -9px rgba(0,0,0,0.75);
}
<div class="outer">
</div>
And what about a linear-gradeint solution:
.box {
width:200px;
height:100px;
background:
linear-gradient(to left,#ccc , transparent 20%),
linear-gradient(to right,#ccc , transparent 20%);
}
<div class="box">
</div>
You can do this using the two div's. check the below code.
But it will great if you can use the background image.
<div class="div1">
<div class="div2"><div>
<div>
.div1 {
width: 200px;
height: 100px;
border: 1px solid #c51e1e;
margin: 50px;
overflow: hidden;
}
.div2 {
width: 80%;
height: 100px;
margin: 0 auto;
box-shadow: 0px 0px 27px 17px #d6cdcd;
}
try this with html:
<div id="box"></div>
and css:
#box {
border: 1px solid;
position: relative;
overflow: hidden;
}
#box:before {
content: "";
box-shadow: 0px 0px 20px 10px #888888;
position: absolute;
height: 100%;
width: 0px;
}
#box:after {
content: "";
box-shadow: 0px 0px 20px 10px #888888;
position: absolute;
height: 100%;
width: 0px;
right: 0px;
top: 0;
}
.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 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.
The div comes with a scroll bar instead increasing it height. I don't want the scroll to come instead the div should increase its height.
<div class="widgetContainer">
<div id="5395634ee4b071f136e4b68e" style="background-color: red;">node1<div id="53956358e4b071f136e4b690" style="background-color: red;">vip1<div id="539803eae4b0ffad82491508" style="background-color: gray;">obj1</div><div id="5395635ee4b071f136e4b691" style="background-color: green;">obj2</div><div id="539803e4e4b0ffad82491507" style="background-color: green;">obj3</div></div><div id="539803f2e4b0ffad82491509" style="background-color: blue;">vip2</div></div><div id="5395637fe4b071f136e4b692">node2<div id="539803eae4b0ffad82491501" style="background-color: green;">vip1</div><div id="5395635ee4b071f136e4b694" style="background-color: green;">vip2</div></div><div id="53956371f136e4b692" style="background-color: red;">node3</div><div id="5656" style="background-color: red;">node4</div><div id="5395637fe4b071f13b692" style="background-color: red;">node5</div></div>
.widgetContainer {
height: 100%;
width: 100%;
background-color: white;
display: block;
position: relative;
color: black;
}
.widgetContainer > div {
float:left;
width: 30%;
min-height: 100px;
margin: .5%;
overflow: auto;
-webkit-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
-moz-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
border: 0.25% solid;
}
.widgetContainer > div div {
width: 80%;
height: 100px;
margin: 1.5% auto;
overflow: auto;
-webkit-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
-moz-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
border: 0.25% solid;
}
Below is the fiddle i have tried,
My fiddle: http://jsfiddle.net/u5j0z6ut/
It's because it has a fixed height from this css:
.widgetContainer > div div {
width: 80%;
height: 100px;
margin: 1.5% auto;
overflow: auto;
-webkit-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
-moz-box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
box-shadow: 6px -7px 12px -1px rgba(0,0,0,0.5);
border: 0.25% solid;
}
Either remove that, or if you want the others to be fixed, change it for that div. Which brings you to another problem which is that you have ids starting with numbers.. they shouldn't ideally. But you can still do it like this:
#\35 3956358e4b071f136e4b690 {
height: auto;
}
Fiddle with that change.
Remove the harcoded height .
Check this fiddle.
css
.widgetContainer > div div {
height: 100%;
}
You can try to using this
<div style="min-height: 300px; height:auto;">
I would like to achieve a CSS border similar to the one seen around the Tim Cook image on this page: http://www.macstories.net/news/tim-cook-at-d11/ — however, I would only like the border around images in the body text on my own site, not, for instance, images in the sidebar of my site.
What code would I need to achieve the cool border, and how can I target only images in the body text?
If your "body text" is, say, in a div classed as "main", you can target the images just in that section like so:
.main img {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
margin: 30px 0;
padding: 10px;
background: #FFF;
border: 1px solid #CCC;
position: relative;
display: block;
}
img{
-webkit-box-shadow:0 0px 7px rgba(0,0,0,0.3);
box-shadow:0 0 5px rgba(0,0,0,0.2);
padding:10px;
background:#fff;
border:1px solid #ccc;
width:auto;
height:auto;
}
Well i think it would be something like this for just a generic shadow effct.
The HTML:
<div id="example" class="outerglow">Full Shadow</div>
The CSS:
#example {
font-size: 1.4em;
color: #CCCCCC;
line-height: 40px;
text-align: center;
background-color: #333333;
margin: 25px auto;
padding: 5px 10px;
height: 40px;
width: 80%;}
.outerglow {
box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);
-webkit-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);}
and here is the jsfiddle to look see..
http://jsfiddle.net/KMtc6/
Forgive me if my code is sloppy or jumbled.