SlideShare a Scribd company logo
1 of 30
Download to read offline
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

More Related Content

Similar to Css3 - Flex Box e Efeitos

Putting Flexbox into Practice
Putting Flexbox into PracticePutting Flexbox into Practice
Putting Flexbox into PracticeZoe Gillenwater
 
Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)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 fluxShow & tell - Flex in flux
Show & tell - Flex in fluxDan Dineen
 
Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)Zoe Gillenwater
 
Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)Zoe Gillenwater
 
CSS3 Flexbox & Responsive Design
CSS3 Flexbox & Responsive DesignCSS3 Flexbox & Responsive Design
CSS3 Flexbox & Responsive DesignArash Milani
 
Introduction to flexbox
Introduction  to  flexboxIntroduction  to  flexbox
Introduction to flexboxJyoti Gautam
 
Building Layouts with CSS
Building Layouts with CSSBuilding Layouts with CSS
Building Layouts with CSSBoris Paillard
 
Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)Zoe Gillenwater
 
Flexing Your WordPress Themes
Flexing Your WordPress ThemesFlexing Your WordPress Themes
Flexing Your WordPress ThemesTim Blodgett
 
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)
Flexbox: One Giant Leap for Web Layout (GenerateConf 2013)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 cssDescomplicando o alinhamento com css
Descomplicando o alinhamento com cssFernanda Bernardo
 
Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)Zoe Gillenwater
 
CSS3 Flex Layout
CSS3 Flex LayoutCSS3 Flex Layout
CSS3 Flex LayoutNeha Sharma
 
CSS Lessons Learned the Hard Way (Beyond Tellerand)
CSS Lessons Learned the Hard Way (Beyond Tellerand)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 GillenwaterCSS Lessons Learned The Hard Way – Zoe Gillenwater
CSS Lessons Learned The Hard Way – Zoe Gillenwaterbeyond tellerrand
 
Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016Understanding flex box CSS Day 2016
Understanding flex box CSS Day 2016Davide Di Pumpo
 

Similar to Css3 - Flex Box e Efeitos (20)

Putting Flexbox into Practice
Putting Flexbox into PracticePutting Flexbox into Practice
Putting Flexbox into Practice
 
Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)Leveling Up With Flexbox (Smart Web Conference)
Leveling Up With Flexbox (Smart Web Conference)
 
Show & tell - Flex in flux
Show & tell - Flex in fluxShow & tell - Flex in flux
Show & tell - Flex in flux
 
Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)Leveling Up with Flexbox (Smashing Conference)
Leveling Up with Flexbox (Smashing Conference)
 
The Power of CSS Flexbox
The Power of CSS FlexboxThe Power of CSS Flexbox
The Power of CSS Flexbox
 
Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)Using Flexbox Today (Generate Sydney 2016)
Using Flexbox Today (Generate Sydney 2016)
 
CSS3 Flexbox & Responsive Design
CSS3 Flexbox & Responsive DesignCSS3 Flexbox & Responsive Design
CSS3 Flexbox & Responsive Design
 
Introduction to flexbox
Introduction  to  flexboxIntroduction  to  flexbox
Introduction to flexbox
 
A complete guide to flexbox
A complete guide to flexboxA complete guide to flexbox
A complete guide to flexbox
 
Building Layouts with CSS
Building Layouts with CSSBuilding Layouts with CSS
Building Layouts with CSS
 
Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)Using Flexbox Today (CSS Summit 2016)
Using Flexbox Today (CSS Summit 2016)
 
Flexing Your WordPress Themes
Flexing Your WordPress ThemesFlexing 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)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 cssDescomplicando o alinhamento com css
Descomplicando o alinhamento com css
 
flexbox report
flexbox reportflexbox report
flexbox report
 
Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)Enhancing Responsiveness with Flexbox (RWD Summit)
Enhancing Responsiveness with Flexbox (RWD Summit)
 
CSS3 Flex Layout
CSS3 Flex LayoutCSS3 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 (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 GillenwaterCSS 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 2016Understanding 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 HTML5Por que você precisa saber tudo sobre HTML5
Por que você precisa saber tudo sobre HTML5Hcode
 
Apresentação inicial do Curso CSS3 do HTML5DEV
Apresentação inicial do Curso CSS3 do HTML5DEVApresentação inicial do Curso CSS3 do HTML5DEV
Apresentação inicial do Curso CSS3 do HTML5DEVHcode
 
Lançamento Curso online Começando com HTML5
Lançamento Curso online Começando com HTML5Lançamento Curso online Começando com HTML5
Lançamento Curso online Começando com HTML5Hcode
 
Html5 Mercado e Carreiras
Html5 Mercado e CarreirasHtml5 Mercado e Carreiras
Html5 Mercado e CarreirasHcode
 
Html5 tecnologias, mercados e carreiras
Html5 tecnologias, mercados e carreirasHtml5 tecnologias, mercados e carreiras
Html5 tecnologias, mercados e carreirasHcode
 
SQL Server 2012
SQL Server 2012SQL Server 2012
SQL Server 2012Hcode
 

More from Hcode (6)

Por que você precisa saber tudo sobre HTML5
Por que você precisa saber tudo sobre HTML5Por 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 HTML5DEVApresentaçã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 HTML5Lançamento Curso online Começando com HTML5
Lançamento Curso online Começando com HTML5
 
Html5 Mercado e Carreiras
Html5 Mercado e CarreirasHtml5 Mercado e Carreiras
Html5 Mercado e Carreiras
 
Html5 tecnologias, mercados e carreiras
Html5 tecnologias, mercados e carreirasHtml5 tecnologias, mercados e carreiras
Html5 tecnologias, mercados e carreiras
 
SQL Server 2012
SQL Server 2012SQL Server 2012
SQL Server 2012
 

Recently uploaded

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.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?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 MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 

Recently uploaded (20)

Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce 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 PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
201610817 - edge part1
201610817 - edge part1201610817 - 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.pdfVideogame 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 RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.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?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 MinutesAI 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 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - 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 IstioComparing 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 1Secure 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-2019IESVE 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.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine 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 WorkflowsIgniting 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 BlueprintEmpowering 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 WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 

Css3 - Flex Box e Efeitos