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

Leia Mais

Making a CSS3 Animated Menu

 Martin Angelov May 3rd, 2011

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

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

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