Drop shadow / tablet?
- Started
- Last post
- 4 Responses
- bainbridge
I added a box-shadow to a site, but it doesn't seem to work on iPad / tablet?
Are there any alternatives? I want a uniform shadow around a colored text box.
- GeorgesIV0
pase your css here brainbidge
- ideaist0
http://css-tricks.com/snippets/c…
CSS
.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}IE Fix:
HTML
<div class="shadow1">
<div class="content">
Box-shadowed element
</div>
</div>CSS
.shadow1 {
margin: 40px;
background-color: rgb(68,68,68); /* Needed for IEs */-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
box-shadow: 5px 5px 5px rgba(68,68,68,0.6);filter: progid:DXImageTransform.Microsof...
-ms-filter: "progid:DXImageTransform.Microso...
zoom: 1;
}
.shadow1 .content {
position: relative; /* This protects the inner element from being blurred */
padding: 100px;
background-color: #DDD;
}BAM!
- Unless you added the experimental "drop-shadow" -> http://demosthenes.i…ideaist
- ...Which is great for usage with translucent .png's, by the way.
; )ideaist
- bainbridge0
This is what I had:
width:200px;
background-color:#FFFFFF;
padding:10px;
box-shadow: 0px 0px 100px 80px #000000;
}- Toss in the -webkit and -moz equivalents above. Mobile shadows tend to be a little more loose.ideaist
- Thanks!bainbridge
- bainbridge0
And the shadow is not as dark as I wanted, but if I did:
box-shadow: 0px 0px 100px 100px #000000;
.....the shadow would be too big.