Snippets Pub - A Developer Hangout | Snippets / Transparency

Snippets | Nomads | Projects | Applications

Snippets : Transparency

CSS : Opacity

Well the Corollary of "Transparency" is "Opacity" — the first is how much you can see through, and the second is how much you can't.
CSS allows us to create transparent effects by setting the Opacity on a scale from 0 (transparent) to 1 (opaque) in decimal format.
So to fade an image and see its background (if there is one,) we set a lower opacity. This is often used with a hover effect to make an image jump out when the mouse moves over it. Something like this:


.imagediv {
   background-image: url("watermark.jpg");
}

img {
   opacity: 0.6;
}
img:hover {
   opacity: 1.0;
}

CSS : transparent

We can also use "transparent" as a color. So if you have things layered, what is behind the element can be seen through it.
Be careful - it is easy to make links, buttons and text boxes useless by having a transparent element layered on top of them!


div {
   background-color: transparent;
}

CSS : rgba()

Using rgba(), we can take any color that we can define as an RGB color, but add a transparency value as well.
This fourth value works just like Opacity: "0" = transparent, "0.5" = 50% transparent/opaque, and "1.0" = Solid
This does not work on all browsers, so test your page with just rgb(), then add rgba().

If you put them in order in your CSS file you are covered in both cases.
(If the browser doesn't support rgba() you have already defined your rgb() so it uses that.)


div {
   background-color: rgb( 28, 42, 54);
   background-color: rgba( 28, 42, 54, 0.8);
}

CSS : linear-gradient

Not fancy enough for you yet?

How about the gradient-fade we use on the Splash image you see on the top left (desktop) or at the bottom of the page text (mobile/tablet?

Linear-Gradient provides an even transition from one color to another (or even multiple, like a rainbow)
Here we just use rgba(0,0,0,0) for transparent (or whatever level of opacity you desire by changing that last value.
The last point with linear-gradient is we can pick the direction of the fade—top-bottom or even bottom-left to top-right!
[ You might look up radial-gradient and conic-gradient as well ]

For our effect we combine CSS on two elements using "linear-gradient" with a "transparent" color.

First a background for the parent div, using linear-gradient to fade from black to transparent.

This makes sort of a shadow effect seen through the <img> in the div, where it is transparent.

The Second is the image itself, set to fade from one vale to another we define in the CSS.

So here is the code for the Splash-Box with its faded-in image:


SplashBox{
  position:       relative ;
  z-index:              30 ;
  float:              left ;
  top:                62px ;   
  width:              12vw ;  

  /** Background Fade-in from Transparent bottom left to opaque top right **/  
   background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,1));
}   

SplashBox img {
  display:           block ;
  /** Image Fade to Transparent top right to bottom left**/
  mask-image: linear-gradient(to bottom left, rgba(0,0,0,1), rgba(0,0,0,0)) ;
}

Okay, Super-Nerds...

Yes, we add yet another trick: the fade can shift, rather than start at the edge we can start some distance in, for example at 20%, like this:


SplashBox{ 
  /** Background Fade-in from Transparent bottom left to opaque top right -- Starting 20% from bottom left **/  
   background-image: linear-gradient(to top right, rgba(0,0,0,0) 20%, rgba(0,0,0,1));
}