CSS3 is a module based development where new features, improvements are being added in modules for easy implementation, acceptability of its features.
Introduction
Cascading Style Sheets (CSS) It is a style sheet language used for describing the format of a document written in a mark up language. While most often used to change the style of webpage and user interfaces written in HTML , Along with HTML and JavaScript, CSS is a technology used by most websites to create visually engaging webpages, user interfaces for Web applications
, and user interfaces for many mobile applications.Objective
The main objective of this article is to learn CSS elements .
Transitions
It is the change that values of CSS property by interaction like hovering , Clicking etc
Class
Class is a reference
type. So it is a reference type constraint. it can be applied to any class,.
<head>
<title>Welcome KidsCorner</title>
<meta charset="UTF-8" />
</head>
<body>
<div>
<style type="text/css">
a.class1 {
padding: 15px 30px;
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;
}
a.class1:hover {
background-color: #690;
font-size: larger;
width: 400px;
}
</style>
<a href="" class="class1">DotNetFunda.com</a>
</div><br /><br /><br /><br />
<div>
<style type="text/css">
a.stylesheet {
padding: 15px 30px;
background-color: green;
font-size: medium;
width: 250px;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
a.stylesheet:hover {
background-color: maroon;
font-size: larger;
width: 500px;
}
</style>
<a href="http://www.itfunda.com/" class="stylesheet"><b>IT Funda.com</b></a>
</div>
</body>Here in this example two div's and two CSS sheets of animation transition effects are shown
Let us describe that
All the code should be written in the </body> tag
The out puts are shown here in the below
Here is the output for above example.Look at the image clearly ,when we hover the mouse on the style sheet in which we have written in the code.It changes it color , font ,size .
For example Look at this image
Here is the another output of the another style sheet mentioned in the code
Here is the output for above example.Look at the image clearly ,when we hover the mouse on the style sheet in which we have written in the code.It changes it color , font ,size .
Border radius in the style sheet
This Border radius allows us to specify the border corner radius to make it rounded corer.
<style type="text/css">
a.stylesheet2 {
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.rolls-roycemotorcars.com/" class="stylesheet2">rolls-roycemotorcars.com</a> Example :
Here in the example we can see that rounded border(Border Radius)
Here,When we click on the link it displays pale green in color.
Conclusion
In this article we have learnt about How to use Transition effects and Border Radius of the style sheet
Reference
www.dotnetfunda.comhttp://www.html5.com/