Take this
course

Software Development / Web Development

Mastering CSS3 Colors

Conjure up stunning web pages using CSS3 Colors

Description

About This Video

  • In-depth tour of CSS3 Colors to master the art of creating attractive web pages
  • Understand how RGB, HSL, RGBA, HSLA, and named colors work to create fascinating color themes
  • From a theoretical perspective of how colors work to their implementation in a CSS3 environment—know it all in less than an hour


In Detail

Colors have been around the Web since the very early days. Before the birth of CSS, color attributes were baked into HTML or into images. As the Web evolved and moved into a CSS-friendly world, colors were extracted and moved into style files. Colors are at the very heart of display and graphical representations. It's critical for any developer or web designer to understand colors and their relationships in-depth, so that they can be more creative and gain control over the style and design of their websites.


Mastering CSS3 Colors aims to introduce ways you can control color using CSS3 features and shows you how to become artistic to create stunning web pages.


We will start off with understanding how color systems work and more importantly how we need to work with them. We will get to know all about core colors, web-safe colors, and named colors. We'll then dive into creating color profiles in RGB and HSL, and also learn how to incorporate alpha channels into these profiles. We’ll learn all the neat tricks to pick perfect color themes for our pages using external images, Adobe Color CC, and ColorZilla.


Next we'll turn our attention to relative colors and the use of currentColor, transparency, and gradients, making our sites fancier than ever. Finally, we’ll look at web accessibility and make our site user-friendly for everyone.


Before you know it, Mastering CSS3 Colors will have you up-to-speed with the best tricks and hacks to create captivating web pages, faster and more effectively than ever.

Full details

Curriculum

  • Exploring CSS3 Colors
    The Course Overview
    This video will offer the overview of the course.
    1:44
    Exploring the Core Color Properties
    There are many ways to describe what a color is. The most basic way is using a name. • Take a look at the basic colors • Check out web safe colors • Know all about named colors
    4:59
    Understanding RGB
    Let's learn the common ways to describe colors on digital devices using the color profile options. By the end of this video, you will know how to create color profiles in RGB. • The shift from 256 colors to over 16 million • Understand the RGB Structure: #RRGGBB • Can you step out of web safe colors?
    9:39
    Integrating an Alpha Channel
    In this video, you will learn a more modern way of representing RGB values. This new way will enable you to incorporate alpha channels. • See why RGB classic can't represent alpha channels • Add an alpha channel to RGB colors • Know the limitations of RGB and move on to 4K displays
    7:55
    Hue, Saturation, Lightness, and Alpha
    RGB colors have a few limitations; mainly, they are hardware oriented based on 16 million color assumptions. It's harder to use—it is easy to understand but really hard to figure out colors with this system. There are a few other color profilers out there but the second one that is supported, which is very nattily logical, is the HSL. HSL is far more intuitive, making it easier to control colors in a human-friendly way. • What do we do when 16 million color combinations are just not enough? • Find out why HSL is harder to understand and easier to integrate than RGB • Create colors with Hue, Saturation, Lightness and Alpha
    11:07
    Finding Color Profiles
    It's one thing to know how to work with colors and another to find color profiles that work together. In this video, we will talk about the easiest way to create color profiles and add a brand meaning to our colors. By the end, you will be a lot more comfortable with colors as you will figure out your own designs. • See how to pick a nice color combination • Learn the image trick • See how Adobe Color CC and ColorZilla come to the rescue
    8:16
  • Diving Deeper into CSS3 Colors
    Working with currentColor
    So far, we've worked with colors by defining them in absolute terms: by name, RGB or HSL values. We now turn our attention to relative colors. The first of them is currentColor. The currentColor keyword enables us to get a reference to the current color. This can become very handy, and we will explore it in this video. • Understand why CSS3 doesn't have variables • Fathom the possibility of using the same color all over, maybe in CSS4 • Learn more about currentColor
    4:53
    The Transparent Color
    At first sight, the transparent color seems odd, but it's really powerful when used mainly in combination with the gradient interface in CSS3. In this video, you will be introduced to the transparent color and see it in action using linear-gradient interface. • The origin of the transparent color • Check out its updates and the current status • See it in action with gradients
    6:19
    CSS2 System Colors
    In our earlier videos, we talked about colors and web safe colors. There are some colors that are reserved for use of the OS/browser. Through the use of CSS2 system colors, we can ask the browser for the system colors. With this color set, we can incorporate system colors into our design. • Understand system colors • Introduced in CSS2, but deprecated in CSS3 • Check out how useful it is and what lies in the future
    2:44
    Color Accessibility
    As we wrap up another title, let's talk about accessibility. • Make your site accessible • Help people with color blindness and vision imparity • Make your foreground and background sharply stand out
    4:08

Similar Courses

More Courses by this Instructor