Design responsívo: imagens
Clique/toque aqui para navegar pelas seções da página
Imagens são um recurso importante para websites, tanto como conteúdo, quanto componente de layout da interface provida por eles. Quando trabalhadas como conteúdo, as imagens são pré-formatadas pelo framework Sketch, que retira suas bordas e ajusta a largura delas em 100% da largura de um bloco de conteúdo, expandindo-as até sua largura máxima.
Ainda assim, Sketch fornece as seguintes classes para se trabalhar com imagens:
| Classe | Descrição |
|---|---|
| absolute-image | A imagem terá sua largura definida em 100% da largura disponível pelo bloco de conteúdo que a contém. |
| relative-image | A imagem terá sua largura definida em 100% da largura disponível pelo bloco de conteúdo que a contém, porém irá ser expandida até a largura máxima que a imagem permite (padrão já adotado pelo framework para toda imagem). |
Considere os seguintes exemplos:
<div class="panel col-8 center small-border-frame border-color-silver"> <img src="https://raw.githubusercontent.com/celmaster/sketch-core/master/public_html/assets/image/bear-figure.jpg" alt="" title=""></div><div class="container medium-padding"></div><div class="panel col-8 center small-border-frame border-color-silver"> <img class="absolute-image" src="https://raw.githubusercontent.com/celmaster/sketch-core/master/public_html/assets/image/bear-figure.jpg" alt="" title=""></div>Esse código irá resultar no seguinte conteúdo:
Atenção:
Imagens que ocupam 100% da largura de um bloco de conteúdo que as contém podem perder qualidade caso suas larguras sejam inferiores à largura daquele que a contém.
Imagens: planos de fundo e suas repetições
O design de um website acaba que por abranger muitos recursos gráficos, sendo um deles os planos de fundo com imagens que enriquecem seu layout. O framework Sketch fornece classes para formatar planos de fundo em blocos de conteúdo. Dentre essas classes, vamos ver algumas delas que são utilizadas para tratar de repetições assim como o apresentado pela tabela abaixo:
| Classe | Descrição |
|---|---|
| bg-repeat | Faz o plano de fundo se repetir horizontal e verticalmente, o que já um padrão. |
| bg-repeat-x | Faz o plano de fundo se repetir horizontalmente. |
| bg-repeat-y | Faz o plano de fundo se repetir verticalmente |
| bg-no-repeat | Não permite que a imagem de plano de fundo se repita. |
Vejamos o exemplo abaixo:
<div class="container small-border-frame border-color-silver"> <div class="container normal-height" style="background-image:url(https://raw.githubusercontent.com/celmaster/sketch-core/master/public_html/assets/image/bg-001.png)"> </div> <div class="container bg-color-black"> <p class="text-center text-color-white"> Plano de fundo com repetição horizontal e vertical </p> </div></div><div class="container small-border-frame border-color-silver"> <div class="container normal-height bg-repeat-x" style="background-image:url(https://raw.githubusercontent.com/celmaster/sketch-core/master/public_html/assets/image/bg-001.png)"> </div> <div class="container bg-color-black"> <p class="text-center text-color-white"> Plano de fundo com repetição horizontal </p> </div></div><div class="container small-border-frame border-color-silver"> <div class="container normal-height bg-repeat-y" style="background-image:url(https://raw.githubusercontent.com/celmaster/sketch-core/master/public_html/assets/image/bg-001.png)"> </div> <div class="container bg-color-black"> <p class="text-center text-color-white"> Plano de fundo com repetição vertical </p> </div></div><div class="container small-border-frame border-color-silver"> <div class="container normal-height bg-no-repeat" style="background-image:url(https://raw.githubusercontent.com/celmaster/sketch-core/master/public_html/assets/image/bg-001.png)"> </div> <div class="container bg-color-black"> <p class="text-center text-color-white"> Plano de fundo sem repetição </p> </div></div>O código acima irá gerar os seguintes resultados:
Plano de fundo com repetição horizontal e vertical
Plano de fundo com repetição horizontal
Plano de fundo com repetição vertical
Plano de fundo sem repetição
Imagens: planos de fundo e seus tamanhos
As seguintes classes são utilizadas para controlar o tamanho de um plano de fundo:
| Classe | Descrição |
|---|---|
| bg-size-cover | Ocupa toda a largura disponível por um bloco de conteúdo de modo que muitas vezes parte da imagem utilizada como plano de fundo não será exibida pelo bloco de conteúdo. |
| bg-size-contain | Escala o tamanho da imagem de plano de fundo conforme a altura e largura disponível pelo bloco de conteúdo. |
Observe o exemplo abaixo:
<div class="container small-border-frame border-color-silver"> <div class="container long-height bg-size-cover" style="background-image:url(https://raw.githubusercontent.com/celmaster/sketch-core/master/public_html/assets/image/macaw-figure.jpg)"> </div></div><div class="container medium-padding"></div><div class="container small-border-frame border-color-silver"> <div class="container long-height bg-no-repeat bg-size-contain" style="background-image:url(https://raw.githubusercontent.com/celmaster/sketch-core/master/public_html/assets/image/macaw-figure.jpg)"> </div></div>O código acima irá gerar os seguintes resultados:
Imagens: planos de fundo e seus alinhamentos
As seguintes classes são utilizadas para alinhar um plano de fundo:
| Classe | Descrição |
|---|---|
| bg-left | Alinha o plano de fundo à esquerda. |
| bg-left-top | Alinha o plano de fundo à esquerda e ao topo do bloco de conteúdo. |
| bg-left-bottom | Alinha o plano de fundo à esquerda e ao rodapé do bloco de conteúdo. |
| bg-center | Centraliza o plano de fundo. |
| bg-center-top | Centraliza o plano de fundo e o alinha em direção ao topo do bloco de conteúdo. |
| bg-center-bottom | Centraliza o plano de fundo e o alinha em direção ao rodapé do bloco de conteúdo. |
| bg-right | Alinha o plano de fundo à direita. |
| bg-right-top | Alinha o plano de fundo à direita e ao topo do bloco de conteúdo. |
| bg-right-bottom | Alinha o plano de fundo à direita e ao rodapé do bloco de conteúdo. |
| bg-top | Alinha o plano de fundo ao topo do bloco de conteúdo. |
| bg-bottom | Alinha o plano de fundo ao rodapé do bloco de conteúdo. |
Observe o exemplo abaixo:
<div class="container small-border-frame border-color-silver"> <div class="container long-height bg-no-repeat bg-size-cover bg-left" style="background-image:url(https://raw.githubusercontent.com/celmaster/sketch-core/master/public_html/assets/image/Sketch.jpg)"> </div></div><div class="container medium-padding"></div><div class="container small-border-frame border-color-silver"> <div class="container long-height bg-no-repeat bg-size-cover bg-center" style="background-image:url(https://raw.githubusercontent.com/celmaster/sketch-core/master/public_html/assets/image/Sketch.jpg)"> </div></div><div class="container medium-padding"></div><div class="container small-border-frame border-color-silver"> <div class="container long-height bg-no-repeat bg-size-cover bg-right" style="background-image:url(https://raw.githubusercontent.com/celmaster/sketch-core/master/public_html/assets/image/Sketch.jpg)"> </div></div>O código acima irá gerar os seguintes resultados:
Dica:
Redimensione seu navegador para analisar o alinhamento dos planos de fundo.
Imagens: planos de fundo e o efeito parallax
O efeito parallax é garantido aos planos de fundo por meio do atachamento fixo a eles. Assim, quando a tela é rolada, o plano de fundo também. A classe bg-fixed é responsável por garantir o efeito parallax.
Aviso:
A classe bg-fixed utiliza a seguinte propriedade e valor em sua folha de estilo: background-attachment: fixed. Infelizmente essa propriedade não é suportada por alguns navegadores.
