CSS e UX foi discussão promovida por Raphael Fabeni, analista de interface front-end na Netshoes, co-criador do Meetup CSS SP e co-organizador da Conferência CSS Brasil.

1. CSS e UX
@raphaelfabeni

2. @raphaelfabeni
raphaelfabeni.com.br

4. conferenciacssbrasil.com.brmeetup.com/CSS-SP

5. CSS e UX

6. detalhes

7. X
Y
Z

8. X
Y Arquitetura Modularização Componentes
Z

11. Componentes
estáticos

12. O usuário não tem
que adivinhar o que
aconteceu...

13. ... e se ele tiver que
parar pra pensar?
:(

14. CSS ajuda nóis aê!
o/

15. Animações não são
apenas detalhes...

16. ... elas podem ser
funcionais.

17. lista de itens

20. item novo

26. increase

27. entering-x
increase
show-color-item
show-item

28. opacity
background
height
transform
entering-x
increase
show-color-item
show-item

29. increase entering-xshow-item
show-
color-item
4 animações específicas

30. increase
show-item
entering-x
show-color-item

31. increase
show-item
entering-x
show-color-item
increase
show-item
entering-x
show-color-item

32. @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

33. http://bit.ly/css-list-ux
.new {
animation:

34. http://bit.ly/css-list-ux
.new {
animation:
increase .3s ease both,

35. http://bit.ly/css-list-ux
.new {
animation:
increase .3s ease both,
show-item .4s ease .1s both,

36. 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,

37. 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;
}

38. Valeu!
@raphaelfabeni