Topics Search

The Power of the rgba() Color Function

The Power of the rgba() Color Function
Views: 0
One of the things that I'm really interested in about CSS is the new color-mod function. It will give us the ability to do color manipulations right in the browser. For example, when hovering over a button, you can change the color by using something like color: color(black darkness(50%));, without the use of any CSS preprocessor like Sass.
Sponsored Links:

Similar posts...


Semi-transparent background color using RGBA

Semi-transparent background color using RGBA Icon
One day may need to make a semi-transparent background color for a specific block. But how to do this correctly using recent features in CSS3? CSS3 allows you to specify color using RGB and RGBA. At the same time, we must specify the degree of each color component. Each color component is expressed by one byte (from 0 to 255 f.y.i).

Scrollbar Color

Scrollbar Color Icon
Adding color to your webpage scrollbar adds a little flavor to your page. It also gives you the power to match the scrollbar with your website's design colors!

Color Values: How to Define a Color in CSS

Color Values: How to Define a Color in CSS Icon
There are many different scenarios in which you’d have to define a color in your CSS — this probably most commonly happens with the color or background-color property, but it’s certainly used with others as well. Defining your color values is the easy part, but deciding how to do so can sometimes be tricky, because there are so many different ways to define a color value using CSS. Here are all your options:

AtoZ CSS Screencast: Color

AtoZ CSS Screencast: Color Icon
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.

How to use transitions

How to use transitions Icon
Learn how to use CSS transitions. The syntax is pretty straightforward, you specify the property you want to animate, all or border-radius or color or whatever, the time to run, then the transition timing function. The options for the timing function are shown below.

Manipulating Sass Colors With Operators And RGB Functions

Manipulating Sass Colors With Operators And RGB Functions Icon
It’s been a few years since I started working with Sass and while there are a lot of reasons why I continue to use it, the built-in color functions are easily among my favorite features of the language. You can use them to mix two colors or lighten or darken another color. You can even use them to build complex color schemes from a single color.

Hexadecimal Color Notation On The Web

Hexadecimal Color Notation On The Web Icon
When designing elements for your webpage, you will often be called upon to specify a color. For example, the code for a span shown below specifies that the color of the text within the span will be yellow.

Change color of selected text

Change color of selected text Icon
The color property is used to change the color of text on the page, but what about the color of selected text? Using the ::selection pseudo element, text highlighted with the mouse can be styled. There are only a handful of properties that can be altered when styling the selected text.

Using CSS Color Keywords

Using CSS Color Keywords Icon
One of the two oldest methods of applying color to web pages, named colors remain very useful in web design and development today. Consisting of 149 distinct keywords (shown above, with their hexadecimal equivalents) CSS named colors have a few special features: First, color keywords are used in the same way in CSS as every other color system;

Reverse Text Color Based on Background Color Automatically

Reverse Text Color Based on Background Color Automatically Icon
Over the weekend I noticed an interesting design for a progress meter in a videogame. The % complete was listed in text in the middle of the bar and didn't move. But that text was the same color as the background of the bar that was filling up from left to right. It seemed like the background was going to make the text invisible once they overlapped, but instead, the text color reversed to be white instead anywhere it overlapped with the background.