Além dos retângulos ou quadrados: CSS Shapes

Com CSS, estamos acostumados a lidar com caixas dentro de caixas e, lidar com outras formas, pode ser bem trabalhoso. O CSS Shapes veio justamente para facilitar muito a sua vida e te ajudar a criar layouts "fora da caixa". Nessa talk, vamos aprender como fazer o nosso texto acompanhar outros formatos (círculos, polígonos, elipses) utilizando CSS Shapes.

Transcript

1. Além dos retângulos ou quadrados: CSS Shapes Jullia Saad
2. sobre mim dev front-end Codeminer 42 / mestranda UFSCar lado humano dos rolês patinadora contatos @julliasaad - GitHub, Twitter, LinkedIn e Facebook
3. Adobe, W3C, 2012 especificação CSS Shapes: sendo o objetivo principal facilitar a criação de layouts ainda mais complexos
4. Candidate Recommendation (CR) CSS Standards Process - CSS Tricks CSS Process - W3C status da especificação “[...] especificação é exaustivamente testada pelo CSSWG e browsers que optam por implementar essa especificação”
5. O CSS Shapes define formas geométricas em torno das quais os textos fluem CSS Shapes Module Level 1
6. shape-outside
7. shape outside - compatibilidade
8. circle() ellipse() inset()
9. shape-outside: circle()
10. shape-outside: ellipse(...)
11. shape-outside: polygon(...)
12. we need to use float
13. shape-outside example
14. exemplo simples
15. exemplo de bichíneos examplo clip-path + shape-outside clip-path + shape-outside
16. clip-path css-tricks codepen “permite que se recorte partes de um elemento”
17. http://bennettfeely.com/clippy/
18. css venn diagram
19. Referências https://drafts.csswg.org/css-shapes/ https://tympanus.net/codrops/2018/11/29/an-introduction-to-css-shapes/ https://www.html5rocks.com/en/tutorials/shapes/getting-started/ https://www.sarasoueidan.com/blog/css-shapes/
20. obrigada :)