Você sabe o que é mais legal do que usar uma imagem na hora de construir um site? Que tal fazer algo com HTML e CSS que pareça e funcione como uma imagem? E quer saber, isso é super fácil agora com consultas de contêiner. Neste post vamos fazer um anúncio, que parece uma imagem, com HTML e CSS.  Em seguida, faremos com que ela atue como uma imagem à medida que é comprimida, expandida e movida para outros locais do documento. Ok, vamos dar uma olhada!   https://youtu.be/5ugwp7HlpGs?embedable=true  Ok, então temos esse anúncio da Vans na barra lateral do site que estamos construindo, e atualmente é uma imagem.   Isso dificulta a edição; um designer precisaria atualizá-lo e nos fornecer uma nova imagem se algo precisasse mudar.  Além disso, provavelmente precisaríamos de várias versões para usar com o conjunto de origem, para que pareça nítido em telas de alta densidade e baixa resolução.  Portanto, temos a tarefa de convertê-lo para HTML; Como podemos fazer isso?  Algumas desvantagens do uso de imagens e unidades de viewport  Bem, provavelmente poderíamos usar unidades de janela de visualização, mas precisaríamos adicionar código extra se colocássemos o anúncio em locais diferentes onde suas dimensões seriam diferentes, já que tudo seria baseado na janela de visualização e não nas dimensões do contêiner.  Então, poderíamos conseguir, mas poderia ficar um pouco confuso. Em vez disso, poderíamos usar consultas de contêiner e unidades de consulta de contêiner. As consultas de contêiner são um pouco como consultas de mídia, mas baseadas nas dimensões de qualquer contêiner na página, em vez da janela de visualização geral.  Configurando um contêiner com a propriedade CSS  container-type  Ok, vamos verificar com o que estamos começando.   Então, parece muito bom aqui, mas como ele responde?   Uh, o texto e as bordas não mudam de tamanho, então ele precisa de um pouco de atenção porque está bem quebrado do jeito que está. Agora, uma coisa que já estamos fazendo aqui é usar uma   que permite que o contêiner responda como uma imagem faria, tudo bem. aspect-ratio   figure { aspect-ratio: 1 / 1.5; }  Só precisamos alterar todas as dimensões do conteúdo para que ele também responda corretamente. O primeiro passo aqui é fornecer um contêiner para monitorar nossas dimensões. Este será o nosso elemento de figura.  Para usar consultas de contêiner aqui, precisamos definir o que é conhecido como contexto de contenção. Podemos fazer isso com a propriedade   . Para este exemplo, podemos usar um valor de tamanho embutido. container-type   figure { ... container-type: inline-size; }  Isso configurará um contêiner que dimensionará as coisas com base em seu tamanho embutido que, neste caso, será a largura da figura. Tudo bem, agora temos um contêiner para monitorar e estamos livres para usar unidades de consulta de contêiner. E há muito por onde escolher. Podemos usar qualquer um destes valores unitários:   cqw   cqh   cqi   cqb   cqmin   cqmax  Aqui, usaremos   que, acredito, significa consulta de contêiner inline. Uma unidade   é igual a um por cento da largura do contêiner. Ok, isso é tudo que precisamos; a partir daqui, estamos apenas definindo as unidades conforme necessário. cqi cqi  Aqui, temos algumas propriedades personalizadas que são usadas em vários elementos deste anúncio.   figure { ... --frameInset: 0.5rem; --frameStyle: solid 0.25rem currentColor; }  Vamos começar com o quanto esse quadro é inserido na borda externa do contêiner. Vamos fazer três   . cqi   figure { ... --frameInset: 3cqi; }  A seguir, vamos definir a espessura das bordas aqui. Nesse caso, usarei a função   para evitar que as bordas encolham abaixo de um pixel, mas quero que sejam dinâmicas, desde que sejam maiores que o valor de um pixel. max  Portanto, o primeiro valor é um pixel, depois o segundo é o valor dinâmico. Vamos fazer um   . cqi   figure { ... --frameStyle: solid max(1px, 1cqi) currentColor; }  Agora, para o elemento   , que é o título principal, o texto “Vans”, vamos fazer vinte e cinco   . E, para o espaço abaixo do título, vamos fazer três   . strong cqi cqi   strong { font-size: 25cqi; padding-bottom: 3cqi; }  Agora, vamos passar para o subtítulo “Off the Wall”. Deve ter cerca de metade do tamanho do título principal, então vamos tentar doze   . E, para o espaço acima do texto, vamos com três   novamente. cqi cqi   em { font-size: 12cqi; padding-top: 3cqi; }  Tudo bem, para a última peça, o rótulo "Desde 1966", vamos usar um tamanho de fonte seis   . E, para o espaço acima e abaixo, estamos usando a propriedade lógica   que leva até dois valores. O primeiro valor é o valor acima do texto e o segundo valor é para o espaço abaixo. cqi padding-block  Então, vamos com dois   acima. E, em nosso cálculo, deixaremos   como está, mas usaremos cinco   de espaço adicional. cqi --frameInset cqi   time { font-size: 6cqi; padding-block: 2cqi calc(5cqi + var(--frameInset)); }  Ok, legal, isso parece bom.   Vamos dar uma olhada em como ele responde. À medida que o apertamos, tudo responde de maneira adequada e uniforme, como queríamos. Parece muito com uma imagem.   Parece muito bom mesmo quando é pequeno, e você pode ver que as bordas nunca diminuem abaixo de um pixel. Então, quando chegamos a larguras realmente estreitas, ela fica mais larga e tudo ainda parece ótimo.   Quão legal é isso? Um conjunto de estilos e funciona perfeitamente. À medida que dimensionamos para frente e para trás, parece ótimo.  Agora, o que é ainda mais legal é que podemos pegar a marcação do nosso anúncio, movê-la para a região da coluna principal aqui, e tudo continua funcionando como funcionaria se fosse uma imagem.     <header><h1>A Brief History of Vans</h1></header> <div class="content"> <main> <figure> <svg viewBox="0 0 256 256"> <path d="M90.4,67.9C88,69,87.1,70.6,83,80c-4.4,10.2-4.8,12.3-3.1,15"/> <path d="M97.4,95.2c-0.6,0.6-1.2,1.7-1.2,2.3s0"/> </svg> <figcaption> <strong>Vans</strong> <em>Off the Wall</em> <time>Since 1966</time> </figcaption> </figure> ... </main> </div>  Isso é tão legal e legal. Lembre-se de que há apenas um conjunto de estilos para realizar tudo isso. E nenhuma consulta de mídia estava envolvida. Há muito mais sobre consultas de contêiner como um todo, então fique atento a postagens futuras onde abordarei diferentes aspectos.  Quer ver isso em ação?  Confira o código de demonstração e exemplos dessas técnicas no exemplo do Codepen abaixo. Se você tiver alguma dúvida ou opinião, não hesite em deixar um comentário.   https://codepen.io/brianmtreese/pen/poGegXB?embedable=true

Buy Me a Coffee

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

Make resilience your competitive advantage

HTML: Como redimensionar uma imagem com consultas de contêiner CSS!

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Digital Nomads Ouçam: O que você precisa saber sobre o novo visto DTV da Tailândia

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

Uma breve introdução à teoria do cérebro de Boltzmann

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Digital Nomads Ouçam: O que você precisa saber sobre o novo visto DTV da Tailândia

As camadas invisíveis: por que as entrevistas com usuários são um ativo insubstituível

Uma breve introdução à teoria do cérebro de Boltzmann

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps