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

3� Aula

Opa, voltei! haha

N�o demorei tanto u_u

Se voc� ainda n�o a primeira parte, clique aqui.

Se ainda n�o viu a segunda parte, clique aqui.

Okay, nessa aula n�s vamos estar alterando o #fundo, #base, #nav e o #secaoNav. Sim, n�s j� trabalhamos com essas partes por�m, vou est� ensinado um novo efeito. Se voc� quiser deixar somente com as cores e tal, tudo bem. Mas que tal um efeito transparente e/ou uma imagem de fundo, hm? Como nesse style [ainda n�o est� pronto]:



Apesar de n�o estar pronto, as altera��es que fiz est�o bem bacanas, n�o �?

Ent�o, nesse v�deo eu ensino a fazer tudo isso!

Veja:



Vamos para uma explica��o b�sica, tudo bem? Como eu disse na v�deo, eu sei que fazer um CSS no come�o pode ser complicado mas um dia, voc� aprende. E talvez essa explica��o te ajude a entender melhor.

Primeiro, eu comecei editando o #fundo.

#fundo {
background:url(img/Harley2.jpg) no-repeat center top fixed;
}

Troquei onde est� escrito 'fundoDegrade.jpg' por 'nomedaminhaimgem.png' que no caso, no tutorial em v�deo, ficou como 'Harley2.jpg'. Lembrando que depois do . � o formato da imagem. Por exemplo, 'taylormomsen.jpg'. JPG � um formato... assim como png, gif, etc. E claro 'taylormomsen' � o nome da imagem.
A pequena configura��o ap�s os parenteses � a posi��o da foto de fundo. 'no-repeat' � para n�o repetir. 'center top fixed' � para a imagem ficar em seu estilo, normal, e fixada.

Ficou assim: 


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

Agora, vamos editar o #base.

#base {
background: url(img/transparencia.png);
        border:2px solid #370000;
}


 Esse 'transparencia.png' � uma imagem TOTALMENTE pintada de preto com a opacidade em 20%, mais ou menos e foi salva em PNG. Esta imagem foi feita do Photohop. Voc� pode estar fazendo no Photofiltre, editores online, etc. Eu usei o PS porque � o software em que eu sei mexer e com isso, acho mais simples, d� menos trabalho. Voc� pode est� escolhendo o programa de sua prefer�ncia. Por�m, se quiser aprender a como baixar, instalar e ativar o Photoshop, clique aqui. Lembrando que, a imagem TEM QUE SER SALVA EM PNG, caso contr�rio n�o ir� funcionar.
Adicionei tamb�m uma pequena borda de 2px com a cor #370000 para a base ter um pequeno destaque a mais.

Ficou assim: 


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

Vamos editar o #nav que � a barrinha que fica em baixo do CimaLogo.


#nav {
        background: url(img/transparencia.png);
        border:1px solid #370000;
}

No #nav eu apenas copiei do #base. Tanto o background quando o border.
Apenas modifiquei o tamanho da borda para 1px.
Fiz a mesma coisa no #nav a:hover.

#nav a:hover {
       color: #5b5b5b;
       background: url(img/transparencia.png);
      
}

E no #secaoNav.

#secaoNav  {
background: url(img/transparencia.png);
        border:1px solid #370000;
}

Veja como ficou: 


Demais, n�o �? Eu adorei! <3

Ah, se n�o conseguiu entender o que #algumacoisa no CSS que foi feito nesta parte, por favor, vejas as aulas anteriores, l� vai est� explicando sobre cada coisinha j� editada nessa parte. N�o vi necessidade de especificar tanto o que � pois j� expliquei anteriormente. Clique aqui, para ver as aulas anteriores.

Se voc�s ainda tiver alguma d�vida pode estar comentando aqui, ou no youtube mesmo.


Gostou do post? Fa�a uma doa��es e ajude-nos a continuar!
https://apoia.se/equeen


Posted by :