Submit Search
Upload
Css3 - Flex Box e Efeitos
•
0 likes
•
1,085 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
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
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
SkyPlanner
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
Tarek Kalaji
201610817 - edge part1
201610817 - edge part1
Jamie (Taka) Wang
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
infogdgmi
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
shyamraj55
20150722 - AGV
20150722 - AGV
Jamie (Taka) Wang
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
YounusS2
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
IES VE
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
Md Hossain Ali
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
DianaGray10
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
Jamie (Taka) Wang
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
Christian Posta
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
DianaGray10
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IES VE
Nanopower In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
Pedro Manuel
20230104 - machine vision
20230104 - machine vision
Jamie (Taka) Wang
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Aijun Zhang
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
Mahmoud Rabie
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
dgelyza
Recently uploaded
(20)
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
201610817 - edge part1
201610817 - edge part1
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
20150722 - AGV
20150722 - AGV
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
Nanopower In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
20230104 - machine vision
20230104 - machine vision
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
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