AgitaGAMES


Bem Vindos ao AgitaGAMES!

Registre-se para obter acesso especial em todo conteúdo presente no Fórum!
Tenha um bom uso do nosso fórum, e seja ativo!






Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

avatar
Membro

Lição 15: Usando z-index (Layers)


CSS usa o espaço tri-dimensional - altura, largura e profundidade. Nas lições anteriores vimos as duas primeiras dimensões. Nesta lição aprenderemos como colocar elementos em  layers (camadas). Resumindo, camadas significam como os elementos se sobrepõem uns aos outros.


Para fazer isto definimos para cada elemento um número índice (z-index). O comportamento é que elementos com número índice maior se sobrepõem àqueles com menor número.


Vamos supor um royal flush no jogo de poker. As cartas podem ser apresentadas como se cada uma delas tivesse um z-index:


Royal Flush


No caso mostrado, os números índice estão em uma seqüência direta (de 1-5), contudo o mesmo resultado poderia ser obtido com uso de 5 diferentes números, não em seqüência. O que conta é a cronologia dos números (a ordem).


O código para a ilustração das cartas é mostrado a seguir:



 

#ten_of_diamonds {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}

#jack_of_diamonds {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}

#queen_of_diamonds {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}

#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}

#ace_of_diamonds {
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}




 
  • Ver exemplo CLIQUE AQUI


  • O método é simples, mas as possibilidades são muitas. Você pode colocar imagens sobre textos,  texto sobre texto, etc.


    Sumário


    Layers podem ser usados em muitas situações. Tente, por exemplo, usar z-index para criar efeitos em cabeçalhos no lugar de usar imagens. Por um lado é mais rápido carregar texto na página e por outro, texto é mais amigável aos dispositivos de indexação.








    Ver perfil do usuário http://www.zonetoony.net

    Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

    Permissão deste fórum:
    Você não pode responder aos tópicos neste fórum