i was wondering if it is possible to use a hover with a nth-child like so
#gallery a img:hover {
display: block;
height:300px;
width:450px;
position:absolute;
z-index:99;
margin-left:-112.5px;
margin-top:-75px;
-webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
}
From this up here to some thing like this down here, only its not working
#gallery a img:hover:nth-child(1n+4) {
display: block;
height:300px;
width:450px;
position:absolute;
z-index:99;
margin-left:-112.5px;
margin-top:-75px;
-webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
}
#gallery a:hover:nth-child(1n+4)
Will work correctly but style the A tags instead of the IMG inside.
When you have markup like...
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
You cannot select the inner IMG and then try to apply an nth-child on it because there is only 1 IMG inside of the A tag.
Refer to the JSFIDDLE I created http://jsfiddle.net/fXS93/2/
Any change in how the IMG markup is wrapped will reset the CSS matching and NTH-CHILD calculation. This applies even if you are matching on a CLASS that all of the IMG share.
This is true for the latest FF, Chrome, and IE9.
in which browser did you tried this?
and on how many elements did you run the formula?
it will run from the third element in your parent element AND
you should add :hover
after the nth-child like this::nth-child(1n+4):hover
although it wont work in IE8 or earlier
EDIT:
i tried and the order did not affect the result you can put :hover before the :nthchild()
Related
I'm looking for a way to add a box-shadow to all divs ONLY IF they already have a border.
A lot of div are just used for positioning.
div{
box-shadow: 0 0 1pt 2pt black;
}
is of course too much. I was thinking of this, but i can't find the correct syntax :
div[style*="border-width:1px;"]{
box-shadow: 0 0 1pt 2pt black;
}
The code i'm looking for shoudln't target a specific page or structure. It's a custom userstyle for every pages.
I'm not sure about a pure CSS way of doing this, however I have managed to get a jQuery solution if that's any good to you.
The button is just to demonstrate the before and after. Im assuming in your real project you would want to do this on document ready.
$('#shadowMeUp').click(function(){
$("div")
.filter(function() {
return $(this).css('border-style') == "solid"
})
.addClass("shadow");
});
.box {
height: 100px;
width: 100px;
background-color: steelblue;
margin: 15px;
display: inline-block;
}
.border_box {
border-width: 5px;
border-color: indianred;
border-style: solid;
}
.shadow {
-webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button id="shadowMeUp">Add shadows</button>
<br>
<div class="box border_box"></div>
<div class="box"></div>
<div class="box border_box"></div>
<div class="box"></div>
Sorry, no pure CSS solution for this one...
As mentioned, you can use javascript to detect which elements have border, and then apply to them your custom box-shadow, but this would be a pretty bad practice, and can potentially carry a big performance cost on your page.
I keep noticing class="well" in a web app using Twitter's Bootstrap, but I can't find any documentation about it, unless I just overlooked it.
Thanks.
"well" is a CSS selector simply create prominent wrapper around element
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
The well is used as a simple effect on an element to give it an inset effect.
<div class="well">...</div>**
I am trying to add a box shadow to my div but i only want the shadow to appear on the left, right and bottom of the div, does anyone know or can show me how i might remove only the top shadow from my div?
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
The basic Box-shadow values are:
box-shadow: [horizontal-offset] [vertical-offset] [blur](optional) [spread](optional) [color]
So for example:
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
would just be a shadow with no offset
box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3);
would be a shadow with 5px vertical offset, effectively pushing the shadow down, like so:
http://jsfiddle.net/TLQs9/
Rather than add an extra div to your markup, you can use :before to cover up the box-shadow with absolute positioning and negative margin.
div {
position: relative;
background-color: white;
box-shadow: 0 7px 20px 0 rgba(0,0,0,.4);
}
p {
padding: 20px;
}
div:before {
content: "";
height: 7px;
width: 100%;
position: absolute;
top: -7px;
background: inherit;
z-index: 2;
}
<div><p>Some container with shadow</p></div>
As of November 2022 there's a nice, clean way to do this using the CSS clip-path property.
div {
box-shadow: 0 0 10px black;
clip-path: inset(0px -10px -10px -10px);
}
Inset will clip away the element from the top, right, bottom, and left edges. For a this shadow in the example we're clipping anything beyond the top bounds, hiding the shadow on the top, and allowing 10px of space for the shadow on all other sides.
It's the clean, ideal solution to the problem in my opinion. Browser support is good, but if you want support in IE11 still you'll want to explore the polygon option instead of inset.
You can try this:
div {
-moz-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
-khtml-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
}
The first value is horizontal position.
Second value is Vertical position.
Third value applies blur in shadow.
Four value spread.
So try that your vertical an horizontal position match with blur and spread
Try this:
div{
box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
}
When I use this I have a shadow on all sides except the top. You can change the values and it still works. Just don't add a fourth value and you'll be fine.
Try This :
div
{
box-shadow: 0px 9px 29px rgb(102, 102, 102);
-webkit-box-shadow: 0px 9px 29px rgb(102, 102, 102);
-moz-box-shadow:0px 9px 29px rgb(102, 102, 102);
}
See in jsfiddle
See More 1
See More 2
None of the answers above worked for me. So as an alternative solution I used a patch. Inside the element/div with the box shadow.
Place a second div, width 100% and its background the same color as the main div, then position it to cover over the box-shadow, like so.
background-color: your background color?
width:100%;
position:absolute;
height 15px;
left 0;
top -10px;
You may need to tweek the height to patch over the box shadow. But it does work.
plus this trick could be used for any side.
I have two questions about creating shadows like www.apple.com/ipodshuffle...
On the website, you'll see the main section with a white background - it contains all the information about the iPod Shuffle. The right, left and bottom of this main section have a shadow, but the top does not. How do I code this?
Just above the 2nd image of the iPod Shuffles (where they're all stacked on top of each other, and the text reads "Design. As beautiful as it is wearable.") there is a shadow border that looks like it's popping out of the page, and then fading back into the page. How do I code this?
Here's the code you're searching for :
.box{
padding: 20px;
border-radius: 5px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
}
<div class="box">
Lorem ipsum
</div>
More informations about box-shadow here : http://www.css3.info/preview/box-shadow/
For the central shadow, they just used an image.
.box {
width: 200px;
height: 100px;
margin: auto;
padding: 20px;
border-radius: 5px;
background-color: #e4e4e4;
border: 1px solid #adadad;
-webkit-box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
}
<div class="box">
Lorem ipsum
</div>
I have a menu with tiled images w/text under them. See Fiddle:
http://jsfiddle.net/techydude/GF8tS/
Is there a way I can rollover the box and have the text also activate its hover state, and vice versa?
Yes.
Instead of using :hover on the actual elements, apply it through their common parent, the li.
So use
li:hover .rounded instead of .rounded:hover
and
li:hover .tileText instead of .tileText:hover
demo at http://jsfiddle.net/gaby/DwT8K/1/
Yup http://jsfiddle.net/GF8tS/1/
I modified the CSS, so when the user hovers over the list-item, it would modify the CSS of the .tileText and the .rounded
li:hover .rounded {
-webkit-box-shadow: 0px 0px 0px 3px rgba(193, 232, 0, .75);
-moz-box-shadow: 0px 0px 0px 3px rgba(193, 232, 0, .75);
box-shadow: 0px 0px 0px 3px rgba(193, 232, 0, .75);
}
li:hover .tileText {
color:#C3EA00;
font-weight:bold;
text-decoration:none;
}