Contente
- 01. Combine as imagens com os esquemas de cores do site
- 02. Divida uniformemente o espaço na última linha de uma grade
- 03. Crie animações de partículas com sombra de caixa
- 04. Anime poliedros com transformações
- 05. Mestre 'calc ()' para posicionamento
- 06. Torne o modelo de caixa justo com 'tamanho de caixa'
- 07. Centralize verticalmente com CSS
- 08. Almeje um banco de objetos relacionados
- 09. Hifenização de controle
- 10. Aproveite os modos de escrita
- 11. Use gradientes de maneiras incomuns
- 12. Use string-Matching em links
- 13. Faça o FOUT trabalhar para você
- 14. Explorar SVG para fundos
- 15. Concentre os usuários com transições 3D
- 16. Crie menus circulares com CSS e matemática
- 17. Animar links ao passar o mouse
- 18. Faça animações de quadro-chave simples
- 19. Crie efeitos 3D flutuantes com sombras
- 20. Atualize os elementos da página usando ': target'
- 21. Forneça feedback com animações sutis
- 22. Prepare-se para 'animar'
- 23. Humanizar campos de entrada
- 24. Pause e reproduza animações CSS
- 25. Não use variáveis CSS
Em algum ponto com qualquer tecnologia, há uma sensação de que praticamente tudo o que pode ser feito já foi feito. Quando algo não é mais tão novo e brilhante, o interesse diminui e a atenção é atraída para a próxima grande novidade. Esse tem sido frequentemente o caso na indústria da web, que tende a ficar terrivelmente entusiasmada com um certo aspecto da tecnologia antes, mais cedo ou mais tarde, de relegá-la ao mundano.
Quando o CSS apareceu pela primeira vez, era revolucionário e, com o tempo, evoluiu para permitir que os designers criassem layouts de página da web belos, bem elaborados e flexíveis. Ultimamente, porém, tem havido a sugestão de vários quadrantes de que CSS está cansado e talvez seu tempo ao sol tenha acabado.
Quero mostrar que ainda há muito entusiasmo e vida no mundo do CSS, seja nas propriedades de ponta que você ainda não explorou ou no uso de um aspecto do CSS de uma forma que você não havia considerado anteriormente.
Aqui estão algumas dicas de alguns dos maiores especialistas em CSS da indústria.
(Observação: algumas técnicas neste recurso são de ponta e podem não ser totalmente suportadas em todos os navegadores. Teste completamente e certifique-se de que os substitutos estejam em vigor antes de colocar qualquer trabalho no ar.)
01. Combine as imagens com os esquemas de cores do site
Christopher Schmitt, organizador da conferência
As conferências têm seus próprios esquemas de cores e, com muitos alto-falantes, o fluxo de trabalho para gerenciar retratos pode ser complexo. A aplicação manual de filtros não escalona e depende de você ter acesso a, digamos, uma ação específica do Photoshop. Agora eu uso PNGs em escala de cinza de alta resolução e adiciono tons usando filtros CSS. Isso me permite combinar qualquer retrato com o esquema de um evento e também reutilizar imagens em vários temas. Eu só preciso de uma nova regra CSS para cada um. Veja uma demonstração.
02. Divida uniformemente o espaço na última linha de uma grade
Stephen Hay, designer e autor
Se você tem um número desconhecido de itens a serem exibidos em uma grade, pode usar o Flexbox para dividir a última linha uniformemente. Portanto, se houver apenas um item, ele ocupará toda a linha; se houver dois itens, a linha será dividida ao meio e assim por diante. Veja uma demonstração.
03. Crie animações de partículas com sombra de caixa
Ana Tudor, programadora e fanática por matemática
Ao misturar Sombra da caixa com um pouco de matemática e Sass, você pode representar graficamente curvas 2D, emular movimento 3D e criar animações de partículas malucas que todos vão confundir com telas! Veja uma demonstração e outra.
04. Anime poliedros com transformações
Ana Tudor, programadora e fanática por matemática
Você provavelmente já viu polígonos CSS puros criados com bordas, mas temos uma ferramenta muito mais poderosa no transformar propriedade. Encadear e aplicar transformações em elementos aninhados nos permite criar polígonos complexos com fundos de imagem ou bordas e interiores transparentes. Usando transformações 3D, podemos combinar essas formas 2D em poliedros e fazer os sólidos se fundirem, se desdobrarem, explodirem ou se recombinarem de uma maneira facilmente confundida com WebGL. Veja uma demonstração.
05. Mestre 'calc ()' para posicionamento
Ana Tudor, programadora e fanática por matemática
eu amei calc () a partir do momento em que o descobri. É útil para controlar margens, preenchimento ou dimensões e pode ser um salva-vidas quando usado para posicionar ou dimensionar planos de fundo, dentro de gradientes ou transformações, e combinado não apenas com as mesmas unidades antigas, mas também com as novas e interessantes janelas de visualização.
06. Torne o modelo de caixa justo com 'tamanho de caixa'
Sawyer Hollenshead, Oak Studios dev e designer
Usar tamanho da caixa para salvar sua sanidade. Sem ele, um elemento com uma largura definida de 250px e 25px de preenchimento combina com uma largura de 300px, dificultando a mistura de pixels e porcentagens. Com tamanho da caixa:moldura as bordas e o preenchimento são colocados dentro da largura definida.
07. Centralize verticalmente com CSS
Trent Walton, fundador da Paravel
Historicamente, é difícil centralizar verticalmente algo com CSS, como se você tivesse uma imagem com texto adjacente que deseja alinhar verticalmente. Em vez de pisotear e xingar, use o Flexbox para lidar com problemas de alinhamento. Veja uma demonstração.
08. Almeje um banco de objetos relacionados
Jonathan Smiley, parceiro da Zurb e líder de design
Reduza o peso da linha CSS usando seletores de atributo aproximados em nomes de classe, para atingir um grande banco de objetos relacionados, em vez de anexar atributos comuns a cada classe. Por exemplo ... [class * = "- block-grid-"] {} ... teria como alvo os seguintes: .small-block-grid-3 .large-block-grid-5
09. Hifenização de controle
Savid Storey, defensor da web aberta
A hifenização é tida como certa na impressão, e alguns desenvolvedores usam o hífens propriedade online, mas poucos estão cientes de outras propriedades que fornecem controle mais preciso. Se você não tomar cuidado, obterá escadas de hifenização, onde hifens são usados em várias linhas. Uma regra geral é não mais do que dois em uma linha, que você pode controlar usando hifenato-limite-linhas. Também, hyphenate-limit-chars permite que você especifique o comprimento mínimo de uma palavra que será hifenizada, junto com o número mínimo de caracteres antes e depois da quebra do hífen.
10. Aproveite os modos de escrita
David Storey, defensor da web aberta
Os modos de escrita permitem definir a direção em que o texto flui. Algum texto do Leste Asiático é escrito verticalmente, as linhas crescendo da direita para a esquerda, especificadas com modo de escrita: vertical-rl (tb-rl no IE). Texto vertical não é realmente usado em sistemas de escrita europeus, mas pode ser útil para títulos de tabelas quando você tem espaço horizontal limitado.
11. Use gradientes de maneiras incomuns
Ruth John, designer
Os gradientes de fundo podem ficar ótimos quando usados com bordas e marcadores. Eu uso tanto no meu blog quanto com um pré-processador posso chamar um mixin com o código reutilizado, para não repeti-lo manualmente. Não fique superlotado porque gradientes podem exigir muito do processador. Mixin SCSS para marcadores de lista:
@mixin gradedBullet ($ color) {background-image: linear-gradient (left, lighten ($ color, 15%) 10px, $ color 11px, $ color 20px, escurecer ($ color, 15%) 21px, escurecer ($ color , 15%) 30px, 31px transparente); }
12. Use string-Matching em links
Ruth John, designer
No meu blog, usei seletores de atributos CSS com correspondência de strings para estilizar ícones sociais. Eles aparecem em todo o meu blog, às vezes com texto e às vezes sem, mas sempre com um ícone. Para estilizar o link certo com o ícone social correto, eu uso uma correspondência de string no href atributo do elemento âncora. eu uso *= então o href no elemento âncora deve conter apenas a string que eu especificar.
/ * para todos os links sociais * / .social a: before {display: inline-block; padding-right: 30px; font-family: ’FontAwesome’;} / * Cada link específico * / .social a [href * = "twitter"]: antes de {content: " f099"; color: # 52ae9f;} .social a [href * = "github"]: antes de {content: " f09b"; color: # 5f2e44;} .social a [href * = "feed"]: antes de {content: " f09e"; cor: # b47742;}
13. Faça o FOUT trabalhar para você
Jason Pamental, diretor da H + W design
A web é construída com base na premissa de que deve fornecer conteúdo, mesmo que o navegador não consiga processar o conteúdo. Fontes da web de carregamento lento podem ser frustrantes, FOUT (Flash Of Unstyled Text) chocante à medida que a navegação e o texto refluem durante o download das fontes. O Google e o Typekit fornecem uma resposta: o carregador de fontes da web. Ao injetar classes em uma página, com base no status de carregamento das fontes, você pode estilizar fallbacks com essas classes para manter o refluxo ao mínimo, erradicando também a síndrome do "conteúdo invisível" do WebKit. Veja uma demonstração.
14. Explorar SVG para fundos
Emil Björklund, desenvolvedor da web inUse
Os únicos navegadores agora sem suporte a SVG são IE8 e anteriores e Android 2 WebKit, portanto, usar SVG para fundos em CSS é viável, especialmente junto com uma solução de fallback de PNG, como o Grunticon. O SVG pode ser estilizado por CSS, e há um fluxo interessante de propriedades CSS (filtros!) Do SVG que podemos usar quando aplicado ao HTML.
15. Concentre os usuários com transições 3D
Emil Björklund, desenvolvedor da web inUse
Usando transformações 3D e fazendo uso do dimensão z em interfaces de usuário pode ser muito útil, principalmente para ocultar / mostrar ou recolher / expandir conteúdo. Também é muito fácil ter um fallback para uma transição 2D, ou nenhuma transição, nessas situações. É uma área onde um pequeno aprimoramento progressivo pode ajudar muito.
16. Crie menus circulares com CSS e matemática
Sara Soueidan, desenvolvedora de front-end
Menus circulares são populares em aplicativos móveis, e você pode usar transformações e transições CSS para criar um menu circular simples. Este menu pode ser modificado e personalizado para criar um menu de abertura para cima ou para baixo também. Não há uma maneira direta no CSS de traduzir um item diagonalmente, mas você pode usar o valor do raio do círculo no qual deseja posicionar os itens e aplicar uma regra matemática simples para calcular os valores de translação horizontal e vertical para passar para o translateX () e traduzirY () funções. Dessa forma, você acaba com um diagonal tradução para mover os itens do menu para as posições corretas no círculo. O evento click que fecha / abre o menu pode ser manipulado usando JavaScript, ou você pode dar um passo adiante e ter um menu somente CSS usando um hack da caixa de seleção CSS. Em minha demonstração, eu uso JavaScript e a API HTML5 classList, que não é compatível com todos os navegadores, então você precisará visualizar a demonstração em um navegador moderno para que funcione ou descomente o código jQuery em vez de usar a API classList código.
Veja uma demonstração e um tutorial completo. Exemplo de hack do CSS Checkbox.
17. Animar links ao passar o mouse
Paul Lloyd, designer de interação do The Guardian
Não se deve confiar nos estados de foco para fazer uma ação funcionar ou fornecer informações importantes, mas você ainda pode aprimorar as interfaces para usuários baseados no mouse. No 24ways.org, revelamos os títulos dos artigos quando você passa o mouse sobre os links na navegação anterior / seguinte. Isso foi conseguido através da criação de um ::após pseudo-elemento contendo conteúdo gerado proveniente do valor de um dados- , com uma transição CSS aplicada para que deslize para a visualização ao passar o mouse. Veja uma demonstração.
18. Faça animações de quadro-chave simples
Paul Lloyd, designer de interação do The Guardian
Em 24ways.org, adicionamos abas de canto animadas aos resumos, que abriam ao passar o mouse. Isso foi feito combinando o @keyframes regra com a propriedade de animação, alterando a posição de uma imagem de fundo para obter animação baseada em sprite. O truque é declarar o número de frames que você tem em seu sprite de animação com o degraus() valor. Veja uma demonstração.
19. Crie efeitos 3D flutuantes com sombras
Catherine Farman, desenvolvedora do Happy Cog
Um projeto recente exigia uma foto flutuante do produto com uma sombra redonda embaixo, criando um efeito 3D de destaque na tela. A sombra usa vários recursos CSS3: raio de fronteira transparência alfa e Sombra da caixa. Ele funciona bem para grades de produtos, imagens de exibição em um herói da página inicial ou qualquer design extravagante com uma inclinação skeuomórfica. Veja uma demonstração.
20. Atualize os elementos da página usando ': target'
Simon Madine, desenvolvedor web sênior HeRe
CSS não é uma linguagem de programação no sentido usual, mas você ainda pode fazer coisas inteligentes sem recorrer ao JavaScript. Por exemplo, o :alvo A pseudoclasse é aplicada a elementos que são o destino de um link clicado.
Você pode usar isso para definir o estado de uma página, direcionar um pai que contém muitos elementos e seus links se tornam um meio de controlar a aparência e o layout de todos os filhos com um único clique. Veja uma demonstração.
21. Forneça feedback com animações sutis
Neil Renicker, designer e desenvolvedor
Pseudoelementos CSS ::antes e ::após junto com as transições CSS, pode permitir animações agradáveis que fornecem feedback sutil para os usuários do mouse. Por exemplo, construa uma seta CSS dentro de um pseudoelemento, aplique uma transição ao pseudoelemento (transição: todos os 0,15s atenuados;) e, em seguida, adicione uma alteração de layout simples ao :flutuar pseudoclasse (como emendar margem superior) Veja uma demonstração.
22. Prepare-se para 'animar'
Paul Lewis, codificador e membro da equipe de relações com desenvolvedores do Chrome
Se você usou -webkit-transform: translateZ (0) para tornar suas páginas mais rápidas magicamente, o hack, que em muitos navegadores simplesmente cria uma nova camada de composição, está sendo substituído por vai-animar. Em breve, você poderá dizer ao navegador o que planeja mudar em um elemento (sua posição, tamanho, conteúdo ou posição de rolagem) e o navegador aplicará a otimização correta nos bastidores. Mais Informações.
23. Humanizar campos de entrada
Yaron Schoen, fundador do Made For Humans
Adicionar animações rápidas a elementos com os quais os usuários interagem torna a interface menos computacional. Com os campos de entrada, tente colocar um chamada de transição dentro, então sempre que você foca ou desfoca, há uma transição suave.
entrada, área de texto {-moz-transição: todos os 0.2s atenuados; -o-transição: todos os 0.2s atenuados; -webkit-transição: todos os 0.2s atenuados; -ms-transit: todos os 0.2s atenuados; transição: todos os 0.2s atenuados;
24. Pause e reproduza animações CSS
Val Head, designer e consultor
Você pode "pausar" e "reproduzir" a animação CSS alterando seu animation-play-state propriedade. Definir como "pausado" interrompe a animação no lugar, até que você mude animation-play-state para corrida, por exemplo, ao pairar.
.animating_thing {animação: spin 10s linear infinito; animação-play-state: pausado; } animating_thing: hover {animation-play-state: running; }
25. Não use variáveis CSS
Dave Shea, designer e autor
Finalmente, estamos obtendo variáveis CSS, por exemplo, para escrever o valor hexadecimal de uma cor uma vez e referenciá-lo por meio de uma folha de estilo. Mas a especificação oficial é detalhada, adiciona complexidade sintática, oferece uma funcionalidade nada impressionante e não é amplamente suportada pela maioria dos navegadores. Em uma era em que o Sass é amplamente popular e vai além de variáveis com lógica de programação poderosa, como funções personalizadas e instruções if / else, a especificação oficial fica muito aquém.
Esperamos que essas dicas tenham renovado sua visão do CSS e as possibilidades que ele representa no desenvolvimento e design da web. Não se esqueça de testar qualquer uma dessas técnicas completamente para verificar o suporte do navegador antes de colocar qualquer trabalho no ar.
Palavras: Craig Grannell Ilustração: Mike Chipperfield
Este artigo foi publicado originalmente na edição 253 da net magazine.
