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



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.










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