Na semana passada, recebi alguns feeds interessantes em minha caixa de correio: Forrst lançou um novo design , a tão esperada plataforma de blog com NodeJS Ghost foi finalmente lançada ao público, há na verdade um Jekyll Theme que não parece uma página da web dos anos 90, e eu fundei um design notável na forma de um artigo incrível sobre a Rússia do New York Times ( e um debate sobre se isso é uma boa ou má ideia ).
Depois de abrir cada um desses sites, percebi essa tendência de design que já existe há algum tempo, uma imagem com uma legenda ou algum tipo de conteúdo sobre ela :
<small> Artigo do New York Times sobre a Rússia </small>
<small> Tema Jekyll Incorporado </small>
<small> Página de recursos do Ghost </small>
<small> Portfólio pessoal Branberg encontrado em Forrst </small>
Pessoalmente, acho essa estratégia bastante eficaz. Usar uma imagem pode criar um belo efeito para a cópia em suas páginas da web. Desde que a imagem esteja relacionada ao seu produto, ao sobrepor sobre ela um conteúdo específico, você pode criar um contraste entre esse conteúdo e a imagem, que então fornece um contexto para suas informações, enfatizando a importância delas. Isso se tornou comum em páginas da Web de aplicativos , que têm como único objetivo apresentar o produto.
<small> A página da web do aplicativo Tikkio mostra uma imagem de fundo com as pessoas se preparando para entrar em um show. </small>
Essa estratégia é mais comumente fornecida por meio da propriedade css. Geralmente é uma combinação do seguinte:background-image
- Um elemento com e .
position:absolutebackgroundbackground-size: cover - Um elemento com e .
position:relativebackgroundbackground-size: cover - Um elemento com
backgrounde para fornecer o efeito de rolagem.background-attachment: fixed
Embora isso seja suficiente para obter o efeito de forma eficaz, existem cenários em que o <img>elemento tag pode ser melhor, especialmente quando você deseja que suas imagens sejam incluídas na impressão , um melhor desempenho nas animações e sempre que suas imagens contiverem valor semântico em sua página da web .
Apresentando o objeto “capa”
Em OOCSS, uma abstração é um objeto base simples que pode ser construído em um objeto mais poderoso. Algumas abstrações populares são o objeto de mídia , criado por Nicole Sullivan , bem como o objeto ilha , criado por Harry Roberts . Podemos ver algumas dessas implementações em frameworks como o Bootstrap 3 e, por meio de elementos navegáveis como o Pattern Lab de Brad Frost , posso garantir que mais dessas estão chegando.
O objeto de cobertura é o nome que eu vim para este texto sobre imagem tendência, devido sua similaridade com capas de livros, que contam com a mesma introdução para atrair leitores e possíveis clientes para obter um livro. Se pensarmos sobre isso, livros e páginas da web estão usando o mesmo estilo para fornecer uma primeira impressão ao leitor / usuário e levá-lo a continuar explorando seu conteúdo.
Sempre que quiser usar uma imagem semântica válida como capa de sua página da web, use a seguinte marcação.
<figure class="cover__content">
<img src="URL_TO_IMG" alt="IMG_ALT" class="cover__image">
<figcaption class="cover__text">
<!-- Your content goes here -->
...
</figcaption>
</figure>Adicione o seguinte CSS:
.cover__content {
position: relative;
margin: 0;
}
.cover__image {
max-width: 100%;
}
.cover__text {
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
width: 100%;
text-align: center;
}A primeira coisa que você notará é o <figcaption>elemento tag. Esta é uma forma de informar aos nossos usuários que este conteúdo específico pertence ao nosso elemento figura . Este elemento foi introduzido no HTML5 e é a ferramenta perfeita para descrever qualquer informação relacionada a uma imagem, assim como as legendas funcionam em revistas e jornais da vida real.
A segunda coisa é que a posição absoluta nos dá controle perfeito sobre nosso texto, então ao invés de trabalhar com números mágicos para posicionar o texto (por exemplo ), podemos usar o do texto e porcentagens para posicionar nosso conteúdo responsivamente. Portanto, se quisermos que o conteúdo esteja sempre centralizado nos eixos xey, basta adicionar a a ele.margin: 200px 100pxwidthbottom: 50%; width: 50%;
Aqui está o codepen com o exemplo :
Veja o Pen <a href=’ http://codepen.io/jjperezaguinaga/pen/2b3d6a60b06bd222759fc213fdbe30bd’> 2b3d6a60b06bd222759fc213fdbe30bd </a> por jjperezaguinaga (<a href=’ http://codepen.io/jjperezaguinaga’> @jjperezaguinaga < / a>) em <a href=’ http://codepen.io’> CodePen </a> </p>
<script async src = “// codepen.io/assets/embed/ei.js”> < / script>
Neste exemplo, adicionei um modificador BEM para fazer o texto sempre estar no topo. A classe fornece apenas as alterações necessárias para este elemento específico. Você pode criar classes que atendam melhor às suas necessidades, como , e assim por diante.cover__text--topcover__text--leftcover__text--bottom-left
Como podemos facilmente abstrair essa classe da marcação, não precisamos ter uma imagem específica dentro do <figure>elemento. Devido à flexibilidade deste elemento, podemos incluir qualquer tipo de mídia para funcionar como nossa capa. Que tal um vídeo ?
Veja o objeto Pen <a href=’ http://codepen.io/jjperezaguinaga/pen/627414032e4d71adeea3867daae8e679′> CSS “Cover” [Vídeo] </a> de jjperezaguinaga (<a href = ‘ http://codepen.io / jjperezaguinaga ‘> @jjperezaguinaga </a>) em <a href=’ http://codepen.io’> CodePen </a> </p>
<script async src = “// codepen.io/assets/embed /ei.js “> </script>
Conclusão
Existem vários usos para esta abstração de capa. Por exemplo, no caso de você precisar fazer uma apresentação de slides, você pode colocar várias imagens dentro do <figure>elemento. Coloque uma imagem duas vezes e acrescente a ela. Os outros permanecem os mesmos. O oculto funcionará como seu “titular” e fornecerá o para os demais posicionados de forma absoluta, o que permite que você, através de Javascript e CSS3, mostre alguns efeitos legais. Basta adicionar à classe e você pode obter uma apresentação de slides com legenda fácil.position:relative; float: left; visibility: hiddenheightoverflow:hiddencover__content
Você decide se deseja usar ou exibir um efeito de capa de livro em sua página da web; Acredito fortemente que, a menos que você precise executar um efeito de rolagem ou , é melhor usar uma tag. Uma das principais reduções dessa abordagem é a falta de capacidade de resposta em termos de fontes de imagem. Enquanto em css de fundo de imagem puro você pode usar uma consulta de mídia e solicitar, baixar e entregar a imagem adequada de acordo com o dispositivo de que precisa , falta um pouco de atenção nesta área. No entanto, no futuro poderemos usar a propriedade, mesmo que hoje tenhamos que usar seu polyfill .background-image<img>background-positionbackground-attachment<img><img>srcset