Saturday, December 31, 2016
PARTE 2 COMO FAZER UM CSS STYLE PARA ANIMESPIRIT SOCIALSPIRIT
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
Go to link Download
