I have two divs for which I just need to add a box-shadow effect using CSS. But I just don't want it to get applied on every side of the div, I don't want the effect on the bottom side of the div. But I can't find a way to do it. Can someone help?
Try this, use CSS property box-shadow: 0px -10px 10px #888888;
detail of the property box-shadow:x-offset y-offset blur color
#example {
border: 1px solid;
padding: 10px;
box-shadow: 0px -10px 10px #888888;
}
<h2>box-shadow</h2>
<div id="example">
<p>blurred</p>
</div>
Related
This question already has an answer here:
How to make a border overlay child div?
(1 answer)
Closed last month.
I'm trying to convert this design from Illustrator into a UI element in vanilla HTML and CSS (design was given to me from a designer to recreate). I need the inner box with the cyan and white outlines to be clickable, like a button, but not the outer light blue area that surrounds the text.
Originally, I figured I could just use a box shadow to create the second, offset white border, but the box-shadow will only be shown in the bottom and right edges of the box, and won't show it inside the cyan border.
I was thinking that maybe I could do another DIV with absolute positioning to offset it, but I'm not sure how to choose the size for that second DIV as I want this button to scale based on viewport width.
How would I go about doing this? I want to avoid the option of saving it as an SVG or image as it would then be hard to create the "a" element to fit only the text portion with a clickable link.
You can do it like below:
button {
font-size: 30px;
padding: 10px 20px;
border: solid #fff;
border-width: 0 5px 5px 0;
box-shadow:
-5px -5px 0 cyan,
-5px -5px 0 inset cyan,
5px 5px 0 inset #fff;
background: none;
cursor: pointer;
}
body {
background: lightblue;
}
<button>Click here </button>
Here is my site http://goo.gl/MeCxv2 when I have my porfolio's thumbnails on the main page and I want to add an inner shadow for all thumbnail boxes. I want to get like this http://goo.gl/L80HAx but with CSS instead of photoshop :D
So, I try to do like this:
.rollover-project hover-ready {
-moz-box-shadow: inset 0 0 10px #000000 !important;
-webkit-box-shadow: inset 0 0 10px #000000 !important;
box-shadow: inset 0 0 10px #000000 !important;
}
But it doesn't work and I'm not even sure, that the class .rollover-project hover-ready is correct.
Could you please to help me?
are you missing a '.' in your selector for hover-ready?
.rollover-project.hover-ready{
}
Edit
Looking at this a little more, the image inside your anchor is covering up the inset border. You could try adding a little padding to the element to reveal the shadow or re-ordering your elements/applying the shadow to a different element
e.g.
.rollover-project.hover-ready{
-moz-box-shadow: inset 0 0 10px #000000 !important;
-webkit-box-shadow: inset 0 0 10px #000000 !important;
box-shadow: inset 0 0 10px #000000 !important;
padding: 10px;
}
1] Since [.] is used for selecting class name you will have to use it wherever you use class name, so if you want to select 2 class names it should be .rollover-project.hover-ready OR .hover-ready.rollover-project instead of .rollover-project hover-ready
Refer the below link for help on CSS Selectors
W3Schools - CSS Selectors
2] The box-shadow is not applied on the correct element; it should be applied on the class of the main box element,
<div class="wf-cell category-31 isotope-item">
Edit: As mentioned by #r8n5n, if you apply the box-shadow to the classes .rollover-project.hover-ready i.e. the inner box, it will be overlapped by the thumbnail in the <a> tag, and as suggested by him you've 2 options
i] Add the box-shadow to the parent/outer element (which was my suggestion)
ii] Add a padding so that there is some space to show the box-shadow.
Since you want the box-shadow of 1px, add the padding:1px and see the effect. Similar example on another thread - putting a inset box shadow on an image or image within a div
I show box-shadow with this CSS code.
img {
box-shadow: 2px 2px 1px #888;
}
I'd like to hide the boarder conditionally, and I tried to add "noboarder" class in img tag,
<img ... class="noborder">
#noborder
{
box-shadow: 0px 0px 0px #888;
}
However, I still have the shadow with the `class="noborder">code, what might be wrong?
Ok, there are a few things wrong here. First off, you have a class attribute in your HTML but you're trying to select the img with an ID selector #. You have to use the class selector .
Also, when overwriting a shadow so it does not appear, you have to set the color to transparent. The px measurements are for shadow offset, size and spread (if you use it) so these don't matter at all. Or use none in place of the measurements and color.
I changed the selector and class to better reflect what the CSS does, as a shadow is different from a border.
.shadow
{
box-shadow: 2px 2px 2px #888;
}
.noShadow
{
2px 2px 2px transparent
}
.noShadow.none
{
box-shadow: none;
}
And here's a jsfiddle demo to show you how it works.
try replacing #noborder with .noborder, you want it to be a class, not an ID.
Additionally, box-shadow: none is a neater alternative to remove the box shadow
Use box-shadow: none to remove the shadow completely.
<div>test</div>
<div class="noborder">test</div>
div {box-shadow: 2px 2px 1px #888;}
.noborder{box-shadow: none;}
Demo
Using this css for shadows
-moz-box-shadow: 0 0 10px 5px #000;
-webkit-box-shadow: 0 0 10px 5px #000;
box-shadow: 0 0 10px 5px #000;
How do I remove shadow from top and bottom sides of the div and leave only horizontal shadow? Is that possible?
There are two ways to do this, but it depends on if you're looking for a hard edge or a soft edge.
Method One:
The trick here would be to wrap your box in a container and apply overflow:hidden to the container. If you give your box right and left margin that's the same as the shadow distance, the shadow will only be visible on the sides; it will be clipped on the top and bottom.
Here's an example:
http://jsfiddle.net/2Luef/1/
Method Two:
Alternatively, depending on the effect you're looking for, you could do something with multiple box-shadows like this:
http://jsfiddle.net/2Luef/3/
It doesn't have the clipping look like above, but it's arguably a nicer look. It also only uses one DOM element.
Yes and no.
The box shadow cannot be places on one side of an element unless you just offset it and/or change the spread, which I suspect isn't quite what you're after.
You can however place the element inside a container with the overflow set on it. The overflow property affects the box shadow. Here's an example.
You can use minus values for the spread value (last px value) to make the shadow not spread out to the other sides. However, that will only allow you to add the shadow to one side; so you can add multiple shadows, separated by a comma.
box-shadow: 10px 0 10px -10px #000, -10px 0 10px -10px #000;
For more information, checkout these two links:
How can I add a box-shadow on one side of an element?
http://starikovs.com/2011/11/09/css3-one-side-shadow/
Write like this:
CSS:
.parent{
height:200px;
margin:40px;
overflow:hidden;
}
.child{
width:200px;
height:200px;
background-color:#e0ffff;
-moz-box-shadow: 0 0 10px 5px #000;
-webkit-box-shadow: 0 0 10px 5px #000;
box-shadow: 0 0 10px 5px #000;
margin:0 20px;
}
HTML
<div class="parent">
<div class="child"></div>
</div>
check this http://jsfiddle.net/k9kVZ/2/
Guys I have been trying lots of different options from cutting up to building in html/css. nothing seems to really work :(
How would you guys go about doing this ?
Link:- http://www.flickr.com/photos/gavinwynne/6902590869/
The simplest way is to use a thick border and a inset box shadow. Browser support is somewhat limited, though. It basically comes down to IE9+ and modern browsers (ref).
demo
body {
min-height: 300px;
border: 24px solid #666;
box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
-webkit-box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
-moz-box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
padding: 35px;
}
One of the most common ways about doing it would be to cut the image in 3 pieces as shown in the below picture:
Where piece 1 would be shown first, then make piece 2 height equal to 1px and repeat it on the y axis through CSS and then put piece 3 at the bottom in order to "close" the container
Your html could be in the form of:
<div class="div_top"></div>
<div class="div_middle"> your content here </div>
<div class="div_bottom"></div>
Update
Css would be something similar to this :
.div_top {
background-image:url('top_bg.jpg');
background-repeat:no-repeat;
width:800px;
}
.div_middle {
background-image:url('middle_bg.jpg');
background-repeat:repeat-y;
width:800px;
}
.div_bottom {
background-image:url('bottom_bg.jpg');
background-repeat:no-repeat;
width:800px;
}
You'd probably want to set a fixed height for your top and bottom divs, since they have no content and wont actually expand to show the background image.