Saturday, January 19, 2019
GETTING STARTED WITH CSS 3| COMPREHENSIVE DETAILS
CSS 3 is the latest version of Cascading Style Sheet. It was released on 13th October 2015. This newest version is notable for being completely backward compatible with earlier versions. However, it has remarkable features that make it uniquely exceptional and favorite of many web designers. Some of the amazing features that accompany CSS 3 include gradients property, transform, Keyframe, pseudo-classes, multiple backgrounds, animation and effects, border-image, border-radius, box shadow, transparency effect and plenty more.
Though we’ve intentionally used some of these features in some of our examples in our previous lessons, nevertheless, I find it appropriate to formally give brief explanations to some of these features.
AMAZING FEATURES OF CSS 3
a) Gradients property: This is an awesome feature that allows you to define or set the background color of the element to a gradient. A gradient is used to describe the increase or decrease in the magnitude of color. They are mainly two types of gradients available, namely; Radial and Linear gradient.
b) Box-shadow: it is used to attach one or more shadows to an element by succinctly defining the color, size, offset etc.
c) Transform: It is a property that allows you to rotate move, scale or skew an element.
d) Multiple backgrounds: It is used to set more than two backgrounds to an element.
e) Border-image: It is a property that allows you to set image as the border around an element.
f) Border-radius: It is used to create rounded corners of the border of an element.
g) Animation: This is an awesome feature that is generating a lot of attention in the CSS 3. The animation is good in CSS, however, it is much better in JavaScript. So, I urge you to enroll in JavaScript lesson after CSS. CSS is just a style sheet, but JavaScript is a scripting language. Hence, JavaScript is the brain of the web page. It purely creates event-based animation, which is extremely interactive.
h) Keyframe: It is used along animation. A simple animation has at least two keyframes which include a start (0%) and end (100%). Let’s say you have a motorbike moving right to left. You just need two keyframes. But if the motorbike is going to turn many times, you have to add a key frame at each turn.
i) Pseudo class: Is used to style elements or part of elements that is in the document tree.
WRAPPING UP
In our next lesson, we are going to be moving into the practical aspect of CSS 3. So that you will see these elements in action.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment