dcsimg
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


Tip of the Day
Language: Web
Expertise: Beginner
Jun 27, 2018

WEBINAR:

On-Demand

Building the Right Environment to Support AI, Machine Learning and Deep Learning


Adding a Mask in CSS

Masking tells your browser which asset elements should be visible, and is very practical for creating attractive shapes and layouts. Masking can be realized in three ways: using SVG elements, a raster image or using CSS gradients.

The main aspect of SVG is that can be scaled or transformed without losing quality.

img {
  mask-image: url("mask_image.png") linear-gradient(-45deg,
                        rgba(255,0,0,0) 10%, rgba(255,0,0,1) 80%);
  mask-image: url(#masking); /*reference to the element generated and defined in SVG code*/
}
Octavia Anghel
 
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date