16/04/2014

Molduras ou backgrounds nas imagens com CSS


Yooo meu amorecos!!! Mil desculpas por ficar esses dias todos sem postar, não estava dando as caras nem nas redes sociais realmente não estava bem. Então hoje trago uma postagem bem simples e básica, amanha prometo trazer algo melhor. Estou pensando em disponibilizar alguns dos layouts que havia feito por encomenda e não foram entregues, o que acham? Bom hoje vou mostrar como colocar molduras ou  background nas imagens usando CSS. É muito fácil de fazer, o melhor que pode colocar fundos diferentes em cada imagem se desejar, acho bem legal em layouts simples e meigos. Mas querem ver como se faz? É só continuar lendo!



Para isso basta adicionar esse código a onde desejar, um gadget ou postagem. Onde desejar:
Códigos
<img src="URL DA IMAGEM" style="background: url(URL DO BACKGROUND); padding: 5px; width: 387px; height: 216"/>


◤Entendendo o código◥
 URL DA IMAGEM: Coloque o endereço da imagem que deseja.
 URL DO BACKGROUND: Coloque o endereço da imagem que ficará no fundo.
 5px: Espessura da borda aumente ou diminua de acordo com seu gosto.
• width: 387px: Altura da imagem. (Deixara em um tamanho padrão, se desejar remova).
 height: 216px: Largura da imagem. (Deixara em um tamanho padrão, se desejar remova)


Prontinho é só isso, então gostaram? Espero que sim, vou ficando por aqui ate a próxima querido beijinhos.Créditos: Reino Kawaii~

24 comentários:

  1. Bem util ^3^ Beijão http://pieceofheavenoficial.blogspot.com.br/

    ResponderExcluir
  2. Esse tutorial é bem útil mesmo e bem fácil de se fazer :3

    s-impatie.blogspot.com.br | Simpatie ♡

    ResponderExcluir
  3. Anônimo16/4/14

    A Wendy tava com saudades de você por aqui >u< a seja lá o que houve,espero que tenha se resolvido <3 e quanto aos layouts,nossa eu amo mesmo seus layouts são muito lindos e bem feitos e eu amo layouts daqui >3< a esse tutorial e muito útil eu não sabia mesmo como colocava um background assim no fundo,eu já tinha visto algumas pessoas usando mais não sabia como fazia para usar bjkss Wendy <3
    Things of Kawaii

    ResponderExcluir
    Respostas
    1. Mesmo? Prometo não sumir tanto tempo mais. Eu estava mais é indisposta perdi um amigo bem próximo então, estava bem desanimada para qualquer coisa. Mas obrigada pelo carinho, prometo evitar de sumir tanto rsrs. Serio? Fico tão feliz em saber disso, me anima mais para trazer muitos e muitos mais lays. Entendo bem is<3 Obrigada por comentar Bea-chan beijokas.

      Excluir
  4. Anônimo16/4/14

    Nossa, adorei esse jeito de colocar bordas nas imagens do blog. É diferente do normal da blogosfera, talvez um dia tente >3<

    Até mais, www.b-urning.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Verdade é bem diferente. Mas obrigada por gostar espero que um dia possa usar. ^^

      Excluir
  5. Anônimo16/4/14

    Owwnnnt fica muito fofo, uma pena algumas pessoas acharem feio :s
    Quanto aos layouts, acho que você deveria postar, sempre uso um layout daqui em meus blog de teste *u* e se for bom, uso no meu blog mesmo!!
    Te perdoo por ficar fora..você quase não posta no GNMH, né?! Por que?

    Royalty

    ResponderExcluir
    Respostas
    1. Verdade é uma pena... D: mas obrigada por achar fofo.
      Serio? Que honra, postarei então alguns sim. Hihi que bom, que me perdoa. Sim também posto lá, eu ando com o tempo bem curtinho ai quase não tenho tempo para postar em nem um blog, mas em breve postarei lá sempre que for possível, ^^

      Excluir
  6. Eu sempre fui doida para descobrir como se fazia isso - agora eu sei haha'
    Luxury | Purple Brown

    ResponderExcluir
  7. Isso eu já tinha visto em alguns blogs, é um efeito muito legal e bem simples de ser feito, da um toque muito bom em uma imagem. Só tem que tomar cuidado para não colocar uma imagem pesada d+ na moldura, ou o carregamento da pagina fica mais lento. Obrigado por compartilhar.
    Abraço.

    ResponderExcluir
    Respostas
    1. Verdade Diego, não só com a imagem mas também o tipo de imagem. Porque pode acabar matando aparência fofa e da primeira imagem. Mas obrigada por gostar e por lembrar de algo que ate esqueci de mencionar. ^^

      Excluir
  8. Amei o tutorial >.<
    http://demonicrabbit.blogspot.com.br/

    ResponderExcluir
  9. Anônimo17/4/14

    aaaaaaah quanto tempo que eu não venho aqui d= minhas semanas estão difíceis, o bom que de hoje até terça da pra mexer um monte no pc \o/ só que eu tenho que fazer uma célula (eu estudei isso ano passado com o outro prof essa fessora devia ta num hospício ela é muito doidona só acho), ai ela deu um trabalho pra gente desenhar (de novo) as células com o nome das organelas, pela terceira vez, ai tenho um troço de história, estudar pra geografia, cuidar do raffa, ter criatividade pra faze um post, assisti Fairy Tail, to viciada \o/, tipo aquela vez que vc tinha me passado os sites pra ver eu não tava gostando muito, ai eu fiquei com uma vontade louca de assistir este domingo, ja assisti 20 episódios e nem deu uma semana aheuaheuaheu dps falo que num tenho tempo...kkkk Mas eu to apxonada pelo Gray kk
    Isso disponibilize lays, eu preciso trocar o meu, só que eu não quero, eu amo ele, mas eu to meio enjoada e meio não enjoada (ai Senhor, indecisa que nada essa)
    Que fofo e fácil o tutorial :0 e fica mega fofuxo ^^ vô te chama no feice hj, troquei a foto de perfil to mega gata -sqn aheuaheu ainda nem coloquei uma foto com meu cabelo azul só pra minha avó num briga cmg kkkkkkk além de que as pontas nem tão mais azuis tão brancas -.-' Vou deixar de lado meu cachorrinho pq meus olhos ainda tão doendo de...bom...

    Enfim, bjo bjo Wendy <33
    Panther Pink & Blue || pantherpinkandblue.blogspot.com

    ResponderExcluir
    Respostas
    1. Verdade, mas tudo bem realmente eu entendo. Uma célula? Nosa lhe desejo boa sorte! Hhsuahsuas como assim ela e doida? AAhhh agora entendi, bom as vezes ela que repassar para ter certeza que lembram (meu antigo professor usava isso como desculpa). Nossa quanta coisa o.o realmente lhe desejo muita, muita sorte! Compreendo ^^ mas que bom que esta vendo agora. Hehehe mas temos que tirar um tempinho para nós também, mas que bom que gostou. Hihi legal pelo Gray? ^^

      Irei sim, porém são bem simples e os mais antigos então não são muito bonitos rsrs. Mas sempre tem aqueles que gostam. :3 Obrigada por gostar do tutorial. ^^ Serio azul? Manda uma foto deixa eu ver vai??? Hihi a minha também costumava brigar comigo, mas faz tempo que não apareço lá. Mas deve estar lindo. :3 Nossa desejo melhoras para sua visão, mas o que houve para estar doendo?

      Beijinhos linda, fico feliz em ver você por aqui. <3

      Excluir
  10. Anônimo17/4/14

    Que tutorial fofo Wendy! Wendy, preciso falar com você!

    ResponderExcluir
    Respostas
    1. Yoo Hyuna, obrigada por gostar. Mesmo o que houve? Bom como podemos nos falar, por aqui mesmo ou tem alguma forma de contato??

      Excluir
  11. Oi, Wendy!
    Aqui é a Neko, a postadora do Kate Quer. Eu respondi seu comentário lá na postagem e eu já arrumei quanto aos créditos. Me desculpe pelo problema, haha :)

    Beeeeeeeijos, Neko!
    letswondering.blogspot.com

    ResponderExcluir
    Respostas
    1. Olá linda, obrigada por responder e arrumar. Eu que peço desculpas se pareci um pouco arrogante, espero que não tenha passado essa impressão. Mas muito obrigada por arrumar. Beijinhos Neko.

      Excluir
  12. Eeeh por algum motivo algumas de suas postagens não apareceu nas minhas atualizações, mas ok é bom que vi isso antes que ficasse muito antiga. Achei super fofo isso, eu ficava bugando as imagens para conseguir fazer uma moldura decente kkk'... agora será mais simples!

    ResponderExcluir
    Respostas
    1. Isso tem acontecido com alguns leitores D: eu fiquei um ano sem ter atualizações no painel de ninguém, mas consegui arrumar ate alguns dias atrás, mas acho que ainda esta normalizando. Mas tomara que volte ao normal. Hihi que bom, que consegui ficou feliz por isso. Eu entendo bem disso, eu já fiz muita caca nas imagens tentando fazer moldura, mas descobri esse tutorial a algum tempo atrás, mas sabe aquilo de postar e esquecer? Mas finalmente trouxe espero que seja muito útil a você.

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345