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

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.

If you like this article, subscribe to our RSS Feed. You can also subscribe via email to our Interview Questions, Codes and Forums section.