Tutorial: Efeito Caption

Update: Gostaria muito que vocês fossem no meu blog pessoal, e seguissem e comentassem suas opiniões.

Oie pessoal, hoje é quarta-feira, então hoje vou postar um tutorial, super fácil e que deixa as imagens do blog uma fofura. Os efeito que mostrarei hoje são da autoria de algum postador do DFY, acho que é tumblr. Mas, eu encontrei o efeito no blog Garotas Cupcakes, então os créditos são todos para ele .É um efeito muito usado para mostrar as moderadoras. Para quem já viu esse efeito, vamos aprender a fazer. Mas, para quem nunca viu aqui está eles.

Prévia dos efeitos - está na barra lateral.

Lindo não? Quer aprender a fazer? Então, clica em Mais Informações vai...

#PASSO1: Vá no seu HTML e procure pela tag: ]]></b:skin>

E cole isso acima dela:

/** EFEITO CAPTION **/@font-face {font-family: "04b03"; src: url('http://static.tumblr.com/qbzesex/2tSm7y7gy/04b_03_.ttf'); format("truetype");}imagem {display: block; position: relative; float: left; overflow: hidden; margin: 0 3px 3px 0;}captioon {position: absolute; background: #000; color: #fff; padding: 3px 25%; opacity: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; text-align: center; line-height: 10px; font-size: 8px; font-family: "04b03", small-fonts; text-shadow: 1px 1px 3px #000;}imagem:hover captioon {opacity: 0.75;}imagem:hover:before {opacity: 0;}.caption:before {bottom: 10px; right: 10px;}.caption captioon {bottom: 3px; right: 30%;}.caption:hover captioon {right: 0px;}

Onde está em negrito, você pode fazer alterações de cor. Aqui está uma tabela de cores.

#PASSO2: Crie um HTML/JavaScript e cole assim:

<imagem class="caption"><img src="IMAGEM"><captioon>Exemplo</captioon></imagem>

Creditem ao GC, DFY e o Estranha Mente se reblogarem, pois transferi os códigos.

Teminamos, ufa. Então, vocês gostaram do tutorial de hoje? Lembrem-se de que agora eu irei postar 2 vezes na semana, na quarta-feira: tutoriais, e na sexta-feira: utilitários. Vou ver se trago algumas imagens editadas ok?

Eu queria convidar vocês a conhecer meu blog, e usarem um novo recurso que eu adquiri lá por agora. Agora você pode pedir tutoriais e utilitário lá. É só entrar no meu blog e clicar em peça. 

Mrs. Inglaterra  ~Coffee in Paris~