Css3 - Flex Box e Efeitos

50 %
50 %
Information about Css3 - Flex Box e Efeitos
Technology

Published on February 14, 2014

Author: glauciodaniels

Source: slideshare.net

Description

Transitions, flex box, transform, css filter, animation

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-end flex-end

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

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

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

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

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

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

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

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 : 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

CSS3 transform

CSS3 Animation

E agora ?

Agora e com Você!

Obrigado  Glaucio Daniel glaucio@html5dev.com.br +GlaucioDaniel

Add a comment

Related presentations

Related pages

CSS3 Flex Box e Efeitos by Impacta Eventos - Eventials

CSS3 Flex Box e Efeitos. 2 year ago; Recorded on Feb. 14, 2014, 2 p.m. 2436 views; Description. Para acessar os arquivos utilizados durante a palestra ...
Read more

Css3 - Flex Box e Efeitos - Technology - docslide.com.br

CSS3 FlexBox e Efeitos Quem ? Instrutor e Coordenador Treinamentos Web Grupo Impacta Glaucio Daniel glaucio@html5dev.com.br +GlaucioDaniel CSS3 Flexible ...
Read more

CSS3 Flex Box e Efeitos - Graça Tour

CSS3 Flex Box e Efeitos - https: ... Como trabalhar com o novo recurso de layout flexível no CSS3? Como aplicar efeitos de transição, ...
Read more

Image Accordion with CSS3 - Tympanus

Image Accordion with CSS3 In this tutorial ... 20px auto; overflow: hidden; box-shadow: 1px 1px 4px rgba(0,0,0,0.08); border: 7px solid rgba ...
Read more

Sombras e efeitos no Html 5 e CSS3 - Documents

Flávia fala sobre o novo logo do html5 e apresenta a criação de um menu com efeitos de sombreamento e uma ... Share Sombras e efeitos no Html 5 e CSS3.
Read more

Can I use... Support tables for HTML5, CSS3, etc

Compatibility tables for support of HTML5, CSS3, SVG and other technologies in various browsers.
Read more

CSS Transitions page - World Wide Web Consortium (W3C)

CSS Transitions allows property changes in CSS values to occur smoothly over a ... please put the text “css3-transitions” in the ...
Read more

CSS-Tricks

... { box-sizing: border-box; } # October 6, 2016 ... CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people.
Read more

Tutorial CSS - CSS3, Módulo Box Flexível - Layout

Módulo Box Flexível das CSS3 ... para a propriedade box-flex dos dois blocos flexíveis o espaço vertical sobrando no ... Efeitos com caracteres
Read more