This article is brief introdution about the basic CSS3 propertices and please note that CSS3 is under development. Now a days most popular browsers supports CSS3 except Internet Explorer lower versions, Use it and avoid images for round corners and shadow effects.
Live DemoAbout Author
The Vendor Specific Prefixes:
The vendor specific prefixes are placed before a css property which indicates work-in-progress and the prefix is specific to the browser vendor.
Each browser has their own prefix where other browsers will ignore them as they don’t recognize them.
CSS3 Border-radius:
The basic property in CSS3 spec is border-radius. This property will helps in rounding the corners of an element.
<style>
a.corners
{
padding: 10px 15px;
background: #11a5ff;
font:bold 14px arial;
color: #fff;
text-decoration: none;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
}
a.corners:hover,a.corners:focus
{
background: #11a5ff;
}
</style>
<a class="corners" href="#">Download Me !</a>
a.corners
{
padding: 10px 15px;
background: #11a5ff;
font:bold 14px arial;
color: #fff;
text-decoration: none;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
}
a.corners:hover,a.corners:focus
{
background: #11a5ff;
}
</style>
<a class="corners" href="#">Download Me !</a>
CSS3 Transitions:
Transition properties allow CSS properties to change from one value to another by giving them a smooth animation over a period of time.Live Demo
<style>
a.transitions
{
padding: 10px 15px;
background: #11a5ff;
font:bold 14px arial;
color: #fff;
text-decoration: none;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-transition-property: background;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-duration: ease;
-webkit-transition-delay: 0.3s;
}
a.transitions:hover,a.transitions:focus
{
background: #cc0000;
}
</style>
<a class="transitions" href="#">Download Me !</a>
a.transitions
{
padding: 10px 15px;
background: #11a5ff;
font:bold 14px arial;
color: #fff;
text-decoration: none;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-transition-property: background;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-duration: ease;
-webkit-transition-delay: 0.3s;
}
a.transitions:hover,a.transitions:focus
{
background: #cc0000;
}
</style>
<a class="transitions" href="#">Download Me !</a>
Transition-property: The property to be changed
Transition-duration: How long a transition should last
Transition-timing-duration: How fast a transition will run over time
Transition-delay: The time delay between transitions
Short-handed transitions:
We can also declare all transition properties using a short-handed property.
-webkit-transition : background 0.5s ease 0.3s;
-moz-transition : background 0.5s ease 0.3s;
-o-transition : background 0.5s ease 0.3s;
transition : background 0.5s ease 0.3s;
CSS3 Box-shadow:
<style>
.box_shadow
{
margin-top: 25px;
width: 300px;
height: 140px;
border: 1px solid #aeaeae;
-webkit-box-shadow: 2px 2px 3px #aeaeae;
-moz-box-shadow: 1px 1px 3px #aeaeae;
box-shadow: 1px 1px 3px #aeaeae;
}
</style>
//HTML Code
<div class="box_shadow"></div>
.box_shadow
{
margin-top: 25px;
width: 300px;
height: 140px;
border: 1px solid #aeaeae;
-webkit-box-shadow: 2px 2px 3px #aeaeae;
-moz-box-shadow: 1px 1px 3px #aeaeae;
box-shadow: 1px 1px 3px #aeaeae;
}
</style>
//HTML Code
<div class="box_shadow"></div>
This property will take four parameters...Live Demo
X-offset
Y-offset
Blur
Color ( for shadow )
Great looking! But for me, complete with radius border, shadow and transition effect works only on Google Chrome. IE7 - none of these, Firefox - shadow, radius.
ReplyDeleteI think you need to more work on that
ReplyDeleteit not working on IE
@nidzonni : IE9 Beta will support these. Opera 11 and IE9 accepts transition, border-radius properties directly without any prefixes..
ReplyDeleteit not working on IE 8 !
ReplyDeleteIE is way behind the times on CSS3. IE needs to push 9 out the door so all major browsers can support some of these newer and better features.
ReplyDeleteFOR IE TRY:-
ReplyDeleteThis link
behavior: url(http://subdirectory/border-radius.htc);
or
behavior: url(border-radius.htc);
download the .htc file
enjoy
Ravi, this tutorial is very weak ...
ReplyDeleteP.S.
Train cross-browser compatibility
Thank you for expressing your views. That article got me thinking. Wonderful article. A great find.What a great article. Thanks for sharing. Thank you for the wonderful article.
ReplyDelete@singapore : This is too much appreciation :)
ReplyDeleteLiked your post. Keep up the good work. All the best.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteGood, works thanks for your time to post
ReplyDeletenice little tutorial br
ReplyDeleteCSS3 is nice on browser EPIC
ReplyDeleteif its not working in IE 7 or below..please use CSS3PIE.It makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.
ReplyDelete