PARTE 4 - COMO FAZER UM CSS/STYLE PARA ANIMESPIRIT/SOCIALSPIRIT

5� Aula

Oi Brasil. o/

Eu sei, demorei um pouco... Motivo? Estava esperando as aulas terem uma certa quantidade de visualiza��es. N�o adianta eu mandar aula atr�s de aula e ningu�m ver.

Mas enfim, o importante � que a aula est� aqui!!

S� um lembrete; j� mostrei/ensinei como conseguimos os c�digos de cores no Photoshop, e como pega os da tabela de cores. Caso n�o saiba, aulas anteriores:

Primeira aula, clique aqui.
Segunda aula, clique aqui.
Terceira aula, clique aqui.

Nesta aula, vou est� ensinando a alterar o #baixo, #baixo a, .boxMenuDireito .tituloMenuDireito, .boxMenuDireito .textoMenuDireito, .boxMenuDireito img e .boxMenuDireito img:hover.

Muito confuso? Eu sei, na primeira vez tamb�m achei. AUSHAUSHAUH

Vamos a v�deo aula!

Veja:



Adicione a extens�o do canal ao seu navegador clicando aqui. 
Ela est� dispon�vel para Google Chrome e Mozilla Firefox.
A mesma ir� te notificar sobre TODOS os lan�amentos dos pr�ximos v�deos do canal, pode v�-los mais rapidamente e pode facilmente compartilhar o v�deo em suas redes sociais.


Ainda tem d�vidas? Talvez esse tutorial te ajude a entender melhor! 
Vamos l�!

Come�arei pelo #baixo e #baixo a.



Alterei do jeito que quis e ficou com essas configura��es:


#baixo {
border-top: transparent;
background: transparent;
color: #fefefe;
}

#baixo a {
color: #fefefe;
}

No meu caso, ficou assim:


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

Agora vamos para o .boxMenuDireito.


O meu ficou assim:

.boxMenuDireito {
color:#D7575B;

}

.boxMenuDireito .tituloMenuDireito {
        color:#fefefe;
        font-size: 13px;
}


.boxMenuDireito .textoMenuDireito{
        border:1px solid #370000;
        background: transparent;
        color:#fefefe;
           
}

Resultado final:



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



Iremos para o .boxMenuDireito img.



No meu caso, eu adicionei um formato diferente.
Dei espa�o entre o '.boxMenuDireito img' e '.boxMenuDireito img:hover' e escrevi '.boxUsuario img{' e coloquei o c�digo do tal formato. 

.boxMenuDireito img{
           border-radius: 0px;

}

.boxUsuario img { 
             -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);

}

.boxMenuDireito img:hover{
           border-radius: 0px;

}


Caso quiserem escolher formatos diferentes, acesse esse link. Explico mais detalhadamente sobre esse site e como funciona no v�deo. Mas basicamente, � s� escolher o formato e copiar o c�digo.

Ficou assim:




E � isso pessoal! Espero que tenham gostado! Qualquer coisa, � s� comentar. Pode ser aqui ou no canal, sem problemas! <3

Adicione a extens�o do canal ao seu navegador clicando aqui. 
Ela est� dispon�vel para Google Chrome e Mozilla Firefox.
A mesma ir� te notificar sobre TODOS os lan�amentos dos pr�ximos v�deos do canal, pode v�-los mais rapidamente e pode facilmente compartilhar o v�deo em suas redes sociais.



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






Posted by :