What do you think?
CSS Round Corners and Drop Shadows
The new CSS3 includes some nice new styling features that designers will like including rounded corners and drop shadows. At the moment, they are only implemented on browsers like Firefox, Safari and Chrome. They can however, also be added to Internet Explorer using several methods. My favourite is CSS3 Pie.
Take this html page code as an example and see the image below for the results:
<html>
<head>
<style type=”text/css”>
div#box {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 5px 5px 10px #ccc;
-webkit-box-shadow:5px 5px 10px #ccc;
padding: 5px 5px 5px 15px;
border-color: #ff6600;
border-style: solid;
border-width: 1px;
}
</style>
<title>My Page Title</title>
</head>
<body>
<div id=”box”>
<p>I am some text</p>
</div>
</body>
</html>
CSS rounded corners and drop shadows
The -moz targets Firefox and -webkit is for Safari. With the drop shadow, there are 3 values set; for the x, y and blur amounts. These can be in px, ems etc and the shadow colour is specified as either a hex value or named colour. I prefer lighter colours because I think they add realism.
The borders can be set for individual corners using styling like this:
-moz-border-radius-topleft;
-webkit-border-top-left-radius;
These effects and more can be added to IE-based browsers, using a link to a file in directory called PIE, CSS3 Pie to be specific. Download it from here : CSS3 Pie. Put this at the root of your site then add the following line to your element in the css file:
behavior: url(/PIE/PIE.htc);
That should do it, although there are some caveats – read the docs online for more info.
For more CSS3 attributes visit http://www.css3.info
other page
It's good to talk!