CSS3 for Web Design Part
Wall Script
Wall Script
Thursday, December 09, 2010

CSS3 for Web Design Part

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.

CSS3 webdesign

Live Demo

About Author
Ravi Tamada
Ravi Tamada
Designer Developer & Freelance
Chennai, INDIA
androidhive.info

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 browsers webdesign

CSS3 Border-radius:

The basic property in CSS3 spec is border-radius. This property will helps in rounding the corners of an element.

CSS3 border webdesign

<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>

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

CSS3 trasition webdesign

<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>

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:

CSS3 shadow webdesign
<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>

This property will take four parameters...Live Demo

X-offset
Y-offset
Blur
Color ( for shadow )
web notification

15 comments:

  1. 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.

    ReplyDelete
  2. I think you need to more work on that
    it not working on IE

    ReplyDelete
  3. @nidzonni : IE9 Beta will support these. Opera 11 and IE9 accepts transition, border-radius properties directly without any prefixes..

    ReplyDelete
  4. IE 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.

    ReplyDelete
  5. FOR IE TRY:-
    This link
    behavior: url(http://subdirectory/border-radius.htc);

    or

    behavior: url(border-radius.htc);

    download the .htc file
    enjoy

    ReplyDelete
  6. Ravi, this tutorial is very weak ...

    P.S.
    Train cross-browser compatibility

    ReplyDelete
  7. 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
  8. @singapore : This is too much appreciation :)

    ReplyDelete
  9. Liked your post. Keep up the good work. All the best.

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. Good, works thanks for your time to post

    ReplyDelete
  12. if 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

mailxengine Youtueb channel
Make in India
X