Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
11
respostas

Quando usar translate e posicionamento

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Pseudoelementos e atividade Triângulo na legenda

por Tiago Bastos Gonçalves
| 99.3k xp | 123 posts
Backend Developer

Eu estava fazendo este exercicio sem olhar a solucao do instrutor e cheguei a uma solucao parecida:

.icones-redes-sociais a:hover::before,
.icones-redes-sociais a:focus::before {
    content: '';
    text-indent: 0;
    position: absolute;
    bottom: -25%;
    left: 25%;
    width: 1rem;
    height: 1rem;
    background-color: black;
    transform: rotate(45deg);
}

Eu nao cheguei a utilizar o translateY(.5em) utilizado pelo instrutor e me veio a duvida: quando eu devo utilizar o translate e quando devo utilizar posicionamento (top, bottom, left e right)?

Obs.: eu utilizei left: 25% ao contrario da solucao que foi left: 0 por puro perfeccionismo para deixar centralizado ao icone a seta.

11 respostas
solução!
por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Tiago, tudo bem? Geralmente eu uso o translate para fazer algumas animações, também vejo a galera por aí usando para a mesma finalidade.

Outro ponto é a performance, com translate a performance é maior porque o translate faz uso da GPU.

Com translate a gente também não precisa se preocupar em quebrar o fluxo da página e a gente não perde uso de margins.

Espero ter ajudado.

por Tiago Bastos Gonçalves
| 99.3k xp | 123 posts
Backend Developer

Poderia falar mais sobre o último parágrafo, por favor? Eu entendi sobre translate ser usado em animações e sobre o ganho de performance por usar a GPU, mas não entendi sobre quebrar o fluxo da página e não perde uso de margins

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

Bom, vamos lá:

Quando você aplica um position: absolute você quebra o fluxo estático (static) da página, que por padrão será renderizar os elementos na ordem que foram declarados.

Dá uma olhada nesse exemplo:

https://jsfiddle.net/mahenrique94/73ajr9v8/

Veja que o box foi renderizado em último quando na verdade é o segundo filho, isso porque conta do position: absolute quebrar o fluxo de renderização padrão.

Repare também que ele está sem margin, a mesma não se aplica.

Espero ter ajudado.

por Tiago Bastos Gonçalves
| 99.3k xp | 123 posts
Backend Developer

Certo, entendi. Mas essas 'vantagens' de nao quebrar o fluxo de renderizacao da pagina e ter margin aplicada acaba nao sendo vista neste exercicio em questao porque ja temos o position: absolute aplicado, certo?

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

Exato.

por Tiago Bastos Gonçalves
| 99.3k xp | 123 posts
Backend Developer

Mas como seria feito este efeito sem o uso do position: absolute? Pergunto isso porque o uso de position é predominantemente presente nos sites, então as duas últimas vantagens citadas acima praticamente não existem por este fato, não?

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

Depende Tiago, essa implementação tem N maneiras de ser feita, segue um exemplo:

https://jsfiddle.net/mahenrique94/eq0yuca1/

Claro que é uma versão simplista, mas, também daria para fazer com JavaScript, etc...

No seu caso, use com position: absolute mesmo e boa, é o que faz mais sentido para o cenário.

Espero ter ajudado.

por Tiago Bastos Gonçalves
| 99.3k xp | 123 posts
Backend Developer

Entendi, Matheus. Eu perguntei porque parece que, na minha visao leiga, quando queremos trabalhar com posicionamento, utilizamos arbitrariamente a propriedade display. Por isso, me veio essa duvida. No dia a dia de um front-end developer, nao necessariamente utiliza-se a propriedade display? Como seria o dia a dia?

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

Fala aí Tiago, cara, tudo depende, o mesmo efeito e estilo pode ser feito e N maneiras.

Se um designer mandar um protótipo para mim e para você, o resultado final a gente vai entregar a mesma coisa, mas, os códigos serão completamente diferentes.

No dia a dia, usamos bastante a propriedade display com seus variados valores.

Espero ter ajudado.

por Tiago Bastos Gonçalves
| 99.3k xp | 123 posts
Backend Developer

Obrigado, Matheus!

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

Magina, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.