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

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

Carolina by Carolina
25 de março de 2022
Reading Time: 18 mins read
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

As melhores luvas para jogos

5 razões pelas quais o Magic Keyboard para iPad não é para todos

8 itens tecnológicos superestimados dos últimos cinco anos

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

Carolina

Carolina

Related Posts

As melhores luvas para jogos
Entretenimento

As melhores luvas para jogos

28 de janeiro de 2023
5 razões pelas quais o Magic Keyboard para iPad não é para todos
Entretenimento

5 razões pelas quais o Magic Keyboard para iPad não é para todos

28 de janeiro de 2023
8 itens tecnológicos superestimados dos últimos cinco anos
Entretenimento

8 itens tecnológicos superestimados dos últimos cinco anos

28 de janeiro de 2023
Finally, a Rugged Phone Deserving of the Flagship Moniker
Entretenimento

Finally, a Rugged Phone Deserving of the Flagship Moniker

28 de janeiro de 2023
O que é detecção e resposta estendida e por que é importante?
Entretenimento

O que é detecção e resposta estendida e por que é importante?

28 de janeiro de 2023
10 maneiras de transfixar a instrumento de informações do sistema no Windows
Entretenimento

6 maneiras de verificar o nome do protótipo do seu computador com Windows

27 de janeiro de 2023
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

As melhores luvas para jogos

As melhores luvas para jogos

28 de janeiro de 2023
Qual mecanismo de pesquisa é mais privado?

Qual mecanismo de pesquisa é mais privado?

28 de janeiro de 2023
5 razões pelas quais o Magic Keyboard para iPad não é para todos

5 razões pelas quais o Magic Keyboard para iPad não é para todos

28 de janeiro de 2023
Porquê formatar o Go Source para um código consistente mais limpo

Porquê formatar o Go Source para um código consistente mais limpo

28 de janeiro de 2023
8 itens tecnológicos superestimados dos últimos cinco anos

8 itens tecnológicos superestimados dos últimos cinco anos

28 de janeiro de 2023

Categorias

  • Entretenimento
  • Mundo
  • Notícias
  • 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 contato@vixblog.com

Posts recentes

  • As melhores luvas para jogos
  • Qual mecanismo de pesquisa é mais privado?
  • 5 razões pelas quais o Magic Keyboard para iPad não é para todos

Categorias

  • Entretenimento
  • Mundo
  • Notícias
  • 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.