HTML and CSS Reference
In-Depth Information
Figure 5-10.
Creating an Irish flag using CSS3 gradients
CSS3 gradients also support color stops. Color stops allow you to specify
where the gradient should stop along the gradient line. For instance, you can
create a true Irish flag in CSS3 without any gradient, using stops. In order to do
this, you would specify that the green color would stop at 33% (one-third) of the
element, a white color would then start at 33% and stop at 33%. This would
create an immediate line of color between green and white, instead of a
gradient. From here, you would then use another white color and specify the
stop at 66% of the screen; and finally orange, which will stop at 66%, creating
another line of color.
The code would look similar to the following, and you can see the result in
Figure 5-11.
.box {
background: -webkit-linear-gradient(left, green 33.3%, white 33.3%, white
66.6%, orange 66.6%);
}
