CSS3
FlexBox e Efeitos
Quem ?
Instrutor e Coordenador
Treinamentos Web
Grupo Impacta

Glaucio Daniel

glaucio@html5dev.com.br
+GlaucioDaniel
CSS3
Flexible box layout
CSS3

Flex box layout
CSS3

Flex box layout
CSS3

Flex box layout
CSS3

Flex box layout
Box model
.bloco {
width: 100px;
height: 100px;
float:left;
}

CSS3

Flex box layout
Em Flex Box, tudo começa no
container.

CSS3

Flex box layout
flex-start

flex-start

CSS3

Flex box layout

flex-end

flex-end
flex-start

flex-start

CSS3

Flex box layout

flex-end

flex-end
Eixo Transversal – Y

flex-start

Eixo Principal – X

flex-start

CSS3

Flex box layout

flex-end

flex-end
Flex-Container

flex-start

Eixo Transversal – Y

Flex-Item

Eixo Principal – X

flex-start

CSS3

Flex box layout

flex-e...
Flex-Container

flex-start

Flex-Item

Eixo Transversal – Y

Flex-Direction
row | column

Eixo Principal – X

flex-start

...
Flex-Container

flex-start

Flex-Item

Eixo Transversal – Y

Flex-Direction
row(padrão)

Eixo Principal – X

flex-start

C...
Flex-Container

flex-start

Flex-Item

Eixo Transversal – Y

Flex-Direction
column

Eixo Principal – X

flex-start

CSS3

...
Flex-Container

flex-start

Flex-Item

Eixo Transversal – Y

Flex-Direction
column

Eixo Principal – X

flex-start

CSS3

...
Flex-Container

flex-start

Flex-Item

Eixo Transversal – Y

Flex-Direction
column
Align-Items
Justify-Content
•
•
•
•
•

...
Flex-Container

flex-start

Flex-Item

Eixo Transversal – Y

Flex-Direction
row(padrão)
Align-Items (Y)
Justify-Content(X)...
Flex-Container

flex-start

Flex-Item

Eixo Transversal – Y

Flex-Direction
column
Align-Items(X)
Justify-Content(Y)
•
•
•...
Demonstração

CSS3

Flex box layout
CSS3
Transitions
Demonstração

CSS3 transition
CSS3
Css filter
-webkit-filter:
drop-shadow: 0 – 100px
-webkit-filter: drop-shadow(6px 6px 20px black);
opacity, grayscale, sepia, invert ...
CSS3
transform
CSS3
Animation
E agora ?
Agora e com

Você!
Obrigado

Glaucio Daniel

glaucio@html5dev.com.br
+GlaucioDaniel
Upcoming SlideShare
Loading in...5
×

Css3 - Flex Box e Efeitos

580

Published on

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
580
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css3 - Flex Box e Efeitos

  1. 1. CSS3 FlexBox e Efeitos
  2. 2. Quem ? Instrutor e Coordenador Treinamentos Web Grupo Impacta Glaucio Daniel glaucio@html5dev.com.br +GlaucioDaniel
  3. 3. CSS3 Flexible box layout
  4. 4. CSS3 Flex box layout
  5. 5. CSS3 Flex box layout
  6. 6. CSS3 Flex box layout
  7. 7. CSS3 Flex box layout
  8. 8. Box model .bloco { width: 100px; height: 100px; float:left; } CSS3 Flex box layout
  9. 9. Em Flex Box, tudo começa no container. CSS3 Flex box layout
  10. 10. flex-start flex-start CSS3 Flex box layout flex-end flex-end
  11. 11. flex-start flex-start CSS3 Flex box layout flex-end flex-end
  12. 12. Eixo Transversal – Y flex-start Eixo Principal – X flex-start CSS3 Flex box layout flex-end flex-end
  13. 13. Flex-Container flex-start Eixo Transversal – Y Flex-Item Eixo Principal – X flex-start CSS3 Flex box layout flex-end flex-end
  14. 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. 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. 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. 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. 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. 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. 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. 21. Demonstração CSS3 Flex box layout
  22. 22. CSS3 Transitions
  23. 23. Demonstração CSS3 transition
  24. 24. CSS3 Css filter
  25. 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. 26. CSS3 transform
  27. 27. CSS3 Animation
  28. 28. E agora ?
  29. 29. Agora e com Você!
  30. 30. Obrigado  Glaucio Daniel glaucio@html5dev.com.br +GlaucioDaniel
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×