Descubra truques avançados de CSS e melhores práticas para levar suas habilidades para o próximo nível neste guia. Formas, SVGs, colunas, focos e muito mais
Uma das mudanças mais significativas no web design foi a separação de estilo e conteúdo . CSS – que significa Cascading Style Sheet – é o lado do estilo dessa separação e percorreu um longo caminho desde aqueles primeiros dias.
Naturalmente, existem muitos truques avançados de CSS para aprender , desde o básico até coisas um pouco mais avançadas. Como muitas coisas na vida, a experiência CSS torna o processo de web design mais rápido e suave . Um designer talentoso será capaz de resolver um problema de design, mas um designer experiente não precisará resolver o problema porque provavelmente já o encontrou antes.
Não podemos lhe dar experiência, é claro, mas podemos compartilhar alguns dos frutos da experiência para ajudá-lo a lidar com alguns dos enigmas de CSS que você provavelmente encontrará.
Por que CSS é importante?
CSS é um aspecto crítico do desenvolvimento web por causa da acessibilidade . Se a acessibilidade não fosse um problema, a maneira mais fácil de criar uma página da Web com boa aparência seria criar todo o design em um pacote de edição de gráficos e usar a imagem em vez de codificar arquivos HTML e CSS. Mas o que entendemos por acessibilidade?
Embora tenha usos mais amplos, acessibilidade significa essencialmente que um site funcionará bem com ferramentas e tecnologias que ajudam pessoas com deficiências – como deficiência visual – a navegar pelo conteúdo do site. A chave para alcançar essa acessibilidade é garantir que uma página da web “se degrade graciosamente ”.
Degradar graciosamente significa que se, por qualquer motivo, houver problemas ao carregar o site, o conteúdo do site ainda estará presente e acessível. Esses problemas podem ser imagens temporariamente inacessíveis, navegadores mais antigos que não suportam todos os recursos que o site usa ou qualquer outra coisa que possa interferir na maneira como a página é renderizada.
É aí que entra o CSS. Com o web design acessível, todo o conteúdo é armazenado no código HTML, enquanto todos os estilos estão contidos nos arquivos CSS . Na pior das hipóteses, um usuário – seja uma pessoa, um bot ou um software de acessibilidade – poderá acessar o texto e as imagens na página.
Agora, vamos aos truques avançados de CSS que você precisa conhecer.
Layout de tabela fixa
As tabelas são incrivelmente úteis para exibir uma variedade de dados e até mesmo para determinadas situações de formatação (embora você não deva usar tabelas para nada além de dados tabulares). O comportamento padrão de uma tabela é definir a largura das colunas para a largura do conteúdo que suas células contêm , mas isso pode levar a um design confuso, especialmente se você tiver várias tabelas que terminam com colunas de tamanhos diferentes.
Para piorar as coisas, o comportamento padrão pode ser um pouco imprevisível quando você começa a se familiarizar com ele. Por exemplo, você pode especificar a largura de uma coluna como uma porcentagem da largura geral, mas atribuir a essas colunas uma largura fixa será ignorado pelo mecanismo de renderização na maioria dos casos.
Insira o layout da tabela fixa. Ao definir a propriedade table-layout de uma tabela como “fixa”, você pode obter um controle mais previsível e intuitivo do formato da sua tabela. De repente, coisas como ocultar estouro funcionam e as colunas terão a largura que você definir, independentemente do conteúdo que elas contêm. E a boa notícia é que definir uma mesa para um layout fixo é tão simples quanto;
table {
table-layout: fixed;
}
Desvanecimento da cor ao passar o mouse
Os efeitos de foco são, obviamente, visualmente atraentes. Eles podem não apenas parecer muito bons quando usados corretamente, mas também dão a uma página da Web uma sensação mais dinâmica, fazendo com que pareça menos uma parede estática de texto e imagens. Além dos benefícios visuais, os efeitos de foco também servem a um propósito de acessibilidade , deixando absolutamente claro para o espectador que eles estão pairando sobre um elemento dinâmico, como um link.
Color fade é um pouco mais complicado do que o layout de tabela fixa, pois requer duas propriedades CSS. O primeiro deles é o seu tipo de foco padrão que precisa ser definido como normal. A segunda é a propriedade de transição , na qual você colocará a raiz da sua classe. Usando esta propriedade, você dirá a transição e como ela irá desaparecer para a nova cor. Deve ser algo assim;
.element {
transition: all 0.5s ease;
background: blue;
}
.element:hover {
background: yellow;
}Com esse código, o elemento em questão passará de um fundo azul para amarelo quando o mouse passar sobre ele, e voltará para azul quando o mouse sair.
Usando SVG para ícones
SVG — Scalable Vector Graphics — é um tipo de formato de imagem que armazena uma representação matemática da imagem em questão. Para explicar isso; imagine uma imagem regular de uma linha curva. Se você expandir essa imagem usando meios convencionais, ela começará a ficar pixelizada. Os arquivos SVG não armazenam os pixels, eles armazenam fórmulas matemáticas que descrevem a curva . A vantagem disso é que a imagem pode ser reduzida ou ampliada o quanto você quiser sem afetar a qualidade.
As imagens SVG podem ser incluídas em uma página da Web usando a marcação img como faria com qualquer imagem normal, mas com a vantagem de que podem ser redimensionadas sem ter que se preocupar com a qualidade da imagem sendo arruinada . Deve-se observar que há alguns aspectos de compatibilidade a serem considerados, incluindo versões anteriores do navegador do Android e do Internet Explorer 8 e anteriores.
Curva o texto ao redor de uma imagem flutuante
A formatação de texto em torno de uma imagem não é novidade, é claro, mas o que é bastante novo é a capacidade de curvar imagens e outros elementos. Particularmente útil ao lidar com imagens redondas. O código para fazer isso se parece com isso;
.circle {
height: 250px;
width: 250px;
float: left;
shape-outside: circle();
}Colunas de dimensionamento automático
Mencionamos acima que você não deve usar tabelas para fins de layout geral. CSS tem sido notoriamente relutante em oferecer uma alternativa tipo tabela… isto é, até a adição de layouts de grade.
Os layouts de grade permitem que os usuários obtenham uma aparência de tabela sem precisar recorrer à marcação de tabela , e é possível aproveitar algumas opções intuitivas de dimensionamento automático no processo. Por exemplo;
.grid-container {
display: grid;
grid-auto-columns: 50px;
}Como o código sugere, isso garantirá que todas as colunas na grade tenham 50px de largura. A única coisa que resta é implementar sua grade no documento HTML . Você faz isso simplesmente definindo uma div pai para a classe grid-container (ou como você a chamou) e, em seguida, incluindo uma nova div para cada “célula” que você deseja em sua grade.
Criando formas
O fato de que você pode criar formas diretamente em CSS é um conhecimento que muitas vezes passa despercebido por desenvolvedores novos e antigos. É claro que quase sempre é possível criar quadrados e retângulos – basta dar uma cor de fundo a uma div e você terá exatamente isso. Usando CSS, você também pode criar círculos e ovais, uma variedade de triângulos, trapézios, setas, estrelas e muito mais. Tanto mais, na verdade, que dobraria o tamanho deste post para mostrar o código para todos eles aqui. Em vez disso, vamos nos contentar com alguns exemplos;
Quadrado
#square {
width: 100px;
height: 100px;
background: blue;
}Círculo
#circle {
width: 100px;
height: 100px;
background: blue;
border-radius: 50%
}Triângulo
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}Ovo
#egg {
display: block;
width: 106px;
height: 160px;
background-color: blue;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}