Tuesday, January 22, 2019
UNDERSTANDING LINEAR AND RADIAL GRADIENT| AN INFORMATIVE GUIDE
COLORS
,
CSS
,
CSS3
No comments
:
Gradient, as we struggled to give it a perfect definition in our previous lesson, is used to display or render smooth transition between two or more specified colors. In other words, what will enable you to increase the magnitude of a property (in this context, color) or decrease it in cascading style sheet is gradients. They are specifically two main types of gradients we are going to be considering in this lesson. There are Linear and Radial gradients. Each of this gradients works in a very remarkable way. I think it is not inappropriate to consider each of them categorically.
TWO MAJOR TYPE OF GRADIENTS
a) Linear Gradients:
A linear gradient is one of the types of the gradient used in Cascading Style Sheet (CSS) to blend one or more colors to another. In other to create a Linear Gradient, you must at least define two color stops, (cf. our previous lesson). A linear gradient is defaulted to a gradient from top to bottom. For example, if you begin at angle 90%, you can turn the gradient from the top to the bottom, from the left to the right, etc. If my explanations seem complex, don’t panic. You will understand when we consider illustrative examples. Just bear in mind that once you’ve established your gradient, the next thing is to decide on which color to add. When it comes to this, you are the boss. You can decide on any color using rgba or hlsa (I explained these in one of our previous lessons). In our examples, we will be adding four sweet colors. After that, we will carefully determine where these sweet colors will gallantly sit. This is done using percentageLet’s get started.
Open your text editor and key in the following codes
HTML
<div>This is a linear Gradient</div>
CSS
div{
float: left;
width: 350px;
height: 150px;
margin: 5.2px;
color: white;
background: linear-gradient(mediumseagreen, red);
box-shadow: 10px 10px 5px 5px #888;
padding: 30px;
}
REFERENCE THE CSS IN YOUR HTML FILE,
SAVE AND OPEN IT IN YOUR TEXT EDITOR
WRAPPING UP
In our next lesson, we are going to be considering the second type of Gradient and also explain some technical terms inherent in the lessons. Practice makes perfection. I urge you to keep feeding your brain.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment