Deixando uma imagem como se fosse um selo por CSS

Vou reproduzir uma técnica que vi outro dia sobre como deixar uma imagem parecida com um selo, com aquela borda picotada.

É simples, e a própria explicação do que vamos fazer hjá demonstra o que vamos manipular: a borda do elemento CSS.

Como você faria para criar uma marcação html dessa forma?

Poderia ser criada uma imagem, mas e se você precisar alterar a imagem e o texto várias vezes?

Com o código abaixo, fica fácil; basicamente, deve-se colocar a imagem como background de uma div, e essa div com borda tracejada. O valor ali de cima, fica dentro de um <p>

<div class="stamp">
 <p>99&cent;</p>
</div>
.stamp {
    width: 500px;
    height: 414px;
    background: #fff url(george.jpg) no-repeat;
    border: 12px dashed #1b1a19; }
.stamp p {
    color: #fff;
    margin: 10px 10px 0 0;
    font: bold 60px Georgia, "Times New Roman", Times, serif;
    text-align: right; }

Pronto!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *