Css3 - Flex Box e Efeitos

CSS3FlexBox e Efeitos

Quem ?

Instrutor e Coordenador

Treinamentos Web

Grupo Impacta

Glaucio Danielglaucio@html5dev.com.br

+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ê!

Obrigado

Glaucio Danielglaucio@html5dev.com.br

+GlaucioDaniel