Submit Search
Upload
Css3 - Flex Box e Efeitos
•
0 likes
•
1,094 views
Hcode
Follow
Transitions, flex box, transform, css filter, animation
Read less
Read more
Technology
Report
Share
Report
Share
1 of 30
Download now
Download to read offline
Recommended
CSS first steps
CSS first steps
Guilherme
Pre-processadores CSS e Ferramentas gráficas
Pre-processadores CSS e Ferramentas gráficas
Kenji Yamamoto
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Diego Eis
Layout with flexbox
Layout with flexbox
The Level Consulting, Ltd.
Is Flexbox the Future of Layout?
Is Flexbox the Future of Layout?
jameswillweb
Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)
Zoe Gillenwater
Flexbox Will Shock You!
Flexbox Will Shock You!
Scott Vandehey
Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)
Zoe Gillenwater
Recommended
CSS first steps
CSS first steps
Guilherme
Pre-processadores CSS e Ferramentas gráficas
Pre-processadores CSS e Ferramentas gráficas
Kenji Yamamoto
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Diego Eis
Layout with flexbox
Layout with flexbox
The Level Consulting, Ltd.
Is Flexbox the Future of Layout?
Is Flexbox the Future of Layout?
jameswillweb
Putting Flexbox into Practice (Fronteers)
Putting Flexbox into Practice (Fronteers)
Zoe Gillenwater
Flexbox Will Shock You!
Flexbox Will Shock You!
Scott Vandehey
Using Flexbox Today (Frontier Conf 2016)
Using Flexbox Today (Frontier Conf 2016)
Zoe Gillenwater
Putting Flexbox into Practice
Putting Flexbox into Practice
Zoe Gillenwater
Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)
Zoe Gillenwater
Show & tell - Flex in flux
Show & tell - Flex in flux
Dan Dineen
Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)
Zoe Gillenwater
The Power of CSS Flexbox
The Power of CSS Flexbox
freshlybakedpixels
Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)
Zoe Gillenwater
CSS3 Flexbox & Responsive Design
CSS3 Flexbox & Responsive Design
Arash Milani
Introduction to flexbox
Introduction to flexbox
Jyoti Gautam
A complete guide to flexbox
A complete guide to flexbox
Bytes Technolab Inc.
Building Layouts with CSS
Building Layouts with CSS
Boris Paillard
Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)
Zoe Gillenwater
Flexing Your WordPress Themes
Flexing Your WordPress Themes
Tim Blodgett
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Stephen Hay
Descomplicando o alinhamento com css
Descomplicando o alinhamento com css
Fernanda Bernardo
flexbox report
flexbox report
LearningTech
Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)
Zoe Gillenwater
CSS3 Flex Layout
CSS3 Flex Layout
Neha Sharma
CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)
Zoe Gillenwater
CSS Lessons Learned The Hard Way – Zoe Gillenwater
CSS Lessons Learned The Hard Way – Zoe Gillenwater
beyond tellerrand
Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016
Davide Di Pumpo
Por que você precisa saber tudo sobre HTML5
Por que você precisa saber tudo sobre HTML5
Hcode
Apresentação inicial do Curso CSS3 do HTML5DEV
Apresentação inicial do Curso CSS3 do HTML5DEV
Hcode
More Related Content
Similar to Css3 - Flex Box e Efeitos
Putting Flexbox into Practice
Putting Flexbox into Practice
Zoe Gillenwater
Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)
Zoe Gillenwater
Show & tell - Flex in flux
Show & tell - Flex in flux
Dan Dineen
Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)
Zoe Gillenwater
The Power of CSS Flexbox
The Power of CSS Flexbox
freshlybakedpixels
Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)
Zoe Gillenwater
CSS3 Flexbox & Responsive Design
CSS3 Flexbox & Responsive Design
Arash Milani
Introduction to flexbox
Introduction to flexbox
Jyoti Gautam
A complete guide to flexbox
A complete guide to flexbox
Bytes Technolab Inc.
Building Layouts with CSS
Building Layouts with CSS
Boris Paillard
Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)
Zoe Gillenwater
Flexing Your WordPress Themes
Flexing Your WordPress Themes
Tim Blodgett
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Stephen Hay
Descomplicando o alinhamento com css
Descomplicando o alinhamento com css
Fernanda Bernardo
flexbox report
flexbox report
LearningTech
Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)
Zoe Gillenwater
CSS3 Flex Layout
CSS3 Flex Layout
Neha Sharma
CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)
Zoe Gillenwater
CSS Lessons Learned The Hard Way – Zoe Gillenwater
CSS Lessons Learned The Hard Way – Zoe Gillenwater
beyond tellerrand
Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016
Davide Di Pumpo
Similar to Css3 - Flex Box e Efeitos
(20)
Putting Flexbox into Practice
Putting Flexbox into Practice
Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)
Show & tell - Flex in flux
Show & tell - Flex in flux
Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)
The Power of CSS Flexbox
The Power of CSS Flexbox
Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)
CSS3 Flexbox & Responsive Design
CSS3 Flexbox & Responsive Design
Introduction to flexbox
Introduction to flexbox
A complete guide to flexbox
A complete guide to flexbox
Building Layouts with CSS
Building Layouts with CSS
Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)
Flexing Your WordPress Themes
Flexing Your WordPress Themes
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Descomplicando o alinhamento com css
Descomplicando o alinhamento com css
flexbox report
flexbox report
Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)
CSS3 Flex Layout
CSS3 Flex Layout
CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned The Hard Way – Zoe Gillenwater
CSS Lessons Learned The Hard Way – Zoe Gillenwater
Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016
More from Hcode
Por que você precisa saber tudo sobre HTML5
Por que você precisa saber tudo sobre HTML5
Hcode
Apresentação inicial do Curso CSS3 do HTML5DEV
Apresentação inicial do Curso CSS3 do HTML5DEV
Hcode
Lançamento Curso online Começando com HTML5
Lançamento Curso online Começando com HTML5
Hcode
Html5 Mercado e Carreiras
Html5 Mercado e Carreiras
Hcode
Html5 tecnologias, mercados e carreiras
Html5 tecnologias, mercados e carreiras
Hcode
SQL Server 2012
SQL Server 2012
Hcode
More from Hcode
(6)
Por que você precisa saber tudo sobre HTML5
Por que você precisa saber tudo sobre HTML5
Apresentação inicial do Curso CSS3 do HTML5DEV
Apresentação inicial do Curso CSS3 do HTML5DEV
Lançamento Curso online Começando com HTML5
Lançamento Curso online Começando com HTML5
Html5 Mercado e Carreiras
Html5 Mercado e Carreiras
Html5 tecnologias, mercados e carreiras
Html5 tecnologias, mercados e carreiras
SQL Server 2012
SQL Server 2012
Recently uploaded
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Martijn de Jong
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
Architecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
Zilliz
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
Overkill Security
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
apidays
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
Dropbox
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Remote DBA Services
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
apidays
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Orbitshub
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
Sandro Moreira
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
apidays
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
DianaGray10
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
Overkill Security
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Andrey Devyatkin
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
apidays
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
MadyBayot
Recently uploaded
(20)
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Architecting Cloud Native Applications
Architecting Cloud Native Applications
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
Css3 - Flex Box e Efeitos
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
Download now