Como e por que usar classes utilitárias no CSS? Explicando na prática
ฝัง
- เผยแพร่เมื่อ 26 ส.ค. 2024
- Curso gratuito de programação WEB
↪discover.maykb...
Em todos esses anos como educador, sempre me vejo aprendendo coisas novas ao encarar alguns desafios. Nesse vídeo, além de codar um cartão de embarque desenhado por uma colega de trabalho aqui da Rocketseat, também aproveitei para estudar e colocar na prática a estilização de bordas de um jeito como nunca tinha feito antes usando CSS, de quebra vou mostrar como usar classes utilitárias, radial-gradient, mask, align-self, grid, grid-auto-flow e muito mais.
Foi um desafio bem legal e aqui eu te ensino como fazer.
Além disso, também vamos aprender a criar snippets no VS Code, aprender algumas tags do HTML como sup, dl, dt e time.
Me encontre em maykbrito.dev
![fellow fellow - PROUD feat. INK WARUNTORN [STRING QUARTET]](http://i.ytimg.com/vi/BQrVkMPTdHE/mqdefault.jpg)
![ง้อ (ALRIGHT) - FOURTH Prod. by URBOYTJ [ OFFICIAL MV ]](http://i.ytimg.com/vi/Qs8ZeV6Dqj8/mqdefault.jpg)
mayk é um monstro do css, eu quebraria a cabeça pra fazer esses cortezinhos no bilhete kakakakak
Eu simplesmente amo o conteúdo do Mayk, é impossível não aprender com esse cara velho, eu estava me acabando de tanto pesquisar sobre flex, grid e varias outras coisas depois de assinar com a rocketseat e ver os conteúdo aqui, eu simplesmente estou apaixonado estou me virando sozinho literalmente e isso é incrível, te estiga a continuar aprender.
Que alegria saber que vc está evoluindo! Segue firme! Pra cima 🚀
TOOOOPP DEMAIS... Maykão eu me vi em vc... cara sou muito assim.. não fico em paz... fico remoendo na mente.. vou fazer outra coisa.. e aquilo na mente... e eh assim.. pesquisar.. pesquisar até achar algo... cara o que vc sentiu ae.. saiba que teve outro aqui que ficou do mesmo jeito!!! Muito bom!!!!
Obrigado por compartilhar conhecimento!
1:12:40 Mano, que top. Parabéns pela persistência. Que bom que não tirou essa luta do vídeo kkkkk
Que video incrível. Muito bom ver que não somos só os meros mortais que às vezes travamos em algo, mas também os mestres kkkk Ganhou mais um inscrito! 👌🏻👌🏻👏🏻👏🏻
Maykão!!! Já viu isso? Animações de scroll com CSS puro (Scroll-driven Animations)
Isso é ser dev, matutar até fazer funcionar, parabéns.
Conteúdo bacana demais, Maykão!
Eu nao cheguei a testar para confirmar, mas eu acredito que a renderização em diferentes zoons e navegadores esteja criando algum tipo de pixel fantasma que replica um estilo ou causa alguma deformação ao layout.
Eu ja passei por isso quando eu criei separadores entre elementos. Aquelas barras verticais com efeito radial, onde ela comeca e termina transparente e a cor fica mais solida no meio. Em algumas partes do layout o separador aparecia certinho, já em outros ele ficava mais grosso. Por exemplo, o separador era de 1px, em vários locais ele aparece certo, mas sempre aparecia em algum lugar como se ele tivesse 1.5px ou 2px.
Acredito que isso seja um problema de renderização do navegador, pois no celular não acontecia este comportamento.
Uma "solução" que eu encontrei foi aplicar um tamanho menor ao separador com problemas, por exemplo 0.9px.
No caso deste cartão de embarque, pode ser que ele esteja criando um pixel fantasma entre os elementos de top-middle e middle-bottom por causa das bordas dashed. Neste caso eu tentaria aplicar uma margin negativa para top e bottom no elemento de middle com "-.1px" ou um pouco mais ate ele parar com esse comportamento.
Forte abraço.
Mais um ótimo conteúdo mayk, seria interessante você trazer também como se constrói um template personalizado
11:29 esse nhan nhan nhan 😂😂😂😂😂😂😂😂 Sempre tem que ter ASMR diferenciado kkkk
muito bom
cara, e o sass que quase ningém mais fala? eu não consigo viver sem
Sim Bro! Sass é incrível!
Mayk, tem um app pro mac, Rectangle é de boas para organizar as janelas, espero que te ajude
Carambaaa!! Aí mandou a braba!! Já baixei aqui, testei e já gostei! Valeu, Gui!
showww de bola
Será que um z-index não resolveria? z-index já me salvou algumas vezes kkkkkkkkk
Cara, eu nunca fiquei tão presa a um vídeo
show dev
Recentemente usei o ASTROJS para fazer um projeto mas percebi que ele tem a propria formatação (não obrigatória mas veio com a extensão dele) e muitas vezes fica bem ruim de se ver, tem alguma sugestão ?
Gostei ;)
Guerreiro tenho uma pergunta..
Porque tu nunca usa um Framework de CSS .
Bootstrap ou Tailwindcss?
Meu foco é em quem está precisando fortalecer os fundamentos
Usou overflow: hidden ou algum transform, normalmente isso ocorre por conta dos filha da mae do overflow, ai nao tem muito o que fazer se for isso
pq eu não tenho acesso aos códigos no figma? não consegui encontrar quando dou os clicks
O Figma mudou. Agora ele cobra pra acessar a ferramenta de mostra os códigos
1:09:00 Parece que a mask ignorou o box-shadow.
1:10:19 Era msm kkkkkkk
Mayk, como faz pra configurar o Figma pra ficar igual o seu?
Então, da época que gravei pra agora, o Figma mudou a plataforma deles :(
Ele cobram o "Dev mode" pra mostrar os códigos pra gente 🥹
@@maykbrito aaaaaa que pena, achei que era algum plugin ou algo do tipo
Fácil de reverter agora, tem aula gratuita no TH-cam ensinando pegar o plano de estudante gratuitamente (de forma legal), aí você cria um team e o projeto dentro dele. Aí o projeto dentro do team aparece o dev mode novamente!
@@denilsonsoares499 Muito bom, eu consegui
@@denilsonsoares499 Muito bom, eu consegui 😊