06Aug
2009
2009
CSS3-Some Interesting Advance Features
CSS3-Some Interesting Advance Features
As more advance browsers are now supporting CSS3, developers are looking ways of implementing the advance specifications of CSS to their sites.
These advance specifications have enable CSS3 to bring in many new features to the world of web development. They are not only easy to implement, but these simple codes can do a great job. Some of the interesting new features of CSS3 that you can start using them right away are:
Property Values
These advance specifications have enable CSS3 to bring in many new features to the world of web development. They are not only easy to implement, but these simple codes can do a great job. Some of the interesting new features of CSS3 that you can start using them right away are:
Box With Blurred Shadow
Currently, Box-Shadow is only supported by Firefox version 3.5 and above, Safari and Chrome. To get the effect of shadow around a box, the property must be declared as -moz-box-shadow for Firefox and -webkit-box-shadow for Safari and Chrome.Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.
Property Values
Box-shadow takes up 4 numeric values like this: box-shadow: 7px 7px 8px #818181;
:: First value represents the horizontal offset of the shadow
:: Second value refers to the vertical offset of the shadow
:: Third value represents shadow's blur radius or gradient
:: Fourth value refers to hexadecimal color code
:: Third value represents shadow's blur radius or gradient
:: Fourth value refers to hexadecimal color code
The HTML and CSS codes to get the above effect are as follows:
<html>
<head>
<style type='text/css'>
.shadowbox{
box-shadow: 7px 7px 8px #818181;
font-family: Verdana;color:#ffffff;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 2px solid #999;
border-right: 2px solid #999;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}
</style>
</head>
<body>
<div class="shadowbox" style="border: 1px solid black; padding: 5px;
background: red none repeat scroll 0% 0%;
width: 450px;
-moz-background-clip: border;
-moz-background-origin: padding;
-moz-background-inline-policy: continuous;">
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.</p></div>
</body>
</html>
<head>
<style type='text/css'>
.shadowbox{
box-shadow: 7px 7px 8px #818181;
font-family: Verdana;color:#ffffff;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 2px solid #999;
border-right: 2px solid #999;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}
</style>
</head>
<body>
<div class="shadowbox" style="border: 1px solid black; padding: 5px;
background: red none repeat scroll 0% 0%;
width: 450px;
-moz-background-clip: border;
-moz-background-origin: padding;
-moz-background-inline-policy: continuous;">
<p>Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.</p></div>
</body>
</html>
Rounded-Corners Box
CSS3 has simplifies the creation of rounded corners. With no images are needed and no scripts are employed, everybody now can create a box with rounded corners.
Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.
Here are the magical codes:
-moz-box-shadow: 7px 7px 8px #818181;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
CCborderRadius: 20px;
What you got to do is simply copy and paste these codes under -moz-box-shadow: 7px 7px 8px #818181; of the above CSS codes.
.shadowbox{
box-shadow: 7px 7px 8px #818181;
font-family: Verdana;color:#ffffff;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 2px solid #999;
border-right: 2px solid #999;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
box-shadow: 7px 7px 8px #818181;
font-family: Verdana;color:#ffffff;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 2px solid #999;
border-right: 2px solid #999;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
CCborderRadius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
CCborderRadius: 20px;
Make Shadow At The Bottom of A Box
If you like to have a shadow just at the bottom of the box (the horizontal offset), make a small change on the property value and by adding a new negative value.Make shadow at the bottom of a Box
The CSS and HTML for this effect are:
CSS
<style type="text/css">
.shadow3{
box-shadow: 7px 7px 8px #818181;
font-family: Times;color:#ffffff;
-webkit-box-shadow: 0px 20px 10px -10px #888;
-moz-box-shadow: 0px 20px 10px -10px #888;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}
</style>
HTML
<div class="shadow3" style="width:300px; height:50px; padding:5px; background:navy; border: 1px solid black;">
<p>Make shadow at the bottom of a Box</p>
</div>
The property value of the vertical offset was set at 0px and a new -10px was added.
Image With Shadow
By making another minor changes on the CSS and HTML codes will enable us to put shadow around an image. Look at an example here, an image with nice vertical and horizontal shadows.
The codes for this effect are:
CSS
<style type="text/css">
.shadowimage{
box-shadow: 8px 8px 10px #000;
-webkit-box-shadow: 8px 8px 10px #000;
-moz-box-shadow: 8px 8px 10px #000;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#000000, offX=-6, offY=-6, positive=true);
}
</style>
HTML
<img src="http://mfm6009.googlepages.com/pretty_girl.GIF" class="shadowimage" />
To make this shadow looks darker, I've set the shadow color at #000.
Subscribe to my feed