7masters css | css e ux, por raphael fabeni
TRANSCRIPT
CSS e UX
@raphaelfabeni
conferenciacssbrasil.com.brmeetup.com/CSS-SP
CSS e UX
detalhes
X
Y
Z
X
Y Arquitetura Modularização Componentes
Z
Componentesestáticos
O usuário não tem que adivinhar o que
aconteceu...
... e se ele tiver que parar pra pensar?
:(
CSS ajuda nóis aê! \o/
Animações não são apenas detalhes...
... elas podem ser funcionais.
lista de itens
item novo
increase
entering-x
increase
show-color-itemshow-item
opacity
background
height
transformentering-x
increase
show-color-itemshow-item
increase entering-xshow-item show-color-item
4 animações específicas
increaseshow-itementering-x
show-color-item
increase
show-item
entering-x
show-color-item
increaseshow-itementering-x
show-color-item
@keyframes show-item { from { opacity: 0; } to { opacity: 1; } }
@keyframes increase { from { max-height: 0px; } to { max-height: 100px; } }
@keyframes entering-x { 0% { transform:translateX(-100%); } 100% { transform: translateX(0); } }
@keyframes show-color-item { 0%, 80% { background: purple; } 100% { background: gray; } }
melhor que position
http://bit.ly/css-list-ux
.new { animation: increase .3s ease both, show-item .4s ease .1s both,
http://bit.ly/css-list-ux
.new { animation: increase .3s ease both, show-item .4s ease .1s both, entering-x .7s cubic-bezier(0.680, -0.550, 0.265, 1.550) .1s both,
http://bit.ly/css-list-ux
.new { animation: increase .3s ease both, show-item .4s ease .1s both, entering-x .7s cubic-bezier(0.680, -0.550, 0.265, 1.550) .1s both, show-color-tem 2s ease both;}
Valeu!
@raphaelfabeni