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
github.com/origamid/publico/t...
Exemplo:
origamid.github.io/publico/cl...
Clippy
bennettfeely.com/clippy/
Relative clip-path
yoksel.github.io/relative-cli...
Figma
www.figma.com/
Cursos da Origamid
www.origamid.com/cursos/
31 май 2024
