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.
About The Author
Ben Fhala discovered his passion for data visualization while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of the online video training school and an Adobe ACP. He enjoys spending most of his time learning and teaching, and has a love for visual programming and visualization in general. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world.
He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.
There are many ways to describe what a color is. The most basic way is using a name.
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.
In this video, you will learn a more modern way of representing RGB values. This new way will enable you to incorporate alpha channels.
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.
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.
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.
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.
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.
As we wrap up another title, let's talk about accessibility.
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.