Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

16 julho 2008

Borda com duas cores para imagens


Para adicionar uma borda com duas cores em uma imagem usando apenas CSS,
utilize este truque muito simples:

img{
border:6px solid #E9751F;
padding:4px;
background:#F3CB94;
}
Na verdade o que ocorre é que a 'segunda borda' surge quando o espaço criado
com padding recebe um fundo colorido (background).
Para colocar a 'borda dupla' em uma imagem hospedada no Blogger, depois de ter feito o upload, clique no modo HTML da postagem e adicione dentro de:

<img style="border:6px solid #E9751F;padding:4px;background:#F3CB94;"

As cores e larguras das bordas podem ser editadas livremente. Você pode colocar o valor hexadecimal que o blogger transforma em rgb automaticamente.


pescado no cssglobe

Artigos Relacionados

23 comentários:

Rafael Moreira disse...

Ariane, gostaria de fazer o download do "Template Cinza" porém o ficheiro foi removido o que torna isso impossível! Se você podesse disponibilizar esse template eu agradeceria de coração!

Obrigado! ;)

Walter Porciuncula Jr disse...

Desculpe fazer a minha pergunta por aqui, mas nao achei seu mail no blog.
Poderia ensinar a fazer o seu "menu" e "Categoria"? esse que eh flutuante?

Walter Porciuncula Jr disse...

Querida!

Desculpe pela mensagem anterior.. xeretando mais eu achei os dois que queria... e ja usei e ficou show!

www.porquehojeequarta.blogspot.com

Abçs

Ariane disse...

Rafael, estou ajeitando os templates e em breve eles voltarão (mas com reformas).

Áurea disse...

Olá Ariane,
Que bom que você apareceu no Templates, estava com saudades das suas palavras!
Foi boa a idéia do post da vez né! Assim posso prestigiar meus amigos e dar boas dicas no blog!
Seu blog sempre foi referência para mim. Está tudo muito legal, reformulado e com dicas muito boas.
Ultimamente estou um pouco afastada por estar preparando as aulas que vou dar em agosto e setembro e a matéria é bem difícil!
Grande beijo para você!

milton c disse...

Inserir no meu Blog, e ficou muito legal.Valeu.
Milton C

Rafael Moreira disse...

Muito obrigado Ariane... vou aguardar!

Daniela Milagres disse...

Olá! Sempre visito seu blog... Estou escrevendo pra dizer que estou disponibilizando no meu Blog Emporium Digital, alguns templates criados por mim! Caso tenha interesse, aguardo sua visita!

Jéssica Marques disse...

Seu site tem sido muito útil para mim, te agradeço imensamente, to usando um template que vc fez, organizei algumas coisas e ficou ainda mais bonito, qd puder dê uma passadinha lá, tb te add aos meus favoritos ok?
Beijos

Sonicpvg disse...

Muito interessante vou usar isso no meu site...

Mais como muda as cores não entendi?

www.piratafilmes.blogspot.com

QUADRIDEKO disse...

Gostei muito !

Parabéns !

Um Abraço

Vitor Lucas Gonçalves disse...

qualé nao sei onde coloca aquele html...

é péssimo noa consigo colocar

Cantinho Escolar disse...

adorei seu blog e super util...bjs

### Du ### disse...

como eu coloco borda na no meu winget
de "ultimos post"


mistureca .blogspot .com

scallafutsalabc disse...

ola ariane sou novo no blog mas gostari de saber como q eu consigo colocar a imagem do nosso time no cabeçalho do blog??

Intruder disse...

o veio vc poderia me dizer como vc separa os seus marcadores dessa maneira?

Ja tentei de tudo eu ja tinha visto em outros blogs mas naum consegui resposta nenhuma também

espero q esse possa me ajudar

Celia Maria disse...

como faco para colocar gifs no meu blog? Fiz um a pouco tempo, mas gostaria de colocar figuras, bonequinas, estas coisas para que o blog fica legal, mas nao consigo pois sempre fala de um tal xml. O que e isso?

Ariane disse...

Celia, gifs não funcionam no blogger, tem que hospedar em outro site.

Marilu de Jesus disse...

Parabéns pela sua iniciativa de ajudar pessoas como eu que pouco compreendem essas terminologias.
Já utilizei algumas dicas suas. Obrigada

vitor yuji disse...

cara valeu sou novo nessas coisas de html e esse blog me fez deixar o meu muito melhor valeu mesmo

[PaTrIcK] [cUnHa] ®™ disse...

Como q faz pra colocar uma foto no lugar da cor?

Luana Cataldo disse...

Oi Ariane, tudo bem... assim como a outras pessoas, o seu blog tem me ajudado muito a deixar o meu do jeito q eu quero... Já está quase lá.

Gostei da idéia de deixar a borda das fotos com duas cores diferentes.. tem tudo a ver com o meu blog, mas não entendi como fazer isso no html da postagem.

Tentei fazer no CSS, e as fotos ficaram só com a borda interna. A externa não apareceu, só apareceu na imagem q uso como cabeçalho do blog... onde eu não queria q as bordas aparecessem.

Se puder ajudar, ficarei mega agradecida. Um abraço!

Prevenção Online disse...

como faz para o efeito so nas imagem das postagens? não quero esse efeito nas imagens do gadget..

desde ja grato

Postar um comentário

Os comentários são moderados.