10 (mais) CSS truques você provavelmente negligenciada
Há muitos snippets de CSS que os desenvolvedores da Web podem usar para alcançar determinados resultados e, em seguida, há truques de CSS que você pode usar para alinhar conteúdo verticalmente. Com CSS sendo uma entidade em constante evolução, muitas vezes nos deparamos com truques CSS que são divertidos de saber.
No post de hoje, estou apresentando a você Mais 10 atributos e truques CSS que você talvez não conheça.
1. Escreva verticalmente
Existe um atributo CSS chamado modo de escrita que aceita um desses três valores; horizontal-tb, vertical-rl e vertical-lr.
horizontal-tb é o padrão e faz com que o típico fluxo de texto horizontal da esquerda para a direita em um elemento.
o vertical-* No entanto, os valores são para o fluxo de bloco vertical, fazendo com que o texto seja escrito de cima para baixo pelos navegadores. Em vertical-rl, novas linhas são adicionadas à esquerda das anteriores e vice-versa vertical-lr.
Isso é útil para exibindo idiomas como chinês e japonês que normalmente são escritos de cima para baixo e também para quando você deseja exibir texto verticalmente para economizar espaço horizontal, como em cabeçalhos de tabela.
Nota: Se você deseja controlar as direções das letras individuais, você pode usar a orientação de texto, tornando-as na posição vertical ou lateral, conforme desejado.
-webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; modo de escrita: vertical-rl;
2. Valor de cor de reutilização
A palavra-chave currentColor carrega o valor de cor atributo e pode ser usado em outros atributos que aceitam valores de cores como fundo.
div background: gradiente linear (90deg, currentColor 50%, black 50%);… color: # FFD700; / * currentColor é # FFD700 * /
3. Misture Fundos
Um elemento pode ter mais de um plano de fundo (uma cor de plano de fundo e várias imagens de plano de fundo). o modo de mistura de fundo mistura todos eles juntos de acordo com o modo de mesclagem fornecido. Há um total de 16 modos de mistura no momento.
background-blend-mode: diferença;
4. Misture Elementos
O modo mix-blend combina o conteúdo e o plano de fundo dos elementos sobrepostos. O Chrome não parece suportar todos os modos, embora o Firefox não.
mix-blend-mode: color;
Eu peguei dois elementos, um img mostrando a imagem de uma rosa e um período com um fundo gráfico, empilhou-os e aplicou alguns modos mix-blend.
5. Ignorar eventos de ponteiro
Você pode tornar um elemento indiferente a qualquer evento de ponteiro usando um único atributo chamado eventos-ponteiro. Dando eventos-ponteiro o valor de Nenhum em um elemento, isso impede que ele seja um destino para eventos de ponteiro. IE11 + suporte incluído.
Na demonstração a seguir, há uma caixa de seleção abaixo de duas imagens empilhadas umas sobre as outras. Ambas as imagens carregam ponteiro-eventos: nenhum, permitindo-nos clicar na caixa de seleção enterrada sob eles. Com base no estado verificado da caixa de seleção, a imagem desejada é mostrada enquanto a outra.
6. Decore Caixas Divididas
Normalmente, quando uma caixa é dividida (como quando um elemento inline testemunha quebras de linha), as arestas das partes divididas são desprovidas de qualquer estilo de caixa e parecem cortadas. Para evitar isso, você pode usar box-decoration-break: clone.
Agora, para acompanhar isso com um exemplo e um lembrete inicial de "Natal no horizonte", aqui está uma lista de renas de Papai Noel, todas digitadas em um único período! Ho! Ho! Ho!
Nota: Mesmo que o IE moderno suporte box-decoration-break, na borda da borda da parte dividida, a renderização não é suave e o plano de fundo parece cortado. Mas renderiza Sombra da caixa bem, e é por isso que usei sombras de caixa para borda e plano de fundo. Há também uma ausência de preenchimento horizontal nas bordas no IE que você pode querer preencher com espaços.
7. Recolher os elementos da tabela
visibilidade: colapso é um atributo criado apenas para os elementos da tabela, como linhas e colunas. Se usado em qualquer outra coisa, vai se comportar como visibilidade: oculto. Chrome embora trata como escondido mesmo para elementos de mesa.
Quando você atribui visibilidade: colapso em um elemento de tabela, ele está oculto e seu espaço é preenchido pelo conteúdo próximo - como como ele se comportaria ao usar Mostrar nenhum em vez de.
Mas ao contrário Mostrar nenhum que modifica o layout da tabela depois de remover o espaço, o layout permanece o mesmo visibilidade: colapso. Você pode ver como funciona mais detalhadamente aqui.
8. Crie Colunas
Você pode criar um layout de coluna para o seu conteúdo usando o colunas atributo. Ele permite que você especifique quantas colunascontagem de colunas) e como cada largura de coluna (largura da coluna) devem ser renderizados em um elemento.
Se o conteúdo for diferente de texto, como, por exemplo, uma imagem, você terá que ter em mente a largura correspondente à da coluna. Para o exemplo a seguir, usei apenas contagem de colunas especificar quantas colunas eu quero.
-contagem de colunas do webkit: 2; -moz-column-count: 2; contagem de colunas: 2;
9. Faça Elementos Resizeable
Um elemento pode ser redimensionado (verticalmente, horizontalmente ou ambos) com o atributo CSS3 redimensionar . A redimensionabilidade de um textarea pode ser desativado usando o mesmo.
redimensionar: vertical; redimensionar: horizontal; redimensionar: ambos; redimensionar: nenhum;
10. Crie Padrões
Pode haver vários gradientes CSS3 (linear e radial) para um único elemento e eles podem ser empilhados uns sobre os outros para criar padrões. Isso nos permite crie fundos agradáveis para elementos sem usar imagens externas. Fazer funcionar pode exigir um pouco de prática.
