{"id":2045,"date":"2016-10-10T09:41:59","date_gmt":"2016-10-10T09:41:59","guid":{"rendered":"http:\/\/cssreset.com\/?p=2045"},"modified":"2016-10-10T09:41:59","modified_gmt":"2016-10-10T09:41:59","slug":"using-css3s-currentcolor-value","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/using-css3s-currentcolor-value\/","title":{"rendered":"Using CSS3’s CurrentColor Value"},"content":{"rendered":"

CSS’s CurrentColor value is a way to assign a pre-defined color to all of the CSS properties that take color values. All you need to do is define the color of a certain selector like you normally would:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. div{<\/span><\/div><\/li>\n
  2. color<\/span>:<\/span> #333<\/span>;<\/span><\/div><\/li>\n
  3. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    After that, you can use the value (which in this context sort of acts as a variable) CurrentColor to define the color value of any property that want to be that dark grey color, rather than writing #333. So for example:<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    css<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. div{<\/span><\/div><\/li>\n
    2. color<\/span>:<\/span> #333<\/span>;<\/span><\/div><\/li>\n
    3. border<\/span>:<\/span> 1px<\/span> solid<\/span> CurrentColor;<\/span><\/div><\/li>\n
    4. background<\/span>:<\/span> 1px<\/span> solid<\/span> CurrentColor;<\/span><\/div><\/li>\n
    5. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      In the above instance, the border color and the background color of the div would both be #333. Using this property might not actually save you any time, but it is a pretty cool trick, and it’s definitely fun to play around with pseudo-variables in our pure CSS.<\/p>\n

      Share and Enjoy !<\/h3>
      0<\/span><\/span>Shares<\/small><\/div>
      <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

      CSS’s CurrentColor value is a way to assign a pre-defined color to all of the CSS properties that take color values. All you need to do is define the color of a certain selector like you normally would:<\/p>\n

      \t\t\t\t\t\t< View plain […]<\/p>\n

      Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2045"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2045"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2045\/revisions"}],"predecessor-version":[{"id":2046,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2045\/revisions\/2046"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2045"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2045"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}