10 truques incríveis de CSS para transformar seus layouts da Web

Qualquer pessoa com experiência em web design, se você usou construtores de sites DIY ou fez um site do zero, provavelmente já ouviu falar de CSS antes. Esta ferramenta incrivelmente poderosa pode ser usada para transformar seus layouts da web, dando a você o poder de assumir o controle de seu site e alcançar sua visão criativa. Mas como você pode usar folhas de estilo em cascata para desbloquear o potencial do seu próximo site?

Este guia detalhará apenas uma variedade de propriedades CSS que foram usadas para criar o cabeçalho que você pode ver na imagem acima. Você pode encontrar este projeto aqui em CodePen, dando-lhe a oportunidade de experimentá-lo por si mesmo.

Manipulação de imagem CSS

O primeiro passo que precisamos dar para construir nossa seção de cabeçalho é adicionar imagens à página. Você pode usar vários métodos para atingir esse objetivo, então cobrimos os mais populares, juntamente com alguns truques para ajudá-lo a manipular suas imagens.

1. Imagem de fundo CSS

Queremos ter uma imagem de fundo em tela cheia para nosso cabeçalho, e a propriedade CSS background-image é ideal. Primeiro, precisamos criar um contêiner para nossa imagem (e o restante dos elementos dentro do cabeçalho).

Começamos adicionando uma tag div com "header" como sua classe, seguida pela definição de sua altura até 100vh e os seus largura para 100vw; isso nos dá uma caixa que é exatamente do mesmo tamanho que a janela de visualização. Também adicionamos uma regra CSS para o corpo da página, com seu estouro definido como oculto e os seus margens definidas como 0px.

Com o contêiner no lugar, podemos adicionar uma imagem de plano de fundo e há três regras CSS diferentes que precisamos para atingir esse objetivo. A primeira, imagem de fundo, precisa de um URL para atuar como a fonte da imagem de fundo, e usamos o útil catálogo Unsplash para isso. Também precisamos definir o tamanho de fundo para cobrir e a posição de fundo para baixo, mas você pode querer experimentá-los para obter os melhores resultados.

2. CSS Background Blend Mode

Os modos de mesclagem CSS tornam possível mesclar imagens e texto, assim como o recurso de mesclagem em softwares como o Adobe Photoshop. Para fazer os modos de mesclagem funcionarem com nossa imagem de fundo, definimos o cor de fundo para branco semitransparente antes de adicionar o modo de mesclagem que queríamos usar.

Seguindo isto, background-blend-mode foi definido como soft-light, permitindo-nos suavizar a imagem.

3. Caminho de Clipe CSS

Para nosso próximo truque, usaremos uma regra chamada clip-path. Ao usar tags HTML img, você pode definir um caminho que ocultará partes das imagens com as quais está trabalhando. Você pode optar por usar formas gerais para isso, mas também pode usar um aplicativo gerador de SVG para criar um design mais complexo.

Adicionamos uma tag div com "flex_image_box" para atuar como um container para três imagens, usando a propriedade display CSS para transformá-la em um flexbox (falaremos sobre isso mais tarde). Três tags img foram adicionadas dentro da tag div, com IDs definidos como "img1", "img2" e "img3". Configurando o largura de cada imagem para 600px, nós somos capazes deixe a propriedade height em branco sem alterar a proporção das imagens; agora é hora de adicionar nosso clip-path!

Para criar nossos três triângulos, usamos o mesmo clip-path de polígono para img1 e img3, com uma versão invertida para img2. Também tivemos que brincar com o posicionamento do nosso contêiner flex-box para garantir que as imagens ficassem na posição correta na tela. Nossas regras de clip-path podem ser vistas abaixo.

4. Opacidade CSS

A opacidade define o nível de transparência de qualquer elemento HTML. Nós definimos o opacidade de nossas imagens para 90%, tornando-os ligeiramente opacos para que se fundam bem com o fundo.

Texto e imagens responsivos a CSS

Já exploramos a arte de criando sites responsivos impressionantes usando HTML, CSS e JavaScript no passado, mas podemos aproveitar os princípios que você já conhece, fornecendo uma visão mais profunda das habilidades necessárias para dominar os layouts de seu site.

1. Unidades Relativas/Responsivas a CSS

Unidades CSS como px, pt e cm são unidades absolutas, e isso significa que um navegador da Web irá renderizá-las no mesmo tamanho, independentemente da largura e altura da janela que ocupam. As unidades relativas são diferentes, produzindo alturas e comprimentos relativos a outras medidas, como a janela do navegador ou um elemento pai. As unidades relativas abaixo são comumente usadas e essenciais para web design responsivo.

• em: Esta unidade é normalmente usada com texto. É relativo ao tamanho da fonte do elemento atual, tornando 4em quatro vezes maior que o tamanho da fonte definido.
• rem: Assim como em, rem é relativo ao tamanho da fonte de um elemento; o elemento raiz em uma hierarquia é usado para definir o tamanho da saída.
• vw/vh: determinando a largura e a altura com base no tamanho da janela de visualização, 2vw é igual a 2% da largura do navegador, enquanto 2vh é igual a 2% da altura do navegador.
• %: A unidade % calcula as dimensões com base no tamanho do pai de um elemento.
• vmin/vmax: essas unidades produzem dimensões relativas a 1% das dimensões menores ou maiores da janela de visualização, fornecendo aos elementos os meios para responder diretamente ao tamanho de uma janela do navegador.

2. Tamanho da fonte CSS

Essa propriedade pode ser definida usando valores padrão predefinidos pela folha de estilo principal do site ou pelo navegador da web do usuário. Esses valores incluem medium, xx-small, x-small, small, large, x-large e xx-large, com medium sendo definido como padrão para qualquer texto que não tenha uma tag CSS de tamanho de fonte. Alternativamente, valores relativos podem ser empregados ao usar a propriedade CSS font-size, e este é o método que usamos para garantir que o texto em nossa seção de cabeçalho seja dimensionado adequadamente para qualquer janela de exibição.

Adicionamos duas tags de cabeçalho ao nosso HTML, permitindo adicionar texto ao projeto. Um é um cabeçalho grande principal, enquanto o outro é um subcabeçalho, e ambos usam unidades relativas.

Relacionado: Como alterar o tamanho da fonte HTML em CSS

3. Largura e Altura CSS

Todos os elementos HTML vêm com dimensões de altura e largura, sejam eles div, img, a ou qualquer outro tipo de tag. Essas dimensões podem ser definidas automaticamente para valores padrão, mas também podem ser ditadas por web designers usando as regras corretas; usamos esses dois métodos para este cabeçalho.

Unidades responsivas foram usadas para a imagem de fundo, com a altura definida para 100vh e a largura definida para 100vw, mas também usamos unidades absolutas para nossas três imagens. Vale a pena explorar e experimentar unidades CSS de largura e altura, com opções como "herdar" fornecendo a significa adotar as dimensões de um elemento pai, e há muitos outros truques como esse que você pode usar.

4. CSS Mix-Blend-Mode

CSS mix-blend-mode é muito semelhante ao modo background-blend, só que pode ser aplicado a qualquer elemento, ao invés de ser exclusivamente para fundos. Usamos essa propriedade em nosso cabeçalho H1 para adicionar textura e tornar o projeto mais interessante. Começamos por definir o nosso cor do texto para preto, seguido pela configuração do mix-blend-mode para overlay.

Vale a pena explorar as diferentes opções de mesclagem que você tem ao lidar com texto, pois os planos de fundo com perfis de cores exclusivos responderão de maneira diferente às configurações usadas.

5. Transformação de texto CSS

O CSS text-transform é uma propriedade inteligente que permite aos designers alterar as maiúsculas e minúsculas do texto em seus sites sem afetar a maneira como os mecanismos de pesquisa o lêem. Por exemplo, temos defina text-transform para maiúsculas em nosso cabeçalho H1, tornando cada letra maiúscula, não importa como a inserimos em nosso HTML.

Propriedades de estouro de CSS

O HTML muitas vezes pode parecer uma estrutura rígida que define limites estritos para o conteúdo em seus sites, mas isso não acontece quando as propriedades de estouro são empregadas.

Estouro de CSS e estouro de texto

Overflow e text-overflow são propriedades CSS muito semelhantes. O estouro pode ser aplicado a qualquer elemento, dando a você controle sobre o conteúdo que pode escapar de seus limites. O estouro de texto é semelhante, embora se aplique apenas ao texto e ofereça a capacidade de adicionar parâmetros adicionais às suas regras. Usamos apenas o overflow para este projeto (nós o usamos para restringir o tamanho do corpo da nossa página), mas você pode ler sobre o overflow de texto na página W3 Schools local na rede Internet.

Usando CSS para seus layouts da Web

CSS é uma ferramenta incrivelmente poderosa, permitindo que web designers e desenvolvedores criem sites incríveis usando código. Recomendamos que você dê uma olhada no CodePen que fornecemos no início do artigo, pois isso lhe dará uma visão ainda mais profunda de como todas essas ferramentas funcionam. Além disso, você pode brincar com o cabeçalho que criamos para adicionar seus próprios toques finais.

8 dicas e truques essenciais de CSS que todo desenvolvedor deve saber

Você está usando esses principais métodos CSS para um fluxo de trabalho rápido e um belo design da web?

Leia a seguir

Sobre o autor