The magical function of CSS Technique-rgba

Let's take a brief look:

Rgba () function is often encountered in development, this article also made a more detailed interpretation and a series of applications.

The principle of its work is analyzed: it is a box with a certain degree of transparency;

The difference between the Rgba () function and the opacity attribute (opacity) is also compared: with opacity, all child elements are affected;

In practice, It is also more convenient to use the Rgba () function in some places: custom themes, article titles, buttons, gradients, sub-elements, deep/shallow effects in the palette, and image effects for the website header.

finally, It is pointed out that the use of Rgba () should be noted: such as compatibility, color contrast check and so On.

Original: the Power of the Rgba () Color Function in CSS

CSS Technique-rgba function Cheuchen translation

　　the new CSS Color Configuration function is a very interesting feature that gives us the ability to manipulate colors directly in the Browser. for example, when hovering over a button, you can use Color:color (black darkness (50%)) to change the color without using a CSS preprocessor such as Sass.

　　but the browser now does not support this color function, we can only temporarily use POSTCSS to compile it into a regular color. of course, We can also use the rgba () function in CSS to achieve a similar effect, let's look at the specific how to do it.

Working principle

In the design software, if we separate a white box with a certain amount of transparency and a black box on a larger blue box, they will turn into light blue and dark blue, respectively.

This is because when the transparency of the small box is high, the foreground and background colors will be mixed together. If we turn the background color from blue to green, can you think of a result?

As you can see, when the background color turns green, the color of the small box becomes light green and dark green, respectively. similarly, we can also create deeper or lighter colors by changing the transparency of the foreground color. now, let us delve into some practical examples based on this basic premise.

Combining theory with practice

In the example above, we only changed the opacity attribute (opacity) in order to keep it simple. In fact, in the actual design, it is more common to change rgba() the alpha Value. Such as:

. Header {  Background:rgba (0000.5/** * }

　　Here we use the background color (background) instead of transparency (opacity), because if you use opacity, then all child elements will be affected, which should be avoided. (when The value of the opacity attribute is applied to an element, the element, including its contents, is treated as a whole, even if the value is not inherited by the quilt Element.) therefore, an element and the child elements it contains will have the same transparency as the element background, even if the element and its child elements have different opacity attribute Values. conversely, If you use the alpha channel of background, you can guarantee that only the specified elements will be changed.

Note: in the demo below, in order to make the presentation more concise, the Rgba () function in Sass will be Used. Such as:

. Elem {  0.5);}

This will be compiled as:

. Elem {  Background:rgba (2552552550.5);}

Customizing the theme for the site header

The first rgba() usage scenario is a custom theme for the header of the Website. In Trello, use the rgba() background color assigned to the head child element (logo, search input, buttons):

. Search {  Background:rgba (2552552550.5/* */}

With this, we can change the theme by changing the color of the header background only, because the color of the child elements with transparency will change as Well.

In our example, we will experiment in developer tools in a similar way to Trello Head.

Note that in the following two Heade r, the background color of the child elements is Different. By changing the background color of the parent element, we can customize the header theme very easily.

For more information, Please click here to view the link

See the Header demo created in Codepen by Ahmad Shadeed (@shadeed).

Article title

In this example, the use rgba() will help to change the color of the following elements:

• Top and bottom borders

• Background of the intermediate wrap element

• Background of the category link

. Parent {background: #5aaf4c;/*Parent Background*/Box-Shadow:inset08px0 0Rgba255,255,255,0.5), inset0-8px0 0Rgba255,255,255,0.5);/*top and bottom borders*/}.contain {background:rgba (0,0,0,0.1);}. Category {background:rgba (255,255,255,0.5);}

For example, article Header.

Button

When customizing the theme of a button, you can use the rgba() style to change the border and shadow when the hover and focus buttons are Changed.

. Button {background: #026aa7; Box-shadow:inset0-4px0 0Rgba0,0,0,0.2);}. Button:hover {box-shadow:inset0-4px0 0Rgba0,0,0,0.6),0 08px0Rgba0,0,0,0.5);}. Button:focus {box-shadow:inset03PX 5px0Rgba0,0,0,0.2);}

such as Buttons.

Gradient

Another useful scenario is to set a solid color for the background, and then add a pseudo-element with a rgba() background color to create a gradient effect.

 .elem {background:green;}.  Elem:before {content:    0  ;  Top:  0  ;  Width:  100 %;  Height:  100 %; Background:linear -gradient (to right, rgba (255 , 255 , 255 , 0.2 ), rgba (255 , 255 , 255 , 0.7   

This method can also help us to simulate the gradient animation effect only if the background color is Changed.

. Elem {  /**/  animation:bg 2s ease-out  Alternate infinite;} @keyframes BG to   {    background:green;  }}

See the gradients created in Codepen by Ahmad Shadeed (@shadeed).

Child elements

If there is a navigation list in the header, we can add a rgba() defined background color to the navigation bar. This allows the navigation background to be transparent, blending with the background of the parent Element.

See the Sub Element created in Codepen by Ahmad Shadeed (@shadeed).

This method can also be used to achieve hover effects:

For example Hover Effect.

Deep/shallow Effects in Palette

We can use this method to generate different shades in the palette, just to overlay a pseudo-element with a specific color on a solid color box rgba() .

For example, Color Palette.

Image effects

If we want to make a picture darker or lighter, you can also use a pseudo- rgba() element with a background color.

By using a colored background, we can produce a color effect. in addition, we can use mix-blend-mode attributes to mix backgrounds and pictures to get different effects.

Before using mix-blend-mode , be careful to check compatibility:

. Elem:before {  Background:rgba (0001);  Mix-blend-mode:color;}

　　if mix-blend-mode not supported, the picture will become a black piece. therefore, This effect is best used as an enhancement rather than as a dependency. when using this method, you can use @support or Modernizr.

@supports (mix-blend-mode:color) {  /**/}

such as Images.

customizing themes with CSS variables

If you use CSS variables (custom attributes) for the parent element, all child elements change when the variable Changes. For example:

: Root {  --brand-color: #026aa7;} /*  */@supports (--color:red) {  . elem    {var(--brand- color);}  }

varcolors = ["#026aa7","#5aaf4c","#00bcd4","#af4c4c"];varColoroptions = Document.queryselectorall (". Option");varColorlabels = Document.queryselectorall (". Option + Label"); for(vari =0; I < coloroptions.length; i++) {  /*Add an event listener to each radio button*/Coloroptions[i].addeventlistener ('Click', changecolor); /*Add A value to each radio button based on colors[] array*/Coloroptions[i].value=colors[i]; Colorlabels[i].style.background=colors[i];} function ChangeColor (e) {/*calling the root element and set the value of a specific Property. in Our Case:--brand-color*/Document.documentElement.style.setProperty ('--brand-color', e.target.value);}

By combining CSS variables rgba() , We can dynamically change the layout and color without assigning a new color to each Element.

For example, the Header-css variable.

Need to consider the place of the backing color

Although the Browser's support for CSS colors has reached 97.39%, there is a need to provide backup for unsupported Browsers.

. Elem {  background: #fff;   Background:rgba (2552552550.5/**} 

Color contrast Check

We should ensure that the contrast between elements conforms to the accessibility standard, after all, sometimes the use rgba() will get hard to identify Colors. You can use the Contrast checker tool like the Lea Verou to help determine whether the color meets the accessibility Criteria.

The magical function of CSS Technique-rgba