Entrar Ainda não tem acesso?
6
respostas

Dúvida

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Transformações e atividade Melhorando a qualidade das palavras

por Melina Garcia Carniel
| 80.3k xp | 5 posts

Segui o código que foi passado e mesmo assim não ficou com o efeito, as letras ficaram minúsculas, alguém pode me ajudar?

6 respostas
por lucas.takeshi
| 582.9k xp | 1018 posts

Olá Melina,

poderia postar o seu código para eu dar uma olhada no motivo de não ter aplicado o efeito?

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Melina seu código não foi postado, por favor poste ele para que possamos lhe ajudar.

por Melina Garcia Carniel
| 80.3k xp | 5 posts

.palavra-home { font-family: "Shadows Into Light", cursive; font-weight: bold; color: #D5447E; position: absolute; perspective: 6px; position: absolute; top: 0; left: 0; width: 100%; height: 100%;

}

.palavra-home li {

font-size: 400%; }

.eficiencia { top: 50%; left: 60%; -webkit-transform: rotate(-5deg); transform: rotate(-5deg); transform: translate(-50%, -50%) translateZ(4px) rotate(-5deg) scale(.25); } .boas-praticas { top: 70%; left: 20%; -webkit-transform: rotate(10deg); transform: rotate(10deg); transform: translate(-50%, -50%) translateZ(1px) rotate(10deg) scale(0.25); } .codigo-limpo { top: 45%; left: 25%; -webkit-transform: rotate(-10deg); transform: rotate(-10deg); transform: translate(-50%, -50%) translateZ(2px) rotate(-10deg) scale(0.25); } .css3 { top: 55%; left: 35%; -webkit-transform: rotate(5deg); transform: rotate(5deg); transform: translate(-50%, -50%) translateZ(2px) rotate(5deg) scale(0.25); } .html5 { top: 30%; left: 65%; -webkit-transform: rotate(10deg); transform: rotate(10deg); transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(0.25); } .javascript { top: 15%; left: 60%; -webkit-transform: rotate(-5deg); transform: rotate(-5deg); transform: translate(-50%, -50%) translateZ(1px) rotate(-5deg) scale(0.25); } .acessibilidade { top: 30%; left: 35%; -webkit-transform: rotate(-5deg); transform: rotate(-5deg); transform: translate(-50%, -50%) translateZ(3px) rotate(-5deg) scale(0.25); } .responsivo { top: 40%; left: 40%; -webkit-transform: rotate(10deg); transform: rotate(10deg); transform: translate(-50%, -50%) translateZ(3px) rotate(10deg) scale(0.25); } .otimizacoes { top: 70%; left: 65%; -webkit-transform: rotate(-5deg); transform: rotate(-5deg); transform: translate(-50%, -50%) translateZ(2px) rotate(-5deg) scale(0.25); } .agilidade { top: 75%; left: 35%; -webkit-transform: rotate(5deg); transform: rotate(5deg); transform: translate(-50%, -50%) translateZ(1px) rotate(5deg) scale(0.25); } .design { top: 40%; left: 60%; -webkit-transform: rotate(10deg); transform: rotate(10deg); transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(0.25); }

por Melina Garcia Carniel
| 80.3k xp | 5 posts
.palavra-home {
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
    position: absolute;
    perspective: 6px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

.palavra-home li {

    font-size: 400%;
}

.eficiencia {
    top: 50%;
    left: 60%;
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
    transform: translate(-50%, -50%) translateZ(4px) rotate(-5deg) scale(.25);
}
.boas-praticas {
    top: 70%;
    left: 20%;
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
    transform: translate(-50%, -50%) translateZ(1px) rotate(10deg) scale(0.25);
}
.codigo-limpo {
    top: 45%;
    left: 25%;
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
    transform: translate(-50%, -50%) translateZ(2px) rotate(-10deg) scale(0.25);
}
.css3 {
    top: 55%;
    left: 35%;
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
    transform: translate(-50%, -50%) translateZ(2px) rotate(5deg) scale(0.25);
}
.html5 {
    top: 30%;
    left: 65%;
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
    transform: translate(-50%, -50%)  translateZ(2px) rotate(10deg) scale(0.25);
}
.javascript {
    top: 15%;
    left: 60%;
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
    transform: translate(-50%, -50%) translateZ(1px) rotate(-5deg) scale(0.25);
}
.acessibilidade {
    top: 30%;
    left: 35%;
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
    transform: translate(-50%, -50%) translateZ(3px) rotate(-5deg) scale(0.25);
}
.responsivo {
    top: 40%;
    left: 40%;
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
    transform: translate(-50%, -50%) translateZ(3px) rotate(10deg) scale(0.25);
}
.otimizacoes {
    top: 70%;
    left: 65%;
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
    transform: translate(-50%, -50%) translateZ(2px) rotate(-5deg) scale(0.25);
}
.agilidade {
    top: 75%;
    left: 35%;
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
    transform: translate(-50%, -50%) translateZ(1px) rotate(5deg) scale(0.25);
}
.design {
    top: 40%;
    left: 60%;
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
    transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(0.25);
}
por lucas.takeshi
| 582.9k xp | 1018 posts

Olá Melina,

coloque também o seu HTML para eu ver como o css é aplicado na página.

por Braulio Villares Torres
| 133.3k xp | 19 posts

Melina, no CSS deve ter duas classes com nomes parecidos (palavra-home e palavras-home): 

.palavra-home {
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
    position: absolute;
}

e

.palavras-home {
  perspective: 6px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.palavras-home li {
  font-size: 400%;
}

Lembre-se de que, o seu UL deve ter a classe "palavras-home": 

<ul class="palavras-home">
...
</ul>

e os "lis" devem ter a classe "palavra-home":

<li class="palavra-home eficiencia">Eficiência</li>
<li class="palavra-home boas-praticas">Boas práticas</li>
<li class="palavra-home codigo-limpo">Código limpo</li>
<li class="palavra-home css3">CSS3</li>
<li class="palavra-home html5">HTML5</li>
<li class="palavra-home javascript">JavaScript</li>
<li class="palavra-home acessibilidade">Acessibilidade</li>
<li class="palavra-home responsivo">Responsivo</li>
<li class="palavra-home otimizacoes">Otimizações</li>
<li class="palavra-home agilidade">Agilidade</li>
<li class="palavra-home design">Design</li>