Passo 11 – Adicionar faixa do canto

Vamos agora adicionar uma pequena faixa no canto do bloco. Isto é possível com uma mistura de CSS com PNG’s transparentes.

Bem, primeiro, iremos precisar da imagem. Podem encontrá-la no pack disponibilizado no início destes tutoriais.

Depois disso, vamos adicionar este HTML:

<div class=”block”>
<img src=”images/ribbon_featured.png” class=”ribbon”/>
<span class=”block_inside”>

<div class=”image_block”>
<img src=”images/sample_feature.jpg” />
</div>
<div class=”text_block”>
<h2>Eden Website Design</h2>
<small>in <a href=”">web design</a> tagged <a href=”">corporate</a>, <a href=”">web2</a></small>

<p>And then a short description of the website would go in here.  Something saying maybe what awesome skills I used on the project and how happy the client was. </p>
<br />
<a href=”" class=”button”>View Project</a>
</div>

</span>
</div>

Como podem ver, ali está a tag <img> na segunda linha. Note que demos a class=”ribbon” e pusemos dentro do .block, mas fora do .block_inside. Se a imagem estivesse dentro do .block_inside, descotrolaria a propriedade overflow:auto que definimos antes.

Agora que inserimos tudo no layout, vamos colocar tudo no sítio:

.block {
border:1px solid #a3a09e;
background-color:#ffffff;
margin-bottom:20px;
position:relative;
}
.ribbon {
position:absolute;
top:-3px;
right:-3px;
}

Podemos ver que:

1. Adicionámos o atributos position:relative ao .block. Fizemos isto porque podemos usar o posicionamento absoluto dentro e tê-lo relativo ao .block (e não a toda a página).

2. Colocámos para que a imagem apareça 3px ao lado do bloco e 3px para cima do bloco.

Aqui está, o layout actualizado:

Partilhar esta Entrada