Últimas notícias
Siga esse blog
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




Olá! Sejam bem-vindos.

Meu nome é Luíza.
Sou dona do canal She Wolf. Amo músicas, amo ver séries [minha favorita é Xena, Warriors Princess], amo jogar vídeo game [principalmente Tomb Raider] e claro, tecnologia! <3 Meus amores sz

Obrigada a todos os inscritos! <3