Today I just shifted working on CSS-3 as one of my friend motivated me to do so. He just showed me few apps which inspired to me learn css3, as I was using it, I found it very very interesting, and I can’t stop myself from sharing it with you all.
First of all let me make it clear to you all that CSS-3 is not difficult to learn.
As I was making few pages using CSS-3, I found that we don’t require difficult scripting languages like jQuery and JavaScript to make our website attractive and dynamic, all this work is carried out by the new features that are embedded in CSS-3.
There is no need for you to use scripting languages to make slider, give transition effects etc.
If you’re designing geek, then try using CSS-3, you surely gonna love it.
Below are the few new features of CSS-3
Borders
- border-color
- border-image
- border-radius
- box-shadow
Backgrounds
- background-origin and background-clip
- background-size
- multiple backgrounds
Color
- HSL colors
- HSLA colors
- opacity
- RGBA colors
Text effects
- text-shadow
- text-overflow
- word-wrap
User-interface
- box-sizing
- resize
- outline
- nav-top, nav-right, nav-bottom, nav-left
Selectors
- attribute selectors
Basic box model
- overflow-x, overflow-y
Generated Content
- content
Other modules
- CSS3 Transitions
- media queries
- multi-column layout
- Web fonts
- speech
Below is the example of the CSS-3 style-sheet
*{margin:0px;border:0px;padding:0px}
@keyframes fun
{
from{color:black;} to{color:White;}
}
#main
{
height:800px;width:960px;background-color:Gray;margin:auto;
}
#header
{
width:960px;height:200px; background-image:url(aps_header_bg.jpg);
}
#menu_bar
{
width:960px; height:50px; margin-top:102px;
}
#content
{
width:960px;height:500px;background-color:Yellow;
}
#cnt_left
{
float:left;height:500px;width:660px;background-image:url(content.jpg);
}
#cnt_right
{
float:left;height:500px;width:300px;background-color:Olive;
}
#login
{
height:300px;width:300px;background-color:Silver;
}
#loginform
{
padding-left:10px; padding-top:10px;
}
#update
{
height:100px;width:300px;background-image:url(aps_update_bg.jpg);
}
.marq
{
text-align:center;
}
#news
{
height:100px;width:300px;background-image:url(aps_news_bg.jpg);
}
#footer
{
width:960px;height:100px;background-image:url(aps_footer_bg.jpg);
}
h3
{
font-size:xx-large; padding-left:10px; padding-top:10px;
}
.text
{
text-align:center; margin-top:40px;
}
ul li
{
display:inline-block;
padding-left:100px;
padding-right:70px;
-moz-transition:width 2s, height 2s, -moz-transform 2s;
color:Black;
}
ul li:hover
{
animation: fun 2s;
text-transform:uppercase;
font-size:20px;
color:White;
transform:rotate(360deg);
border-radius:50px;
box-shadow: 20px 20px 20px 20px;
}
h3:hover
{
box-shadow: 20px 20px 20px 20px ;
}
