Máscaras com CSS clip-path e SVG

Máscaras com CSS clip-path e SVG

11.790 Lượt nghe
Máscaras com CSS clip-path e SVG
Tutorial mostrando como utilizar o clip-path para aplicar um SVG como uma máscara de uma div com CSS. Nele eu exploro diferentes formas de se aplicar as mesmas e os possíveis problemas que podem surgir. 00:00 Projeto 00:30 Estrutura Inicial 00:45 Máscara border-radius 02:54 Estrutura clip-path 04:00 clip-path: circle() 04:40 polygon() 05:45 Figma SVG 08:43 clipPath SVG 10:15 clip-path: url(#mask) 12:10 Responsividade clip-path 14:00 clip-path relativo 15:20 clip-path converter 16:25 Problemas 17:23 Origamid Arquivos https://github.com/origamid/publico/tree/main/clip-path Exemplo: https://origamid.github.io/publico/clip-path/ Clippy https://bennettfeely.com/clippy/ Relative clip-path https://yoksel.github.io/relative-clip-path/ Figma https://www.figma.com/ Cursos da Origamid https://www.origamid.com/cursos/