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;
}
Related
I have a form with orange background and a shadow:
and I'm trying to make the shadow with css.
the best result I got is here: https://jsfiddle.net/2f903rcr/
box-shadow: 0px 1px 2px 0px #505857, 0px 0px 7px 0px #505857;
Somebody know to do the same shadow in css?
I can't see your code and can't understand your image but there is something for you:
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, .3);
https://jsfiddle.net/2f903rcr/3/
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 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()
I am using the autocomplete plugin in one of my applications the Autocomplete div that is being created by the autocomplete plugin has property Position: Absolute;. I have a drop down div in my navigation menu where i have an input field which triggers the auto complete function. Everything works fine except for when i hover over the autocomplete div. As soon as i hover on the autocomplete div the dropdown div dissappears cuz it is being shown by the following css :
#nav li:hover > .subnav{
display: block;
}
#nav .subnav {
position:absolute;
background:#fff;
padding:10px;
padding-right:15px;
text-align:left;
width:180px;
border:1px solid #ccc;
border-top:none;
z-index:1200;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
display:none;
margin:6px -1px;
}
Here #nav is the ul that contains the navigation links and .subnav is the dropdown div.
i dont want .subnav div to dissappear once a user hovers over the autocomplete div to select an entry.
I have an button just as have Ask Question on SO and here is the CSS for it:
.rfs .grey_btn{
float: right;
margin: 15px 5px;
}
Now I have to add border shadow to it and I have tried border-radius and box-shadow but it does not give me proper result.
Also other question is that I have a label or box say and now I want to increase size of that box so that I have move the text inside that box to right, currently if I move it to right than it reaches the end limit of box and so I want to increase the size of box so that I can push text more towards right.
Hope I have made my question clear. Any guidance would be highly appreciated.
Thanks.
The box-shadow property is not yet widely supported, but can be implemented like:
img {
-webkit-box-shadow: 5px 5px 10px #666;
-moz-box-shadow: 5px 5px 10px #666;
box-shadow: 5px 5px 10px #666;
}
Not sure what you're asking about the label/box?
Box-Shadows only work in some modern browsers as they are CSS3 properties. How to use them correctly, you can see here: http://www.css3.info/preview/box-shadow/
You could use a background image for the shadow effect or you could use a second tag (like a span) with a border, but that's a very uggly solution.
For you label question: have you tried to add a "pagging-left" which will move your text to the right side and increases the width of the label?
EDIT: As CSS3 is not final, every browser has his own pseudo-css3-property. Adding a shadow and extra width and space to the SO button you might use these CSS properties in modern browsers:
.nav a {
-khtml-box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888;
-moz-box-shadow: 10px 10px 5px #888888;
box-shadow: 10px 10px 5px #888888;
padding-left: 35px;
}
EDIT: Added the CSS for Safari and KHTML browsers. That would result in something like this:
.rfs .grey_btn
{
-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}