Embed Size (px)
Citation preview
CSS3FlexBox e Efeitos
Quem ?
Instrutor e Coordenador
Treinamentos Web
Grupo Impacta
Glaucio [email protected]
+GlaucioDaniel
CSS3Flexible box layout
CSS3 Flex 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-end flex-end
flex-start
CSS3 Flex box layout
flex-start flex-end flex-end
flex-start
CSS3 Flex box layout
flex-start flex-end flex-end
flex-start
Eixo Principal – X
Eixo
Tra
nsv
ersa
l –Y
CSS3 Flex box layout
flex-start flex-end flex-end
flex-start
Eixo Principal – X
Eixo
Tra
nsv
ersa
l –Y
Flex-Container
Flex-Item
CSS3 Flex box layout
flex-start flex-end flex-end
flex-start
Eixo Principal – X
Eixo
Tra
nsv
ersa
l –Y
Flex-Container
Flex-Item
Flex-Directionrow | column
CSS3 Flex box layout
flex-start flex-end flex-end
flex-start
Eixo Principal – X
Eixo
Tra
nsv
ersa
l –Y
Flex-Container
Flex-Item
Flex-Directionrow(padrão)
CSS3 Flex box layout
flex-start flex-end flex-end
flex-start
Eixo Principal – X
Eixo
Tra
nsv
ersa
l –Y
Flex-Container
Flex-Item
Flex-Directioncolumn
CSS3 Flex box layout
flex-start flex-end flex-end
flex-start
Eixo Principal – X
Eixo
Tra
nsv
ersa
l –Y
Flex-Container
Flex-Item
Flex-Directioncolumn
CSS3 Flex box layout
flex-start flex-end flex-end
flex-start
Eixo Principal – X
Eixo
Tra
nsv
ersa
l –Y
Flex-Container
Flex-Item
Flex-Directioncolumn
Align-Items
Justify-Content
• Flex-start• Flex-end• Center• Space-between• Space-around
CSS3 Flex box layout
flex-start flex-end flex-end
flex-start
Eixo Principal – X
Eixo
Tra
nsv
ersa
l –Y
Flex-Container
Flex-Item
Flex-Directionrow(padrão)
Align-Items (Y)
Justify-Content(X)
• Flex-start• Flex-end• Center• Space-between• Space-around
CSS3 Flex box layout
flex-start flex-end flex-end
flex-start
Eixo Principal – X
Eixo
Tra
nsv
ersa
l –Y
Flex-Container
Flex-Item
Flex-Directioncolumn
Align-Items(X)
Justify-Content(Y)
• Flex-start• Flex-end• Center• Space-between• Space-around
CSS3 Flex box layout
Demonstração
CSS3Transitions
CSS3 transition
Demonstração
CSS3Css filter
CSS3 Css filter
-webkit-filter: drop-shadow(6px 6px 20px black);
opacity, grayscale, sepia, invert : 0.0 - 1
-webkit-filter: sepia(0.5);
-webkit-filter: brihtness(5);
brihtness, contrast, saturate: 0.0 - 10
-webkit-filter: hue-rotate(190deg);
hue-rotate: 0 - 360deg
-webkit-filter:drop-shadow: 0 – 100px
-webkit-filter: blur(5px);
blur: 0 – 10px
CSS3transform
CSS3Animation
E agora ?
Agora e com
Você!
