24/12/2014

Como criar efeitos • Blog

Oiie gente linda! Tudo bem com vocês?
Alguém ai anda ocupado preparando as coisas pro natal? Pois eu estou ocupadicima! Não sei como estou tendo tempo pra postar..Pois bem, hoje trago um Tutorial explicativo de como criar efeitos. A dona no blog Fluffy White me perguntou como eu faço para personaliza-los e aplicar o código. Achei muito interessante a pergunta e venho com todo prazer tentar ensinar! Vou tentar explicar da melhor forma possível para que você entenda! Então aluno, fique ligado porque a professora Ziane chegou..haha! Acho que estou ficando doidinha  :P
Antes de tudo, eu preciso avisar que, eu selecionei os códigos Básicos para que ficasse mais fácil de ensinar e de você entender! 
Se preferir, abra seu bloco de notas e guarde os códigos.

♥ Tenha a consciência de que nem todos os códigos irão funcionar no seu efeito! ♥ 

Primeiro é importante que você possua a estrutura do seu efeito. Coloque acima de ]]></b:skin> o código abaixo: 
.nomedoefeito{
os códigos }
.nomedoefeito:hover{
os códigos }
Você vai escolher  um nome para o efeito e colocar no lugar indicado. Se você já tem uma noção de como modificar o código, você já pode começar a se diverti XD
Quem ainda não entende muito como se é feito eu trouxe os códigos bem comuns que podem ser aplicados!

Onde estiver escrito de vermelho é preciso que você modifique (ou não) o número, nome etc. Se estiver escrito de azul é a explicação!
font-family:  nomedafonte; / ** fonte padrão do efeito**/
font-size:   0px; /** tamanho da fonte**/
text-align: center; /** posicionamento da fonte, direita use -> right, esquerda use --> left; **/
color: #suacor; /** cor da fonte **/
background:  #suacor; /** cor de fundo**/
box-shadow: inset 0 0 0px #suacor, 0 0px 0px #suacor; /** sombra interna e externa**/
padding: 0px; /** espaço dentro do efeito**/
border-radius: 0px; /**borda arredondada**/
width:  0px; /** largura **/
height:  0px; /** altura**/
border:  0px solid #sua cor; /** borda**/
opacity: 0.0; /** opacidade no efeito**/
margin: 0px; /** distanciamento entre as imagens**/
outline: 0px dashed #cordaborda;  /** borda que pode se distanciar das imagens**/ 
outline-offset: -0px; /** controlar borda que se distancia da imagem **/ 
-webkit-transition-duration: .0s; /** transição dos efeitos**/ 
-webkit-border-radius: 0px; /** transição do arredondamento da borda**/
-webkit-transform: rotate(0deg) rotate(0deg); /** aplicar rotação nas imagens **/ 
 Claro que não estão todos os códigos, isso é só uma base. Depois é só ir escolhendo o que quer que apareça em sei efeito. Você também pode utilizar esse site Css3 para criar efeitos, ele é bem útil e torna a vida bem mais fácil, apesar de que eu nunca utilizei ele, então não posso te ajudar muito. Eu gosto de CRIAR na marra u.u. Só sei que quando seu efeito estiver pronto, você copia o código de onde estiver escrito CSS3 CODEVIEW e aplica em sua "estrutura". Entenda melhor na imagem abaixo:

Espero que tenham entendido :)

Pode parecer difícil, mas depois quando pega o jeito, você faz de olhos fechados! 

Para que seu efeito funcione terá de aplicar o código abaixo em um gadget HTML/Java Script :
<a href="https://www.blogger.com/LINK" title="Nome do blog"><img class="nomedoefeito" src="LINKDAIMAGEM" /></a>
É importante colocar o nome no lugar indicado, exemplo: se seu efeito se chamar Lulupi você terá que por esse nome onde estiver escrito " nome do efeito ", entendido? Isso é fundamental para que o efeito funcione! 

Bom, é difícil de explicar TODOS os códigos, tem alguns que são bem mais complexões, por essa razão talvez irei postar mais um tuto explicativo sobre efeitos ( eu disse TALVEZ ) . Se eu fosse explicar grande parte deles, eu ficaria até amanha rsrs'! Enfim, espero que tenha te ajudado e que você tenha gostado :3 Comente o que acharam! Qualquer dúvida, pergunte nos comentários.
Bjoos e um FELIZ NATAL PARA TODOS ♥ 

4 comentários:

  1. Amei seu blog...e a postagem vai me ajudar muito no novo blog que estou fazendo..
    .princes-kawaii.blogspot.com.br
    Kisses

    ResponderExcluir
    Respostas
    1. Muito obrigada!! Fico muito feliz que irá te ajudar *--*
      Bjoos || ♥

      Excluir

♥ Comente algo relacionado ao post !
♥ Proibido xingar, ofender e ser agressivo !
♥ Seja educado (a) !