Vix Blog
No Result
View All Result
  • Economia
  • Educação
  • Segurança
  • Mundo
  • Negócios
  • Notícias
  • Tecnologia
  • DMCA
NEWSLETTER
  • Economia
  • Educação
  • Segurança
  • Mundo
  • Negócios
  • Notícias
  • Tecnologia
  • DMCA
No Result
View All Result
Vix Blog
No Result
View All Result
Home Entretenimento

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

Carolina por Carolina
25 de março de 2022
Tempo de leitura:18min de leitura
0
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 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


site de 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.

MAKEUSEO VÍDEO DO DIA


imagem de fundo css css


imagem de fundo css html

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


site de imagem de modo de mesclagem 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.


misturar imagem css

Seguindo isto, background-blend-mode foi definido porquê soft-lightpermitindo-nos suavizar a imagem.

3. Caminho de Clipe CSS


site de imagem flexbox

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.


flexbox imagem css


html de imagem flexbox

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!


site de triângulos flexbox

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.


flexbox triângulos css

4. Opacidade CSS


opacidade da imagem 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


site de tamanho de 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 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.


CSS tamanho da fonte html

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.


CSS tamanho da fonte

Relacionado: Porquê modificar o tamanho da natividade HTML em CSS

3. Largura e Profundidade do CSS


css largura altura 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


site de sobreposição de modo de mesclagem css

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.


css sobreposição de modo de mesclagem css

5. Transformação de texto CSS


site de 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.


transformação de texto css

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.

RELATED POSTS

Uma vez que parar de compartilhar recibos de leitura no iMessage

Os 4 melhores aplicativos para iPhone para fãs da Terreno-média

As 5 melhores ferramentas para um trabalho produtivo

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.


dicas e truques css
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 responsável

Samuel L. Garbett
(31 artigos publicados)

Samuel é um redactor de tecnologia fundamentado no Reino Uno com uma paixão por todas as coisas de bricolage. Tendo iniciado negócios nas áreas de desenvolvimento web e sensação 3D, além de trabalhar porquê redactor por muitos anos, Samuel oferece uma visão única do mundo da tecnologia. Concentrando-se principalmente em projetos de tecnologia DIY, ele adora compartilhar ideias divertidas e emocionantes que você pode testar em vivenda. Fora do trabalho, Samuel geralmente pode ser encontrado andando de bicicleta, jogando videogames para PC ou tentando desesperadamente se enviar com seu caranguejo de estimação.

Mais de Samuel L. Garbett

Assine a nossa newsletter

Junte-se à nossa newsletter para dicas de tecnologia, análises, e-books gratuitos e ofertas exclusivas!

Clique cá para assinar

Novidades no seu e-mail!

Não enviamos spam! Leia mais em nossa Política de privacidade

Verifique sua caixa de entrada ou a pasta de spam para confirmar sua assinatura.

ShareTweetPin
Carolina

Carolina

Relacionado Posts

Uma vez que parar de compartilhar recibos de leitura no iMessage
Entretenimento

Uma vez que parar de compartilhar recibos de leitura no iMessage

24 de março de 2022
Os 4 melhores aplicativos para iPhone para fãs da Terreno-média
Entretenimento

Os 4 melhores aplicativos para iPhone para fãs da Terreno-média

24 de março de 2022
As 5 melhores ferramentas para um trabalho produtivo
Entretenimento

As 5 melhores ferramentas para um trabalho produtivo

24 de março de 2022
Uma vez que emendar o driver de vídeo parou de responder no Windows 11/10
Entretenimento

Uma vez que emendar o driver de vídeo parou de responder no Windows 11/10

24 de março de 2022
Uma selecção de destaque para Linux
Entretenimento

Uma opção de destaque para Linux

24 de março de 2022
Uma selecção de destaque para Linux
Entretenimento

Uma selecção de destaque para Linux

24 de março de 2022
Next Post

Agora você pode usar o LibreOffice em seu navegador: veja porquê

O que é jogar para lucrar jogos de criptografia e quais são os melhores para jogar?

O que é jogar para lucrar jogos de criptografia e quais são os melhores para jogar?

Deixe um comentário Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

No Result
View All Result

Últimas Notícias

7 maneiras de emendar a instrumento Windows Miracast quando ela funciona mal

24 de março de 2022
Porquê enganar aplicativos para pensar que seu Android não está enraizado

Porquê enganar aplicativos para pensar que seu Android não está enraizado

24 de março de 2022
Uma vez que parar de compartilhar recibos de leitura no iMessage

Uma vez que parar de compartilhar recibos de leitura no iMessage

24 de março de 2022
Porquê usar guias no Vivaldi para organizar sua navegação

Uma vez que usar gestos do mouse no Vivaldi para velejar mais rápido

24 de março de 2022
Uma vez que trabalhar em mansão sem experiência

Uma vez que trabalhar em mansão sem experiência

24 de março de 2022

Novidades no seu e-mail!

Não enviamos spam! Leia mais em nossa Política de privacidade

Verifique sua caixa de entrada ou a pasta de spam para confirmar sua assinatura.

Categorias

  • Entretenimento
  • Mundo
  • Segurança
Vix Blog

Somos entusiastas da tecnologia com a missão de ensinar ao mundo como usar e compreender a tecnologia em suas vidas.
SAIBA MAIS »

Entre em contato conosco enviando um e-mail para [email protected]

Posts recentes

  • 7 maneiras de emendar a instrumento Windows Miracast quando ela funciona mal
  • Porquê enganar aplicativos para pensar que seu Android não está enraizado
  • Uma vez que parar de compartilhar recibos de leitura no iMessage

Categorias

  • Entretenimento
  • Mundo
  • Segurança

Links Importantes

  • Quem Somos
  • Blog
  • Fale Conosco
  • Política de Privacidade
  • DMCA

© 2021 VixBlog - Notícias e dicas para o seu dia dia.

No Result
View All Result
  • Economia
  • Educação
  • Segurança
  • Mundo
  • Negócios
  • Notícias
  • Tecnologia
  • DMCA

© 2021 VixBlog - Notícias e dicas para o seu dia dia.