CSS moderno: animações sem marquee e sem drama
CSS poderoso: de marquee a animações com variáveis e calc
Resposta direta
CSS poderoso: de marquee a animações com variáveis e calc. Eu tenho muito a entender aqui e espero que você esteja animado a seguir essa jornada comigo para descobrir como você pode usar o css para fazer algo tão absurdo porque isso é uma insanidade genuína alguém vai ter que pagar minhas dívidas de terapia para isso, então uma palavra rápida de hoje's sponsor e.
Do marquee ao CSS moderno
Quando o episódio chega em «Do marquee ao CSS moderno», o gancho útil para css moderno animações sem javascript é transformar o trecho em decisão — não em resumo genérico.
Eu ainda me lembro de dias em que se você queria que as coisas se animassem na sua página, você teria que usar um marquê para isso. De modo de luz e de dor, para scroll smooth, para scroll snapping, para comportamentos esticados, até mesmo fazer transformações 3D. Eu tenho muito a entender aqui e espero que você esteja animado a seguir essa jornada comigo para descobrir como você pode usar o css para fazer algo tão absurdo porque isso é uma insanidade genuína alguém vai ter que pagar minhas dívidas de terapia para isso, então uma palavra rápida de hoje's sponsor e então vamos começar de novo não tem nunca sido melhor tempo para ser um desenvolvedor com isso, eu sinto que temos que tomar mais decisões do que costumávamos ter que fazer que framework usamos que database usamos onde hostamos aquele database onde hostamos Vamos começar o código. Se você é como eu e está começando a ficar cansado de pular entre todos esses serviços diferentes, o sponsor de hoje está aqui para te ajudar.
Eles têm uma nova plataforma de templates onde você pode, com um clique, deploy a starting project for basicamente qualquer ferramenta ou ferramenta que você queira usar, de Next.js para PocketBase para Mongo para Moodle eu tenho memórias com Moodle, usamos isso quando eu estava na escola de escola, é louco ver isso aqui eles têm um monte de opções através disso, mas outra coisa realmente legal que está na cor aqui meu rosto está se cobrindo um pouco Firecrawl eles são realmente outro patrocinador do canal e estão completamente abertos, então agora em vez de usar a infra de Firecrawl que honestamente neste caso você deveria ser realmente barato, mas se você realmente precisa manter as coisas internas e self-hostar, clique em deploy, escolha a região que você quer que seja agora está se deslocando e como você vê com algo como firecrawl não é apenas um projeto que tem que se deslocar porque precisa de um database um api e também um server que funciona bem para fazer o browser do headless e esses templates vão encostar todas essas coisas para você na demanda e lembre-se que eles estão encostando serviços reais para você em real servers eles não estão encostando algumas lambdas e pagando um monte de dinheiro para isso eles estão apenas te dando um server com uma interface muito melhor para gestioná-lo Eles até lidam com a coisa do multi-cloud, como colocar o Cloudflare em frente do seu deployment para que você possa ter proteção de DDoS ou inibir ou desligar um CDN com literalmente um clique para que seus assentos estáticos possam estar no lado esquerdo em vez de serem do seu server. Se você não está usando Savala, você já passou um monte de tempo fazendo todas essas coisas sozinho, então você vê o quão útil é, ou você ainda não fez essas coisas e seu serviço é mais lento e menos relativo do que deveria ser. Se você não acredita em mim, tente isso sozinho, você vai ganhar 50 dólares de crédito gratuito em soidev.link slash savala. File index.pug, eu estou assumindo que isso é usado para gerar o conteúdo, porque tem que fazer um monte de loops para adicionar todos os blocos e coisas no HTML.
Desde que a página tem 35 mil elementos de labelação e 5.840 elementos de input type radio, esses elementos radio são o motor de armazenamento do estado. Isso é realmente muito inteligente, porque os inputs têm um estado e esse estado é acessível em CSS, porque você usa ele para aplicar diferentes estilos. Então quando você clica em algo, você está tocando um rádio em e fora, e esse toque de rádio tem uma valia que pode ser usada para determinar o que acontece. Quando o botão de radio da pedra é chequeado, todos os elementos de cubo, exceto aqueles com a classe .stone, estão escondidos.
Feche «Do marquee ao CSS moderno» com um experimento de 30–90 minutos ligado a css moderno animações sem javascript: artefato + critério binário — sem inventar número fora da fonte.
Na prática
Information gain: use só o que a fonte afirma sobre css moderno animações sem javascript; scaffolding editorial não inventa número.
Variáveis e max rotation
«Variáveis e max rotation» é onde css moderno animações sem javascript deixa de ser vibe e vira critério. O material empurra execução observável, não plateia.
Zero, zero, coluna três, o que significa que pode ter um de oito valores, o erro é espaço claro, os outros são tipos de material, seis tabelas, um para cada lado do cubo e aqueles tabelados quatro atributos iguals, alcançam o próximo bloco de o tipo material visível atualmente selecionado, a forma como a rotação funciona foi na verdade uma das coisas sobre as quais eu estava mais curioso, como eu sei que você pode fazer algumas coisas legais de transformação no browser, mas sem javascript, como você sabe quando começar e parar? A coisa que você não pode fazer é clicar e desligar porque é CSS, mas fazer tudo funcionar e animar de forma correta em três dimensões é tão louco. Agora, você pode ter preocupações aqui que eu estou fazendo decisões que eu estou clicando nisso, mas a maneira como este Powerpoint é instalado, toda a outra área é bloqueada, então eu posso clicar de forma random, essencialmente, e o Powerpoint vai apenas avançar a computação. Então, esse foi o input 1.1, então isso deveria acabar sendo aceitável, e podemos ver que ele, de fato, acaba em um estado de aceitação.
Por exemplo, esta carta diz que quando a máquina de Turing está em estado 0 e lê um 1, ela deve escrever um branco, mudar para o lado direito e depois mudar para o estado 2. Mas se mudarmos onde esses buracos estão, podemos fazer com que a máquina de Turing faça algo diferente e, essencialmente, não sejam uma função de transição de qualquer outra máquina de Turing. E a maneira como esse CSS Minecraft isso é criar todas essas tabelas e como as tabelas para inpots têm propriedades que te permitem aplicar diferentes estilos você pode fazer coisas realmente legais com eles eu quero entrar no código mas vamos fazer isso ele escreveu o scss eu estou assumindo que isso é o que se torna o css compilado porque isso é apenas 485 linhas e o actual css é na verdade quase o mesmo interessante mas eu tenho certeza que o scss é um pouco mais legível eu não acho que ele teria incluído de outra forma, pelo menos essa é a minha suposição Então criamos as variáveis, como a imagem de pickaxe, pedra, etc. Você tem at slash air, imagem de fundo, var pickaxe, hover, outline two pixels solid silver, as input type radio checked, outline two pixels solid white.
Claro, AGI pode fazer bugs e apps de todo tipo, mas até que ele tenha tempo de usar Doom e TypeScript ou fazer Minecraft com CSS, não é verdadeiro AGI. Sim, podemos ver aqui que Label 4 é igual a, se meu rosto não cobre, Label 4 é igual a Cubes Layer 7, Row 7, Column 6, Stone, Class, Front. Ou terra, ou terra, ou lago, ou árvores, ou terra, e todos eles podem ser, então para cada desses cubos, pode ser qualquer uma dessas coisas, então se esse é o toque que está ligado porque tem esse tipo de rádio de entrada, posso desbloquear isso daqui ainda? O que eu poderia fazer ao invés disso é se selecionar uma outra pedra aqui, eu vou minerar isso para que se esqueça, mas ainda estamos aqui, eu vou mudar o cubo de terra e vou desligar o display none e isso deveria ter renderado isso, oh, este display não está agora, sim, este é o display não, hum, Isso é complexo o suficiente para que minha pesquisa rápida e desligar coisas de cima e de fora não pareça ser suficiente para desmaiá-la.
Depois de «Variáveis e max rotation», anote uma métrica (tempo, taxa, retries ou conversão) para css moderno animações sem javascript e rode um ciclo curto antes de escalar.
Na prática
CSS poderoso: de marquee a animações com variáveis e calc.
Display none e render
Sob o ângulo de «Display none e render», o que importa em css moderno animações sem javascript é o próximo passo testável. Se não muda prioridade em 48h, ainda é ruído.
Para cada bloco e blocos, se tem um bloco número de cubo e o tipo de rádio de entrada é chequeado, imagem de fundo é feita para isso. Eu não estou jogando localmente, mas eu vou dizer o que acontece se eu desligar isso, mas é não trivial para conseguir que esteja funcionando e automaticamente se atualizar. Isso é muito engraçado quando você lembra da história de Minecraft porque Minecraft começou como um app de Java no browser Imagine se eles só construíssem com CSS, como mais extensível poderia ter sido A performance é 10x melhor do que Minecraft, na verdade Isso é muito engraçado, se você desligar o Preserve 3D Você só vê em uma visão flacida Oh, e se você desligar Perspective, você vê uma grada de 2.5D flacida, isso é tão legal Isso parece que você está jogando um. Ter um estado para isso é ter que ser um filho porque como eu não posso referenciar uma variável que tem que referenciar um pai então agora ele pode referenciar todos os dados referenciando todos os pais é meio louco ok eu queria brincar com isso na minha própria caixa de pão, mas eu estava lutando para hacká-lo através do browser, então eu apenas peguei este pen de código random em vez de jogar e agora temos uma linda transformação de css aqui e não js então eu posso Minimize o editor JS e foque aqui no CSS.
Então aqui vemos o transform, perspectiva 75, rota 18°, se eu mudar isso para 50°, fica mais rotado, tem uma cor de borda, cor de fundo, pinto, aqui vamos nós. Eu ainda estou tão empolgado com o CSS 3D, especialmente quando você começa a adicionar animações, pode ficar muito poderoso, como este exemplo de padrão mágico. Sim, eu adoro esse tool, por exemplo, usamos isso para muitas das gradações e coisas para T3 Chat, o padrão mágico é super útil aqui, tem uma pequena animação e novamente, não tem JS porque você pode fazer muito trabalho de animação no CSS agora você pode também isso é realmente super simples transformar a perspectiva rotar a radiação de ordem e a transição transformar um segundo e zero e você tem no hover a perspectiva muda de 1500 a 3000 e rota para 5 graus em vez de 15. Vamos mudar para zero e teremos o default de 50 para exagerar um pouco Como legal isso é, com CSS puro.
Mas também me faz simpatizar com as pessoas que têm que tentar esguiar isso coisas no browser, como imagine escrevendo o código para que isso funcione Eu nunca iria ter que fazer isso. A perspectiva é como você quer que o o efeito de varrador da câmera as coisas a origem pode mudar também oh isso é tão legal nós temos css literalmente não como oh você pode saber que temos css literalmente nós podemos colar tudo no o browser de tantas maneiras legais ainda estamos lutando por indexar o z todos os dias como nós chegamos aqui isso é tão legal, alguém que diz browsers e tipo stuff web é fácil não fez nada divertido porque isso Isso é tão legal. Eu sei que é estranho dizer, mas eu realmente espero que vejamos mais coisas 3D implementadas com gosto no browser Porque quando feito certo para layer e perspectiva, apenas ter um pouco de animação nas coisas quando você avança sobre elas É realmente legal. Animações dirigidas a 3D de scroll é tão legal é tão legal que você pode fazer tudo isso sem precisar de javascript agora o laptop está ligado ao css2 é claro que é jay hay É assim que você é como pessoa.
Se «Display none e render» não caber na agenda, corte escopo de css moderno animações sem javascript. Aprendizado curto publicado vence hype longo consumido.
Quando ainda usar JS
A seção «Quando ainda usar JS» amarra css moderno animações sem javascript a trade-offs reais: o que cortar, o que medir e o que ignorar na primeira semana.
CSS se torna cada ano mais e mais poderosa. Você pode fazer coisas reais com apenas CSS? Você pode replicar seu database SQL com CSS? Você pode replicar seu JavaScript com CSS?
Você pode replicar seu engine de jogos com CSS? Bem, eu tenho uma coisa interessante para mostrar para vocês hoje. Eu não tenho certeza sobre a coisa do sequel, mas parece que seu engine de jogos pode ser apenas CSS agora. Esta página onde você pode construir blocos, deslocar blocos, rotar e fazer muito mais.
Não faz sentido para o meu cérebro de CSS que só vive em Tailwind. Vamos para os servidores ou servilhados? E qual for o servidor que você tem que escolher para conseguir todas essas coisas certas? A Savala descobriu isso, porque eles já descobriram isso na Kinsta, o host de WordPress.
Feche «Quando ainda usar JS» com um experimento de 30–90 minutos ligado a css moderno animações sem javascript: artefato + critério binário — sem inventar número fora da fonte.
Sinais de que está funcionando
Em «Sinais de que está funcionando», use css moderno animações sem javascript como hipótese de trabalho. Escreva a regra em uma frase que outro builder execute sem o vídeo.
Porque para hostar o WordPress, você tem que fazer todas essas coisas diferentes. Agora com a Savala, eles estão te dando a magia que eles construíram para si mesmos para usar para qualquer coisa. E quando eu digo qualquer coisa, eu quero dizer. Primeiramente, um abraço para Benjamin Astor aqui por criar tudo isso.
Seu site tem todos os tipos de projetos realmente legais e loucos. Eu recomendo muito que você cheque se você é um nerd sobre coisas do browser como nós aqui. Mas nós estamos aqui para falar sobre um projeto específico. CSS Minecraft, que ele foi gentil o suficiente para abrir a source.
E como você vê aqui com as línguas, ele não está bullshitting. Obviamente eu tive que clonar os repokes. É tipo 4 MB, ele tem 45 mil linhas de HTML, 46 mil linhas de HTML. Claro que Simon tem um post no blog sobre isso, meu blogger favorito de AI, também o criador de Django.
Depois de «Sinais de que está funcionando», anote uma métrica (tempo, taxa, retries ou conversão) para css moderno animações sem javascript e rode um ciclo curto antes de escalar.
O que evitar na primeira semana
O bloco «O que evitar na primeira semana» sobre css moderno animações sem javascript ganha densidade quando você separa claim da fonte de opinião ornamental — preserve só o acionável.
Que fez a sua descoberta de CSS Minecraft. É apenas 480 linhas de CSS e 46 mil linhas de HTML. O truque principal para fazer isso funcionar é as labelações, combinadas com o selecionador de has. Aqui é uma versão mais curta do templo.
Porque, novamente, eles templificaram isso para que eles pudessem encoder isso mais facilmente. Airstone, Graster, Logwood Leaves, etc, etc. Orderscore, Layer, Array, Layers, Rows, Column. Cada um dos 9x9x9, 729 cubos, tem um conjunto de 8 caixas de radio que compartilham o mesmo nome.
De novo, Simon descobriu isso e usou para nós. A forma como funciona é quando o controle tem o Up Active ou o Down Active. Diz que o estado de animação deve estar em funcionamento. E as animações que são definidas são relativamente simples.
Se «O que evitar na primeira semana» não caber na agenda, corte escopo de css moderno animações sem javascript. Aprendizado curto publicado vence hype longo consumido.
Na prática
Próximo passo: escolha uma métrica observável e rode um experimento de 7 dias antes de escalar o padrão.
Perguntas frequentes
Em CSS moderno: animações sem marquee nem JS | guia prático, o que «Variáveis e max rotation» pede para fazer esta semana?
Comece pelo mecanismo: «Variáveis e max rotation» é onde css moderno animações sem javascript deixa de ser vibe e vira critério. O material empurra execução observável, não plateia.
Como provar «Display none e render» com um experimento mínimo?
Critério do material: Sob o ângulo de «Display none e render», o que importa em css moderno animações sem javascript é o próximo passo testável. Se não muda prioridade em 48h, ainda é ruído. Se precisar de segundo sinal: Para cada bloco e blocos, se tem um bloco número de cubo e o tipo de rádio de entrada é chequeado, imagem de fundo é feita para isso. Eu não estou jogando localmente, mas eu vou.
Quando «Quando ainda usar JS» deve esperar atrás de oferta/canal?
O artigo aponta: A seção «Quando ainda usar JS» amarra css moderno animações sem javascript a trade-offs reais: o que cortar, o que medir e o que ignorar na primeira semana. Ajuste ao contexto de `css-moderno-animacoes-sem-marque` antes de escalar.
Qual sinal mostra que «Sinais de que está funcionando» saiu do papel — recorte `css-moderno-animacoes-sem-marque`?
Resposta direta do corpo: Em «Sinais de que está funcionando», use css moderno animações sem javascript como hipótese de trabalho. Escreva a regra em uma frase que outro builder execute sem o vídeo.