Design responsívo: imagens
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-white-smoke"> <p class="text-center text-color-black"> 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-white-smoke"> <p class="text-center text-color-black"> 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-white-smoke"> <p class="text-center text-color-black"> 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-white-smoke"> <p class="text-center text-color-black"> 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.