7 coisas que você não sabia que pode fazer com CSS

Acredite ou não, CSS e JavaScript estão começando a se equiparar, à medida que o CSS ganha mais funcionalidades.
Confira sete tarefas que você pode resolver com CSS – sem nada de JavaScript!

1. CSS @supports

Todo bom front-end faz testes nas features antes de usá-las. Isso é sempre feito com JavaScript, e muitas pessoas usam o Modernizr para fazer isso, um pacote de utilidades muito bom com excelentes rotinas de testes. Uma nova API, no entanto, permite que você faça isso com CSS: @supports.
Veja alguns exemplos de como @supports trabalha:

img1

2. CSS Filters

Escreva um serviço para modificar os tons de cor em uma imagem e você poderá vender isso para o Facebook por US$ 1 bilhão! Claro que isso é uma enorme simplificação, mas escrever filtros para imagens não é exatamente complicado. Esse tipo de filtragem apenas cria uma máscara na visualização original da imagem e não salva ou exporta a imagem com o filtro, mas é ótimo para galerias de fotos ou em qualquer outro lugar que você queira adicionar um pouco de flare em uma imagem!

img2

 

3. Pointer events e eventos de clique

A propriedade CSS pointer-events oferece um método para efetivamente desabilitar um elemento, de forma que um clique em um link nem disparará um evento JavaScript.

No exemplo acima, o evento clique não vai disparar, pelo valor do evento Pointer do CSS. Incrivelmente útil porque você não precisa fazer um className ou atribuir checks toda vez que verifica que algo está desabilitado.

img3

4. Deslizar para cima e deslizar para baixo

O CSS nos permite criar transições e animações, mas às vezes precisamos das bibliotecas JavaScript para ajudar na modificação de algumas coisas e no controle da animação. Uma animação bastante popular são os efeitos de deslizar para cima e deslizar para baixo, que a maioria não sabe que podem ser feitos apenas com CSS!

Uma forma inteligente de usar max-height permite que o elemento cresça ou encolha de acordo com a necessidade.

img4

5. CSS Counters

Se você pensar no que “counter” (contador”) significa ao pensar em Internet, você provavelmente vai rir. Mas CSS Counters são uma coisa totalmente diferente – eles permitem que o desenvolvedor incremente um contador e o mostre via: before ou: after para um determinado elemento:

img5

Você com frequência vê CSS Counters em slideshows em conferências e até em listas como uma tabela de conteúdos.

6. CSS Classes com Unicode

Há inúmeros documentos de boas práticas em CSS, mas todos começam com “como nomear suas classes CSS”. O que você nunca verá nesses documentos é para utilizar símbolos Unicode para nomear suas classes.

7. CSS Circles

CSS triangles são algo bacana, mas CSS circles também! Ao abusar do border-radius, você poderá criar círculos perfeitos!

img7

Informações extraídas: Imasters

MGF Arte
Criação de Sites

Autor: MGF Arte Criação de Sites