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 instrumento incrivelmente poderosa pode ser usada para transformar seus layouts da web, dando a você o poder de assumir o controle de seu site e saber sua visão criativa. Mas porquê você pode usar folhas de estilo em cascata para desbloquear o potencial do seu próximo site?
Leste guia detalhará somente uma variedade de propriedades CSS que foram usadas para gerar o cabeçalho que você pode ver na imagem supra. Você pode encontrar leste projeto cá 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 edificar nossa seção de cabeçalho é aditar imagens à página. Você pode usar vários métodos para atingir esse objetivo, logo 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 enxurrada para nosso cabeçalho, e a propriedade CSS background-image é ideal. Primeiro, precisamos gerar um contêiner para nossa imagem (e o restante dos elementos dentro do cabeçalho).
Começamos adicionando uma tag div com “header” porquê sua classe, seguida pela definição de sua profundeza 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 porquê oculto e os seus margens definidas porquê 0px.
Com o contêiner no lugar, podemos aditar uma imagem de projecto 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 porquê a natividade da imagem de fundo, e usamos o útil catálogo Unsplash para isso. Também precisamos definir o tamanho de fundo para tapar e a posição de fundo para ordináriomas você pode querer experimentá-los para obter os melhores resultados.
2. Modo de mesclagem de fundo CSS
Os modos de mesclagem CSS tornam provável mesclar imagens e texto, assim porquê o recurso de mesclagem em softwares porquê 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 aditar o modo de mesclagem que queríamos usar.
Seguindo isto, background-blend-mode foi definido porquê soft-lightpermitindo-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 gerar um design mais multíplice.
Adicionamos uma tag div com “flex_image_box” para atuar porquê 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 porquê “img1”, “img2” e “img3”. Configurando o largura de cada imagem para 600pxnós somos capazes deixe a propriedade height em branco sem modificar a proporção das imagens; agora é hora de aditar nosso clip-path!
Para gerar 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 trebelhar com o posicionamento do nosso contêiner flex-box para prometer que as imagens ficassem na posição correta na tela. Nossas regras de clip-path podem ser vistas inferior.
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 muito com o fundo.
Texto e imagens responsivos a CSS
Já exploramos a arte de gerar sites responsivos impressionantes usando HTML, CSS e JavaScript no pretérito, mas podemos desenvolver 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 porquê 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 profundeza da janela que ocupam. As unidades relativas são diferentes, produzindo alturas e comprimentos relativos a outras medidas, porquê a janela do navegador ou um elemento pai. As unidades relativas inferior são comumente usadas e essenciais para web design responsivo.
- em: Esta unidade é normalmente usada com texto. É relativo ao tamanho da natividade do elemento atual, tornando 4em quatro vezes maior que o tamanho da natividade definido.
- rem: Assim porquê em, rem é relativo ao tamanho da natividade de um elemento; o elemento raiz em uma jerarquia é usado para definir o tamanho da saída.
- vw/vh: determinando a largura e a profundeza com base no tamanho da janela de visualização, 2vw é igual a 2% da largura do navegador, enquanto 2vh é igual a 2% da profundeza 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 natividade 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 porquê padrão para qualquer texto que não tenha uma tag CSS de tamanho de natividade. Alternativamente, valores relativos podem ser empregados ao usar a propriedade CSS font-size, e leste é o método que usamos para prometer que o texto em nossa seção de cabeçalho seja dimensionado adequadamente para qualquer viewport.
Adicionamos duas tags de cabeçalho ao nosso HTML, permitindo aditar texto ao projeto. Um é um cabeçalho grande principal, enquanto o outro é um subcabeçalho, e ambos usam unidades relativas.
3. Largura e Profundidade do CSS
Todos os elementos HTML vêm com dimensões de profundeza e largura, sejam eles div, img, a ou qualquer outro tipo de tag. Essas dimensões podem ser definidas maquinalmente para valores padrão, mas também podem ser ditadas por web designers usando as regras corretas; usamos esses dois métodos para leste cabeçalho.
Unidades responsivas foram usadas para a imagem de fundo, com a profundeza 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 testar unidades CSS de largura e profundeza, com opções porquê “herdar” fornecendo os meios para adotar as dimensões de um elemento pai, e há muitos outros truques porquê 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 aditar textura e tornar o projeto mais interessante. Começamos por definir o nosso cor do texto para pretoseguido pela formato do mix-blend-mode para overlay.
Vale a pena explorar as diferentes opções de mesclagem que você tem ao mourejar com texto, pois os planos de fundo com perfis de cores exclusivos responderão de maneira dissemelhante às configurações usadas.
5. Transformação de texto CSS
O CSS text-transform é uma propriedade inteligente que permite aos designers modificar as maiúsculas e minúsculas do texto em seus sites sem afetar a maneira porquê 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 porquê a inserimos em nosso HTML.
Propriedades de estouro de CSS
O HTML muitas vezes pode parecer uma estrutura rígida que define limites rígidos para o teor 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 teor que pode evadir de seus limites. O estouro de texto é semelhante, embora se aplique somente ao texto e permita aditar parâmetros adicionais às suas regras. Usamos somente overflow para leste projeto (nós o usamos para restringir o tamanho do corpo da nossa página), mas você pode ler sobre o overflow de texto no site do W3Schools.
Usando CSS para seus layouts da Web
CSS é uma instrumento 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 cláusula, pois isso lhe dará uma visão ainda mais profunda de porquê todas essas ferramentas funcionam. Outrossim, você pode trebelhar com o cabeçalho que criamos para aditar seus próprios toques finais.
Leia a seguir
Sobre o responsável
