21/04/2014

0

Header Accio Materiais

Leia Mais

0 comentários:

2

Menus Bombastic Design #2

MENU COME IN.


Cole este código no seu CSS (antes de </style>) ARRUMANDO-O!
/** MENU COME IN - POR BOMBASTIC DESIGN **/

nav1 {
display: inline-block;
font-family: FONTE; 
font-size: TAMANHO_DA_LETRApx;
text-align: center; 
width: LARGURApx;
color: #COR_LETRA; 
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out; 
font-style: normal; 
background: #COR_FUNDO; 
padding:10px;
}

nav1:hover {
color: #COR_LETRA_HOVER;
-moz-box-shadow: inset 0 0 0px 25px #COR_FUNDO_HOVER;
-webkit-box-shadow: inset 0 0 5px 25px #COR_FUNDO_HOVER;
box-shadow: inset 0 0 0px 25px #COR_FUNDO_HOVER;
color: #LETRA_COR_HOVER;
}
Onde está (na parte hover) 25px pode ser que precise ser alterado. Se o seu menu for maior q o do preview (com largura 50px) o número precisará aumentar. Se o seu menu for menor, diminua o valor.
Agora cole isso onde deseja que o menu apareça:
<nav1>menu</nav1>
Lembre-se de colocar o link (<a href=”….) ou falso i-frame, depende de seu tumblr.
Se for links, assim ficará:
<a href="link_menu"><nav1>título_menu</a></nav1>
Se usar, credite!
Lembre-se do like, nos ajuda a saber o que vocês estão gostando ^^

2 comentários:

0

Menus Bombastic Design

MENU DROP DOWN FLIP.

  • Live Preview.
  • O código não foi feito por nós, somente adaptado e passado para o tutorial.
  • Feito por Pamella.
  • Dê like e credite, caso lhe seja útil.
image
Cole esse código no seu CSS.
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 250px;
height: 40px;
margin: 20px auto;
background: #COR_TITULO; /* onde está navigation no preview */
position: relative;
z-index: 100;
} .navigation, .navigation a.main { border-radius: 4px;
-webkit-border-radius: 4px; -moz-border-radius: 4px;
} .navigation:hover, .navigation:hover a.main { border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0;
} .navigation a.main {
display: block;
height: 40px;
font: bold 15px/40px FONTE, sans-serif;
text-align: center;
text-decoration: none;color: #COR_TITULO; /* onde está navigation no preview */
-webkit-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; position: relative;
z-index: 100;
} .navigation:hover a.main {
color: #COR_TITULO_HOVER;/* onde está navigation no preview */ background: #COR_FUNDO_HOVER;
/* onde está navigation no preview */
} .navigation li {
width: LARGURApx;
height: ALTURApx; background: #COR_FUNDO; font: normal 12px/40px FONTE, sans-serif !important;
color: #COR_LETRA; text-align: center;
margin: 0; -webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;

-webkit-transform: perspective(350px) rotateX(-90deg);

-o-transform: perspective(350px) rotateX(-90deg);

transform: perspective(350px) rotateX(-90deg);

box-shadow: 0px 2px 10px rgba(0,0,0,0.05);

-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);

-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
} .navigation li:nth-child(even) { background: #COR_FUNDO_1; } .navigation li:nth-child(odd) { background: #COR_FUNDO_2; } .navigation li.n1 {

-webkit-transition: 0.2s linear 0.8s;

-o-transition: 0.2s linear 0.8s;

transition: 0.2s linear 0.8s;
} .navigation li.n2 {
-webkit-transition: 0.2s linear 0.6s;

-o-transition: 0.2s linear 0.6s;

transition: 0.2s linear 0.6s;
} .navigation li.n3 {

-webkit-transition: 0.2s linear 0.4s;

-o-transition: 0.2s linear 0.4s;

transition: 0.2s linear 0.4s;
} .navigation li.n4 {
-webkit-transition:0.2s linear 0.2s;

-o-transition:0.2s linear 0.2s;
transition:0.2s linear 0.2s;
} .navigation li.n5 { border-radius: 0px 0px 4px 4px;

-webkit-transition: 0.2s linear 0s;

-o-transition: 0.2s linear 0s;

transition: 0.2s linear 0s;
} .navigation:hover li {

-webkit-transform: perspective(350px) rotateX(0deg);

-o-transform: perspective(350px) rotateX(0deg);

transform: perspective(350px) rotateX(0deg);

-webkit-transition:0.2s linear 0s; -o-transition:0.2s linear 0s;

transition:0.2s linear 0s;
} .navigation:hover .n2 {
-webkit-transition-delay: 0.2s;

-o-transition-delay: 0.2s;

transition-delay: 0.2s;
} .navigation:hover .n3 {
-webkit-transition-delay: 0.4s;

-o-transition-delay: 0.4s;

transition-delay: 0.4s;
} .navigation:hover .n4 {
transition-delay: 0.6s;

-o-transition-delay: 0.6s;

transition-delay: 0.6s;
} .navigation:hover .n5 {
-webkit-transition-delay: 0.8s;

-o-transition-delay: 0.8s;

transition-delay: 0.8s; }
Ajuste onde foi indicado.
Cole esse código onde quer que o menu apareça.
<ul class="navigation">
  
<a class="main" href="#url">Navigation</a>
  
<li class="n1"><a href="#">item #1</a></li>
 /* LEMBRE DE COLOCAR OS LINKS EM A HREF="LINK AQUI" */
<li class="n2"><a href="#">item #2</a></li>

<li class="n3"><a href="#">item #3</a></li>
 
<li class="n4"><a href="#">item #4</a></li>
 
<li class="n5"><a href="#">item #5</a></li>
</ul>
Créditos e likes são bem vindos.
Dúvidas? Passe em nossa askbox.

http://bombasticdesign.tumblr.com/post/78484963615

MENU FLIP.

  • Live Preview.
  • O código não foi feito por nós, somente adaptado e passado para o tutorial.
  • Feito por Pamella.
  • Dê like e credite, caso lhe seja útil.
    image
Cole esse código no seu CSS,
@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

@-webkit-keyframes flip {
  0%{-webkit-transform:rotateY(0deg);
  opacity:1;}
  100%{-webkit-transform:rotateY(95deg);
  opacity:0;}
}

@-moz-keyframes flip {
  0%{-webkit-transform:rotateY(0deg);
  opacity:1;}
  100%{-webkit-transform:rotateY(95deg);
  opacity:0;}
}

@-o-keyframes flip {
  0%{-webkit-transform:rotateY(0deg);
  opacity:1;}
  100%{-webkit-transform:rotateY(95deg);
  opacity:0;}
}

@keyframes flip {
  0%{-webkit-transform:rotateY(0deg);
  opacity:1;}
  100%{-webkit-transform:rotateY(95deg);
  opacity:0;}
}


ul {
  position:absolute;
  left:0;
  right:0;
  margin:50px auto;
  padding:0;
  
  width:200px;
  height:220px;
  list-style:none;
  -webkit-perspective:1000;
  -moz-perspective:1000;
  -o-perspective:1000;
  perspective:1000;
}

li {
  margin:2px 0;
  padding:0;
}

li a {
  display:block;
  height:18px;
  width:20px;
  background:#COR_MENU_FUNDO;
  color:#COR_LETRA;
  padding:8px 6px;
  text-decoration:none;
  text-align:center;
}
.menu {
  opacity:1;
  -webkit-transform:rotateY(0deg);
  -moz-transform:rotateY(0deg);
  -o-transform:rotateY(0deg);
  transform:rotateY(0deg);
  -webkit-transition:.3s;
  -moz-transition:.3s;
  -o-transition:.3s;
  transition:.3s;
}
li span {
  width:154px;
  float:left;
  text-align:center;
  background:#COR_MENU_FUNDO;
  color:#COR_LETRA;
  margin:-34px 34px;
  padding:8px 6px;
  transform-origin:0%;
  opacity:0;
  -webkit-transform:rotateY(95deg);
  -webkit-transition:.5s;
  -moz-transition:.5s;
  -o-transition:.5s;
  transition:.5s;
  -webkit-animation: flip 2s;
  -moz-animation: flip 2s;
  -o-animation: flip 2s;
  animation: flip 2s;
}

span[class='menu']{-webkit-animation:none;}
li:nth-child(2) span {
  -webkit-animation-delay:.5s;
  -moz-animation-delay:.5s;
  -o-animation-delay:.5s;
  animation-delay:.5s;}
li:nth-child(3) span {
  -webkit-animation-delay:.4s;
  -moz-animation-delay:.4s;
  -o-animation-delay:.4s;
  animation-delay:.4s;}
li:nth-child(4) span {
  -webkit-animation-delay:.3s;
  -moz-animation-delay:.3s;
  -o-animation-delay:.3s;
  animation-delay:.3s;}
li:nth-child(5) span {
  -webkit-animation-delay:.2s;
  -moz-animation-delay:.2s;
  -o-animation-delay:.2s;
  animation-delay:.2s;}
li:nth-child(6) span {
  -webkit-animation-delay:.1s;
  -moz-animation-delay:.1s;
  -o-animation-delay:.1s;
  animation-delay:.1s;}

li a:hover ~ span {
  opacity:1;
  -webkit-transform:rotateY(0deg);
  -moz-transform:rotateY(0deg);
  -o-transform:rotateY(0deg);
  transform:rotateY(0deg);
  -webkit-transition:.5s;
  -moz-transition:.5s;
  -o-transition:.5s;
  transition:.5s; 
} adapte as cores nas áreas indicadas. Sugiro que não se mexa em mais nada, porém fica a sua escolha. As cores são basicamente as das letras e do fundo do menu.
Agora cole esse código onde você quer que o menu apareça arrumando os links e seus respectivos títulos nas áreas indicadas.
 <ul>
        <li>
            <a class="entypo-menu" href="#"></a> <span class="menu">Menu</span>
        </li>

        <li>
            <a class="entypo-star" href="LINK_1"></a> <span>NOME_LINK_1</span>
        </li>

        <li>
            <a class="entypo-newspaper" href="LINK_2"></a> <span>NOME_LINK_2</span>
        </li>

        <li>
            <a class="entypo-location" href="LINK_3"></a> <span>NOME_LINK_3</span>
        </li>

        <li>
            <a class="entypo-link" href="LINK_4"></a> <span>NOME_LINK_4</span>
        </li>

        <li>
            <a class="entypo-help-circled" href="LINK_5"></a> <span>NOME_LINK_5</span>
        </li>
    </ul>
Pronto, está feito! Espero que gostem.
Deem like e credite, por favor.
Leia Mais

0 comentários:

17/04/2014

0

other

http://static.tumblr.com/rksp1t7/qEIn46fem/fjallaone-regular.otf

Wishlist 2.0
Vou ensinar vocês a fazerem, esse tipo de wishlist
Primeiro cole isso no seu css (entre <style> e </style>):
/***Wishlit Simone(cerejadosundae)*/
menusm1 {background: #703A53; color: #ffffff; padding: 5px;  text-transform:uppercase; text-align: center;  display: inline-block;font-size:9px; font-family: consolas;; -webkit-transition-duration: .99s; }
menusm1:hover {opacity:0.8 }
.menusm2 {background: #d6d6d6;font-family: 'Play', sans-serif;  text-align:left;font-size: 11px;margin: 1px; color: #777;display: block; -webkit-transition-duration: .30s;}
.menusm2:hover {padding-left:5px;}
.menusm2 a{ color: #777;}
Costumize tudo o que achar necessário, lembrando que o menusm1 é a class da primeira parte da wishlist, aquela coloridinha, personalize do jeito que achar melhor.Depois cole isso, onde deseja que a wishlist apareça:
<div class="menusm2"><menusm1>Nome 1</menusm1> <a href="http://link">Nome 2</a></div>
<div class="menusm2"><menusm1>Nome 1</menusm1> <a href="http://link">Nome 2</a></div>
<div class="menusm2"><menusm1>Nome 1</menusm1> <a href="http://link">Nome 2</a></div>
<div class="menusm2"><menusm1>Nome 1</menusm1> <a href="http://link">Nome 2</a></div>
<div class="menusm2"><menusm1>Nome 1</menusm1> <a href="http://link">Nome 2</a></div>
Mude os nonmes e os links. Se for útil credite ao meu tumblr ou ao ilovethemes. (Simone -http://cerejadosundae.tumblr.com/)

Imagens hover
Vou ensinar para vocês como fazer aquelas imagens hover, que quando passa o mouse em cima ela muda, Visualize aqui
Primeiro cole esse código no seu css, antes de </style>
Código aqui, esse é o código das imagens, se quiseres mudar o tamanho terá, que mudar a margin-top do segundo código para a foto ficar certinha
Após colar esse código, cole esse outro onde deseja que as fotos apareçam
Substiua a url das fotos, eu não sei porque, mas nesse código que eu uso a primeiro foto é a segunda e a segunda é a primeira, então a foto que você colocar após imageside, será a que irá aparecer quando o mouse passar…
Espero que tenha sido útil, se usar dê like e credite ao meu tumblr {Simone}

Tutorial: Imagens em Slide/Passando. (Com ou sem link)
Sim, esse é o tutorial do slide que passa no meu theme :) Primeiramente eu quero que CREDITEM esse tutorial por que ninguém fez ele ainda, e eu demorei para achar, ok? Além de ser fácil, eu sei que muitos querem aprender e todo mundo tem direito claro, então eu estou aqui para ensinar para vocês. Façam bom proveito, e eu espero que entendam, por que é bem simples!
1. Cole isso no seu html, depois da tag <head>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">

#myslideshow{ /*sample CSS quinze for demo*/
border:TAMANHOBORDASEQUISERpx solid #COR BORDA SE QUISER;
}

</style>
2.0 Cole isso logo abaixo do código acima se você quer somente imagens, não imagens com links ( lembrando que todas as imagens devem ter as mesmas proporções E NÃO SE ESQUEÇA DE MUDAR O TAMANHO E A LARGURA ONDE ESTÁ EM NEGRITO):
 <script src="http://static.tumblr.com/ywlup7y/MWKlz5boa/slideshowbyquinze.js" type="text/javascript">

/***********************************************
* Translucent slideshow- (c) Dynamic Drive ( dynamicdrive.com/)
* Tutorial e códigos adaptados/hospedados por Sarah S ( quinzeparameianoite.tumblr.com )
* Não retire esses créditos.
***********************************************/

</script>

<script type="text/javascript">

var translideshow1=new translideshow({
    wrapperid: "myslideshow", //div do slideshow
    dimensions: [LARGURAIMAGEM, ALTURAIMAGEM], //tamanho não precisa por "px" somente o numero. Deve ter o tamanho das imagens.
    imagearray: [
        ["urlprimeiraimagem"], 
        ["urlsegundaimagem"],["urlterceiraimagem"],
        ["urlquartaimagem"],["urlquintaimagem"], 
 ["urlultimaimagem"] //jamais retire isso! se quiser acrescentar fotos, acrescente em cima, jamais em baixo
 ],
 displaymode: {type:'auto', pause:2000, cycles:80, pauseonmouseover:true},
 orientation: "h", //Coloque H para slide direita/esquerda e V para esquerda/direita
 persist: true, //continuar a partir do ultimo slide
 slideduration: 800 //duração de cada slide, escolha o numero ou deixe esse ( milisegundos )
})

</script>
2.1 Se você quer as imagens com links, cole esse código ao invés do código acima. Não muda quase nada, somente acrescenta o código dos links ok? ( lembre-se, esse é o com imagem e link e o acima do “2.0” é somente imagens.)
<script src="http://static.tumblr.com/ywlup7y/MWKlz5boa/slideshowbyquinze.js" type="text/javascript">

/***********************************************
* Translucent slideshow- (c) Dynamic Drive ( dynamicdrive.com/)
* Tutorial e códigos adaptados/hospedados por Sarah S ( quinzeparameianoite.tumblr.com )
* Não retire esses créditos.
***********************************************/

</script>

<script type="text/javascript">

var translideshow1=new translideshow({
    wrapperid: "myslideshow", //div do slideshow
    dimensions: [400, 500], //tamanho não precisa por "px" somente o numero. Deve ter o tamanho das imagens.
    imagearray: [
    ["URL DA FOTO", "LINKAQUI"], //url da foto no primeiro, link no segundo
["URL DA FOTO", "LINKAQUI"],
["URL DA FOTO", "LINKAQUI"],
["URL DA FOTO", "LINKAQUI"],
["URL DA FOTO", "LINKAQUI"], //jamais retire isso! se quiser acrescentar fotos, acrescente em cima, jamais em baixo
 ],
 displaymode: {type:'auto', pause:2000, cycles:80, pauseonmouseover:true},
 orientation: "h", //Coloque H para slide direita/esquerda e V para esquerda/direita
 persist: true, //continuar a partir do ultimo slide
 slideduration: 800 //duração de cada slide, escolha o numero ou deixe esse ( milisegundos )
})

</script
3. E por último e mais fácil, cole esse código onde quer que apareça (depois da div <body>) seu slide no theme ( exemplo, em baixo do about, em cima das navegações. Eu criei outra div para posicionar onde eu queria.) :
<div id="myslideshow"></div>
Espero que consigam utilizar esse tutorial, pois está tudo explicado aqui e nos códigos! E por favor, creditem a mim, mesmo que seja postado em outro tumblr. Obrigada! Caso o código estiver com erro, fale comigo na ask, mas devo lembrar que o código foi testado várias vezes. Se caso não funcionar, recoloque as aspas de todos os códigos :) Eu modifiquei um pouco esse script, pois ele tinha paginação. Beijos :D
----------------------------------------------------------------------------------------------------------------------------------
MENU BUCKS ~
Eu não tinha um nome melhor pra dar pois é/ OASPDOASPDOAPOSD, enfim ele e super simples e só depende do hover.

Bom viram como ele e simples e fofinho? Então pra fazer ele e super simples, achei ele em um site, então não adianta copiar ((:
Bom a primeira coisa e copiar o código a seguir e colar entre <style> e </style>
/*** menu bucks por fred ****/
.button {
  width: 200px;
  margin: 0px;display: inline-block; margin: 0 -50px 0 0;
}
.button a {
  display: block;
  height: 40px;
  width: 150px;
  color: #fff;
  font:bold 14px/40px helvetica, verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  /*gradient*/  
  background: #67858f; text-shadow: 1px 1px 1px #799dab; 
 
}
.button a {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;

}
.button p {
-webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;

  background: #555;
  display: block;
  height: 30px;
  width: 130px; 
  margin: -35px 0 0 10px;
  text-align: center;
  font: 12px/40px helvetica, verdana, sans-serif;
  color: #fff;


  position: absolute;
  z-index: -1;

  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.button:hover .bottom {
  margin: -10px 0 0 10px;
}
.button:hover .top {
  margin: -80px 0 0 10px;
  line-height: 35px;
}
.button a:active {
background: #00b7ea; /* old browsers */
}
.button:active .bottom {
  margin: -20px 0 0 10px;
}
.button:active .top {
  margin: -70px 0 0 10px;
}
Não mecha nos códigos importantes pois você pode desconfigura-lo e ele não vai funcionar perfeitamente, bom só altere onde eu negritei ok? O código a seguir você vai colar aonde quer que o menu apareça 
<div class="button">
  <a href="/">home</a>
  <p class="bottom">pag. inicial</p>
</div>
<div class="button">
  <a href="/">contato</a>
  <p class="bottom">asked</p>
</div>
<div class="button">
  <a href="/">materiais</a>
  <p class="bottom">confira!</p>
</div>
Agora é só alterar o nome a descrição e o link, Pronto o menu esta pronto se tiver algum erro vem na ask ((: 
CREDITE SE USAR, MENU POR FRED

0 comentários:

0

Efeitos 2

Efeitos :: Crazy Opacity

© Unfe3ling Tutorials. Se lhe for útil dê like, se usar credite.
Obs: O que definirá o tamanho será os icons, o tamanho que usei nesse daí foi 100x100.
1). Cole o código abaixo onde deseja que o efeito apareça:
<a href="LINK-AQUI">
<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="http://static.tumblr.com/m69m65e/KsVm7q575/cai_1.png" /></a>
<a href="LINK-AQUI">
<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="http://static.tumblr.com/m69m65e/oi9m7q57a/cai_3.png" /></a>
<a href="LINK-AQUI">
<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="http://static.tumblr.com/m69m65e/VVpm7q57i/cai2.png" /></a>
<br>
<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="http://static.tumblr.com/m69m65e/KsVm7q575/cai_1.png" /></a>
<a href="LINK-AQUI">
<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="http://static.tumblr.com/m69m65e/oi9m7q57a/cai_3.png" /></a>
<a href="LINK-AQUI">
<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="http://static.tumblr.com/m69m65e/VVpm7q57i/cai2.png" /></a>
<br>
<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="http://static.tumblr.com/m69m65e/KsVm7q575/cai_1.png" /></a>
<a href="LINK-AQUI">
<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="http://static.tumblr.com/m69m65e/oi9m7q57a/cai_3.png" /></a>
<a href="LINK-AQUI">
<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="http://static.tumblr.com/m69m65e/VVpm7q57i/cai2.png" /></a><br>
Mude os links e as imagens.
-----------------------------------------------------------------------------------------------------------------------------------------------------------------

Wishlists :: Modelo II

© Unfe3ling Tutorials & Desenvolvimento. Se lhe for útil dê like, se usar credite.
Código CSS:
Abra este documento, escolha o modelo de wish que você deseja, copie o código e cole-o antes de </style>.
Código HTML:
Agora pegue o código abaixo da sua wish respectiva e cole-o onde desejar que ela fique:
Modelo 1:
<div class="menumw2"><a href="LINK">Wishlist #1</a></div>
Modelo 2:
<div class="menumw"><a href="LINK">Wishlist #2</a></div>
Modelo 3:
<div class="menumw3"><a href="LINK">Wishlist #3</a></div>
http://lugardohtml.tumblr.com/post/47466131152/wishlists-modelo-ii

0 comentários:

15/04/2014

0

Outros

Menu de Pages - Tutorial

Olá gente, espero que estejam bem. 
Estou de novo aqui, apenas por um motivo: tédio. E até porque estou super passando mal, nem sei como fui à escola hoje, devido às olimpíadas, saí cedo graças à meu bom Deus @--@ Estou cheia de dor de cabeça e ainda resfriada, o pior é a tontura, você anda e parece se seu cérebro tá pulando :c 

Achei super legal o fato de vocês terem gostado do layout free de halloween, mesmo ele não tendo nadica de nada de halloween -.- e vi que pediram pelos comentários, um tutorial de como fazer aquele menu do topo, confesso que pensei em usar no próximo layout do A.N, mas por esses dias estou sem inspiração para terminar o layout, aí comecei a fazer outro modelo de layout para o próximo do A.N, não me decido. Então, hoje trouxe como fazer esse menu do topo: Prévia ~x

Cole acima de ]]></b:skin>:
.menudepages {
text-align: center;
position: fixed;
z-index: 1000000;
width: 100%;
top: 0; left: 0;
background: #c2bdc7;
height: 25px;
padding: 5px;
word-spacing: 10px;
}
.menudepages a{
color: #ccc8d0;
text-shadow: 1px 1px 0 #afa8b5;
font-family: "simple";
font-size: 20px;
-webkit-transition-duration: 1s;
}
.menudepages a:hover {
color: #d6d3d9;
text-shadow: 1px 1px 0 #a59eac;
}
@font-face {
font-family: "Simple";
src: url("http://static.tumblr.com/jxlyjkb/3LBmpn15n/bebasneue.otf");
font-weight: normal;
font-style: normal;
}

Agora, cole em um HTML // Javascript:
<div class="menudepages">
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
<a href="LINK-AQUI">NOME</a>
</div>
http://adolescentenerd.blogspot.com.br/2013/10/menu-de-pages-tutorial.html

Menu Up & Down + 1004 Seguidores?! ^0^

- Irei pensar em algo para recompensá-los pela meta ( >.< )
Yoo mutantes perfeitos (~'w')~
Estou super feliz pois quando entrei hoje no blog pude ver que estamos com 1004 seguidores, eu...fiquei super...FELIZ mesmo! Pois ontem, o dia inteiro, a internet não queria funcionar, então não pude fazer o post que me pediram sobre o menu que estamos usando, e consequentemente, não pude ver o número de choco seguidores. E quero agradecer também pelos elogios nos comentários do post anterior, irei retribuir todas as visitas quando puder.

Então, já que hoje a internet está funcionando (e tinha mesmo, pois estou fazendo um dever de história e tenho que pegar algumas cifras para amanhã) irei trazer o tutorial do Menu up & down, créditos ao Eu Amo HTML (www), nosso querido afiliado :)
Preview (www)

Acima de ]]></b:skin> cole:
.fade-isa {
font-family: trebuchet ms;
font-size: 11px;
padding: 5px;
background-color: #COR DO FUNDO (ROSA);
box-shadow: inset 0 0 20px #COR DA SOMBRA INTERNA (ROSA), 0 0 4px #ccc;
text-align: center;
width: TAMANHO DO MENUpx;
text-transform: uppercase;
word-spacing: 5px;
letter-spacing: 1px;
-webkit-transition-duration: .80s;}
.fade-isa a {
color: #COR DA FONTE;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 5px;
padding-right: 6px;
text-shadow: 2px 1px 1px #COR DA SOMBRA DO TEXTO;
-webkit-transition-duration: .80s;}
.fade-isa a:hover {
color: #COR DA FONTE AO PASSAR O MOUSE;
text-shadow: 2px 1px 1px #COR DA SOMBRA AO PASSAR MOUSE;
text-align: center;
padding-top: 5px;
padding-bottom:5px;
padding-left: 5px;
padding-right: 6px;
background-color: #COR DO QUADRADINHO (AZUL);
box-shadow: inset 0 0 20px #COR DA SOMBRA DO QUADRADINHO (AZUL), 0 0 4px #ccc;
-webkit-transition-duration: .80s;}

Configure as informações em maiúsculo e cole em um HTML / Javascript:
<div class="fade-isa">
<a href="LINK" title="Mensagem do Tooltip">Nome</a>
<a href="LINK" title="Mensagem do Tooltip">Nome</a>
<a href="LINK" title="Mensagem do Tooltip">Nome</a>
<a href="LINK" title="Mensagem do Tooltip">Nome</a>
<a href="LINK" title="Mensagem do Tooltip">Nome</a>
<a href="LINK" title="Mensagem do Tooltip">Nome</a>
<a href="LINK" title="Mensagem do Tooltip">Nome</a></div>

- O "Mensagem do Tooltip" é aonde ficará a mensagem do tooltip, se você não quiser que apareça tooltip, apague "title="Mensagem do Tooltip""

Lembrando novamente: Quem fez foi a Isa Souza do E.A.H (www)
 http://adolescentenerd.blogspot.com.br/2013/08/menu-up-down-1004-seguidores-0.html

Efeito 180 graus

hihi (www) - comecei a usar esse site hoje --'
Olá pandas, ah não, confundi, vocês são humanos mesmo '-'

Mais tudo bem com vocês? espero que sim, estou com uma preguiça hoje, só queria dormir, mais o pc é tão tentador >.<' e eu tenho que estudar pra R.P.M [não, não é uma banda ç.ç ] ~> Resolução de Problemas Matemáticos e para mim é só uma coisa ~> cha-ti-sse que me fer-ra na es-co-la '-' e o pior, acho que estou de recuperação nessa matéria, amanhã com certeza farei a recuperação, ninguém merece, todos na minha sala acharam difícil a prova, já tem matemática, pra quê R.P.M? O.o'

Hoje trouxe para vocês um tutorial de como fazer o efeito do 'nerd' lá no banner, não sei se perceberam, mais se você colocar o mouse acima do 'nerd', ele irá girar como no exemplo (www) 
Achei super fofo, pois ele gira devagar, deixando super kawaii.
Vamos aprender?
Adaptei um pouco os links pois peguei esse tutorial do tumblr (www).

Para começar, clique na setinha, e procure por ]]></b:skin> e cole acima:
.close {border-radius:5px;transition:All 3.0226s ease;
-webkit-transition:All 3.0226s ease;
-moz-transition:All 3.0226s ease;
-o-transition:All 3.0226s ease;
transform: rotate(4deg) scale() skew() translate(10px);
-webkit-transform: rotate(4deg) scale() skew() translate(10px);
-moz-transform: rotate(4deg) scale() skew() translate(10px);
-o-transform: rotate(4deg) scale() skew() translate(10px);
-ms-transform: rotate(4deg) scale() skew() translate(10px);}
.close:hover {transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-webkit-transform: rotate(180deg) scale(1) skew(1deg) translate(0px);
-moz-transform: rotate(180deg) scale(1) skew(1deg) translate(0px);
-o-transform: rotate(180deg) scale(1) skew(1deg) translate(0px);
-ms-transform: rotate(180deg) scale(1) skew(1deg) translate(0px);}

E para terminar, é só colar em um HTML // Javascript:
<img src="Imagem" class="close" />
Espero que tenham gostado, se algo não der certo, perguntem pelos comentários ^^'
Agora irei atualizar o chocomapa :3
http://adolescentenerd.blogspot.com.br/2013/07/efeito-180-graus.html

0 comentários:

0

Making a CSS3 Animated Menu

Posted in

 Martin Angelov 

DEMO DOWNLOAD
In this short tutorial, we will be using the power of CSS3 effects and transitions, to build a JavaScript-free animated navigation menu which you can use to add a polished look to your website or template. We will be using some neat features such as the :target pseudo selector and :after elements.

The HTML

The first step is to define the HTML backbone of the website. We are using HTML5 tags extensively, so we will need to include the HTML5 enabling script for IE in the head section of the document. As it is enclosed in a conditional comment, it is only going to be requested in IE browsers and will not affect the performance of the others:

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!-- Including the Lobster font from Google's Font Directory -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />

        <!-- Enabling HTML5 support for Internet Explorer -->
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <header>
            <h1>CSS3 Animated Navigation Menu</h1>
            <h2>&laquo; Read and download on Tutorialzine</h2>
        </header>

        <nav>
            <ul class="fancyNav">
                <li id="home"><a href="#home" class="homeIcon">Home</a></li>
                <li id="news"><a href="#news">News</a></li>
                <li id="about"><a href="#about">About us</a></li>
                <li id="services"><a href="#services">Services</a></li>
                <li id="contact"><a href="#contact">Contact us</a></li>
            </ul>
        </nav>

        <footer>Looks best in Firefox 4, usable everywhere.</footer>

    </body>
</html>
You can notice that we are including a stylesheet from Google APIs. It contains a @font-face declaration and includes the Lobster font into our page, from Google’s Web Font directory, which has grown to include more than 100 wonderful open source fonts, generously hosted by Google.
In the body of the document, we have the header, nav and footer HTML5 tags, which divide the page into three sections with semantic value. We will be concentrating on the UL element inside the nav tag. This is our navigation menu.
The unordered list has a fancyNav class applied to it, which we will be using to limit the effect of the CSS styles that we will be writing in a moment. This will make the code more portable and limit any possible side effects. Another thing to point out is that each of the LI elements has an unique ID, linked to from the anchor elements inside them. This will enable us to use the :target pseudo-class to style the currently selected menu item.
So lets move on to the CSS styles.
CSS3 Animated Navigation Menu
CSS3 Animated Navigation Menu

The CSS

You might find it surprising that the navigation menu we are building does not use any images (except for the home icon – a transparent png). Everything is done with CSS3 gradients, box shadows, and multiple backgrounds.
As for browser support, the menu works in the latest versions of Firefox, Chrome, Safari and Opera, while it is still usable in every IE version from 7 onwards. However, it does look best in Firefox 4, as it supports animating :before and :after pseudo elements via the transition property (other browsers are expected to follow suite).
Our CSS styles are defined in assets/styles.css. I would suggest that you download the menu code from the button above, and open that file in a text editor. We will be focusing primarily on the navigation menu, so I will be skipping the boring parts of the file.
Lets start styling the navigation menu! We first write the rules for the unordered list – targeted with thefancyNav class, and the li items:
.fancyNav{
    /* Affects the UL element */
    overflow: hidden;
    display: inline-block;

    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;

    box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
    -moz-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
    -webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.fancyNav li{
    /* Specifying a fallback color and we define CSS3 gradients for the major browsers: */

    background-color: #f0f0f0;
    background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
    background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
    background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);

    border-right: 1px solid rgba(9, 9, 9, 0.125);

    /* Adding a 1px inset highlight for a more polished efect: */

    box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    -webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;

    position:relative;

    float: left;
    list-style: none;
}
Notice the huge list of CSS3 gradient syntaxes. All recent versions of Firefox, Chrome and Safari support gradients. With Opera and IE 10 (currently in platform preview mode), also joining in with their latest versions. Initially there were two competing syntaxes, backed by Mozilla (Firefox) on one side and Webkit (Chrome and Safari) on the other, but Firefox’s gradient syntax has been agreed on as the industry standard.
The next step is to use the :after pseudo element to create the dark shadows, displayed when you hover over a menu item:
.fancyNav li:after{

    /* This creates a pseudo element inslide each LI */	

    content:'.';
    text-indent:-9999px;
    overflow:hidden;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1;
    opacity:0;

    /* Gradients! */

    background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
    background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
    background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));

    /* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */

    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;

    /* This will create a smooth transition for the opacity property */

    -moz-transition:0.25s all;
    -webkit-transition:0.25s all;
    -o-transition:0.25s all;
    transition:0.25s all;
}
The :after declaration creates a real styleable element. It has a smooth horizontal gradient that darkens the menu item when hovered upon. As it is invisible by default (opacity is set to 0), we are using CSS3 transitions to animate it between zero and full opacity, triggered on hover. Unfortunately only Firefox supports animating pseudo elements at this moment, but other browsers are expected to soon introduce this feature.
The Menu Explained
The Menu Explained
Next we will be using the :first-child and :last-child pseudo selectors to target the first and last menu items.
/* Treating the first LI and li:after elements separately */

.fancyNav li:first-child{
    border-radius: 4px 0 0 4px;
}

.fancyNav li:first-child:after,
.fancyNav li.selected:first-child:after{
    box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
    -webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;

    border-radius:4px 0 0 4px;
}

.fancyNav li:last-child{
    border-radius: 0 4px 4px 0;
}

/* Treating the last LI and li:after elements separately */

.fancyNav li:last-child:after,
.fancyNav li.selected:last-child:after{
    box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
    -webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;

    border-radius:0 4px 4px 0;
}

.fancyNav li:hover:after,
.fancyNav li.selected:after,
.fancyNav li:target:after{
    /* This property triggers the CSS3 transition */
    opacity:1;
}
Applying different styles to the first and last items is necessary, as we don’t want to display ugly borders that span outside the menu. We also round the appropriate corners of these elements.
Note: You can add class=”selected” to a list item in order to make it selected/active by default. This is useful when building templates or generating the menu with a server-side language.
After this we need to apply a fix to the menu. It is to hide the currently selected element when we hover on the menu again:
.fancyNav:hover li.selected:after,
.fancyNav:hover li:target:after{
    /* Hides the targeted li when we are hovering on the UL */
    opacity:0;
}

.fancyNav li.selected:hover:after,
.fancyNav li:target:hover:after{
    opacity:1 !important;
}
And lastly all that is left is to style the anchor elements that reside in the LIs.
/* Styling the anchor elements */

.fancyNav li a{
    color: #5d5d5d;
    display: inline-block;
    font: 20px/1 Lobster,Arial,sans-serif;
    padding: 12px 35px 14px;
    position: relative;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
    z-index:2;
    text-decoration:none !important;
    white-space:nowrap;
}

.fancyNav a.homeIcon{
    background:url('../img/home.png') no-repeat center center;
    display: block;
    overflow: hidden;
    padding-left: 12px;
    padding-right: 12px;
    text-indent: -9999px;
    width: 16px;
}
With this our animated CSS3 menu is complete!

To Wrap Up

Having your navigation menu built entirely with CSS gives you a great deal of control. You can customize every part of the design by swapping a color value or the font. The most of the bulk in the code came from having to supply a separate declaration for each browser, something that will soon be a thing of the past.
Did you like this tutorial? Be sure to share your thoughts in the comment section below.
Leia Mais

0 comentários:

Assinar: Comentários (Atom)

Copyright © 2013 Apenas testar . and bali villa

Blogger Template by Clairvo