Como criar um tema Parallax, Navegação Ajax, responsivo e histórico do navegador usando Twitter Bootstrap e Jquery – Parte 2 – O CSS Artigo

Conheça os cursos gratuitos do WebDevBr! - Inscreva-se!


Este artigo foi publicado a 4 anos, 3 meses, 1 semana, 3 dias atrás.

Hoje, 15 de agosto de 2013, data em que publico a primeira versão deste artigo (já que revisões virão com certeza), aproveito para compartilhar minha alegria com vocês, já que estou fechando esta quinzena com mais que o triplo de acessos que o mesmo período no mês passado! Obrigado a todos pelo presente de aniversário, que é hoje também.

No primeiro artigo desta série criamos a base do que vamos fazer e já estruturamos todo o HTML, agora ta na hora de deixar a coisa com forma, entre outras coisas quero dar um destaque ao logotipo do tema, que como vocês devem ter notado é estilizado com CSS, mas vamos por partes.

Quando vou desenvolver um site costumo dividir ele em 4 partes as quais eu mesmo dei nome:

Gostou deste artigo?

Receba atualizações semanais com novos artigos do WebDevBr e outras dicas!

  • base
  • cabeçalho
  • corpo
  • rodapé

Nossa que burro, da zero pra ele! Isso ai você viu naquele lugar ta errado, ou você pode colocar esse nome, PARA! Vamos fazer assim: eu gosto desses nomes, coloca os seus ai. Antes que alguém poste nos comentários, kkk.

O CSS da base

Abra seus arquivos tema.css e index.html e vamos começar a definir o CSS do body, no seu arquivo tema.css vamos incluir a chamada de fonts do Google Fonts:

/* Fonts */

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'), url(http://themes.googleusercontent.com/static/fonts/robotocondensed/v7/b9QBgL0iMZfDSpmcXcE8nNeiznanRB67rGZDYkMvKPc.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'), url(http://themes.googleusercontent.com/static/fonts/robotocondensed/v7/Zd2E9abXLFGSr9G3YK2MsFzqCfRpIA3W6ypxnPISCPA.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'), url(http://themes.googleusercontent.com/static/fonts/robotocondensed/v7/b9QBgL0iMZfDSpmcXcE8nCSLrGe-fkSRw2DeVgOoWcQ.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Condensed Light Italic'), local('RobotoCondensed-LightItalic'), url(http://themes.googleusercontent.com/static/fonts/robotocondensed/v7/mg0cGfGRUERshzBlvqxeAO6J62hFWZVScRuaNBOo_rA.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Condensed Italic'), local('RobotoCondensed-Italic'), url(http://themes.googleusercontent.com/static/fonts/robotocondensed/v7/BP5K8ZAJv9qEbmuFp8RpJfHZ7IfZvqUgXLEMrfwTXOk.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Condensed Bold Italic'), local('RobotoCondensed-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/robotocondensed/v7/mg0cGfGRUERshzBlvqxeAAm1Bdh5PCvFKhAPu2iWX-U.woff) format('woff');
}

Ta mas como você conseguiu isso? Fácil, vá até o Google Fonts e:

  1. Escolha sua fonte (eu escolhi a Roboto Condensed)
  2. Clique em Add Colection e depois em Use
  3. Na tela que aparece ele vai te dar o html pra puxar o css da fonte, é só copiar a url colar no navegador e pronto, very easy.

Exemplo:

Você copia a url do atributo href e cola no navegador.

Com isso evita ter inúmeras folhas de estilo e também aquele import horroroso no seu css.

Seguindo em frente.

Após incluir a fonte, vamos acertar o nosso body para que a fonte escolhida se adapte, neste caso a Roboto é menor que a Helvetica usada pelo Twitter Bootstrap, por isso vou aumentar o tamanho da fonte para 16px, vou aproveitar pra setar o tamanho para 100% e incluir uma imagem de fundo.

Então:

body,html{
    min-height:100%;
}
body{
    font-family: 'Roboto Condensed', sans-serif;
    font-size:16px;
    background:url(../img/bg.jpg) center top fixed;
}

Note que estamos trabalhando com altura relativa ali no body, ou seja ele vai basear no elemento anterior que neste caso é a tag html, por isso também setei a altura também.

O cabeçalho

No cabeçalho do tema temos o logotipo, menu, menu para dispositivos móveis e o slogan (o texto no quadro branco) e como todo bom layout com grid do Twitter Bootstrap (e outros) ficará dentro de um container, então vou passar o HTML vamos tratar item por item, cole isso dentro do seu cabeçalho (a tag header):

<section class="container p-relative">
    <div class="row">
    </div>
<section class="legenda-principal text-left hidden-phone mobile-center">
    <h3>Demonstração da série de tutoriais sobre criação de temas Ajax + Parallax</h3>
</section>

Ok, temos então algumas classes já predefinidas e dentre elas as container e row que fazem parte do grid do Twitter Bootstrap, não vou entrar em detalhes (procure na documentação) e a hidden-phone que vai ocultar aquele bloco em celulares.

Dentro do row vamos incluir o que falta, para isso vamos usar as classes span1 a span12 para formar nossas colunas dentro da linha (row).

<div class="span5 mobile-center">
    <h1><a href="/" class="logotipo" rel="index">Erik Figueiredo</a></h1>
</div>
<div class="span7 p-relative mobile-center">
    <nav class="menu-desktop hidden-phone hidden-tablet" >
        //menu para computador
    </nav>
    <nav class="dropdown hidden-desktop text-center">
        //menu para celulares
    </nav>
</div>

Ok, o hidden-desktop, hidden-tablet e hidden-phone ta fácil, é pra definir qual menu será mostrado, e esse mobile-center vai centralizar o seu menu nos dispositivos móveis.

Agora, aonde está o menu para computador e menu para celulares vamos colar esse bloco em cada um:

<ul class="nav">
    <li>
        <a href="paginas/home.html">Home</a>
    </li>
    <li>
        <a href="paginas/empresa.html">Empresa</a>
    </li>
    <li>
        <a href="paginas/portfolio.html">Portfólio</a>
    </li>
    <li>
        <a href="paginas/contato.html">Contato</a>
    </li>
</ul>

Igualzinho nos dois, o correto seria fazer apenas um menu, mas fugiria do tópico de mostrar como uso as classes do Twitter Bootstrap para me ajudar.

Com isso fizemos toda a marcação do nosso header, vamos para o css.

//afasta um pouco do topo e já defini uma altura fixa que vai empurrar o
//conteúdo e o rodapé para baixo.
#header .container {
    padding-top:40px;
    height:580px;
}

//Personaliza o texto do logotipo (eu coloquei Erik Figueiredo como logotipo, mas você
//pode escrever o que quiser, mas o ideal é que tenha duas palavras pra você sentir).
.logotipo,.logotipo:hover{
    color:#FFF;
    font-size:76px;
    font-weight:bold;
    text-shadow:0 0 2px #FFF,0 0 20px #003,0 0 6px #FFF,2px 2px 10px #003;
}

//vimos no bloco anterior que o nosso texto vai ter cor branca,
//mas precisamos que a primeira palavra precisa ter cor preta
//para isso esse bloco que vai ser inserido pelo Javascript
.logotipo span.em{
    color:#000;
}

//aqui começo a definir o menu usando apenas as tags html, sem classe para isso
nav ul{
    display:block;
    list-style:none;
}

//e alguns transitions para dar um tchan
nav ul li,.btn,.btn:hover{
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: linear;
}

//agora vamos trabalhar no menu versão desktop, vou usar o position absolute
//para poder usar o stellar depois e fazer um efeito aqui, também usei rgba
//no background para colocar um preto transparente de fundo
nav.menu-desktop{
    position:absolute;
    background:rgba(0,0,0,0.5);
    border-radius:5px;
    padding:10px;
    top:30px;
    right:0;
}

//reset para o menu para desktop
nav.menu-desktop ul,nav.menu-desktop ul li{
    padding:0;
    margin:0;
    display:inline-block;
}

//cor e espaçamento interno para os elementos clicáveis
nav.menu-desktop ul li a{
    color:#FFF;
    padding:0 10px;
}

//efeito de transparência para quando o mouse estiver
//sobre o item de menu
nav.menu-desktop:hover{
    opacity:0.9;
}

//Aqui o bloco de legenda também fica flutuando para aplicarmos o stellar
//ele tem bordas arredondadas, cor transparente com rgba e sombras para
//o efeito de volume, note no alinhamneto left 50% e no margin-left que
//garantem que o bloco aparece no centro
.legenda-principal  {
    position:absolute;
    top:50%;
    left:50%;
    background:rgba(255,255,255,0.5);
    padding:20px;
    width:350px;
    margin-left:-200px;
    margin-top:115px;
    color:#000;
    z-index:-1;
    border-radius:10px;
    box-shadow:0 0 5px #000,inset 0 0 10px #FFF,inset 0 10px 10px #FFF,inset 0 -10px 10px rgba(0,0,0,0.5);
}

//e por fim o css do texto 
.legenda-principal h3{
    text-shadow:0 0 3px #FFF;
    font-weight:normal;
}

Ok, tomei o cuidado de comentar o código o máximo que eu pude para facilitar, qualquer dúvida já sabe: Comentários!

O conteúdo

Para o conteúdo é mais fácil ainda, aqui vamos puxar um arquivo HTML com o conteúdo de cada página, o correto é que ele pegasse apenas o conteúdo de uma página completa, mas só o conteúdo, sem o resto, mas como vou integrar esse artigo com o do CMS em CakePHP e o CakePHP vai retornar pra gente o código correto apenas com base na requisição (ajax ou não) então não vou fazer isso aqui, deixa pra uma próxima vez e apenas vamos setar o texto da home.

<article id="conteudo">
    <div class="conteudo">
        <section class="container breadcrumbs">
            <div class="row">
                <div class="span9 hidden-phone">
                    <p>
                        Você está em: <strong><a href="/c/cms-inline-2/">Erik Figueiredo</a> > Este é um breadcrumbs</strong>
                    </p>
                </div>
                <div class="span3 text-right">
                    <a href="http://www.facebook.com.br" rel="external">
                    <img src="img/icon-facebook.png" alt="" >
                    </a>
                    <a href="paginas/contato.html">
                        <img src="img/icon-email.png" alt="" >
                    </a>
                </div>
            </div>
        </section>
        <div class="container cms-conteudo">
            <div class="row">
                <div class="span12">
                    <div class="campo-edita">
                        <p>Página inicial do Site</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

E só isso, aqui o css que vai no tema.css é:

//Aqui ta bem simples, qualquer dúvida
//pergunte nos comentários do blog
.breadcrumbs{
    min-height:65px;
    line-height:65px;
}
.breadcrumbs img{
    vertical-align:bottom;
}

//Vou apenas comentar aqui neste bloco que usei o
//:after para criar um bloco vazio após o elemento
//breadcrumbs com uma imagem de sombra que eu poderia
//ter evitado e fazer com css, mas vou por assim pra
//mostrar também esse recurso
.breadcrumbs:after{
    display:block;
    content:"";
    background:url(../img/sombra-bc.png) center top no-repeat;
    height:24px;
}
.conteudo-principal{
    padding:20px 0;
}
#conteudo {
    background:rgba( 255,255,255,0.3);
    max-width:1220px;
    margin:0 auto;
    padding:10px;
}
#conteudo .conteudo{
    background:#FFF;
}

Não comentei muito por dois motivos, para forçar vocês a entenderem o código e também porque está bem simples.

Rodapé

E para fechar segue o HTML do rodapé:

<footer id="footer" class="text-center">
    <section class="container">
        <div class="row">
            <div class="span12">
                <nav class="text-center">
                    <ul class="nav">
                        <li>
                            <a href="paginas/home.html">Home</a>
                        </li>
                        <li>
                            <a href="paginas/empresa.html">Empresa</a>
                        </li>
                        <li>
                            <a href="paginas/portfolio.html">Portfólio</a>
                        </li>
                        <li>
                            <a href="paginas/contato.html">Contato</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </section>
    <p><small><strong>Todos os direitos reservados!</strong></small></p>
</footer>

E o CSS:

#footer,#footer nav ul li a{
    color:#FFF;
}
#footer{
    height:40px;
    line-height:40px;
}
#footer nav ul li{
    display:inline-block;
}
#footer nav ul li a{
    padding:10px 20px;
}

Ajustes para mobilidade

E para ajustar nas telas menores vou usar o media query, se tiver alguma dúvida pode postar nos comentários ou visitar a documentação do Twitter Bootstrap.

@media (max-width: 979px){
    .mobile-center{
        width:100%;
        text-align:center;
    }
}
@media (min-width: 768px) and (max-width: 979px){
}
@media (max-width: 767px) {
    .breadcrumbs img{
        vertical-align:middle;
    }
    .conteudo [class*="span"]{
        padding: 0 10px;
    }
}

Vimos neste artigo como é fácil construir temas totalmente diferente dos apresentados pelo Twitter Bootstrap e com pouquíssimo CSS, não devemos jamais nos prender as ferramentas que são apresentadas, o bom profissional vai além, ele programa em PHP, não em CakePHP, programa em Javascript, não em Jquery, usa CSS, não Twitter Boostrap.

Minha dica? Vá além!

Qualquer dúvida já sabem, comentários!


* Parcelamento apenas cartão de crédito! Pode haver uma pequena variação no parcelamento em relação a simulações apresentadas!