CSS - Transition,Text-Shadow And Border-Radius Effect Using Css 3 In Asp.net.

In this i  show how you use transition,text-shadow and border-radius effect using CSS 3 in asp.net. In this we will learn three typw of effect.

1.Transition
2.Text-Shadow 
3.Border-Radius Effect

so here we go .first you needed to create a new asp.net application and after that add a new page. 

1.TransitionTransitioning in CSS is the way of changing the values of css property by interaction like hover, click focus etc. Do for this effect use the beow code.

<style type="text/css">
/* width, opacity, position, font-size */
a.hyperlink
{padding: 5px 10px;
background-color: blue;
font-size:medium;
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.hyperlink:hover
{background-color: red;
font-size: large;
width: 400px;
}</style>
<a href="http://www.gautam958.blogspot.in" class="hyperlink">gautam958.blogspot.in</a>

O/P:



on however




2.Text-Shadow 
In this we will get shadow of the text.

<style type="text/css">
a.hyperlink
{font-size: 40px;
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.5);
}a.hyperlink:hover
{background-color: white;
}</style>
<a href="http://www.gautam958.blogspot.in" class="hyperlink">gautam958.blogspot.in</a>

3.Border-Radius Effect 

Show border of link

<style type="text/css">
a.hyperlink
{font-size: 50px;
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.5);
border-radius: 10px;
border: 1px solid #c0c0c0;
padding: 10px;
}a.hyperlink:hover
{background-color: green;
}</style>
<a href="http://www.gautam958.blogspot.in" class="hyperlink">gautam958.blogspot.in</a>

 

Tags: Asp.Net , CSS/CSS3