Monday, September 29, 2014
Lesson 4: Using Advanced CSS3 Techniques
Hi everyone,
welcome to another week of great learning.
This week, we have learned about using advanced CSS techniques. When developers use advanced CSS techniques, they make their web pages look more sophisticated. Advanced CSS techniques provide advanced images and animation tools that enable developers to create a more visually stimulating site. Even though CSS advanced Techniques help you to create a visual site you must add your own creativity into designing. Some tools that help you create a more visually stimulating site are CSS3 2D and 3D Transformations, CSS3 Transitions, and CSS3 Animations.
First of all, in order to understand what a CSS3 2D and 3D Transformations is, a web designer must know what CSS transformation means. A CSS transformation is a CSS3 effect that changes the shape, size and/or position of an element. Elements can be transformed using CSS3 2D and 3D transforms.
2D: CSS3 2D transformations allow a web developer to format your elements using a flat, two- dimensional effect.
CSS 3D: CSS3 3D transformations allow you to format your elements in CSS3 using three- dimensional effects.
CSS3 Transitions. CSS3 transitions are effects that change an element from one style to another style. Transitions are usually triggered when an element, such as an image or text box, is selected or hovered over by the end user. Transitions support multiple styles by separating properties by commas. One other major CSS Advanced technique is CSS3 Animations. CSS3 Animation allows an element to gradually change from one style to another. CSS3 also allows a web designer to change as many properties as wanted, as many times as needed.
A developer can specify when the change will happen in percent, or can use the keywords "from" and "to" (which represents 0% and 100%).
0% represents the start of the animation, 100% is when the animation is complete.
CSS animation is created in the CSS3 @keyframes rule. The @keyframes rule defines an animation and its position.
I hope you learned something little about CSS advanced Techniques.
Subscribe to:
Post Comments (Atom)
.jpeg)
No comments:
Post a Comment