{"id":2210,"date":"2016-08-02T07:32:43","date_gmt":"2016-08-02T07:32:43","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=2210"},"modified":"2023-11-22T02:23:55","modified_gmt":"2023-11-22T02:23:55","slug":"css-color-property-2-demos-of-text-color-animation-and-links","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/css-color-property-2-demos-of-text-color-animation-and-links\/","title":{"rendered":"CSS color property: 2 Demos of Text Color Animation and Links"},"content":{"rendered":"

CSS color property<\/strong><\/h3>\n

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.<\/p>\n

You may set the color by using color names like green, blue, red, etc. You may also use the HEX<\/strong> code of the color or RGB<\/strong> values. For example:<\/p>\n

Setting by color name:<\/strong><\/p>\n

color: green;<\/p><\/blockquote>\n

Setting by HEX code:<\/strong><\/p>\n

color: #804040<\/p><\/blockquote>\n

Setting by RGB value:<\/strong><\/p>\n

color: rgb(64, 128, 128)<\/p><\/blockquote>\n

See the following demos where the color CSS property is used in text animation and links.<\/p>\n

A demo of text color animation<\/strong><\/h3>\n

In this demo, the CSS color property is used multiple times as per duration<\/strong>. The div text will show in different colors. The color property is set in the keyframes:<\/p>\n

\"CSS<\/p>\n

The CSS:<\/p>\n

.colani {\r\n\r\n\u00a0 font-size:45px;\u00a0\r\n\r\n\u00a0 font-family: Helvetica, sans-serif;\r\n\r\n\u00a0 font-weight: 500;\r\n\r\n\u00a0 -webkit-animation: color-animation 15s infinite alternate linear;\r\n\r\n\u00a0 -moz-animation: color-animation 15s infinite alternate linear;\r\n\r\n\u00a0 -o-animation: color-animation 15s infinite alternate linear;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n@-webkit-keyframes color-animation {\r\n\r\n\u00a0\u00a0\u00a0 0%\u00a0\u00a0 { color: #FF0000; }\r\n\r\n\u00a0\u00a0\u00a0 20%\u00a0 { color: #FF8040; }\r\n\r\n\u00a0\u00a0\u00a0 40%\u00a0 { color: #FFFF00; }\r\n\r\n\u00a0\u00a0\u00a0 60%\u00a0 { color: #008000; }\r\n\r\n\u00a0\u00a0\u00a0 80%\u00a0 { color: #0000FF; }\r\n\r\n\u00a0\u00a0\u00a0 100% { color: #8080FF; }\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n@-moz-keyframes color-animation {\r\n\r\n\u00a0\u00a0\u00a0 0%\u00a0\u00a0 { color: #FF0000; }\r\n\r\n\u00a0\u00a0\u00a0 20%\u00a0 { color: #FF8040; }\r\n\r\n\u00a0\u00a0\u00a0 40%\u00a0 { color: #FFFF00; }\r\n\r\n\u00a0\u00a0\u00a0 60%\u00a0 { color: #008000; }\r\n\r\n\u00a0\u00a0\u00a0 80%\u00a0 { color: #0000FF; }\r\n\r\n\u00a0\u00a0\u00a0 100% { color: #8080FF; }\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n@-o-keyframes color-animation {\r\n\r\n\u00a0\u00a0\u00a0 0%\u00a0\u00a0 { color: #FF0000; }\r\n\r\n\u00a0\u00a0\u00a0 20%\u00a0 { color: #FF8040; }\r\n\r\n\u00a0\u00a0\u00a0 40%\u00a0 { color: #FFFF00; }\r\n\r\n\u00a0 \u00a0\u00a060%\u00a0 { color: #008000; }\r\n\r\n\u00a0\u00a0\u00a0 80%\u00a0 { color: #0000FF; }\r\n\r\n\u00a0\u00a0\u00a0 100% { color: #8080FF; }\r\n\r\n}<\/pre>\n
The simple markup:<\/strong><\/p>\n
<div class=\"colani\">Color animation demo<\/div><\/pre>\n
An example of using color with a link<\/strong><\/h3>\n
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 image below:<\/p>\n
\"CSS<\/p>\n
The CSS used for the menu where the color property is used:<\/p>\n
.color-demo{\r\n\r\n\u00a0\u00a0\u00a0 border-radius:5px;\r\n\r\n}\r\n\r\n.color-demo ul {\r\n\r\n\u00a0\u00a0\u00a0 width:185px;\r\n\r\n\u00a0\u00a0\u00a0 list-style-type: none;\r\n\r\n}\r\n\r\n.color-demo ul li a{\r\n\r\n\u00a0\u00a0\u00a0 text-decoration: none;\r\n\r\n\u00a0\u00a0\u00a0 color: #FFFF37;\r\n\r\n\u00a0\u00a0\u00a0 padding: 10.5px 11px;\r\n\r\n\u00a0\u00a0\u00a0 background-color: #274E4E;\r\n\r\n\u00a0\u00a0\u00a0 display:block;\r\n\r\n\u00a0\u00a0\u00a0 border-bottom:solid 1px #000;\r\n\r\n}\r\n\r\n.color-demo ul li a:visited {\r\n\r\n\u00a0\u00a0\u00a0 color: #FFFF37;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.color-demo ul li a:hover, .color-demo ul li .current {\r\n\r\n\u00a0\u00a0\u00a0 color: #800000;\r\n\r\n\u00a0\u00a0\u00a0 background-color: #FBE9AC;\r\n\r\n}<\/pre>\n
The markup for the menu containing links:<\/strong><\/p>\n
<h3>The color property demo in links<\/h3>\r\n\r\n<div class=\"color-demo\" id=\"mainmenu\">\r\n\r\n<ul>\r\n\r\n<li><a href=\"https:\/\/www.jquery-az.com\/jquery-tips\/\">jQuery Tutorials<\/a><\/li>\r\n\r\n<li><a href=\"https:\/\/www.jquery-az.com\/html-tutorials\/\">HTML Tutorials<\/a><\/li>\r\n\r\n<li><a href=\"https:\/\/www.jquery-az.com\/css-tutorials\/\">CSS Tutorials<\/a><\/li>\r\n\r\n<li><a href=\"https:\/\/www.jquery-az.com\/bootstrap-tips-tutorials\/\">Bootstrap Tutorials<\/a><\/li>\r\n\r\n<li><a href=\"https:\/\/www.jquery-az.com\/javascript-tutorials\/\">JavaScript Tutorials<\/a><\/li>\r\n\r\n<\/ul>\r\n\r\n<\/div><\/pre>\n
You can see, the CSS class .color-demo ul li a<\/em><\/strong> specifies the color of links while underneath that is the color-demo ul li a:visited<\/em><\/strong> class that specifies the color for the visited links.<\/p>\n
Yet below it are the color-demo ul li a:hover<\/em><\/strong> and color-demo ul li .current<\/em><\/strong> classes that set the color in the hover state along with the current link.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 color names like green, … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2211,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[41],"yoast_head":"\nCSS color property: 2 Demos of Text Color Animation and Links<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/css-color-property-2-demos-of-text-color-animation-and-links\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS color property: 2 Demos of Text Color Animation and Links\" \/>\n<meta property=\"og:description\" content=\"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 color names like green, ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/css-color-property-2-demos-of-text-color-animation-and-links\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-02T07:32:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-22T02:23:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/07\/21.0_1-CSS-color.png\" \/>\n\t<meta property=\"og:image:width\" content=\"705\" \/>\n\t<meta property=\"og:image:height\" content=\"87\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/css-color-property-2-demos-of-text-color-animation-and-links\/\",\"url\":\"https:\/\/www.jquery-az.com\/css-color-property-2-demos-of-text-color-animation-and-links\/\",\"name\":\"CSS color property: 2 Demos of Text Color Animation and Links\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-08-02T07:32:43+00:00\",\"dateModified\":\"2023-11-22T02:23:55+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/css-color-property-2-demos-of-text-color-animation-and-links\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/css-color-property-2-demos-of-text-color-animation-and-links\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/css-color-property-2-demos-of-text-color-animation-and-links\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS color property: 2 Demos of Text Color Animation and Links\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS color property: 2 Demos of Text Color Animation and Links","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/css-color-property-2-demos-of-text-color-animation-and-links\/","og_locale":"en_US","og_type":"article","og_title":"CSS color property: 2 Demos of Text Color Animation and Links","og_description":"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 color names like green, ... Read more","og_url":"https:\/\/www.jquery-az.com\/css-color-property-2-demos-of-text-color-animation-and-links\/","article_published_time":"2016-08-02T07:32:43+00:00","article_modified_time":"2023-11-22T02:23:55+00:00","og_image":[{"width":705,"height":87,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/07\/21.0_1-CSS-color.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/css-color-property-2-demos-of-text-color-animation-and-links\/","url":"https:\/\/www.jquery-az.com\/css-color-property-2-demos-of-text-color-animation-and-links\/","name":"CSS color property: 2 Demos of Text Color Animation and Links","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-08-02T07:32:43+00:00","dateModified":"2023-11-22T02:23:55+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/css-color-property-2-demos-of-text-color-animation-and-links\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/css-color-property-2-demos-of-text-color-animation-and-links\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/css-color-property-2-demos-of-text-color-animation-and-links\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"CSS color property: 2 Demos of Text Color Animation and Links"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2210"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=2210"}],"version-history":[{"count":5,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2210\/revisions"}],"predecessor-version":[{"id":11465,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2210\/revisions\/11465"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/2211"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=2210"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=2210"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=2210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}