CSS Masks Guide: Solutions to Common Design Challenges
In this video I show you how I've solved three pretty common design issues the past with the CSS mask-image property.
First, we'll add fade out effects to the top and bottom of a scrolling container using the CSS mask-image property and linear-gradients.
Then, we'll add an irregular shape to the edges of a banner. This time we'll use the CSS mask-image property and a combination of a linear-gradient and an SVG mask.
And after that, we'll use a mask-image to pull off a hexagonal style shape for what would be an ordinary square image of my beautiful face with a single SVG! Alright, let's get to it!
------------------------------------------------------------------------------
🔗 Demo Links:
The fade effect: https://codepen.io/brianmtreese/pen/R...
The banner edge: https://codepen.io/brianmtreese/pen/X...
The hexagonal image: https://codepen.io/brianmtreese/pen/B...
------------------------------------------------------------------------------
📖 Chapters:
0:00 – Introduction
0:50 – CSS mask-image explained
1:23 – Using CSS mask-image with linear-gradients to create a fade effect for a scrolling container
5:00 – Using an SVG, a linear-gradient, and CSS mask-image to create banners with irregular shaped edges
8:40 – Using an SVG and CSS mask-image to create a hexagonal shaped image
------------------------------------------------------------------------------
#css #html #coding
Смотрите видео CSS Masks Guide: Solutions to Common Design Challenges онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Brian Treese 15 Сентябрь 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 33 раз и оно понравилось 1 людям.