Quer aprender mais sobre CSS? Então você está no lugar certo. Aqui você vai ver todos os artigos relacionados a CSS, CSS3 e muito mais.

Neste tutorial você vai aprender a aplicar uma grid no estilo Masonry apenas com CSS3, sem a necessidade de bibliotecas JavaScript ou qualquer outro código.

O problema com este modelo é que o layout só irá funcionar perfeitamente em navegadores mais novos, excluindo totalmente IE8 e IE9, e demais que não suportam as propriedades “column”.

Este tipo de grid pode ser encontrada em sites como o Google Keep ou no Pinterest, onde os elementos ficam alinhados perfeitamente na vertical e horizontal.

Se você é uma pessoa que gosta de modernidade, seguem abaixo as instruções. Se precisar de suporte para navegadores mais antigos, siga nosso tutorial anterior:

Caso queira visualizar uma demonstração, acesse o link abaixo:

Vamos ver os códigos:

O HTML

<div id="container" class="cols">
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box one"></div>
    <div class="box three"></div>
    <div class="box two"></div>
    <div class="box five"></div>
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box six"></div>
    <div class="box three"></div>
    <div class="box two"></div>
</div>

O CSS3

#container {
    width: 100%;
    max-width: 100%;
    margin: 1% auto;
}
.cols {
    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
}
.box {
    margin-bottom: 20px;
}
.box.one {
    height: 200px;
    background-color: #d77575;
}
.box.two {
    height: 300px;
    background-color: #dcbc4c;
}
.box.three {
    background-color: #a3ca3b;
    height: 400px;
}
.box.four {
    background-color: #3daee3;
    height: 500px;
}
.box.five {
    background-color: #bb8ed8;
    height: 600px;
}
.box.six {
    background-color: #baafb1;
    height: 200px;
}

Note que não é necessário utilizar as classes de “one” a “six”, elas estão presentes apenas pelo fato dos itens de nosso exemplo não possuírem conteúdo. Resumindo, a altura pode ser criada de maneira automática, apenas com o conteúdo dentro dos itens.

Concluindo

Este é um estilo moderno que irá ajudar o desenvolvedor a alinhas conteúdo de maneira correta na vertical e horizontal, resolvendo o problema que ocorre quando utilizamos float: left;  ou display: inline-block; .

Deixe a sua opinião nos comentários.

Até o próximo!

Centralizar texto verticalmente em CSS é algo bem mais complexo do que fazer o mesmo na horizontal, pois, desde os primórdios do CSS você pode utilizar a propriedade text-align: center;  par deixar o texto no meio do elemento que preferir.

Neste artigo você vai encontrar algumas maneiras diferentes para alinhar texto no centro da tela (na vertical), cada uma delas poderá ser utilizada em um caso diferente, dependendo exclusivamente do que você precisa para sua aplicação.

Uma das maneiras mais simples para realizar este procedimento é simulando que o elemento pai é uma tabela e o elemento filho uma linha dessa tabela, veja a simplicidade de se realizar este procedimento abaixo.

Simulando uma tabela

Você vai precisar de um elemento pai e um ou vários elementos filhos, veja:

HTML

<div class="pai">
  <div class="filho">
    <h1>Meu texto</h1>
    <p>O texto do texto hehe.</p>
  </div>
</div>

CSS

.pai {
  display: table;
  background: #dfdfdf; /* Não necessário */
}
.filho {
  display: table-cell;
  vertical-align: middle;
  height: 500px; /* Não necessário */
  width: 50%; /* Não necessário */
  text-align: center; /* Não necessário */
}

As propriedades comentadas como “Não necessário” são apenas para que você possa ter uma simulação visual do que irá acontecer.

Observação: Funciona do IE8 pra cima.

Line-height e height

Você também pode combinar algumas opções para atingir o mesmo objetivo, veja:

HTML

<div class="pai">
  <div class="filho">
    <h1>Meu texto</h1>
    <p>O texto do texto hehe.</p>
  </div>
</div>

CSS

.pai {
  display: block;
  height: 500px;
  line-height: 500px;
  width: 50%; /* Não necessário */
  background: #dfdfdf; /* Não necessário */
  text-align: center; /* Não necessário */
}
.filho {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.5;
}

O exemplo acima é praticamente a mesma coisa exibida na primeira demonstração. Veja uma demonstração:

Observação: Funciona do IE8 pra cima.

Utilizando pseudo-elemento

Continuando com o mesmo HTML dos exemplos anteriores, aqui segue uma maneira um pouco mais moderna de alinhar texto verticalmente com CSS:

.pai {
  height: 300px; /* Não necessário */
  width: 50%; /* Não necessário */
  background: #dfdfdf; /* Não necessário */
  text-align: center; /* Não necessário */
}
.pai:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.filho {
  display: inline-block;
  vertical-align: middle;
}

Observação: Funciona do IE8 pra cima.

Utilizando position

O problema da utilização de position: absolute;  para alinhar texto verticalmente em um navegador é que tudo deverá ser fixo, isso não é nem um pouco dinâmico para os padrões atuais. A parte boa é que isso funciona em todos os navegadores, até no IE6.

O HTML continua sendo o mesmo dos primeiros exemplos, veja o CSS:

.pai {
  position: relative;
  height: 300px; /* Não necessário */
  width: 50%; /* Não necessário */
  background: #dfdfdf; /* Não necessário */
}
.filho {
  position: absolute;
  height: 120px;
  top: 50%;
  margin-top: -60px; /* Metade da altura */
  width: 140px;
  left: 50%;
  margin-left: -80px; /* Metade da largura */ 
}

Com CSS3

Há algum tempo falamos sobre Flexbox e na minha opinião já está mais do que na hora de começarmos a utilizar suas propriedades em nossos projetos. Veja como tudo fica mais simples.

O HTML continua o mesmo:

<div class="pai">
  <div class="filho">
    <h1>Meu texto</h1>
    <p>O texto do texto hehe.</p>
  </div>
</div>

O CSS3 ficaria assim:

.pai {
  display: flex;
  justify-content: center;
  height: 300px; /* Não necessário */
  width: 50%; /* Não necessário */
  background: #dfdfdf; /* Não necessário */
}
.filho {
  align-self: center;
}

Veja uma demonstração: Codepen

Observação: Talvez funcione no IE10 (com prefixo) e posteriores.

Concluindo

Estes foram alguns métodos que consegui lembrar no momento, se você tiver algum método interessante envie nos comentários pra gente ver.

Até o próximo!

mobile-first

Desenvolver sites responsivos hoje em dia é requisito para desenvolvedores front-end, quando falamos em responsivo você logo lembra em Mobile-first mesmo nunca tendo feito um projeto usando a abordagem. A algum tempo venho lendo, estudando e testando o conceito mobile-first, mas na grande maioria os artigos e exemplos que vejo, abordam como desenvolver site ou aplicação web em relação a planejamento e design, não falam sobre codificação para o mobile-first, mas agora este artigo vai mostra a você como pensar seu código CSS para mobile.

Conceito Mobile-first para CSS

Quando você usa o conceito mobile-first para fazer seu estilo CSS significa dizer que os estilos são aplicados primeiro para dispositivos moveis, só então são aplicados substituições, estilo avançados e consultas de media queries para telas maiores. No mobile-first styling você utiliza a propriedade min-width nas consultas de media queries. “Nos exemplos vou utilizar CSS puro, não vou utilizar pré-processadores”

Exemplo rápido:

/* este estilo aplica-se a partir de 0px até 900px */
body {
      background: red;
} 

/* este estilo aplica-se a partir de 900px em diante */
@media ( min-width: 900px ) {
  body {
    background: green;
  }
}

No exemplo acima o background fica vermelho para dispositivos mobile de 0px até 900px(899px) de 900px em diante o background fica verde.

Na abordagem desktop-first os estilos são aplicados primeiro para desktop onde você utiliza a propriedade max-width nas consultas de medias queries.

Exemplo rápido:

/* este estilo aplica-se a partir de 900px em diante */
body {
      background: red;
} 
/* este estilo aplica-se a partir de 0px até 900px */
@media ( max-width: 900px ) {
   body {
    background: green;
   }
}

 

Você pode ter um projeto que usa a abordagem mobile-first, e mesmo assim fazer um código Desktop-first, correto? Não, ou pelo menos não deveria. Desenvolver estilos para telas maiores geralmente são mais complicados do que para telas menores, quando você faz o estilo para mobile-first primeiro você simplifica o código e fica em conformidade com o projeto já que o mesmo foi planejado dentro da abordagem mobile-first.

Vamos ao próximo exemplo, imagine que você tem um layout que tenha três div’s com uma class com nome box, no mobile o estilo requer 100% de largura e no desktop requer 33.33%.

Neste caso como estou utilizando a tag div que tem 100% de largura como padrão, eu não preciso seta um uma propriedade de largura. Veja o exemplo no código com o conceito mobile-first:

.box{
   /*Não precisamos inserir nenhum código aqui */
}
.box:nth-child (odd) {
    background:#222;  /* Adicionei um background para um melhor entendimento */
}
@media ( min-width: 800px ) {
    float: left;
    width: 33.33%;
}

O código fica muito elegante e com linhas de CSS a menos.   Se utilizamos o conceito Desktop-first teríamos que modificarmos algumas propriedades para alguns viewports. Veja um exemplo de código Desktop-first:

.box {
    /*primeiro configuro as propriedades para telas maiores */
    float: left;
    width: 33.33%;
}
@media ( max-width: 800px ) {

/*Aqui configuro o estilo para telas menores, veja que preciso 
reescrever novamente para que o estilo fique de acordo com layout */

    float: none;
    width: 100%;
}

 

Com o exemplo do código CSS mobile-first nós poupamos algumas linhas de código e melhoramos a performance da CSS. Agora imagine quanto tempo você irá poupar em um projeto de médio e grande porte.

Creio que você já percebeu que apenas utilizando propriedade min-width você já resolve várias questões no desenvolvimento mobile-first, mas nem sempre vai ser o suficiente. Em alguns casos você terá que usar a combinação min-width e max-width para resolver algumas cominações que a propriedade min-width não poderá resolver. Vamos analisar o exemplo onde podemos utiliza o min-width e max-width juntos para resolver problemas em layout responsivos.

Vamos considerar um exemplo de um site que seja divido da seguinte forma: 3 box em uma fileira para dispositivo mobile e 4 box em uma fileira para desktop.mobile-first-para-desktop

O código para este exemplo é bem simples:

.boxs {
    float: left;
    width: 28.33%;
}
@media ( min-width: 800px ) {
    width: 25%; /*bem simples*/
}

Mas ele fica um pouco complicado se a espaços entre os boxs.

mobile-first-css

Digamos que os espaços ocupem 5% de largura;

.boxs {
    float: left;
    width: 33.33%;
    margin-right: 5%;
    margin-bottom: 5%;
}

Neste caso teremos que dar uma margin-rigth:0; a cada 3 boxs (itens) para que as boxs não sejam empurradas para baixo no caso do layout mobile.

.boxs :nth-child(3n) { 
   
   margin-right: 0%;

}

Mas também esse código deve trabalhar uma fileira com 4 boxs para ir de acordo com o layout proposto para o desktop.

.boxs {
    float: left;
    width: 28.33%;
    margin-right: 5%;
    margin-bottom: 5%;
}
.boxs :nth-child(3n) {

    margin-right: 0%;

}
@media ( min-width: 800px ) {

    width: 21.25% /* ( 100% - 15% ) / 4  os 15% são da margin-rigth */
    
 .boxs:nth-child(4n) {
   
    margin-rigth: 0%;

  }

}

Este código não funciona bem porque nós especificamos que a cada 3 boxs (itens) deve ter um margin-right: 0. Essa propriedade fica em cascata com isso em uma largura maior o padrão do layout não fica como desejado e rompe-se. Veja como ficaria se você utilizar o código acima:

css mobile-first

Nós poderíamos corrigir usando a consulta de media min-width dando a cada 3 boxs uma margin-right: 5%;

.boxs {
    float: left;
    width: 28.33%;
    margin-right: 5%;
    margin-bottom: 5%;
}

@media ( min-width: 800px ) {

 width: 21.25% /* ( 100% - 15% ) / 4  os 15% são da margin-rigth */

.boxs :nth-child(3n) {

    margin-right: 5%;
}
    
.boxs:nth-child(4n) {
         
    margin-rigth: 0%;
    }
}

Isto resolve, mas não fica bem porque não estamos usando o viewport apropriado e sim repetindo para todos os viewports. Como nós somos bons desenvolvedores sempre buscamos escrever as CSS mais apropriadas possíveis e sem repetições. Usaremos a cominação max-width e min-width.

.boxs {
    float: left;
    margin-right: 5%;
    margin-bottom: 5%;
}

@media ( max-width: 800px ) {
   .boxs {
      width: 28.33%;       
   }
.boxs:nth-child(3n){
    margin-right: 0%;
   }

}
@media ( min-width: 800px ) {

.boxs{
    width: 21.25%; /* ( 100% - 15% )  / 4 */
  }
.boxs:nth-child(4n) {
    margin-right: 0%;
  }
    
}

Este código funcionará bem porque o max-width: 800px limita os seletores abaixo de 800px com isso o estilo não afetará outros viewports.

Conclusão.

Quando você utiliza min-width para consulta de media queries para site responsivo, você consegue reduzir a complexidade do seu código, mas min-width não é a solução para todos os problemas como mostrei nós exemplos, você pode utilizar a combinação max-width e min-width para fazer um código CSS muito limpo. Obrigado, até o próximo post.

Nota: alguns exemplos são retirados de blogs gringos que já falam neste tema de Mobile-first CSS.

Criar um sistema de abas com CSS3 puro não é uma tarefa muito complicada, basta utilizarmos um input do tipo radio para simular a captura de clique do JavaScript com CSS (ou algo parecido). Em seguida, podemos utilizar os seletores de siblings (irmãos) para adicionarmos estilização aos elementos que queremos.

Vamos ver como isso funciona.

O HTML

Vamos criar um container para as nossas abas e adicionar o seguinte:

  • Um input do tipo radio
  • Um label para este input
  • Um DIV (ou qualquer elemento que preferir) para o conteúdo da aba.

Veja:

<div class="tabs-container">
    
    <!-- ABA 1 -->
    <input type="radio" name="tabs" class="tabs" id="tab1" checked>
    <label for="tab1">Aba 1</label>
    <div>
      Aba 1
    </div>

</div>

Para cada aba, repita o processo (com exceção do container). Veja:

<div class="tabs-container">
    
    <!-- ABA 1 -->
    <input type="radio" name="tabs" class="tabs" id="tab1" checked>
    <label for="tab1">Aba 1</label>
    <div>
      Aba 1
    </div>
    
    <!-- ABA 2 -->
    <input type="radio" name="tabs" class="tabs" id="tab2">
    <label for="tab2">Aba 2</label>
    <div>
      Aba 2
    </div>
    
    <!-- ABA 3 -->
    <input type="radio" name="tabs" class="tabs" id="tab3">
    <label for="tab3">Aba 3</label>
    <div>
       Aba 3
    </div>

</div>

Lembre-se de colocar um ID para cada input e trocar esse ID no atributo for do label.

O CSS

Para o CSS podemos fazer o seguinte:

/* Container das ABAS */
.tabs-container {
    position: relative;
    height: 360px;
    max-width: 98%;
    margin: 0 auto;
}
.tabs-container p {
    margin: 0;
    padding: 0;
}
.tabs-container:after {
    content: '.';
    display: block;
    clear: both;
    height: 0;
    font-size: 0;
    line-height: 0;
    visibility: none;
}

/* ABAS */
input.tabs {
    display: none;
}
input.tabs + label + div {
    width: 98%;
    opacity: 0;
    position: absolute;
    background: #eee;
    top: 40px;
    left: 0;
    height: 300px;
    padding: 10px;
    z-index: -1;
    transition: opacity ease-in-out .3s;
}
input.tabs:checked + label + div {
    opacity: 1;
    z-index: 1000;
}

/* Labels */
input.tabs + label {
    line-height: 40px;
    padding: 0 20px;
    float: left;
    background: #444;
    color: #fff;
    cursor: pointer;
    transition: background ease-in-out .3s;
}
input.tabs:checked + label {
    color: #000;
    background: #eee;
}

O trecho acima está separado em partes, onde estilizamos o container, o conteúdo e os labels respectivamente.

É bastante simples e não há nada de JavaScript neste método.

Concluindo

Este é um método um pouco avançado e faz utilização de recursos modernos. Em meus testes, percebi que funciona em TODOS os navegadores atuais. Nos antigos, percebi que só funciona no IE9+ (não funciona no IE8).

Qualquer dúvida deixe um comentário.

Provavelmente você já deve ter visto, ou até precisado, de um menu HTML com CSS com submenu e subníveis. Por subníveis, quero dizer que os submenus podem ter vários outros submenus dentro deles.

Neste vídeo tutorial vou detalhar como criar tal menu utilizando apenas CSS, sem nada de JavaScript. Além disso, o menu suporta quantos submenus forem necessários para seu layout.

Vídeo tutorial

Abaixo o vídeo tutorial detalhando tudo o que você precisa saber:

O código criado no vídeo acima pode ser encontrado em:

Você pode editá-lo conforme sua necessidade.

O HTML criado no vídeo

Abaixo segue o HTML criado no vídeo:

<div class="menu-container">
    <ul class="menu clearfix">
        <li><a href="#">Item</a>
            <!-- Nível 1 -->
            <!-- submenu -->
            <ul class="sub-menu clearfix">
                <li><a href="#">Sub</a>
                    <!-- Nível 2 -->
                    <!-- submenu do submenu -->
                    <ul class="sub-menu">
                        <li><a href="#">Sub Sub</a>
                            <!-- Nível 3 -->
                            <!-- submenu do submenu do submenu -->
                            <ul class="sub-menu">
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                                <li><a href="#">Sub Sub</a></li>
                            </ul><!-- submenu do submenu do submenu -->
                        </li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                        <li><a href="#">Sub Sub</a></li>
                    </ul><!-- submenu do submenu -->
                </li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
                <li><a href="#">Sub</a></li>
            </ul><!-- submenu -->
        </li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

 O CSS criado no vídeo

Abaixo segue o CSS criado no vídeo:

body, 
.menu,
.sub-menu {
    margin: 0;
    padding: 0;
}
.clearfix:after{
    content: '.';
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
    visibility: hidden;
    overflow: hidden;
}
.menu,
.sub-menu {
    list-style: none;
    background: #000;
}
.sub-menu {
    background: #444;
}
.menu a {
    text-decoration: none;
    display: block;
    padding: 10px;
    color: #fff;
    font-family: sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
}
.menu li {
    position: relative;
}
.menu > li {
    float: left;
}
.menu > li:hover {
    background: #444;
}
.menu li:hover > .sub-menu {
    display: block;
}
.sub-menu {
    display: none;
    position: absolute;
    min-width: 150px;
}
.sub-menu li:hover {
    background: #555;
}
.sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

Só isso fará seu menu funcionar perfeitamente.

Concluindo

Se tiver algum dúvida, comente-a!

Centralizar elemento na horizontal e vertical com CSS pode ser bastante complicado dependendo do estilo de layout que você está criando, principalmente se for um layout responsivo, que não tem largura fixa e deve se adaptar a qualquer tamanho de tela.

Este problema poderia ser resolvido facilmente se todos os navegadores já suportassem flexbox, porém, como não estamos no mundo dos sonhos, ainda precisamos dar suporte a navegadores mais antigos.

O método que vou explicar utiliza pseudo-elementos e a propriedade vertical-align do CSS, portanto, funciona em todos os navegadores mais utilizados (IE8 e posteriores).

Vamos ver como funciona.

Método tradicional

Para alinhar qualquer elemento na vertical e horizontal com CSS, estávamos acostumados a posicionar tal elemento de forma absoluta. É um método bastante eficiente se você souber a largura e altura do elemento que será alinhado.

Funciona basicamente assim:

  1. Posicione o elemento de forma absoluta;
  2. Configure a propriedade top e left para 50%;
  3. Configure as propriedades margin-left e marting-top com números negativos para a metade do tamanho do elemento.

Veja como fica em CSS:

.elemento {
  width: 250px;
  height: 150px;
  background: purple;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px; /* Metade da altura */
  margin-left: -125px; /* Metade da largura */
}

Simplesmente isso posiciona qualquer elemento no meio do elemento pai que tiver posição relativa. Se for o body, o elemento será posicionado no meio da tela.

Veja um exemplo aqui.

Método para layout fluído ou responsivo

O problema com o método anterior é que devemos saber a largura e altura do elemento para podermos posiciona-lo no meio da tela ou do elemento pai.

Para layouts responsivos ou fluídos, podemos utilizar a propriedade vertical-align juntamente com um pseudo-elemento no elemento pai. Veja como funciona:

html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}

.elemento-pai {
  width: 100%;
  height: 100%;
  background: yellow;
  text-align: center;
}

/* Aqui começa o alinhamento */
.elemento-pai:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.elemento-filho {
  width: 50%;
  height: 50%;
  background: red;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}

Perceba acima que estamos utilizando a propriedade “display: inline-block”, que vai habilitar a funcionalidade da função vertical-align. Outro fato interessante é que como estamos utilizando o body para calcular a altura completa da janela, é necessário configurar o seguinte:

html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}

Isso faz com que nossa janela tenha 100% da altura da tela.

Caso queira testar o que acabei de descrever, faça-o pelo codepen abaixo.

É bem legal, da para criar modais com largura adaptável e coisas do tipo.

Concluindo

Este método funciona com a maioria dos navegadores, até mesmo no Internet Explorer 8.

Caso tenha alguma dúvida, não hesite em deixar um comentário.

Menu em abas (ou blocos com abas) são bastante úteis para o seu layout. Com eles é possível dividir seu conteúdo por categoria, deixar o layout mais limpo e aprimorar a experiência do usuário em seu site.

Criar o menu em abas é ainda mais simples. Com um pouco de HTML, CSS e uma ajudinha do jQuery, serão apenas algumas linhas de código até você atingir o objetivo.

Veja um exemplo do que vamos criar neste tutorial:

Então vamos lá.

Código completo

Primeiramente, vou exibir o código completo, depois explico tudo em blocos.

O HTML:

<div class="content">
  <div class="tabs-content">
    <div class="tabs-menu clearfix">
      <ul>
        <li><a class="active-tab-menu" href="#" data-tab="tab1">Lorem</a></li>
        <li><a href="#" data-tab="tab2">Ipsum</a></li>
        <li><a href="#" data-tab="tab3">Dolor</a></li>
      </ul>
    </div> <!-- tabs-menu -->
    
    <div class="tab1 tabs first-tab">
     Conteúdo da aba 1
    </div> <!-- .tab1 -->
    
    <div class="tab2 tabs">
      Conteúdo da aba 2
    </div> <!-- .tab2 -->
    
    <div class="tab3 tabs">
      Conteúdo da aba 3 
    </div> <!-- .tab3 -->
    
  </div> <!-- .tabs -->
</div> <!-- .content -->

 O CSS:

/* Geral */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 1.5;
}
body {
  background: #222222;
}
a:focus {
  outline: none;
}
.content {
  margin: 30px;
}
.clearfix:after {
  content: '.';
  height: 0;
  font-size: 0;
  line-height: 0;
  display: block;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

/* Abas */
.tabs-content {
  background: #eee;
  font-family: sans-serif;
}

/* Menu das abas */
.tabs-menu {
  background: #0074a2;
}
.tabs-menu ul {
   list-style: none;
}
.tabs-menu ul li {
  float: left;
}
.tabs-menu ul li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}
.tabs-menu ul li a.active-tab-menu {
  background: #eee;
  color: #000;
}

/* Conteúdo das abas */
.tabs {
  display: none;
  padding: 30px;
}
.first-tab {
  display: block;
}

 O jQuery:

jQuery(function($){
  $('.tabs-menu ul li a').click(function(){
    var a = $(this);
    var active_tab_class = 'active-tab-menu';
    var the_tab = '.' + a.attr('data-tab');
    
    $('.tabs-menu ul li a').removeClass(active_tab_class);
    a.addClass(active_tab_class);
    
    $('.tabs-content .tabs').css({
      'display' : 'none'
    });
    
    $(the_tab).show();
    
    return false;
  });
});

Vamos aos detalhes.

Explicação detalhada

Agora vou detalhar o que cada uma das partes do nosso código faz.

O HTML:

O elemento com classe “content” não faz nada em específico, é apenas um div que contém todo o nosso HTML.

<div class="content">

</div> <!-- .content -->

As tags “tabs-content” são o conteúdo das abas, portanto, podemos configurar uma cor de fundo, fonte e coisas do tipo utilizando CSS.

<div class="content">
  <div class="tabs-content">

  </div> <!-- .tabs -->
</div> <!-- .content -->

Os elementos “tabs-menu” será o menu das abas:

<div class="tabs-menu clearfix">
  <ul>
    <li><a class="active-tab-menu" href="#" data-tab="tab1">Lorem</a></li>
    <li><a href="#" data-tab="tab2">Ipsum</a></li>
    <li><a href="#" data-tab="tab3">Dolor</a></li>
  </ul>
</div> <!-- tabs-menu -->

A opção “data-tab” dos links indicará a classe da aba a ser exibida pelo jQuery.

As abas podem ter duas ou três classes, são elas:

  • classe-da-aba – A classe que você escolher para sua aba
  • tabs – Classe padrão de abas
  • first-tab – A tag que será exibida por padrão
<div class="tab1 tabs first-tab">

</div>

 O CSS

O CSS das abas é relativamente bem simples.

Configuramos a cor de fundo e a fonte:

/* Abas */
.tabs-content {
  background: #eee;
  font-family: sans-serif;
}

O menu das abas:

/* Menu das abas */
.tabs-menu {
  background: #0074a2;
}
.tabs-menu ul {
   list-style: none;
}
.tabs-menu ul li {
  float: left;
}
.tabs-menu ul li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}
.tabs-menu ul li a.active-tab-menu {
  background: #eee;
  color: #000;
}

Este é um menu como qualquer outro. A classe active-tab-menu será ativada pelo jQuery.

Depois ocultamos todas as abas e mostramos apenas a principal:

/* Conteúdo das abas */
.tabs {
  display: none;
  padding: 30px;
}
.first-tab {
  display: block;
}

 O jQuery:

O jQuery faz o seguinte (veja nos comentários):

// Inicia o jQuery
jQuery(function($){
  
  // Captura o clique no link do menu das abas
  $('.tabs-menu ul li a').click(function(){
    
    /** Variáveis **/
    
    // Configura o link clicado
    var a = $(this);
    
    // A classe da aba ativa
    var active_tab_class = 'active-tab-menu';
    
    // Captura o atributo data-tab e gera uma classe
    var the_tab = '.' + a.attr('data-tab');
    
    // Remove a classe de aba ativa de todas as abas
    $('.tabs-menu ul li a').removeClass(active_tab_class);
    
    // Adiciona a classe de aba ativa apenas no link clicado
    a.addClass(active_tab_class);
    
    // Adiciona um CSS para ocultar todas as abas
    $('.tabs-content .tabs').css({
      'display' : 'none'
    });
    
    // Mostra apenas a aba que queremos
    $(the_tab).show();
    
    // Não deixa o navegador atualizar a página
    return false;
  });
});

Veja uma demonstração aqui.

Em caso de dúvidas, basta perguntar.

O Módulo sobre variáveis em CSS do W3C ainda está em fase de rascunho, e pode ser modificado há qualquer momento, porém, a Mozilla já introduziu o recurso no Firefox 31 (ou superior) e já podemos ver como tudo vai funcionar em um futuro próximo (assim espero).

Se você já utilizou ou utiliza qualquer pré-processador de CSS (como Sass), variáveis já devem estar no seu costume de desenvolvimento, caso contrário esse tutorial vai detalhar exatamente como você deve fazer para criar variáveis nativas em CSS.

O CSS que conhecemos

Conforme sabemos, definimos uma regra CSS utilizando o seguinte:

  • Um (ou mais) seletor(es)
  • Uma abertura de chave {
  • Uma propriedade
  • Dois pontos :
  • Um valor
  • Ponto e vírgula ;
  • Fechamento da chave }

Veja na imagem abaixo:

Regra CSS

Regra CSS

Utilizaremos este mesmo formato para criar propriedades customizadas (ou variáveis nativas do CSS).

Criando uma variável em CSS

Para criar uma variável em CSS, utilizamos o seguinte formato:

seletor {
  --nome-da-variavel: valor;
}

Ou seja, o mesmo formato do CSS que já conhecemos.

Veja alguns detalhes sobre as variáveis nativas do CSS:

  • Variáveis são definidas por seletor (como se fossem variáveis locais), ou seja, elas não estarão disponíveis para outros seletores;
  • Variáveis sofrem o efeito cascata, isso quer dizer que os filhos de um elemento poderão acessar as variáveis de seus elementos pai;
  • Você só poderá criar variáveis para valores, não para seletores e nem propriedades;
  • Caso queira criar “Variáveis globais” (disponíveis para todos os elementos), utilize o seletor :root.

Veja um exemplo real:

:root {
  --largura: 50px;
  --altura: 50px;
  --fundo: black;
  --borda: 5px solid #000;
  --cor: red;
}

Agora temos várias variáveis definidas e podemos utilizá-las. Em todos os elementos do documento.

Caso queira limitar o escopo da variável, basta modificar o seletor, por exemplo:

.foo {
  --largura: 50px;
  --altura: 50px;
  --fundo: black;
  --borda: 5px solid #000;
  --cor: red;
}

Agora vamos ver como executar o valor de uma variável dentro de uma regra.

Chamando uma variável em CSS

Para chamar uma variável em CSS, utilizamos a função var(), veja um exemplo:

.foo {
  width: var(--largura);
  height: var(--altura);
  background: var(--fundo);
  border: var(--borda);
}

Você pode até utilizar funções já definidas no CSS, como calc. Veja:

.foo {
  --largura: 50px;
  --altura: 50px;
  --fundo: black;
  --borda: 5px solid #000;
  --cor: red;
}

.foo {
  width: var(--largura);
  height: var(--altura);
  background: var(--fundo);
  border: var(--borda);
}
.bar {
  width: calc( var(--largura) / 2 );
  height: var(--altura);
  background: var(--cor);
}

Estou criando os exemplos mencionados nesse artigo no CodePen, você pode testar em tempo real aqui (só funcionou no Firefox 31 ou superior).

Concluindo

Ainda é muito cedo para falar qualquer coisa sobre variáveis em CSS, mas já deu pra ter o gostinho sobre como as coisas vão funcionar.

Não se esqueça que isso é um experimento e pode ser modificado há qualquer momento, portanto, fique atento ao site da W3C.

Mais detalhes em:

Em caso de dúvidas, basta perguntar.

Posicionar elementos com {css}position: absolute;{/css} e {css}position: fixed;{/css} no CSS pode ir do mais simples, à dor de cabeça para desenvolvedores mais inexperientes.

Imagine que você tem um elemento com largura máxima de 500px (max-width) e seu cliente pede para você colocar uma barra fixa (que rola junto com a página) no topo deste elemento, como você faria?

Barra fixa

Se você disser que colocaria {css}position: relative;{/css} no elemento pai, não funcionaria com a largura, nem com as propriedades {css}top{/css} e {css}left{/css}. Isso porque quando um elemento tem {css}position: fixed;{/css}, a sua referência sempre vai ser o viewport (a janela do navegador) para suas bordas, não outros elementos. A única regra que faria a barra ficar parada ali no mesmo local, seria se eu atribuísse {css}position: relative;{/css} no elemento pai e {css}position: absolute;{/css} no filho, assim, se eu configurar as propriedades {css}top{/css} e {css}left{/css} para 0 (zero), o navegador irá calcular a posição da barra a partir do canto superior esquerdo do elemento pai. Porém, ela não rolaria com a página, o que tiraria todo o sentido de ter utilizado {css}position: absolute;{/css} (podia ser {css}static{/css} mesmo).

Vamos ver qual foi a solução que encontrei para este problema logo a seguir. Mas antes… se você não tem experiência com a propriedade "position", leia o artigo Propriedade Position do CSS (Tableless), pois vai ser um pouco confuso.

Atenção: Posição "fixa" (fixed) não tem efeito com posição relativa (relative), portanto, o título desse artigo é apenas descritivo sobre como a barra vai aparecer. Contudo, programaticamente falando, está incorreto.

O HTML

Para o nosso HTML, vamos precisar do seguinte:

  • Um elemento pai (geral) – Classe .container
  • Um elemento pai da barra – Classe .top-bar-container
  • A barra em si – Classe .top-bar-fixed
  • Um elemento para ser o conteúdo da barra – Classe .top-bar-content

Veja o HTML:

<div class="container">
  <div class="top-bar-container">
    <div class="top-bar-fixed">
      <div class="top-bar-content">
        Conteúdo da barra
      </div>
    </div>
  </div>
</div>

Vamos ver o CSS.

O CSS

Agora teremos que fazer o seguinte:

  • .container – Deve ter posição relativa;
  • .top-bar-container – Posição absoluta; top e left 0 (zero);
  • .top-bar-fixed – Posição fixa; left e right 0 (zero);
  • .top-bar-content – Margens laterais auto; mesma largura do container.

Veja o código:

*{
  box-sizing: border-box;
  margin: 0;
}
.container {
  max-width: 500px;
  background: #ddd;
  margin: 0 auto;
  position: relative;
  padding-bottom: 20px;
  min-height: 1000px; /* Remova  isso */
}
.top-bar-container {
  position: absolute;
  top: 0;
  left: 0;
}
.top-bar-fixed {
  position: fixed;
  right: 0;
  left: 0;
  margin: 0 30px;
}
.top-bar-content {
  max-width: 500px;
  margin: 0 auto;
  background: #111;
  text-align: center;
  color: #fff;
  padding: 30px 0;
}

Se você não percebeu o que fizemos, simplesmente deixamos a barra .top-bar-fixed na largura 100%, mas fundo transparente, seu único trabalho será rolar seu conteúdo junto com a página. Quem está recebendo as configurações do que seria a nossa barra, na verdade, é o elemento .top-bar-content.

Perceba também, que alguns recursos só foram aplicados para que o código funcione com layout responsivo, por isso tivemos que complicar um pouco a situação.

Veja o resultado do exemplo acima… Caso queira editar, acesse este link.

Concluindo

Trabalhar com posições em CSS pode ser complicado no começo, porém, é só você entender exatamente o que cada uma das regras relacionadas fazem, como top, right, left e bottom, por exemplo.

Em caso de dúvidas, basta comentar.

Neste tutorial, vou detalhar como criar seu próprio CSS Grid para facilitar a divisão de colunas em qualquer tamanho de tela, seja um Smartphone ou uma TV de  polegadas.

Se você desenvolve há bastante tempo, provavelmente chegou a ver várias mudanças no estilo como criamos sites. Passamos de layout de tabelas, para CSS, largura fixa para design responsivo, e outras milhares de mudanças que ocorreram ao longo dos anos (e ainda vai mudar muito).

Uma coisa que nunca muda é o sistema de grid (grade, grelha ou malha). Grid, basicamente, é um sistema que você cria para deixar o seu layout mais alinhado e consistente.

Sem que eu precise detalhar muito, apenas olhando a imagem abaixo você será capaz de absorver a ideia.

Com grid:

Com Grid

Sem grid:

Sem Grid

Isso acontece porque é um assunto voltado para o design gráfico, assunto que, se quiser entender melhor, basta acessar os links abaixo:

Agora vamos ver códigos… Oba!!!!

Como criar sua própria grid em CSS

Não tem segredo, primeiramente você deve entender o layout que vai criar (é a partir do layout que o grid vai ser criado). Eu trabalho como programador, neste caso o layout chega pra mim como imagem (PSD, JPG, Corel, até Word – acredite se quiser), minha função é entender as funções do site e escrever o código que vai fazer tudo funcionar. Portanto, antes de mais nada, saiba exatamente o que você quer fazer. 

Quando você souber como será o layout (quantas colunas, blocos e módulos, etc), arrume uma calculadora e faça as contas.

O mais complicado aqui é que vamos trabalhar com porcentagens, já que nosso layout sempre será responsivo.

Por exemplo, suponhamos que eu queira um site com largura máxima de 1000px e duas colunas, uma de 360px e outra de 640px (apenas um exemplo). Simples, veja as continhas:

  • ( 360 * 100 ) / 1000 = 36%
  • ( 640 * 100 ) / 1000 = 64%

Sei que dava para fazer de cabeça, mas só para você entender a conta (pois os valores podem ficar bem complicados dependendo do layout). Então eu já sei que posso ter uma coluna com largura de 64% e outra com 36%.

Vamos codificar e ver o que acontece:

HTML:

<div class="pagina">
  <div class="conteudo"></div>
  <div class="lateral"></div>
</div>

CSS:

*, *:after, *:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
   box-sizing: border-box;
}
.clearfix:after {
  content: '.';
  display: block;
  clear: both;
  width: 100%;
  height: 0;
  line-height: 0;
  overflow: hidden;
}
.pagina {
  max-width: 1000px;
  margin: 30px auto;
}
.conteudo {
  float: left;
  /* Apenas para nosso exemplo */
  background: yellow;
  width: 64%;
}
.lateral {
  float: left;
  width: 36%;
  /* Apenas para nosso exemplo */
  background: purple;
}
/* Apenas para nosso exemplo */
.conteudo, .lateral {
  height: 300px;
}

E já temos nosso resultado prontinho.

Agora, imagine aqueles layouts onde o designer quer 30px de largura entre os elementos, como fazer?

Simples também, vamos modificar um pouco nosso HTML, veja:

<div class="pagina clearfix">
  <div class="conteudo">
    <div class="conteudo-interno"></div>
  </div>
  <div class="lateral">
    <div class="lateral-interno"></div>
  </div>
</div>

Agora estilize apenas o conteúdo interno, assim, você não quebra a estrutura criada anteriormente.

*, *:after, *:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.clearfix:after {
  content: '.';
  display: block;
  clear: both;
  width: 100%;
  height: 0;
  line-height: 0;
  overflow: hidden;
}
.pagina {
  max-width: 1000px;
  margin: 30px auto;
}
.conteudo {
  float: left;
  /* Apenas para nosso exemplo */

  width: 64%;
}
.lateral {
  float: left;
  width: 36%;
}
.conteudo-interno {
  background: yellow; 
  margin: 15px;
}
.lateral-interno {
  margin: 15px;
  /* Apenas para nosso exemplo */
  background: purple;
}
/* Apenas para nosso exemplo */
.conteudo-interno, .lateral-interno {
  height: 300px;
}

Perceba que agora temos uma margem de "15px" de cada lado dos blocos, ou seja, 15+15 = 30px de espaço.

Alguns (se não todos) designers reclamam por diferença de um único pixel, perceba que teremos diferença de "15px" em cada uma das laterais da página. Isso acontece por que não existe mais conteúdo para somar as margens.

Para resolver isso, você pode adicionar "padding" de 15px no próprio elemento que envolve as colunas, veja:

*, *:after, *:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.clearfix:after {
  content: '.';
  display: block;
  clear: both;
  width: 100%;
  height: 0;
  line-height: 0;
  overflow: hidden;
}
.pagina {
  max-width: 1000px;
  padding: 15px;
  margin: 0 auto;
}
.conteudo {
  float: left;
  /* Apenas para nosso exemplo */

  width: 64%;
}
.lateral {
  float: left;
  width: 36%;
}
.conteudo-interno {
  background: yellow; 
  margin: 15px;
}
.lateral-interno {
  margin: 15px;
  /* Apenas para nosso exemplo */
  background: purple;
}
/* Apenas para nosso exemplo */
.conteudo-interno, .lateral-interno {
  height: 300px;
}

Veja aqui o resultado.

Agora vamos ver um sistema de css grid criado com a mesma ideia.

Sistema de Grid Tutsup

Este é um sisteminha de grid criado com os cálculos indicados acima:

HTML:

<div class="page clearfix">

  <!-- 12 colunas -->
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  <div class="cols cols-12">
    <div class="content">12</div>
  </div>
  
  <!-- 6 colunas -->
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  
  <!-- 3 colunas -->
  <div class="cols cols-3">
    <div class="content">3</div>
  </div>
  <div class="cols cols-3">
    <div class="content">3</div>
  </div>
  <div class="cols cols-3">
    <div class="content">3</div>
  </div>
  
  <!-- 2 colunas (Uma muito fina, outra bem larga) --> 
  <div class="cols cols-6">
    <div class="content">2</div>
  </div>
  <div class="cols cols-6-5x">
    <div class="content">6 &times; 5</div>
  </div>
  
  <!-- 2 colunas (Uma muito fina, outra bem larga) --> 
  <div class="cols cols-6-5x">
    <div class="content">6 &times; 5</div>
  </div>
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  
  <!-- 2 colunas iguais --> 
  <div class="cols cols-6-3x">
    <div class="content">6 &times; 3</div>
  </div>
  <div class="cols cols-6-3x">
    <div class="content">6 &times; 3</div>
  </div>
  
  <!-- 2 colunas (Uma larga, outra mais fina) --> 
  <div class="cols cols-3-2x">
    <div class="content">3 &times; 2</div>
  </div>
  <div class="cols cols-3">
    <div class="content">3</div>
  </div>
  
  <!-- 2 colunas (Uma larga, outra mais fina) -->   
  <div class="cols cols-3">
    <div class="content">3</div>
  </div>
  <div class="cols cols-3-2x">
    <div class="content">3 &times; 2</div>
  </div>
  
  <!-- 3 colunas (duas finas nas pontas e uma mais larga no meio) -->   
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  <div class="cols cols-3-2x">
    <div class="content">3 &times; 2</div>
  </div>
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  
  <!-- 3 colunas (uma com cada largura) -->
  <div class="cols cols-3">
    <div class="content">3</div>
  </div>
  <div class="cols cols-6-3x">
    <div class="content">6 &times; 3</div>
  </div>
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  
  <!-- 3 colunas (uma com cada largura) -->
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  <div class="cols cols-3">
    <div class="content">3</div>
  </div>
  <div class="cols cols-6-3x">
    <div class="content">6 &times; 3</div>
  </div>
  
  <!-- 3 colunas (uma com cada largura) -->
  <div class="cols cols-6-3x">
    <div class="content">6 &times; 3</div>
  </div>
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  <div class="cols cols-3">
    <div class="content">3</div>
  </div>
  
  <!-- 3 colunas (uma com cada largura) -->
  <div class="cols cols-6-3x">
    <div class="content">6 &times; 3</div>
  </div>
  <div class="cols cols-3">
    <div class="content">3</div>
  </div>
  <div class="cols cols-6">
    <div class="content">6</div>
  </div>
  
  <!-- 4 colunas -->
   <div class="cols cols-12">
    <div class="content">12</div>
  </div>
     <div class="cols cols-6">
    <div class="content">6</div>
  </div>
       <div class="cols cols-3">
    <div class="content">3</div>
  </div>
        <div class="cols cols-12-5x">
    <div class="content">12 &times 5</div>
  </div>
  
</div>  <!--.page -->

CSS:

*, *:before, *:after {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	font-family: sans-serif;
	font-size: 12px;
	color: #fff;
}
.page {
	max-width: 100%;
	padding: 15px;
	background: #333;
	margin: 0 auto;
}
.clearfix:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
	line-height: 0;
}
.cols {
	float: left;
}
.cols-12 {
	width: 8.33%;
}
.cols-12-5x {
	width: 41.65%;
}
.cols-6 {
	width: 16.66%;
}

.cols-6-3x {
	width: 50%;
}
.cols-6-5x {
	width: 83.3%;
}

.cols-3 {
	width: 33.33%;
}
.cols-3-2x {
	width: 66.64%;
}

.content {
	background: #3facd6;
	padding: 0;
	margin: 15px;
	padding: 15px;
}

Veja o resultado aqui.

Observação: Lembre-se de aplicar as Media queries.

Download

Caso queira baixar os arquivos da CSS Grid criada nesse tutorial, mais um PSD (Photoshop) pronto, basta clicar no link abaixo:

Espero que ajude no seu próximo desenvolvimento.

Provavelmente você já deve ter visto o efeito fly-in que é executado no scroll (rolar) da página. Normalmente ele vem misturado com efeitos de parallax, já que o conceito de rolagem de página é bem parecido.

Fly-in consiste em mostrar elementos abaixo da dobra como se eles estivessem entrando na página de maneira bem agradável.

Para este tutorial, vamos utilizar CSS3 e jQuery.

Então vamos lá?

Demonstração

Veja uma demonstração do que vamos criar nesse tutorial:

O HTML

Seu HTML pode ter qualquer estrutura que preferir, porém, os elementos que vão receber o efeito deverão ter a classe que vai gerenciar tudo.

Para nosso exemplo, vamos utilizar a classe "fly".

Veja um exemplo de código HTML que vamos utilizar para este tutorial:

<div class="content clearfix">
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
</div>

<div class="full-block fly">

</div>

<div class="content clearfix">
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
</div>

<div class="full-block fly">

</div>

<div class="content clearfix">
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
	<div class="block fly">
		<div class="gutter"></div>
	</div>
</div>

O trecho é extenso, mas não se assuste, são simplesmente DIVs repetidos com a mesma classe. O mais importante aqui é que os elementos que tiverem o efeito tenham a classe "fly".

O CSS

Você pode estilizar seus elementos da maneira que preferir, porém, a classe fly deverá conter o seguinte:

.fly {
	opacity: 0;
	transition: all 600ms ease-in-out;
	transform:translateY(100px) scale(1.05) translate3d(0, 0, 0);  
}

Também precisamos de outra classe que vai remover a transformação que a classe "fly" fará em nossos elementos. Nesse caso, utilizei uma classe chamada "show-block". Veja:

.show-block {
	opacity: 1;
	transform:translateY(0) scale(1) translate3d(0, 0, 0);
}

Ao final do artigo, vou deixar um link para você baixar o exemplo que criei, assim você pode analisar melhor o código.

O jQuery

O jQuery vai detectar o viewport, ou seja, vai verificar se o que o usuário está vendo, está (ou não) na tela.

Veja:

// Um timer para receber o Timeout do efeito
var timer = 0;

// A função que vai detectar o viewport
function recheck() {
	// Distância do ponto de rolagem até o topo da página
	var window_top = $(this).scrollTop();
	
	// Altura do viewport
	var window_height = $(this).height();
	
	// Início do viewport
	var view_port_s = window_top;
	
	// Fim do viewport
	var view_port_e = window_top + window_height;

	// Se tiver um timer, anula o mesmo
	if ( timer ) {
		clearTimeout( timer );
	}
	
	// Detecta todos os elementos com a classe .fly
	$('.fly').each(function(){
		// O objeto
		var block = $(this);
		
		// A distância do objeto do topo da página
		var block_top = block.offset().top;
		
		// A altura do objeto
		var block_height = block.height();

		// Se estiver dentro do view port ou antes
		if ( block_top < view_port_e ) {
			timer = setTimeout(function(){
				block.addClass('show-block');
			},100);       
		} else {
			timer = setTimeout(function(){
				block.removeClass('show-block');
			},100);          
		}
	});
}

// Inicia o jQuery
$(function(){
	// Cria o efeito no scroll
	$(window).scroll(function(){
		recheck();
	});
	
	// Cria o efeito quando a janela é redimensionada
	$(window).resize(function(){
		recheck();   
	});

	Cria o efeito quando a página é carregada
	recheck();
});

O jQuery acima simplesmente adiciona a classe "show-block" nos elementos que estão no viewport ou acima dele, e remove a mesma classe quando os elementos não estão aparecendo na tela.

Download

Caso queira baixar o demo que criamos nessa página, utilize o link abaixo:

Caso queira continuar o projeto, ou modificar qualquer coisa, faça-o pelo Codepen.

Concluindo

Caso tenha uma solução melhor, basta deixar nos comentários. Vamos compartilhar nosso conhecimento!

Provavelmente você já deve ter visto que alguns sites estilizam os links externos (links que não são do seu site) de maneira diferente dos links internos. Isso é legal para o usuário final, pois ele pode saber qual link vai sair do site em que ele está, e qual aponta para outro artigo do mesmo site.

Nesse artigo vou deixar uma dica bem rápida para estilizar links externos com CSS utilizando o seletor {php}:not{/php}.

Vamos lá.

Como estilizar links externos com CSS

Primeiramente faça a configuração do seu texto e links da maneira que preferir, por exemplo:

*, *:after, *:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: 'Titillium Web', sans-serif;
  font-size: 18x;
  font-weight: 400
}
.text{
  max-width:80%;
  margin: 0 auto;
  padding: 20px;
}
.text p {
  margin: 1.6em 0;
}

a {
  color: #2979ff;
  text-decoration: none;
}
a:hover {
  color: #4672bd;
  text-decoration: underline;
}

Agora para estilizar os links externos, simplesmente adicione:

a:not([href*="todoespacoonline.com/w"]) {
  color: #c93900;
  margin-left: 5px;
  padding-left: 15px;
  background: url(https://www.todoespacoonline.com/w/wp-content/uploads/2014/08/icon_external_link2.gif) center left no-repeat;
}

Troque todoespacoonline.com/w pelo endereço do seu site e pronto.

Se não estiver familiarizado com o seletor :not, acesse o link abaixo para maiores informações:

Se quiser adicionar um evento "hover", faça o seguinte:

a:not([href*="todoespacoonline.com/w"]) {
  color: #c93900;
  margin-left: 5px;
  padding-left: 15px;
  background: url(https://www.todoespacoonline.com/w/wp-content/uploads/2014/08/icon_external_link2.gif) center left no-repeat;
  transition: all 100ms ease-in-out;
}
a:not([href*="todoespacoonline.com/w"]):hover {
  color: #000;
  text-decoration: none;
  background: url(https://www.todoespacoonline.com/w/wp-content/uploads/2014/08/icon_external_link2.gif) top left no-repeat;
}

Veja uma demonstração de como funciona:

CodePen

Simples assim!

Espero que goste.