SlideShare a Scribd company logo
1 of 36
Download to read offline
CSS3
            Diego Eis
             tableless.com.br   @diegoeis
             visie.com.br       @tableless

Monday, July 11, 2011
Monday, July 11, 2011
PARA
                        O QUE
                        SERVE
                        O CSS?
Monday, July 11, 2011
Monday, July 11, 2011
FORMATAR
            a informação
Monday, July 11, 2011
Monday, July 11, 2011
O QUE É
            informação?
Monday, July 11, 2011
Monday, July 11, 2011
INFORMAÇÃO
            é tudo o que
            o usuário consome!
            imagem, voz, texto, vídeo
            e quem sabe o que mais no futuro.

Monday, July 11, 2011
Monday, July 11, 2011
ONTEM
            formatar informação
            era chato e limitado.

Monday, July 11, 2011
Monday, July 11, 2011
E HOJE?


Monday, July 11, 2011
Monday, July 11, 2011
Monday, July 11, 2011
Monday, July 11, 2011
Monday, July 11, 2011
Monday, July 11, 2011
HOJE
            CSS é coisa linda!
            sombras, transparências,
            gradientes, animações
            e outras coisas lindas de Deus.
Monday, July 11, 2011
Monday, July 11, 2011
Mais novidades
            o desenvolvimento
            do CSS3 é modular

Monday, July 11, 2011
Monday, July 11, 2011
ANIMAÇÃO
            controlada

            Propriedade keyframe
            vem ni mim animação!

Monday, July 11, 2011
Monday, July 11, 2011
MEDIA QUERIES
            controlando como a
            informação será vista
            nos meios de acesso

Monday, July 11, 2011
Monday, July 11, 2011
O FLOAT
            vai morrer!

            Template Layout
            aí sim, hein?!

Monday, July 11, 2011
Monday, July 11, 2011
CSS3 3D
            manipulação 3D
            com CSS
            Propriedade Perspective
            Chora, neném!

Monday, July 11, 2011
Monday, July 11, 2011
TOUCH
            especificação touch


Monday, July 11, 2011
Monday, July 11, 2011
ENTRE
            OUTROS
            box-shadow, text-shadow,
            rgba/hsla, columns, @font-
            face, border-radius

Monday, July 11, 2011
Monday, July 11, 2011
RESPONSABILIDADE
            do dev client-side


Monday, July 11, 2011
CSS3
            Diego Eis
             tableless.com.br   @diegoeis
             visie.com.br       @tableless

Monday, July 11, 2011

More Related Content

Viewers also liked

Primeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endDiego Eis
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDiego Eis
 
Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSSDiego Eis
 
O básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked DataO básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked DataDiego Eis
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSSDiego Eis
 
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Diego Eis
 
O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endDiego Eis
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para webDiego Eis
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTMLDiego Eis
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?Diego Eis
 

Viewers also liked (10)

Primeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-end
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
 
Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSS
 
O básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked DataO básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked Data
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
 
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.
 
O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-end
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para web
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
 

Similar to CSS3 - Novo contexto

Choosing the right Content Management System
Choosing the right Content Management SystemChoosing the right Content Management System
Choosing the right Content Management SystemRachel Andrew
 
Taking SM to Next Level - Governor's Conference 2011
Taking SM to Next Level - Governor's Conference 2011Taking SM to Next Level - Governor's Conference 2011
Taking SM to Next Level - Governor's Conference 2011Andrew Hoffman
 
"센과 치히로의 행방불명"을 통해 알아보는 우리들의 잃어버린 인간성에 대하여
"센과 치히로의 행방불명"을 통해 알아보는 우리들의 잃어버린 인간성에 대하여"센과 치히로의 행방불명"을 통해 알아보는 우리들의 잃어버린 인간성에 대하여
"센과 치히로의 행방불명"을 통해 알아보는 우리들의 잃어버린 인간성에 대하여Ricky Park
 
让开发也懂前端
让开发也懂前端让开发也懂前端
让开发也懂前端lifesinger
 
Opera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 StandardsOpera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 StandardsZi Bin Cheah
 
Greach 2011 - Engrandeciendo Grails con MongoDB
Greach 2011 - Engrandeciendo Grails con MongoDBGreach 2011 - Engrandeciendo Grails con MongoDB
Greach 2011 - Engrandeciendo Grails con MongoDBgreach_es
 
Koss, How to make desktop caliber browser apps
Koss, How to make desktop caliber browser appsKoss, How to make desktop caliber browser apps
Koss, How to make desktop caliber browser appsEvil Martians
 
Speed Dating: How Speeding up your Blog Improves your SEO
Speed Dating: How Speeding up your Blog Improves your SEOSpeed Dating: How Speeding up your Blog Improves your SEO
Speed Dating: How Speeding up your Blog Improves your SEOVigLink
 

Similar to CSS3 - Novo contexto (13)

CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
 
Choosing the right Content Management System
Choosing the right Content Management SystemChoosing the right Content Management System
Choosing the right Content Management System
 
Taking SM to Next Level - Governor's Conference 2011
Taking SM to Next Level - Governor's Conference 2011Taking SM to Next Level - Governor's Conference 2011
Taking SM to Next Level - Governor's Conference 2011
 
"센과 치히로의 행방불명"을 통해 알아보는 우리들의 잃어버린 인간성에 대하여
"센과 치히로의 행방불명"을 통해 알아보는 우리들의 잃어버린 인간성에 대하여"센과 치히로의 행방불명"을 통해 알아보는 우리들의 잃어버린 인간성에 대하여
"센과 치히로의 행방불명"을 통해 알아보는 우리들의 잃어버린 인간성에 대하여
 
ISA11 - Bill Scott - Designing Mice Men
ISA11 - Bill Scott - Designing Mice MenISA11 - Bill Scott - Designing Mice Men
ISA11 - Bill Scott - Designing Mice Men
 
让开发也懂前端
让开发也懂前端让开发也懂前端
让开发也懂前端
 
Opera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 StandardsOpera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 Standards
 
Greach 2011 - Engrandeciendo Grails con MongoDB
Greach 2011 - Engrandeciendo Grails con MongoDBGreach 2011 - Engrandeciendo Grails con MongoDB
Greach 2011 - Engrandeciendo Grails con MongoDB
 
Cours1 design d'interaction_csv
Cours1 design d'interaction_csvCours1 design d'interaction_csv
Cours1 design d'interaction_csv
 
Cours1: design d'interaction
Cours1: design d'interactionCours1: design d'interaction
Cours1: design d'interaction
 
Koss, How to make desktop caliber browser apps
Koss, How to make desktop caliber browser appsKoss, How to make desktop caliber browser apps
Koss, How to make desktop caliber browser apps
 
ITP / SED Day 4
ITP / SED Day 4ITP / SED Day 4
ITP / SED Day 4
 
Speed Dating: How Speeding up your Blog Improves your SEO
Speed Dating: How Speeding up your Blog Improves your SEOSpeed Dating: How Speeding up your Blog Improves your SEO
Speed Dating: How Speeding up your Blog Improves your SEO
 

Recently uploaded

Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsRoshan Dwivedi
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 

Recently uploaded (20)

Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 

CSS3 - Novo contexto