CSS color property: 2 demos of text color animation and links
The CSS color property
The color property is used to define the color of the text in CSS. You may set colors for different sections or elements separately. For example, you may set different colors for paragraph text, text in div elements, anchor text etc.
You may set the color by using the color names like green, blue, red etc. You may also use HEX code of the color or RGB values. For example:
Setting by color name:
color: green;
Setting by HEX code:
color: #804040
Setting by RGB value:
color: rgb(64, 128, 128)
See the following demos where color CSS property is used in text animation and links.
A demo of text color animation
In this demo, the CSS color property is used for multiple times as per duration. The div text will show in different colors. The color property is set in the keyframes:
See online demo and code
The CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
.colani { font-size:45px; font-family: Helvetica, sans-serif; font-weight: 500; -webkit-animation: color-animation 15s infinite alternate linear; -moz-animation: color-animation 15s infinite alternate linear; -o-animation: color-animation 15s infinite alternate linear; } @-webkit-keyframes color-animation { 0% { color: #FF0000; } 20% { color: #FF8040; } 40% { color: #FFFF00; } 60% { color: #008000; } 80% { color: #0000FF; } 100% { color: #8080FF; } } @-moz-keyframes color-animation { 0% { color: #FF0000; } 20% { color: #FF8040; } 40% { color: #FFFF00; } 60% { color: #008000; } 80% { color: #0000FF; } 100% { color: #8080FF; } } @-o-keyframes color-animation { 0% { color: #FF0000; } 20% { color: #FF8040; } 40% { color: #FFFF00; } 60% { color: #008000; } 80% { color: #0000FF; } 100% { color: #8080FF; } } |
The simple markup:
|
1 |
<div class="colani">Color animation demo</div> |
An example of using color with link
In this demo, the HTML links are given a color by using the color property of CSS. The colors for the normal state are different than the hover state. Also, visited links can be shown differently as compared to the unvisited links, as shown in the demo below:
See online demo and code
The CSS used for the menu where color property is used:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.color-demo{ border-radius:5px; } .color-demo ul { width:185px; list-style-type: none; } .color-demo ul li a{ text-decoration: none; color: #FFFF37; padding: 10.5px 11px; background-color: #274E4E; display:block; border-bottom:solid 1px #000; } .color-demo ul li a:visited { color: #FFFF37; } .color-demo ul li a:hover, .color-demo ul li .current { color: #800000; background-color: #FBE9AC; } |
The markup for the menu containing links:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<h3>The color property demo in links</h3> <div class="color-demo" id="mainmenu"> <ul> <li><a href="https://www.jquery-az.com/jquery-tips/">jQuery Tutorials</a></li> <li><a href="https://www.jquery-az.com/html-tutorials/">HTML Tutorials</a></li> <li><a href="https://www.jquery-az.com/css-tutorials/">CSS Tutorials</a></li> <li><a href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap Tutorials</a></li> <li><a href="https://www.jquery-az.com/javascript-tutorials/">JavaScript Tutorials</a></li> </ul> </div> |
You can see, the CSS class .color-demo ul li a specifies the color of links while underneath that is the color-demo ul li a:visited class that specifies the color for the visited links. Yet below it are the color-demo ul li a:hover and color-demo ul li .current classes that set the color in hover state along with the current link.