Transitions, flex box, transform, css filter, animation

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