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.
Related
I need to create an element with shadow like in the mockup:
http://take.ms/UdLFk
But I created only
http://take.ms/lns0J .
I have next styles:
.shadow {
width: 45px;
left: 37px;
position: relative;
box-shadow: 0 0px 2px 2px rgba(0,0,0,0.5);
}
My markup:
<div class=" shadow"></div>
So, how i can get a shadow like in mockup? I searched many articles but they did not help me.
Adding a border-radius (with a small height and a background-color that fits the shadow) to the element will give the shadow a nice rounded effect. Maybe decrease the opacity a little and you'll get pretty close. Also try using z-index: -1 to put the shadow behind the image.
.shadow {
width: 45px;
left: 37px;
position: relative;
box-shadow: 0 0px 4px 2px rgba(0, 0, 0, 0.1);
border-radius: 50%;
height: 3px;
background: rgba(0, 0, 0, 0.1);
}
<div class="shadow"></div>
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'm attempting to recreate the shadow from the image below:
It's the shadow between the two colors I'm trying to recreate using box-shadow. But I can't figure it out.
Here's my code:
box-shadow: inset 0 0 2px 0px #000000;
The shadow appears on both sides and is too strong compared to what I'm trying to achieve. Any suggestions?
I've made the below fiddle from complete scratch, you can use it if you like it
Demo
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
.one {
background: #B4B300;
height: 100px;
}
.two {
background: #FD370A;
height: 100px;
box-shadow: 0 0 5px #212121;
}
.three {
background: #fff;
height: 5px;
}
Instead of using inset shadow, am using a shadow which renders from all sides, right left are hidden as the div spans entire row, the shadow at the bottom is hidden with another div using background: #fff;
Note: I forgot to add -moz and -webkit prefixes so be sure you use
them if you want to support the older browsers too.
http://jsfiddle.net/CQvBb/
<div class="first"></div>
<div class="second"></div>
.first {
background:#B4B300;
width:500px;
height:100px;
box-shadow: inset 0 -5px 5px -5px #000000;
-moz-box-shadow: inset 0 -5px 5px -5px #000000;
-webkit-box-shadow: inset 0 -5px 5px -5px #000000;
}
.second {
background:#FD370A;
width:500px;
height:100px;
}
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 new to the designing/programming world so I am sure the issue is easy to solve. I am trying to add the moz-box-shadow effect to my header. But as soon as I add that component, the header which is taking up space horizontally shortens up. I want the header to be like Twitter's, where they use a shadow effect.
#header {
background-color: #990000;
width:101.3%;
margin-left:-8px;
margin-top:-8px;
height:40px;
-moz-box-shadow: 1px 1px 10px #D7D7D7;
}
Also, the way i have set the width is it likely going to create cross browser issues?
Here's a version similar to what Twitter has:
This is Twitter's version, more or less:
Live Demo (edit)
HTML:
<div id="top-fixed">
<div id="top-bar"></div>
</div>
CSS:
html, body {
margin: 0; padding: 0
}
body {
padding-top: 50px;
background: #c0deed
}
#top-fixed {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
}
#top-bar {
height: 40px;
width: 100%;
background-color:#00a0d1;
background-image:-webkit-gradient(linear,0 0,0 100%,from(#00a0d1),to(#008db8));
background-image:-moz-linear-gradient(#00a0d1,#008db8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8');
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8')";
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
The trick that Twitter is using, is putting in an absolutely positioned box and giving that box a width of 100% and the shadow. Using overflow-x: hidden on it´s parent, you get the effect that you are looking for.
I've been doing shadows with .png's. I see no benefit of using this (esp. since I would assume browsers started supporting .png prior to supporting box shadowssee, for example, Mozila's statement that FF started supporting box shadows in FF3.5,) but of course, if this is better than doing shadows via .png, feel free to leave a comment proving me wrong!