Há muito que você pode fazer apenas com CSS e um navegador da web. Grandes desenvolvedores gostam de empurrar o envelope e mostrar o quanto é possível.
Embora os projetos experimentais nem sempre sejam úteis em sites de produção, eles são incrivelmente inspiradores e educativos.
Nós organizamos um punhado de projetos CSS que mostram o verdadeiro poder do CSS. Estes são todos hospedados no CodePen, para que você possa estudar e clonar o código-fonte para ver como eles funcionam.
este Sass loading page usa gradientes animados e elementos redimensionáveis para criar um efeito de carregamento repetitivo.
A maioria das pessoas deve reconhecer essa animação de carregamento do Facebook, que usa uma versão menor desse carregador de barra vertical. Mas a maioria dos carregadores da web usa GIFs animados, pois as imagens são mais compatíveis com todos os navegadores.
Essa barra de carregamento do CSS3 prova que, com alguns pensamentos criativos, é possível reconstruir praticamente qualquer estilo de animação desejado.
Veja a caneta Barras de carregamento por MaxStalker ( @MaxStalker ) em CodePen .
Aqui está um dos projetos CSS mais complexos que encontrei online. Essa dinâmica projeto do sistema solar por Malik Dellidj roda em CSS puro sem nenhuma imagem .
Todo planeta é renderizado em CSS, incluindo as velocidades de rotação. Este projeto pretende ser um modelo preciso do sistema solar e ainda apresenta um fundo interestelar realista para inicializar.
Não consigo imaginar quanto tempo isso demorou apenas para criar os ícones do planeta, quanto mais acertar as velocidades de animação. Mas onde há vontade há um caminho.
Veja a caneta Animação Solar System - Pure CSS Malik Dellidj ( @kowlor ) em CodePen .
Eu nunca pensei que veria o dia em que o minesweeper clássico do Windows poderia ser jogado usando CSS puro . No entanto, graças ao desenvolvedor Bali Balo esse dia chegou.
Observe que isso não funciona tão bem quanto o caça-minas tradicional porque ele não mantém a pontuação correta. Mas ele rastreia o tempo com precisão e não usa um pouco de JavaScript.
De alguma forma, até a interface parece surpreendentemente próxima da interface original do Minesweeper e tudo roda em CSS. Embora possa não ser uma réplica perfeita, é perto o suficiente para me fazer jogar algumas rodadas.
Veja a caneta Minesweeper CSS puro de Bali Balo ( @bali_balo ) em CodePen .
Na superfície este interruptor de alavanca pode parecer bem simples. Ele é executado através de uma entrada de caixa de seleção e passa dados para o backend, embora essa não seja realmente a parte impressionante.
Essa alternância possui alguns recursos que a tornam um dos melhores switches liga / desliga do frontend:
De alguma forma, este botão liga / desliga captura cada clique do usuário e usa esse evento para animar a área de alternância dia / noite. Os designs de ícones de sol e lua também são bem estilizados, considerando que eles são executados somente em CSS.
Veja a caneta Css puro "dia e noite" toggle de Benjamin Réthoré ( @bnthor ) em CodePen .
Rastreamento de mouse tradicional é o trabalho do JavaScript que relata as coordenadas X / Y do usuário na página.
Tecnicamente, você ainda precisa do JavaScript para reunir essas coordenadas e fazer qualquer coisa útil com elas. Mas este trecho mostra que você pode projetar um recurso de rastreamento de mouse CSS puro que segue cada movimento do usuário.
Não consigo pensar em um uso prático para isso, mas pode ser divertido em um site de brincadeira.
Veja a caneta Rastreamento experimental de mouse CSS puro de Momcilo Popov ( @Momciloo ) em CodePen .
Nós todos vimos ícones e ilustrações vetoriais projetado para a web . Mas e as ilustrações vetoriais de página inteira projetadas com CSS e código SVG?
este projeto do parque de diversões é um projeto experimental que funciona apenas em navegadores compatíveis com SVG. No entanto, nesses navegadores modernos, ele é impecável e cada elemento tem um posicionamento muito realista na página.
As animações são certamente impressionantes, mas é a precisão dos elementos SVG que também chamam minha atenção. Em alguns anos, poderemos encontrar esses tipos de ilustrações na Web em execução apenas no código, sem nenhum arquivo de imagem.
Veja a caneta Design plano parque de diversões svg por Lina (animação alimentado por CSS) de Vladimir Gashenko ( @gxash ) em CodePen .
Criando uma animação CSS repetida como o conceito de faixa de Möbius é bem difícil. Mas adicionar alguns elementos 3D e gradientes variados? Agora você tem um desafio real.
Este trecho é bastante impressionante, considerando o quão suave parece e como pouco código é usado (apenas 90 linhas de CSS). Com o Haml, você só precisa de 6 linhas de código para criar todo o conceito também.
Eu admito que isso não seria super útil em um site real, mas é uma prova de quanto você pode fazer com algumas dezenas de linhas de HTML e CSS.
Veja a caneta Möbius 6hedrons (CSS puro) de Ana Tudor ( @thebabydino ) em CodePen .
Depois de usar este webapp por alguns segundos, você pode se sentir confiante de que ele é executado em JavaScript. Os comportamentos dinâmicos, como a rotação 3D e o posicionamento do terreno, são todos sinais de uma aplicação Web JS doce.
Mas esta IU do criador de mapas por Vincent Durand é na verdade 100% puro CSS. As setas para rotação, o próprio efeito de rotação e todos os recursos de clique para colocar são executados no CSS.
Vale a pena mencionar como todo esse conceito é renderizado usando cubos 3D também. Os blocos funcionam como elementos 3D e você pode girar os cubos apenas pairando.
Sem dúvida, um dos usos mais loucos para CSS que eu vi em muito tempo.
Veja a caneta Criador completo de mapas CSS por Vincent Durand ( @onediv ) em CodePen .
Este projeto é um pouco menos interativo, mas ainda assim é de tirar o fôlego. O desenvolvedor Peter Schmiz recriou todos os principais iOS 7 ícones de aplicativos usando HTML puro e CSS.
Nenhum desses ícones usa SVGs ou arquivos de imagem. Cada elemento em cada ícone é codificado em HTML com um elemento span / div e, em seguida, estilizado usando CSS. A parte mais louca é quão precisas são essas!
O conjunto completo inclui 22 ícones e todos eles são bem visíveis. Estou muito impressionado com a atenção aos detalhes de ícones como o Maps e o Weather. Apenas mais uma prova de que com tempo e paciência suficiente você pode projetar praticamente qualquer coisa em CSS.
Veja a caneta iOS 7 ícones com CSS puro de Peter Schmiz ( @peterschmiz ) em CodePen .
Recriar a animação de carregamento do Slack com o CSS3 é definitivamente impressionante. Mas este trecho recria o carregador Slack com apenas um único elemento na página. Isso é o que eu chamo de dedicação.
A contagem total de CSS para este snippet é de pouco mais de 100 linhas, incluindo as cores do logotipo do Slack e os efeitos de animação.
Não posso dizer se essa ideia funcionaria para outros ícones de carregamento de marca, mas certamente estou impressionado com isso.
Veja a caneta Single slack loader por CrocoDillon ( @CrocoDillon ) em CodePen .
Você encontrará dezenas de designs de barra 3D personalizados no CodePen, todos com suas próprias animações. Mas essas barras 3D de Rafael González destacam-se por todos os outros modernos gráficos de barras CSS.
Cada um desses gráficos executar no flexbox Para contêineres, eles serão dimensionados automaticamente dependendo de quantas barras você adicionar e do tamanho do contêiner. Além disso, cada gráfico de barras é animado quando ele é exibido, tudo controlado pelo CSS puro.
E, como o tamanho de cada barra é executado, você pode ajustar cada barra para escalar naturalmente com base nos tamanhos de fonte do navegador. Um exemplo bacana que prova que o CSS moderno é muito mais flexível do que nunca.
Veja a caneta Barras de CSS puras de Rafael González ( @rgg ) em CodePen .