10 truques CSS incríveis para transformar seus layouts da web
Quer transformar seus layouts da web com CSS? Você está no lugar certo.
Qualquer pessoa com experiência em web design, quer você tenha usado construtores de sites DIY ou criado 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 do seu site e alcançar sua visão criativa. Mas como você pode usar folhas de estilo em cascata para liberar o potencial do seu próximo site?
Este guia detalhará apenas uma série de propriedades CSS que foram usadas para criar o cabeçalho que você pode ver na imagem acima. Você pode encontrar este projeto aqui no CodePen, dando a você a chance 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, por isso cobrimos os mais populares, junto com alguns truques para ajudá-lo a manipular suas imagens.
1. Imagem de fundo CSS
Queremos ter uma imagem de fundo em tela inteira 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 classe, seguida pela definição de sua altura para 100vh e sua largura para 100vw; isso nos dá uma caixa exatamente do mesmo tamanho da janela de visualização. Também adicionamos uma regra CSS para o corpo da página, com seu overflow definido como oculto e suas margens definidas como 0px.
Com o contêiner instalado, podemos adicionar uma imagem de fundo e existem três regras CSS diferentes que precisamos para atingir esse objetivo. A primeira, imagem de fundo, precisa de um URL para atuar como fonte da imagem de fundo, e usamos o prático catálogo Unsplash para isso. Também precisamos definir o tamanho do plano de fundo para cobrir e a posição do plano de fundo para inferior, mas você pode querer experimentar isso para obter melhores resultados.
2. Modo de mistura de fundo CSS
Os modos de mesclagem CSS possibilitam mesclar imagens e texto, de forma muito semelhante ao recurso de mesclagem de softwares como o Adobe Photoshop. Para fazer com que os modos de mesclagem funcionem com nossa imagem de fundo, definimos a cor de fundo para branco semitransparente antes de adicionar o modo de mesclagem que queríamos usar.
Em seguida, o modo de mesclagem de fundo foi definido como luz suave, 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 você 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 contêiner para três imagens, usando a propriedade CSS display 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". Definindo a largura de cada imagem para 600px, podemos deixar a propriedade altura 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 poligonal 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. Definimos a opacidade de nossas imagens para 90%, tornando-as levemente opacas para que combinem perfeitamente com o fundo.
Texto e imagens responsivos CSS
Já exploramos a arte de criar sites responsivos impressionantes usando HTML, CSS e JavaScript no passado, mas podemos desenvolver os princípios que você já entende, fornecendo uma visão mais profunda das habilidades necessárias para dominar os layouts de seu site.
1. Unidades CSS Responsivas/Relativas
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 um web design responsivo.
- em: Esta unidade geralmente é 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 equivale a 2% da largura do navegador, enquanto 2vh equivale 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 menores ou maiores dimensões da janela de visualização, fornecendo aos elementos os meios para responder diretamente ao tamanho da janela do navegador.
2. Tamanho da fonte CSS
Esta propriedade pode ser definida usando valores padrão predefinidos pela folha de estilo principal do site ou pelo navegador do usuário. Esses valores incluem médio, xx-pequeno, x-pequeno, pequeno, grande, x-grande e xx-grande, com médio 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 visualização.
Adicionamos duas tags de cabeçalho ao nosso HTML, permitindo-nos adicionar texto ao projeto. Um é um cabeçalho principal grande, 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 com 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 altura definida como 100vh e largura definida como 100vw, mas também usamos unidades absolutas para nossas três imagens. Vale a pena explorar e experimentar unidades de largura e altura CSS, com opções como "herdar", fornecendo os meios para adotar as dimensões de um elemento pai, e há muitos outros truques como esse que você pode usar.
4. Modo CSS Mix-Blend
O modo mix-blend CSS é muito semelhante ao modo background-blend, só que pode ser aplicado a qualquer elemento, em vez de ser exclusivamente para planos de fundo. Usamos essa propriedade em nosso título H1 para adicionar textura e tornar o projeto mais interessante. Começamos definindo a cor do texto como preto, seguido pela definição do modo mix-blend para sobreposição.
Vale a pena explorar as diferentes opções de mesclagem que você tem ao lidar com texto, pois planos de fundo com perfis de cores exclusivos responderão de maneira diferente às configurações usadas.
5. Transformação de texto CSS
CSS text-transform é uma propriedade inteligente que permite aos designers alterar a caixa do texto em seus sites sem afetar a maneira como os mecanismos de pesquisa o leem. Por exemplo, definimos a transformação de texto para maiúsculas em nosso cabeçalho H1, tornando cada letra maiúscula, independentemente de como a inserimos em nosso HTML.
Propriedades de estouro de CSS
Muitas vezes, o HTML pode parecer uma estrutura rígida que estabelece limites estritos para o conteúdo de seus sites, mas isso não acontece quando propriedades de overflow são empregadas.
Estouro de CSS e estouro de texto
Overflow e text-overflow são propriedades CSS muito semelhantes. O Overflow pode ser aplicado a qualquer elemento, dando a você controle sobre o conteúdo que consegue escapar de seus limites. O estouro de texto é semelhante, embora se aplique apenas a texto e ofereça a capacidade de adicionar parâmetros adicionais às suas regras. Usamos apenas overflow para este projeto (usamos para restringir o tamanho do corpo da nossa página), mas você pode ler sobre overflow de texto no site W3Schools.
Usando CSS para seus layouts da web
CSS é uma ferramenta incrivelmente poderosa que permite que web designers e desenvolvedores criem sites incríveis usando código. Incentivamos você a dar 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 retoques finais.