O senhor sabia que pode triplicar o coração das coisas no CodePen? Temos esse pequeno recurso não tão oculto desde sempre. O senhor pode clicar no botão de coração em qualquer Pen (ou Projeto, Coleção ou Publicação) no CodePen para mostrar ao criador um pouco de amor, mas pode clicar nele várias vezes para dar um coração ainda maior. Isso é útil por alguns motivos. Ele é calculado nos algoritmos de popularidade e, além disso, o senhor pode ver os itens que o senhor adorou em diferentes níveis.
Ao examinar o meu recentemente, juntamente com o fato de que nosso Os melhores corações para 2018 que caiu recentemente, me fez pensar que eu deveria fazer outro post sobre meus favoritos pessoais! Aqui estão eles!
Veja a caneta Bob Ross usando o fio dental, como um chefe (Pure CSS) por Steve Gardner (@ste-vg) sobre CodePen.
Lembro que meu professor de pintura na faculdade usava uma camiseta que dizia “Art is dead” (A arte está morta) com as datas de nascimento e morte de Bob Ross nela. O senhor era uma lenda da PBS. Steve Gardner capricha na positividade feliz de Bob, fazendo com que ele faça a dança brega que define os anos 2010. Também soube recentemente que o velho Bob provavelmente também era popular, pelo menos em parte, por ser o tão bom para ASMR, um fenômeno estranho de formigamento e calma que ganhou grande destaque no YouTube ultimamente.
Veja a caneta <img intrinsicsize&rt; fights jank por Eric Portis (@eeeps) em CodePen.
Por mais que eu ame toda a exploração artística no CodePen (e eu adoro it), o nerd desenvolvedor front-end focado em desempenho e amante de layout que há em mim gosta muito de canetas de exploração de tecnologia, como esta de Eric Portis. <img intrinsicsize> é um novo atributo HTML que está começando a ser lançado experimentalmente e que tem o poder e o potencial de resolver o problema de carregamento de imagens, o que é muito importante, se o senhor quer saber.
Veja a caneta Flexbox One Column Switch por Heydon (@heydon) sobre CodePen.
E por falar em exploração amorosa de layout, Heydon Pickering publicou recentemente uma técnica muito interessante com flexbox em que uma linha de itens pode mudar instantaneamente de uma linha horizontal para uma linha vertical na largura de pixels do elemento pai que o senhor deseja (em vez de depender de uma consulta de mídia no nível do documento). Portanto, como uma consulta de elemento muito básica, que todo mundo quer. Ele funciona tendo as larguras dos elementos efetivamente 0 e permitindo que eles cresçam para preencher a linha horizontal, ou um número supergrande forçando cada elemento a uma nova linha, formando uma linha vertical. Se o senhor quiser ver como o dimensionamento é calculado, recomendo que vá até o Firefox DevTools para ver.
Veja a caneta Pure CSS 4 Designers por Julia Muzafarova (@miocene) sobre CodePen.
Julia Muzafarova faz cenas animadas absolutamente extraordinárias com uma quantidade incrível de cuidado e detalhes. Esta é ótima porque tem muitas cenas diferentes em uma só! Mas é muito difícil escolher uma favorita, então o senhor deve procurar outras no perfil dela.
Ver a caneta css doodle art por yuanchuan (@yuanchuan) sobre CodePen.
Yuan Chuan é sempre muito impressionante para mim, primeiro porque eles são muito prolíficos (tantas demonstrações!), e segundo porque eles basicamente inventaram uma maneira de alimentar essa natureza prolífica: o <css-doodle /> componente da Web! Essencialmente, é uma meta linguagem que combina informações de estilo e funções personalizadas que ajudam com esse estilo. Os resultados, com tão pouco código, são sempre impressionantes.
Veja a caneta Vários planos de fundo, vários modos de mesclagem por Dan Wilson (@danwilson) sobre CodePen.
Em uma conversa com Dan Wilson há pouco tempo, estávamos falando sobre como o filtro é legal, mas é estranho que o senhor não possa usar os poderes do filtro para imagens de fundo. Digamos que o senhor queira colocar um fundo em escala de cinza, mas não o elemento inteiro (o que poderia fazer coisas como deixar os links azuis em cinza). O senhor pode fazer isso usando um pseudoelemento como um plano de fundo. Há outra maneira, talvez ainda mais limpa, que é usar o modo de mescla de plano de fundo e várias imagens de plano de fundo. Se o que o senhor deseja é uma escala de cinza, poderá usar um modo de mescla de cores em uma imagem sobre uma cor preta plana.
Dan Wilson foi ainda mais explorador nessa caneta, com imagens em camadas, gradientes e cores, permitindo que alguém que esteja brincando com isso altere as cores e a mistura aplicada.
Veja a caneta Formigas marchando em SVG por Maxim Leyzerovich (@round) em CodePen.
Acho que esse padrão clássico de interface do usuário é algo fascinante para se tentar usar na Web. Normalmente, “formigas marchando” é algo que o senhor veria no Photoshop ao selecionar uma parte de uma imagem. Não é tanto um padrão de interface do usuário na Web. Mas aqui Maxim Leyzerovich consegue fazer isso usando alguns estilos muito simples, mas enganosamente inteligentes. Há pequenas coisas aqui, como a necessidade de dobrar a largura do traço externo para lidar com o fato de que os traços se estendem sobre as linhas que criam e, portanto, quando o senhor usa coordenadas como 0,0, metade do traço será cortado.
Quais são alguns dos seus favoritos?
