Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Ao darmos zoom em uma página aleatória na internet, o width assume, consequentemente, outros valores dinamicamente. O CSS3 tornou isso, resumidamente, mais legal de se fazer. Utilizamos o width, do transition-property.
O código é simples:
transition: width .3s ease;
(Talvez seja necessário utilizar os prefixos -moz- e -webkit-)
Sendo respectivamente transition-property, transition-duration e transition-timing-function — que assume outros valores: linear, ease, ease-in, ease-out, ease-in-out e cubic-bezier.
Um exemplo do uso está na busca do CSS-Tricks. Eu utilizo 90% lá, e na minha opinião, a transição (de segundos) torna a navegação bem mais agradável e leve. Talvez seja bobo, mas os clientes — e usuários como eu — aprovam. :)
E a "técnica" fica mais interessante ainda se trabalhada em um site responsivo. É no mínimo interessante para estudos.
Deixo a minha dica/contribuição aleatória de um dia a dia de desenvolvimento. :bye:
:seta: https://developer.mozilla.org/pt-BR/docs/CSS/transition
desculpas mas não entendi para que funciona. :unsure:
Dê CTRL + no site da Mozilla Thimble :seta: https://thimble.webmaker.org/en-US/ — vai ver que os elementos se posicionarão dinamicamente conforme assumem outros valores maiores de comprimento: largura, font-size; enfim, ele suaviza essa transição.
Em tempos de acessibilidade, muitos dão zoom na página para facilitar a leitura de artigos. Com toda a tecnologia fornecida, essa pode acabar sendo uma feature simples, mas essencial.
É bem comum.
:seta: https://thimble.webmaker.org/en-US/
:seta: http://www.impressivewebs.com
:seta: http://letteringjs.com/
Outro exemplo é o Locaweb Developer Network :seta: http://developer.locaweb.com.br/