Sunday, February 12, 2017
PARTE 4 COMO FAZER UM CSS STYLE PARA ANIMESPIRIT SOCIALSPIRIT
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:
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.
E é isso pessoal! Espero que tenham gostado! Qualquer coisa, é só comentar. Pode ser aqui ou no canal, sem problemas! <3
Go to link Download
