Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

CSS Star Wars: Sabres de Luz com linear & radial-gradient

Quando você está estudando linear & radial-gradient, mas é um nerd sem limites:

Meu pequeno experimento ficou interessante, mas apenas em aspect ratio 16:9 (meu monitor é 1920 x 1080). Quando altero essa razão, reduzindo ou aumentando a janela do navegador em apenas um dos eixos, os div's que formam as pontas dos sabres saem de alinhamento com os div's que formam o corpo.

Esse comportamento está acontecendo mesmo eu tendo usado grandezas proporcionais no CSS.

Alguém saberia como contornar essa situação, fazendo com que os sabres fiquem responsivos independente do aspect ratio?

HTML no GitHub

CSS no GitHub

Abraços e que a Força esteja com vocês!

Maurício

5 respostas
solução!

Fala aí Mauricio, tudo bem? Acho que o problema está na maneira como está montando os sabres, eu sei que é para estudo, mas, pode fazer diferente.

Você consegue o mesmo resultado com background normal, box-shadow e border-radius.

Dá uma olhada:

https://codepen.io/anon/pen/aXxPvK

Tente mudar seus sabres para suas bordas serem redondas com border-radius.

Espero ter ajudado.

Fala Matheus!

Cara, tua solução me deu ótimas idéias! Eu fiz a implementação de forma um pouco diferente, usando border-radius e box-shadow, mas continuei usando radial-gradient, só que agora no elemento inteiro.

E com um transform: rotate(35deg) consegui criar um efeito de duelo.

Hahaha...já tô aqui pensando em como vou animar isso com Transitions e JavaScript!

Duelo de sabres de luz

Abçs,

Maurício

PS: esqueci de postar o código.

Fala aí Mauricio, muito bom mano, ficou top, parabéns.

Abraços e bons estudos.

Hahaha vlw!

Abraços

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software