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 ^^
} 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.
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:
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.
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
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
- 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 :)
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:
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><metacharset="utf-8" /><title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title><!-- Our CSS stylesheet file --><linkrel="stylesheet"href="assets/css/styles.css" /><!-- Including the Lobster font from Google's Font Directory --><linkrel="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>« Read and download on Tutorialzine</h2></header><nav><ulclass="fancyNav"><liid="home"><ahref="#home"class="homeIcon">Home</a></li><liid="news"><ahref="#news">News</a></li><liid="about"><ahref="#about">About us</a></li><liid="services"><ahref="#services">Services</a></li><liid="contact"><ahref="#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
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:004px rgba(255, 255, 255, 0.6);-moz-box-shadow:004px rgba(255, 255, 255, 0.6);-webkit-box-shadow:004px rgba(255, 255, 255, 0.6);}.fancyNavli{
/* 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 0rgba(255, 255, 255, 0.6) inset;-moz-box-shadow:1px -1px 0rgba(255, 255, 255, 0.6) inset;-webkit-box-shadow:1px -1px 0rgba(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:
.fancyNavli: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 00#a3a3a3,-2px 00#fff,1px 00#a3a3a3,2px 00#fff;-moz-box-shadow:-1px 00#a3a3a3,-2px 00#fff,1px 00#a3a3a3,2px 00#fff;-webkit-box-shadow:-1px 00#a3a3a3,-2px 00#fff,1px 00#a3a3a3,2px 00#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
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 */.fancyNavli:first-child{
border-radius:4px 004px;}.fancyNavli:first-child:after,
.fancyNavli.selected:first-child:after{
box-shadow:1px 00#a3a3a3,2px 00#fff;-moz-box-shadow:1px 00#a3a3a3,2px 00#fff;-webkit-box-shadow:1px 00#a3a3a3,2px 00#fff;border-radius:4px 004px;}.fancyNavli:last-child{
border-radius:04px 4px 0;}/* Treating the last LI and li:after elements separately */.fancyNavli:last-child:after,
.fancyNavli.selected:last-child:after{
box-shadow:-1px 00#a3a3a3,-2px 00#fff;-moz-box-shadow:-1px 00#a3a3a3,-2px 00#fff;-webkit-box-shadow:-1px 00#a3a3a3,-2px 00#fff;border-radius:04px 4px 0;}.fancyNavli:hover:after,
.fancyNavli.selected:after,
.fancyNavli: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:hoverli.selected:after,
.fancyNav:hoverli:target:after{
/* Hides the targeted li when we are hovering on the UL */opacity:0;}.fancyNavli.selected:hover:after,
.fancyNavli: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 */.fancyNavlia{
color:#5d5d5d;display: inline-block;font:20px/1 Lobster,Arial,sans-serif;padding:12px 35px 14px;position: relative;text-shadow:1px 1px 0rgba(255, 255, 255, 0.6);z-index:2;text-decoration:none !important;white-space:nowrap;}.fancyNava.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.
0 comentários: