Loading...

How to AtoZ CSS Screencast: Color

View: 572    Dowload: 0   Comment: 0   Post by: hanhga   Category: HTML-CSS template   Fields: Other

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

Transcript

The web would be a pretty dull place without a splash of color.

There are a number of different properties that take a color value and there are four different color syntaxes in CSS and that’s what we’ll be focusing on in this video. Those formats are color keywords, hex, RGB and HSL.

.box-white {
  color: white;
  color: #fff;
  color: #ffffff;
  color: rgb(255,255,255);
  color: rgba(255,255,255,1);
  color: hsl(0,0%,100%,1);
  color: hsla(0,0%,100%,1);
}
.box-black {
  color: black;
  color: #000;
  color: #000000;
  color: rgb(0,0,0);
  color: rgba(0,0,0,1);
  color: hsl(0,0%,0%,1);
  color: hsla(0,0%,0%,1);
}

Let’s take a look at each of them in turn.

Keywords

There are 147 named colors in CSS3.

There are actually only 140 different colors as 7 of them are duplicates just with different spellings of gray.

Here they are as colors, and here they are as a list of keywords.

I personally find this list pretty useless – there are lots to choose from, but it’s hard to remember what they all look like.

What is palevioletred? How pale? How violet? How red?

What is gainsboro?

How about burlywood or goldenrod?

These aren’t that useful, but fortunately there are more options.

RGB

In CSS, colors are defined in the standard Red Green Blue color space or sRGB where colors are defined through 3 channels: Red, Green, and Blue.

One way of defining color in CSS is using the RGB syntax. Here the values range from 0 to 255 for each of the three components. In this case specifying 255 for each of the components, gives us the color white.

.box {
  color: rgb(255, 255, 255); /* white */
  color: rgba(255, 255, 255, 0.5); /* semi-transparent white */
}

We can also make semi-transparent colors with RGBA. Here, a fourth value, known as Alpha, determines the opacity of a color. This value is a decimal ranging from 0 to 1 where 0 is completely transparent, and 1 is completely opaque.

The transparent keyword is represented as rgba(0,0,0,0).

.box {
  color: transparent;
  color: rgba(0, 0, 0, 0); /* transparent */
}

Hex

Probably the color format I use most often is hex. Hex is short for hexadecimal which is a base 16 numeral system. Most people are more familiar with decimal – or base 10 – like the metric system.

A hex color is broken down into three couplets that specify the red, green and blue components of a color. The values of the couplets are in base 16 and range from 00 to FF. You can think of 00 as no color and FF as full color. FF is actually the decimal number 255 in base 16.

In this case we have full red, full green and full blue which combine to make white.

In this second example we have no red, full green and no blue which gives us green.

When both values in each of three couplets are the same, the hex value can be abbreviated to a short-hand 3 digit format.

.box {
  color: #00ff00; /* green */
  color: #0f0; /* green in shorthand */
}

HSL

HSL stands for Hue, Saturation and Lightness.

Hue is specified in degrees from 0 to 360 – and corresponds to a position around the color wheel. 0 degrees represents red and then colors blend through oranges, yellows, greens, blues, purples, pinks and back to red again at 360 degrees.

Saturation determines how vivid a color is from 0% – monochrome – to 100% – vivid.

Lightness is also set as a percentage and determines the overall amount of luminance.

HSL has the corresponding HSLA version which allows for alpha transparency.

.box {
  color: hsl(0, 0%, 100%); /* white */
  color: hsla(0, 0%, 100%, 0.5); /* semi-transparent white */
}

Usage

So, how do we use these colors?

The color property only effects text – so it allows us to set the text color of an element.

But there are lots of other properties that accept a color. background-color, for example, or color stops in a gradient. We can also set border-color or the color component of box-shadow or text-shadow. We can even change thefill color of an SVG path or polygon.

.box {
  background-color: #000;
  background-image:linear-gradient(to right, #000, #fff);
  border-color: #000;
  box-shadow: 0 0 10px #000;
}
.text {
  text-shadow: 0 0 10px #000;
}
.svg path {
  fill: #000;
}

CurrentColor

There is one last color keyword that has a unique if not entirely useful purpose. currentColor is a special keyword that links the value of the color property to other properties that accept a color value like border-colorbox-shadow and text-shadow. Let’s have a look at a quick demo.

We can create a box with a border and a drop shadow as follows and pass in the color values as a keyword, hex, rgb or hsl. If instead of a color value, we use currentColor, the color of the border and drop shadow is black – which is the default value for the color property.

If we now set the color to hotpink, this will be used in place of currentColor instead. This allows us to remove the color value from the border and box-shadow properties. Which maybe saves you a few keystrokes.

.box {
  color: hotpink;
  padding: 50px;
  border: 10px solid; /* border-color is hotpink */
  box-shadow: 0 0 100px; /* shadow color is hotpink */
}

How to AtoZ CSS Screencast: Color

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

Posted on 09-09-2016 

Comment:

To comment you must be logged in members.

Files with category

  • Business/Consulting HTML & CSS Template

    Business/Consulting HTML & CSS Template

    View: 24    Download: 1   Comment: 0

    Category: HTML-CSS template     Fields: none

    It's elegant Business HTML Template. You can use it for creating Business, Finance, Corporate, Consulting websites or promoting your services. Looks perfect in all major browsers, tablets, and phones. Clean and commented code lets you customize it...

  • Photography Portfolio HTML/CSS Template

    Photography Portfolio HTML/CSS Template

    View: 28    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    Portfolio and Photography HTML5/CSS template build with latest bootstrap framework , best suited for photographers. Features 3 HTML5/CSS3 Templates Video background for the homepage (YouTube Only) Supersized slideshow for the homepage Built on...

  • Creative Login Form with Validation

    Creative Login Form with Validation

    View: 40    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    Upturn customized LOGIN FORM & INPUT STYLES is ready for Desktop, tablet and mobile devices. Simple to implement. Just copy the HTML and link to the CSS,JS file. You can easily edit, change and customize them for yourself. For students or anyone else...

  • Login Form Like Facebook

    Login Form Like Facebook

    View: 36    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    This is a simple Facebook form that can be imported to your site with ease. Please don't forget to give credit to original developer because I really worked hard to develop this project and please don't forget to like and share it if you found it...

  • Custom-able Invoice: Easy to Use

    Custom-able Invoice: Easy to Use

    View: 33    Download: 1   Comment: 0

    Category: HTML-CSS template     Fields: none

    Make billing easy with Free Invoice Template. Professional invoices for your business: Proforma, Service, Sales, Freelance. Please don't forget to give credit to original developer because I really worked hard to develop this project and please don't...

  • Awsome Responsive HTML Pages

    Awsome Responsive HTML Pages

    View: 24    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    A responsive html pages. The site have self sliding images on the index page. There are drop down menu with icons on them. The site have bootstrap that makes it responsive to different devices .

  • How To Create an Animated Search Form

    How To Create an Animated Search Form

    View: 273    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    How To Create an Animated Search Form, Learn how to create an animated search form with CSS.

  • How to reset / remove chrome's input highlighting / focus border? used CSS

    How to reset / remove chrome's input highlighting / focus border? used CSS

    View: 224    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    You have seen that chrome puts a thicker border on :focus but it kind of looks off in my case where I've used border-radius also. Is there anyway to remove that?

 
File suggestion for you
Loading...
File top downloads
Loading...
Loading...
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd