How to use Transition,Text-Shadow and Border-Radius effect in CSS 3?

Sheonarayan
Posted by in CSS 3 category on for Beginner level | Points: 250 | Views : 9938 red flag
Rating: 4.5 out of 5  
 2 vote(s)

In this article we are going to learn, how to use transition, text-shadow and border-radius in CSS3.

Transition effects

Transitioning in CSS is changing the values of css property by interaction like hover, click focus etc.

In below code snippet, the background color and the font-size of the link change on mouse over. We can apply transition on width, opacity, position, font-size etc. In short you can say that you can apply transition to all the attributes of the element that can be specified in the numeric values.

Get HTML 5 and CSS 3 Online Training and 500+ ASP.NET web development Tips & Tricks here.

<style type="text/css">

/* width, opacity, position, font-size */

a.class1

{

padding: 5px 10px;

background-color: #9c3;

font-size: smaller;

width: 200px;

-webkit-transition: all 0.7s ease;

-moz-transition: all 0.7s ease;

-o-transition: all 0.7s ease;

transition: all 0.7s ease; /* transition: background 0.7s ease; */

}

a.class1:hover

{

background-color: #690;

font-size: larger;

width: 400px;

}

</style>

 

<a href="http://www.dotnetfunda.com" class="class1">DotNetFunda.com</a>

In case we want to transition only one property value, replace “all” with the property name like below. Here ease (the last parameter is the effect that should be considered while transition, currently this is not supported in most of the browsers).

In the above code snippet, you may notice that transition has been applied in four different lines of code with different prefix, these prefixes are browser specific prefixes.

  • -webkit- is for Google Chrome or the browser that supports -webkit- effects
  • -moz- is for Mozilla Firefox browser
  • -o- is for Opera browser
  • only transition is for other browser

transition: background 0.7s ease;

Output
 
 
On hover
 

 

Text-Shadow effects

Used to create a drop shadow beneath the selected text.

<style type="text/css">

a.class1

{

font-size: 50px;

text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.5);

}

a.class1:hover

{

background-color: #690;

}

</style>

<a href="http://www.dotnetfunda.com" class="class1">DotNetFunda.com</a>

In the above code snippet, the DotNetFunda.com link comes with shadow.

a. The 1st argument of the text-shadow is horizontal offset
b. The 2nd argument of the text-shadow is vertical offset
c. The 3rd argument of the text-shadow is blur radius
d. The final argument is the color name

Output
 
 

Border-Radius effects

This property allows us to specify the border corner radius to make it rounded corer.

<style type="text/css">

a.class1

{

font-size: 50px;

text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.5);

border-radius: 10px;

border: 1px solid #c0c0c0;

padding: 10px;

}

a.class1:hover

{

background-color: #690;

}

</style>

<a href="http://www.dotnetfunda.com" class="class1">DotNetFunda.com</a>

In the above code snippet, border-radius specifies the radius of the border corner.

Output
 
 

Hope this article was useful. Thanks for reading and hope that you liked it. 

Read my next article in this series How to use Opacity, Scale and box shadow and Zooming in CSS 3? here.

Keep an eye on forth coming articles on CSS 3. To read my series of articles, click here.

Page copy protected against web site content infringement by Copyscape

About the Author

Sheonarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Posted by: Akiii on: 3/28/2012 | Points: 25
Good article Sir.
I have one question, does border radius is supported in IE 8 ?


Thanks and Regards
Akiii

Login to post response

Comment using Facebook(Author doesn't get notification)