PARTE 2 - COMO FAZER UM CSS/STYLE PARA ANIMESPIRIT/SOCIALSPIRIT.

2� Aula

Ol� pessoinhas! Tudo bem com voc�s? Espero que sim! <3

Essa � a segunda parte da nossa s�rie de 'Como fazer um CSS/STYLE para o Animespirit/Socialspirit'. Se voc� ainda n�o viu a primeira parte, clique aqui.

Continuando... na segunda parte talvez seja um pouco mais complicado pois trabalhamos com algumas coisas a mais.




Por�m, vou estar escrevendo o que cada um dos #algumacoisa representa, tudo bem? Vai ser uma representa��o com imagens, prints tirados do pr�prio v�deo. A explica��o por escrita vai ser bem simples. A do v�deo � mais detalhada.

-----------------------------------------------------------


#base {
background: url(img/transparencia.png) no-repeat center top fixed;
         border:2px solid #370000;
}

Representa o fundo. Onde est� azul.



-----------------------------------------------------------

#fundo {
background:url(img/fundoDegrade.jpg) repeat-X left top;
}

Representa o fundo degrad�. Onde est� um cinza, puxando para o branco.


-----------------------------------------------------------

#nav {
        background: #FAF7F5;
}

� a barrinha que fica em baixo do CimaLogo.


-----------------------------------------------------------

#nav a {
       font-family: Arial;
       color:#000;
}

Altera a cor e o 'tipo' de fonte das letras que fica escrito 'Animes & Mang�s, Bandas e M�sicos, Cartoons...' e da� vai com v�rios nomes.



-----------------------------------------------------------

#nav a:hover {
       color: #ccc;
}
  
 Altera a cor das letras quando passamos o mouse em cima.

No meu caso, eu adicionei um background para ficar com um quadradinho. Est� tudo no v�deo.




-----------------------------------------------------------

#secaoNav  {
background: #FAF7F5;
        border:1px solid #EEE8E1;
}

Altera a cor da barra onde fica escrito; 'Spirit > Membros'


-----------------------------------------------------------

#secaoNav, #secaoNav a {
        font-size: 12px;
color: #D7575B;
}

Altera a cor e o tamanho das setinhas da mesma barra anterior.




-----------------------------------------------------------

E ent�o? O que acharam? Ainda tem d�vidas? � s� comentar! <3


At� a pr�xima, amores! :3

Gostou do post? Fa�a uma doa��es e ajude-nos a continuar!



Posted by :