And After - Design e Tecnologia por Sua Conta!
O desenvolvedor é um blog sobre desenvolvimento web, não tratando apenas de programação mas também compartilhando experiências, métodos, debates e tendências da internet.

O Desenvolvedor é um blog de www.andafter.org
Assinar o Feed RSS

Chris Benseler

[www]

Fotos sempre tiradas do lado direito do rosto. Que nem o Rei!
Viciado em web, trabalho com web. Javascript e (x)html são minha praia conhecida, e me arrisco com PHP e Java.
Na vida offline, futebol e música me distraem. E falar bobeiras com os amigos

Status
Karma: 15743
Opiniões: 30

Mais deste autor


Deixando uma imagem como se fosse um selo por CSS

Deixando uma imagem como se fosse um selo por CSS

Muito bomEste texto foi classificado como Muito bom
Em Programação
Por Chris Benseler
16 de Agosto de 2009

Inserindo por CSS efeito de selo em uma imagem

RSS Acompanhe O Desenvolvedor por Feeds!


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!

O que você achou do texto?

  • Muito ruim
  • Ruim
  • Regular
  • Bom
  • Muito bom
Sua opinião é o que faz a comunidade funcionar, colabore para isso!

Tags: css

Enviar para um amigo
Você pode comentar, assinar o feed, conhecer mais sobre o autor e ajudar a divulgar este artigo em sua ferramenta favorita através dos botões abaixo.
  • Rec6
  • ueba
  • linkk
  • dihitt
  • linkloko
  • websapiens
  • linkto
  • Eu curti

Comentários

Deixe seu comentário!

Nome (requerido)

E-mail (requerido - não será divulgado)

URL

Quanto é 5 + 4?




web tracker