Your SlideShare is downloading. ×

Css3 - Flex Box e Efeitos

534
views

Published on

Transitions, flex box, transform, css filter, animation

Transitions, flex box, transform, css filter, animation

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
534
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS3 FlexBox e Efeitos
  • 2. Quem ? Instrutor e Coordenador Treinamentos Web Grupo Impacta Glaucio Daniel glaucio@html5dev.com.br +GlaucioDaniel
  • 3. CSS3 Flexible box layout
  • 4. CSS3 Flex box layout
  • 5. CSS3 Flex box layout
  • 6. CSS3 Flex box layout
  • 7. CSS3 Flex box layout
  • 8. Box model .bloco { width: 100px; height: 100px; float:left; } CSS3 Flex box layout
  • 9. Em Flex Box, tudo começa no container. CSS3 Flex box layout
  • 10. flex-start flex-start CSS3 Flex box layout flex-end flex-end
  • 11. flex-start flex-start CSS3 Flex box layout flex-end flex-end
  • 12. Eixo Transversal – Y flex-start Eixo Principal – X flex-start CSS3 Flex box layout flex-end flex-end
  • 13. Flex-Container flex-start Eixo Transversal – Y Flex-Item Eixo Principal – X flex-start CSS3 Flex box layout flex-end flex-end
  • 14. Flex-Container flex-start Flex-Item Eixo Transversal – Y Flex-Direction row | column Eixo Principal – X flex-start CSS3 Flex box layout flex-end flex-end
  • 15. Flex-Container flex-start Flex-Item Eixo Transversal – Y Flex-Direction row(padrão) Eixo Principal – X flex-start CSS3 Flex box layout flex-end flex-end
  • 16. Flex-Container flex-start Flex-Item Eixo Transversal – Y Flex-Direction column Eixo Principal – X flex-start CSS3 Flex box layout flex-end flex-end
  • 17. Flex-Container flex-start Flex-Item Eixo Transversal – Y Flex-Direction column Eixo Principal – X flex-start CSS3 Flex box layout flex-end flex-end
  • 18. Flex-Container flex-start Flex-Item Eixo Transversal – Y Flex-Direction column Align-Items Justify-Content • • • • • Flex-start Flex-end Center Space-between Space-around Eixo Principal – X flex-start CSS3 Flex box layout flex-end flex-end
  • 19. Flex-Container flex-start Flex-Item Eixo Transversal – Y Flex-Direction row(padrão) Align-Items (Y) Justify-Content(X) • • • • • Flex-start Flex-end Center Space-between Space-around Eixo Principal – X flex-start CSS3 Flex box layout flex-end flex-end
  • 20. Flex-Container flex-start Flex-Item Eixo Transversal – Y Flex-Direction column Align-Items(X) Justify-Content(Y) • • • • • Flex-start Flex-end Center Space-between Space-around Eixo Principal – X flex-start CSS3 Flex box layout flex-end flex-end
  • 21. Demonstração CSS3 Flex box layout
  • 22. CSS3 Transitions
  • 23. Demonstração CSS3 transition
  • 24. CSS3 Css filter
  • 25. -webkit-filter: drop-shadow: 0 – 100px -webkit-filter: drop-shadow(6px 6px 20px black); opacity, grayscale, sepia, invert : 0.0 - 1 -webkit-filter: sepia(0.5); brihtness, contrast, saturate: 0.0 - 10 -webkit-filter: brihtness(5); hue-rotate: 0 - 360deg -webkit-filter: hue-rotate(190deg); blur: 0 – 10px -webkit-filter: blur(5px); CSS3 Css filter
  • 26. CSS3 transform
  • 27. CSS3 Animation
  • 28. E agora ?
  • 29. Agora e com Você!
  • 30. Obrigado  Glaucio Daniel glaucio@html5dev.com.br +GlaucioDaniel