Mick Redman: shadow

Showing posts with label shadow. Show all posts

Thursday 11 July 2013

Cross browser box shadows (yet again)

A client recently asked me to make their site a 'copy' (don't ask) of another website. The site needing to be copied had employed one of those shadows using a very long image with a drop shadow at either end and repeated on the Y axis as a background. Plus, top and bottom shadow images to give the 360 degree effect. This wasn't going to be possible to use with the site which I had developed, since my site was responsive. So I had to return to the old chestnut of drop shadows in IE. If my client was asking for a 'copy' of another site, there was a good chance they were IE users and I couldn't assume I'd get away with providing standard solutions (I can say this, we have a good relationship) .
See below.

.container
{
margin-top:20px;
box-shadow:3px 3px 10px 5px #666666;
-moz-box-shadow:3px 3px 10px 5px #666666;
-webkit-box-shadow:3px 3px 10px 5px #666666;
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=45,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=10),
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=225,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=315,strength=2);
}

Tuesday 16 November 2010

Using css3pie with on HTML5 for cross browser effects

I have been using css3pie from http://css3pie.com/ for some time now. In order to run the test below, you will have to download it. You could put it in a scripts folder as I have but it doesn't matter. The example below contains a few elements which will make it work cross browser.
Firstly, I have added the html5.js reference at the top.
Secondly, I have reset the * and body values.
Thirdly, I have use em insted of px.
Finally, I switched the gradient around on the -pie-background call.
Enjoy!

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3pie test</title>

<style>
*
{
margin:0;
padding:0;
border:0;
}
body
{
font-family:Sans-serif;
color:#FFFFFF;
font-size:1em;
line-height:140%;
}
section#borderRadiusExample
{
background:#6BC2E8;
width:10em;
padding:0.62em;

/* rounded corners */
border-radius:0.62em;
-moz-border-radius:0.62em;
-webkit-border-radius:0.62em;

/* Shadow */
box-shadow:0.3em 0.3em 0.3em #CCCCCC;
-moz-box-shadow:0.3em 0.3em 0.3em #CCCCCC;
-webkit-box-shadow:0.3em 0.3em 0.3em #CCCCCC;

/* Linear gradient */
background-image:-moz-linear-gradient(90deg, #6BC2E8, #ABDEF3);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#6BC2E8), to(#ABDEF3));
-pie-background:linear-gradient(90deg, #ABDEF3, #6BC2E8);

behavior:url('scripts/PIE.htc');
}
</style>
</head>
<body>
<section id="borderRadiusExample">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</section>
</body>
</html>

Thursday 21 October 2010

jQuery Text Shadows

The latest text-shadow attributes of course, don't work in IE. There is a way of producing text shadows without using images and that is through a jQuery plugin. You can get the plugin from here http://justinshearer.com/solidShadow/
It's not subtle. There is no opacity, but if you are careful about the width, direction and colours of your shadow, the appearance is very useable. Here is an example of how to use it...

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Shadows</title>
<style type="text/css">
h1
{
text-align: center;
font-size: 8em;
}
</style>
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://justinshearer.com/solidShadow/jquery.solidShadow.js"></script>
<script>
$(document).ready(function()
{
$('h1').solidShadow('inline','#000000','#CCCCCC','right',3);
});
</script>
</head>
<body>
<h1>Header 2</h1>
</body>
</html>