I'm having issues getting the CSS3 box-shadow to look correct.
I currently have a box-shadow on my content wrapper like so:
border: 1px solid #D5D5D5;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 2px #DADADA, 0 -3px 0 #E6E6E6 inset;
I'd like the box shadow to appear on top of the content box, exactly how it appears on the bottom of the box. I just can't seem to get it right.
Not sure if I'm clear on what you're trying to do, but how about adding a third drop-shadow for the top, if the second one works fine on the bottom:
box-shadow: 0 0 2px #000, 0 -3px 0 #E6E6E6 inset, 0 3px 0 #E6E6E6 inset;
Or replace the second drop-shadow with the third one, if you wanted the inset drop-shadow on the top rather than on the bottom:
box-shadow: 0 0 2px #000, 0 3px 0 #E6E6E6 inset;
Related
hey guys i was playing around with css box-shadow property and I'm struggling with it a little bit. Im trying to create shadow on a box but I want to apply shadow only on the top,bottom and left side of my div.
here is my css code until now but it is going to apply for all of the 4 sides which i do not want..
box-shadow: 0 0 10px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
-o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
Thanks
Try this:
-webkit-box-shadow: -8px 3px 25px 1px rgba(0,0,0,0.75);
-moz-box-shadow: -8px 3px 25px 1px rgba(0,0,0,0.75);
box-shadow: -8px 3px 25px 1px rgba(0,0,0,0.75);
Also you can play around here.
I wish to put a border frame around an image - like a photo frame image. Is there an easy way to do this? I.e using CSS purely, ideally I'd like to recreate the 45 degree joins at the edge and be as realistic as possible. The snag here is that the image size is variable.
I found this webpage: http://cssdeck.com/labs/picture-frame-using-box-shadows
Run the snippet below to see how it works. It is purely CSS, no HTML and no JS involved. The effect is accomplished using the box-shadow property. Of course, with your code, you would need to include HTML and set the images' sizes (or keep them in percentage - i.e. 100%) and then tweak the code a bit. The effect is created and works with different sized images, you just need to change the inset colour values to your preferred style.
/* Pure CSS Picture Frame */
html {
overflow: hidden;
background-color: #653845;
background-image: linear-gradient(45deg, hsla(0,0%,0%,.1) 50%, transparent 50%),
linear-gradient(-45deg, hsla(0,0%,0%,.1) 50%, transparent 50%);
background-size: .25em .25em;
box-shadow: inset 0 0 500px hsla(0,0%,0%,.5);
height: 100%;
padding: 1px;
}
body {
height: 300px;
width: 400px;
margin: -150px -200px;
position: absolute;
left: 50%;
top: 50%;
background: gray url(http://dribbble.com/system/users/13774/screenshots/423481/_111.jpg?1329144172);
border: 1px solid;
border-color: #bbb #999;
box-shadow:
0 2px 5px hsla(0,0%,0%,.4),
inset 0 1px 0 #ccc,
inset 1px 0 0 #aaa,
inset 0 -1px 0 #ccc,
inset -1px 0 0 #aaa,
inset 0 2px 0 #c6c6c6,
inset 2px 0 0 #a6a6a6,
inset 0 -2px 0 #c6c6c6,
inset -2px 0 0 #a6a6a6,
inset 0 3px 0 #c0c0c0,
inset 3px 0 0 #a0a0a0,
inset 0 -3px 0 #c0c0c0,
inset -3px 0 0 #a0a0a0,
inset 0 4px 0 #b9b9b9,
inset 4px 0 0 #999,
inset 0 -4px 0 #b9b9b9,
inset -4px 0 0 #999,
inset 0 5px 0 #b6b6b6,
inset 5px 0 0 #969696,
inset 0 -5px 0 #b6b6b6,
inset -5px 0 0 #969696,
inset 0 6px 0 #b0b0b0,
inset 6px 0 0 #909090,
inset 0 -6px 0 #b0b0b0,
inset -6px 0 0 #909090,
inset 0 7px 0 #a9a9a9,
inset 7px 0 0 #898989,
inset 0 -7px 0 #a9a9a9,
inset -7px 0 0 #898989,
inset 0 8px 0 #a6a6a6,
inset 8px 0 0 #868686,
inset 0 -8px 0 #a6a6a6,
inset -8px 0 0 #868686,
inset 0 9px 0 #a0a0a0,
inset 9px 0 0 #808080,
inset 0 -9px 0 #a0a0a0,
inset -9px 0 0 #808080,
inset 0 10px 0 #888,
inset 10px 0 0 #666,
inset 0 -10px 0 #888,
inset -10px 0 0 #666,
inset 0 0 10px 10px hsla(0,0%,0%,.5);
}
P.S. to further style your photos, you can add a bevel effect. Google (or whatever search engine you prefer) how to do this if you aren't familiar with it yourself, when I searched for "CSS image bevel" lots of resources were available and many ways to create the effect exist.
Hopefully this is what you're looking for! Enjoy!
Until some point you can do that with CSS3 http://border-image.com/ generator.
I am trying to apply a nice text shadow to two words, but it seems that the CSS isn’t doing anything. See this jsFiddle.
<p id="np">Nakshatro Production</p>
#np {
text-shadow: -0px 0px 1px 0 hsl(20, 100%, 16%),
-2px 2px 2px -1px hsl(20, 100%, 14%),
-4px 4px 2px -2px hsl(20, 100%, 12%),
-6px 6px 3px -3px hsl(20, 100%, 10%),
-8px 8px 2px -4px hsl(20, 100%, 8%),
-10px 10px 2px -5px hsl(20, 100%, 6%);
}
Unlike box-shadow, text-shadow doesn’t support a spread value; you can only select offset and blur. That is, use a maximum of three size values and one colour. jsFiddle, not quite the same.
http://www.w3schools.com/cssref/css3_pr_text-shadow.asp. You have given an extra data which is not accepted.
#np{
text-shadow: -12px 2px 2px hsl(120,70%,50%),
2px 12px 2px hsl(120,30%,20%),
-2px 2px 12px hsl(120,100%,50%);
}
Try this and I think you will have some idea.
ALso modified ur fiddle
http://jsfiddle.net/jct0vf0z/4/
I'm trying to do so using CSS
---------------------
SOME CONTENT HERE
---------------------
so what I basically want is that the border is just at the top and bottom of whatever content there is inside (most preferably a <p></p>)
Here is some code that I was using but it definitely doesn't work the way its meant to be.
padding: 5px 1px;
box-shadow: 0 2px 5px black,
0 -2px 5px #800000,
0 0 5px black,
0 0 5px #800000;
What should I do for that?
Do you want a border or a shadow? You're code is telling me you want a shadow, your question asks a border.
If border:
border-top: 1px solid black;
border-bottom: 1px solid black;
If shadow:
-webkit-box-shadow: 0px 6px 2px -1px #000, 0px -6px 2px -1px #000;
box-shadow: 0px 6px 2px -1px #000, 0px -6px 2px -1px #000;
Examples: http://jsfiddle.net/pGGXH/69/
you can use the below code for top and bottom borders
border-top:1px dashed black;
border-bottom:1px dashed black;
For shadow effect go through this link
some modifications to the code of sebass
-webkit-box-shadow: 0px 1px 15px -1px #000, 0 -1px 15px -1px #000;
box-shadow: 0px 1px 15px -1px #000, 0 -1px 15px -1px #000;
If you want a border, then you can do it like this.
.div {
border-top: 1px solid black;
border-bottom: 1px solid black;
width: 50px;
height: 50px;
}
Demo - http://jsfiddle.net/9VCZU/
Does anyone know how to get the exact box shadow that appears on the bottom of the fixed position navbar on pinterest.com?
http://pinterest.com/
You might have used any developer tool (Chrome DevTools or Firebug) to find this out:
box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-moz-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
Looking at the sites CSS styling in Chrome I got this segment of code for that bar:
#CategoriesBar {
position: absolute;
z-index: 101;
top: 44px;
right: 0;
left: 0;
text-align: center;
font-size: 13px;
color: #8C7E7E;
background-color: #FAF7F7;
border-top: 1px solid #CFCACA;
box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-moz-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
}
These 3 lines should help you out on your style:
box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-moz-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: inset 0 1px #fff, 0 1px 3px rgba(34,25,25,0.4);