15 truques CSS úteis que você pode ter negligenciado

Se você tem sido um desenvolvedor web frontend por um tempo, há uma grande chance de você ter tido um momento em que você estava tentando descobrir como codificar algo e perceber depois de um pouco de googling, que “há CSS para isso”. Se você não tivesse, bem, você está prestes a.

Este post é uma coleção de códigos CSS, que podem dar a você alguns recursos, como tornar um elemento pegajoso, fornecer recursos de sublinhado à linha tracejada, fluir o texto de sua página em uma forma especial ou obter um efeito de paralaxe. Alguns deles são amplamente suportados, enquanto outros estão a caminho para o suporte total de todos os navegadores..

1. Cabeçalhos de numeração e subtítulos

   Digamos que você tenha um conjunto de cabeçalhos e subtítulos em seu documento e os esteja numerando manualmente ou por meio de um script. Em vez disso, você pode usar contadores de CSS para fazer isso. Já existe um post aprofundado sobre isso aqui. E uma vez que é de uma especificação CSS2, você pode apostar que é suportado por todos os navegadores, exceto talvez o IE 6.

2. Apimentar os sublinhados simples

   Às vezes queremos sublinhar com uma linha pontilhada ou tracejada em vez de uma linha sólida. Como não há opção para isso, nós nos contentamos com borda inferior. Mas borda inferior não é uma boa solução se o texto que você está sublinhando envolve.

   CSS3 especificou não uma, mas três novas propriedades para decoração de texto texto-decoração-cor, linha de decoração de texto, e texto-decoração-estilo que pode ser shorthanded para o bom e velho decoração de texto.

   Você pode usá-los para destacar, sublinhar, até mesmo fazer o texto piscar e muito mais. Desde abril de 2015, apenas o Firefox suporta essa propriedade, mas você pode ativar “recursos experimentais da plataforma web” para usá-lo no Chrome.

3. Citando uma citação

   Primeiro de tudo, não há necessidade de se preocupar em digitar as aspas curvas corretas para citações curtas, porque há HTML para isso: o tag que indica cotações em linha.

   o tag também cuida de citar as cotações internas com aspas simples. Então, onde está o “existe 'CSS' para isso” momento neste?

   Vamos dizer que você não quer as aspas duplas padrão ou você tem mais de um nível de citações aninhadas, você pode definir suas preferências de cotação para o elemento de cotação com CSS usando o CSS2 citações propriedade.

4. Gerenciando tabelas indisciplinadas

   Você pode se deparar com uma grande tabela com tamanho de conteúdo variável por célula que se recusa a permanecer dentro de uma largura que você especificou, não importa o que você tente. Domar essa mesa com o tabela-disposição propriedade (para altura da coluna igual, siga este link).

   Para ser específico, a correção está no tabela-layout: fixo; valor. Quando você atribui um layout fixo para a tabela, a tabela e a largura da célula são determinadas pela largura da tabela ou da primeira linha de células (que podem ser definidas pelo usuário) e não pelo conteúdo. Isso é suportado por todos os navegadores.

5. Torná-lo pegajoso

   Elementos pegajosos são elementos em uma página que não serão rolados para fora da vista. Em outras palavras, ele fica preso a uma área visível (porta de visualização ou caixa de rolagem). Você pode criar isso com CSS usando posição: pegajosa;.

   Eles agem como elementos relativamente posicionados antes de qualquer rolagem e, posteriormente, como elementos fixos, quando um limite de rolagem é atingido. Para agora, apenas o Firefox suporta isso.

6. Obtenha seu texto em forma

   Você quer que o texto na sua página curve-se bem sobre alguma imagem exibida ao lado dela? Podes tentar Formas CSS. Para implementar formas CSS, podemos fazer uso de três propriedades forma fora, forma-margem e forma-imagem-limiar. A partir de abril de 2015, o CSS Shapes é suportado por navegadores webkit.

7. Campos obrigatórios

   Se você tem um formulário, há uma grande chance de que alguns campos sejam necessários, enquanto outros não são. Você precisará informar aos usuários qual é qual. O CSS para isso é :requeridos :opcional pseudo classes. Todos os navegadores modernos os suportam.

8. Exigente com cores

   Se você não gosta de uma determinada cor, como azul, podemos colorir a área selecionada com outra cor e ::seleção pseudo elemento é o CSS para isso. Isto é suportado por todos os navegadores modernos.

9. Eu verifiquei?

   Em uma situação em que uma caixa de seleção foi marcada, seria bom ter outra indicação à parte da pequena marca de seleção dentro da caixa de seleção padrão para indicar que o item foi verificado.

   Há CSS para o que explora o vínculo entre os irmãos imediatos, dois elementos lado a lado. O CSS tem um seletor irmão adjacente denotado pelo sinal de mais + assinar, e podemos usá-lo para segmentar o marcador ao lado da caixa de seleção. Mas e quanto a segmentar a caixa de seleção marcada primeiro? Existe o :verificado pseudo-classe para isso.

10. Como um livro de histórias

    Então, não seria bom se o primeiro “O” no “Era uma vez” parece bonito? Podemos fazer com que pareça bonito, afinal, há CSS para isso. Aqui é onde ::primeira carta pseudo elemento vem para o resgate. Ele atinge a primeira letra da primeira linha do elemento de destino. Leia mais sobre isso aqui.

11. Gostaria de saber mais?

    Um elemento pode ter classe X ou dados Y ou algum outro valor para um atributo. Se precisarmos exibir esse valor de atributo de um elemento próximo a ele, podemos usar o conteúdo: attr (X). Ele recupera o valor do atributo X do elemento, então podemos mostrá-lo ao lado do elemento.

12. Um pouco mais para a esquerda

    Elementos de centralização para iniciantes em CSS são um grande feito. Elementos diferentes requerem um conjunto diferente de propriedades CSS para centralizá-las. Nós vamos olhar em um exemplo de muitos que está disponível na world wide web, para que você possa lembrar novamente que há CSS para centrar as coisas.

13. Divulgar formato de arquivo de links

    Já viu uma pequena imagem perto de um link indicando o que é esse link? Um PDF? ou um DOC? Sim, há CSS para conseguir isso. o conteúdo: url () é o que vamos usar para exibir a imagem por trás dos links.

14. Efeito de paralaxe de gatilho

    O efeito paralaxe é um efeito usado para descrever o movimento aparentemente lento do fundo em relação ao primeiro plano. Esse efeito é popular em sites que implementam rolagem paralaxe. Existem diferentes maneiras de implementá-lo, o exemplo abaixo funciona no Firefox com fundo-anexo: fixo;.

15. O poder das animações CSS

    Provavelmente não é um enorme “há CSS para isso” momento, porque todos vocês estão provavelmente mais conscientes das animações CSS até agora. Mas um pequeno lembrete não é prejudicial. Existem muitos usos para animações CSS, mas aqui está um para um simples exercício de colorir.

Agora Leia: 50 trechos de CSS úteis que todo designer deve ter