We are discussing new important css3 tutorials with cascading style sheet examples, let's take first review on introduction of CSS....
We are discussing new important css3 tutorials with cascading style sheet examples, let's take first review on introduction of CSS.
Micro technology is spreading rapidly by mobile application, web designing, software development and by other designing tools. Now everyone uses apps which develop by programming language of java script, HTML, and CSS this three coding are taken very important position in the programming world, but in these three languages CSS gets much importance because of his cool setup.
If we want to create a web template so first of all we will have to do work on HTML and then we use cascading style sheet (CSS) for designing the division (div) tags.
Also Check Our Other Recipes:
- Facebook Unfriend Finder Extension.
- 5 New Email Subscribe Boxes for Blogger.
- Christmas Countdown Clock Widget.
Here we mention four types of new styles. Before beginning you will have to make a basic HTML structure on simple notepad or in Notepad plus, if you don’t know that how to make the basic structure so see the below structure.
<html>
<head>
<title></title>
<style type="text/css">
.YOUR-CSS-STYLE-HERE {
}
</style>
</head>
<body>
<div class="YOUR-CSS-NAME-HERE">
</div>
</body>
</html>
1. CSS3 Animations
It is an animation style which changes the color from one to another without any clicking or touching. In this style we use the syntax of animation and @keyframes. With this we can make many interesting header, boxes, sidebar and animated characters.
Here we add a demo button below for your inspiration.
STEP 1: Look the below script and then copy this all codes and paste into notepad.
STEP 3: After this, press CTRL+F to save the script and don’t forget to add an html extension on file before saving.
.myfirst {STEP 2: On above we was taken the class name “myfirst”, so we will have to also write this class name on div tag because if we don’t write the class name on division(div) the result will not appear in the browser.
width:100px;
height:100px;
background:red;
-webkit-animation:myfirst 5s;
animation:myfirst 5s;
}
@-webkit-keyframes myfirst {
10% {background: yellow;}
20% {background: red;}
40% {background: green;}
60% {background: black;}
80% {background: blue;}
100% {background: pink;}
}
STEP 3: After this, press CTRL+F to save the script and don’t forget to add an html extension on file before saving.
2. CSS3 Transition
Transition is a special type of tag which is done with hover effects. Mostly every web designer uses this style because of his color hovering effect.
Consider a ready made box and we apply some transition by the time (secs), then when we put a mouse cursor on it the color will appear with time duration.
Simple Transition: First tries to understand the basic of transition and then go to the next step. Look the below style, in this we added the box example for your consideration.
.transition {
Width:100px;
padding:20px;
height:100px;
background-color:#0CF;
transition:background-color 1s;
-webkit-transition:background-color 1s;
}
.transition:hover {
color:white;
background-color:#000000;
}
Rotational Transition: In rotational transition only we will have to add the transform code to change the position of transition.
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
3. CSS3 3D Transform
The object which is shadowed by three sided is called 3D. In this case we have to follow the X-axis and Y-axis method to generate a 3D effect, it’s our choice that what type of axis we used.
We are taking the 3D transform example, with transition effects. See the below demo and codes.
.transform {
color:black;
Width:250px;
padding:20px;
box-shadow:10px 10px 10px silver;
height:250px;
background-color:orange;
transition:background-color 2s, transform 2s;
-webkit-transition:background-color 2s, -webkit-transform 2s;
}
.transform:hover {
color:white;
background-color:black;
-webkit-transform:rotateX(120deg);
transform:rotateX(150deg);
}
#transform{
color:black;
Width:250px;
padding:20px;
box-shadow:10px 10px 10px silver;
height:250px;
background-color:orange;
transition:background-color 2s, transform 2s;
-webkit-transition:background-color 2s, -webkit-transform 2s;
}
#transform:hover {
color:white;
background-color:black;
-webkit-transform:rotateY(120deg);
transform:rotateY(150deg);
}
4. CSS3 Sprites or Image Sprites
A word sprite means powerful magic and according to web designing a word sprites defines the image hover property and it transfer the one image property to another. The image property depends upon color transform, and glass effects. As you mostly see the highest rank websites uses the image sprite property in the company logo, header and in applications.
You can also use the CSS sprite by see and read the below codes and demo.
.arrow {
display: inline-block;
position: relative;
text-indent: -9999px;
width: 35px;
height: 35px;
background: url('BEFORE-HOVER-IMAGE-URL') no-repeat;
}
.arrow span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url('AFTER-HOVER-IMAGE-URL') no-repeat;
background-position: -50px 0;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.arrow:hover span {
opacity: 1;
}
Last Touch Up
I define you the three most popular properties of CSS3 with simple CSS examples, you can also design with new styles and colors just as in animation you can change the percentage ratio and colors and in transition you can change the rotation, width, height, colors and much more depend upon your mind that what type of your thinking just you will have to do lots of practice in this three session because three sessions are widely used in this era, if you like this tutorial so share this tutorial with your other friends.
COMMENTS