SEM JAVASCRIPT - Collapse com HTML e CSS em 5min!
Criando um componente de Collapse completamente funcional em menos de 5min apenas com HTML e CSS 🥳
Nesse vídeo vou mostrar como isso funciona na prática usando as ainda desconhecidas tags `details` e `summary` disponíveis no HTML e estilizando tudo isso com o nosso bom e velho CSS.
!IMPORTANT: Por se tratar de um elemento nativo, essas tags são acessíveis e semânticas por padrão ❤️
Além disso dá pra brincar bastante e fazer coisas bem legais usando CSS durante as transições de estado.
E uma dica extra:
Funciona muito bem em Markdown e portanto dentro do READMEs dos projetos
00:00 Introdução
01:05 Collapse com `details` e `summary`
05:20 Suporte dos navegadores
🔹 Codepen: https://codepen.io/felipefialho/pen/y...
🔹 CSS Components: https://css-components.felipefialho.com/
🔹 Versão em texto: https://www.felipefialho.com/blog/htm...
🔗 MEU BLOG
🔹 O fodástico :not(): https://www.felipefialho.com/blog/css...
🔹 É possível utilizar componentes desenvolvidos apenas com CSS? (Escrito em 2014): https://www.felipefialho.com/blog/e-p...
➡️ REFERÊNCIAS
🔹 MDN: https://developer.mozilla.org/en-US/d...
🔹 Can I Use: https://caniuse.com/?search=details
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
☕️ GOSTOU DO CONTEÚDO? Aceito um café 😍
Pix: hi@felipefialho.com
PicPay (qualquer valor): https://app.picpay.com/user/felipe.fi...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
➡️ SOBRE MIM
Blog: https://felipefialho.com/blog
Github: https://github.com/felipefialho
Twitter: / felipefialho_
LinkedIn: / felipefialho
Front-end BR: https://github.com/frontendbr
On this page of the site you can watch the video online SEM JAVASCRIPT - Collapse com HTML e CSS em 5min! with a duration of hours minute second in good quality, which was uploaded by the user Fê Fialho 23 April 2021, share the link with friends and acquaintances, this video has already been watched 6,933 times on youtube and it was liked by 476 viewers. Enjoy your viewing!
