Sunday, January 20, 2019
SENSITIVE DETAILS ABOUT CSS COLOR STOPS|IMPORTANT THINGS TO KNOW
COLORS
,
CSS
,
CSS3
No comments
:
Color stops are the colors that you are willing to render smooth transition by setting a starting point and a direction or angle along with gradient effect. Gradient? Don’t worry. We are going to be discussing gradients extensively in our next lesson. So permit me to resist the temptation of digressing. Let’s move on.
Color stops can be very interesting and as well interactive if you know how to use it correctly. It will be an unnecessary repetition if I tell you at this level of our tutorial that Cascading Style sheet (CSS) pegs its fulcrum on color, beauty, and styling of a web page. Nevertheless, hear it again. CSS is no doubt, the goddess of beauty to any website. If CSS stops swinging, then the website becomes stinking ugly.
I’ve crafted this lesson to serve as an eye-opener to you on how to apply multiple color stops and/or sharp colors to a web page, by separating the color name or value with a comma (,). One important thing that you have to bear in mind while using color stops is its position using linear gradients.
For example, write the following codes in your text editor, I will explain later.
1. FOR MULTIPLE COLOR
HTML
<div>Example of Multiple Colors</div>
CSS
div{
float: left;
width: 350px;
height: 150px;
margin: 5.2px;
color: white;
background: linear-gradient(blue, yellow, pink, white);
}
REFERENCE THE CSS IN HTML DOCUMENT, IT WILL LOOK LIKE THIS
SAVE AND OPEN IT WILL LOOK LIKE THIS
2. FOR SHARP COLORS
HTML
<div id="sharp">Example of Sharp Colors</div>
CSS
#sharp{
float: left;
width: 350px;
height: 150px;
margin: 5.2px;
color: white;
background: linear-gradient(blue 20%, yellow 20%, yellow 40%, green 40%, green 80%, red 80%, red 100%);
}
REFERENCE THE CSS IN HTML DOCUMENT, IT WILL LOOK LIKE THIS
SAVE AND OPEN IT, IT WILL LOOK LIKE THIS
NOTE:
For the direction of the gradient floating, you are free to set it to be right, bottom, top or left as we used it in our examples. For questions, make use of the comment box below. We will be focusing on gradients in our next lesson.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment