Enviar pesquisa
Carregar
Css3
•
2 gostaram
•
736 visualizações
Inbal Geffen
Seguir
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 27
Baixar agora
Baixar para ler offline
Recomendados
CSS Walktrough Internship Course
CSS Walktrough Internship Course
Zoltan Iszlai
Intro to html, css & sass
Intro to html, css & sass
Sean Wolfe
Intro to HTML + CSS
Intro to HTML + CSS
Jamal Sinclair O'Garro
The Future of CSS
The Future of CSS
elliando dias
Intro to CSS
Intro to CSS
Randy Oest II
Web Development Basics: HOW TO in HTML
Web Development Basics: HOW TO in HTML
Der Lo
Flex User Group - Skinning Presentation
Flex User Group - Skinning Presentation
jmwhittaker
Web 102 INtro to CSS
Web 102 INtro to CSS
Hawkman Academy
Recomendados
CSS Walktrough Internship Course
CSS Walktrough Internship Course
Zoltan Iszlai
Intro to html, css & sass
Intro to html, css & sass
Sean Wolfe
Intro to HTML + CSS
Intro to HTML + CSS
Jamal Sinclair O'Garro
The Future of CSS
The Future of CSS
elliando dias
Intro to CSS
Intro to CSS
Randy Oest II
Web Development Basics: HOW TO in HTML
Web Development Basics: HOW TO in HTML
Der Lo
Flex User Group - Skinning Presentation
Flex User Group - Skinning Presentation
jmwhittaker
Web 102 INtro to CSS
Web 102 INtro to CSS
Hawkman Academy
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmony
jdramaix
Web development basics (Part-1)
Web development basics (Part-1)
Rajat Pratap Singh
HTML5 and CSS3 for Teachers
HTML5 and CSS3 for Teachers
Jason Hando
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Dirk Ginader
jQuery and Ruby Web Frameworks
jQuery and Ruby Web Frameworks
Yehuda Katz
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong?
Russ Weakley
Dive into HTML5: SVG and Canvas
Dive into HTML5: SVG and Canvas
Doris Chen
Html & Css presentation
Html & Css presentation
joilrahat
New Elements & Features in HTML5
New Elements & Features in HTML5
Jamshid Hashimi
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
Denise Jacobs
From Shabby to Chic
From Shabby to Chic
Richard Bair
Ajax In Action 2008 - Gui Development With qooxdoo
Ajax In Action 2008 - Gui Development With qooxdoo
Fabian Jakobs
CSS3: Ready for Primetime?
CSS3: Ready for Primetime?
Jeff Bridgforth
Html5
Html5
Rajesh Khetan
Css3
Css3
Knoldus Inc.
An in-depth look at jQuery
An in-depth look at jQuery
Paul Bakaus
Html Expression Web
Html Expression Web
Mark Frydenberg
CSS and CSS3
CSS and CSS3
Robyn Overstreet
HTML5 & CSS3
HTML5 & CSS3
Ian Lintner
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmony
Arcbees
HTML5, CSS3, and other fancy buzzwords
HTML5, CSS3, and other fancy buzzwords
Mo Jangda
HTML5 y CSS3
HTML5 y CSS3
InterGraphicDESIGNS
Mais conteúdo relacionado
Mais procurados
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmony
jdramaix
Web development basics (Part-1)
Web development basics (Part-1)
Rajat Pratap Singh
HTML5 and CSS3 for Teachers
HTML5 and CSS3 for Teachers
Jason Hando
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
Dirk Ginader
jQuery and Ruby Web Frameworks
jQuery and Ruby Web Frameworks
Yehuda Katz
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong?
Russ Weakley
Dive into HTML5: SVG and Canvas
Dive into HTML5: SVG and Canvas
Doris Chen
Html & Css presentation
Html & Css presentation
joilrahat
New Elements & Features in HTML5
New Elements & Features in HTML5
Jamshid Hashimi
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
Denise Jacobs
From Shabby to Chic
From Shabby to Chic
Richard Bair
Ajax In Action 2008 - Gui Development With qooxdoo
Ajax In Action 2008 - Gui Development With qooxdoo
Fabian Jakobs
CSS3: Ready for Primetime?
CSS3: Ready for Primetime?
Jeff Bridgforth
Html5
Html5
Rajesh Khetan
Css3
Css3
Knoldus Inc.
An in-depth look at jQuery
An in-depth look at jQuery
Paul Bakaus
Html Expression Web
Html Expression Web
Mark Frydenberg
CSS and CSS3
CSS and CSS3
Robyn Overstreet
HTML5 & CSS3
HTML5 & CSS3
Ian Lintner
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmony
Arcbees
Mais procurados
(20)
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmony
Web development basics (Part-1)
Web development basics (Part-1)
HTML5 and CSS3 for Teachers
HTML5 and CSS3 for Teachers
Sass, Compass and the new tools - Open Web Camp IV
Sass, Compass and the new tools - Open Web Camp IV
jQuery and Ruby Web Frameworks
jQuery and Ruby Web Frameworks
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong?
Dive into HTML5: SVG and Canvas
Dive into HTML5: SVG and Canvas
Html & Css presentation
Html & Css presentation
New Elements & Features in HTML5
New Elements & Features in HTML5
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
From Shabby to Chic
From Shabby to Chic
Ajax In Action 2008 - Gui Development With qooxdoo
Ajax In Action 2008 - Gui Development With qooxdoo
CSS3: Ready for Primetime?
CSS3: Ready for Primetime?
Html5
Html5
Css3
Css3
An in-depth look at jQuery
An in-depth look at jQuery
Html Expression Web
Html Expression Web
CSS and CSS3
CSS and CSS3
HTML5 & CSS3
HTML5 & CSS3
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmony
Semelhante a Css3
HTML5, CSS3, and other fancy buzzwords
HTML5, CSS3, and other fancy buzzwords
Mo Jangda
HTML5 y CSS3
HTML5 y CSS3
InterGraphicDESIGNS
Accessibility Hacks Version 2
Accessibility Hacks Version 2
Graham Armfield
Accessibility Hacks version 2
Accessibility Hacks version 2
Graham Armfield
Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017
Anna Migas
Revolver
Revolver
Michelle Lim
Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018
Graham Armfield
Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017
Codemotion
Make your animations perform well
Make your animations perform well
Anna Migas
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3
Brian Moon
Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3
Todd Zaki Warfel
HalfStack London - Make Your Animations Perform Well
HalfStack London - Make Your Animations Perform Well
Anna Migas
Css3 101
Css3 101
Ignacio Coloma
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
applicake
CSS3 pronti all'uso
CSS3 pronti all'uso
Filippo Buratti
Css animation
Css animation
Aaron King
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
incidentist
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
Derek Christensen
Accelerated Stylesheets
Accelerated Stylesheets
Wynn Netherland
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
Lohith Goudagere Nagaraj
Semelhante a Css3
(20)
HTML5, CSS3, and other fancy buzzwords
HTML5, CSS3, and other fancy buzzwords
HTML5 y CSS3
HTML5 y CSS3
Accessibility Hacks Version 2
Accessibility Hacks Version 2
Accessibility Hacks version 2
Accessibility Hacks version 2
Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017
Revolver
Revolver
Accessibility Hacks Wordcamp Manchester October 2018
Accessibility Hacks Wordcamp Manchester October 2018
Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well
Make your animations perform well
Ease into HTML5 and CSS3
Ease into HTML5 and CSS3
Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3
HalfStack London - Make Your Animations Perform Well
HalfStack London - Make Your Animations Perform Well
Css3 101
Css3 101
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com
CSS3 pronti all'uso
CSS3 pronti all'uso
Css animation
Css animation
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
From PSD to WordPress Theme: Bringing designs to life
From PSD to WordPress Theme: Bringing designs to life
Accelerated Stylesheets
Accelerated Stylesheets
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
Mais de Inbal Geffen
Web Storage & Web Workers
Web Storage & Web Workers
Inbal Geffen
Jqeury ajax plugins
Jqeury ajax plugins
Inbal Geffen
Jquery mobile2
Jquery mobile2
Inbal Geffen
Jquery2
Jquery2
Inbal Geffen
J querypractice
J querypractice
Inbal Geffen
J queryui
J queryui
Inbal Geffen
Mysql & Php
Mysql & Php
Inbal Geffen
jQuery mobile UX
jQuery mobile UX
Inbal Geffen
Jqeury ajax plugins
Jqeury ajax plugins
Inbal Geffen
Mais de Inbal Geffen
(9)
Web Storage & Web Workers
Web Storage & Web Workers
Jqeury ajax plugins
Jqeury ajax plugins
Jquery mobile2
Jquery mobile2
Jquery2
Jquery2
J querypractice
J querypractice
J queryui
J queryui
Mysql & Php
Mysql & Php
jQuery mobile UX
jQuery mobile UX
Jqeury ajax plugins
Jqeury ajax plugins
Css3
1.
CSS3
©Inbal Geffen 2012
2.
What's new in
CSS3? ● Syntax ● Selectors ● Design Features ©Inbal Geffen 2012
3.
Basic Syntax ● New
prefix for browser support ○ -moz- (Firefox) ○ -webkit- (Safari, Chrome) ○ -ms- (IE) ○ -o- (Opera) div { -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } ©Inbal Geffen 2012
4.
New Selectors ● Dom
Selectors ○ Attribute selectors ○ id selectors ○ class selectors ● Pseudo selectors ○ Work on elements outside the DOM ■ First letter or last child of parent element ○ All browsers but IE are supported ©Inbal Geffen 2012
5.
Attribute Selectors ● [attr]
- Simple Attribute Selector ○ Perform css style on all the elements with the attribute in the braces ○ In this example Shiri & Elad will be shown as red links <ul> <li><a href="page1.html">Neta</a><li> <li><a href="page2.html" rel="friend">Shiri</a><li> <li><a href="page3.html" rel="contact">Elad</a><li> </ul> a[rel] { color:red; } Example HTML 1 ©Inbal Geffen 2012
6.
Attribute Selectors ● [attr='value']
- Exact Attribute Selector a[rel='friend'] { color:red; } Only Shiri will be colored red ©Inbal Geffen 2012
7.
Attribute Selectors ● [attr^='value']
- the “begins with” selector The “begins with” selector allows for the selection of elements where a specified attribute (e.g. the href attribute of a hyperlink) begins with a specified string (e.g. “http://”, “https://” or “mailto:”). The Syntax element[att^=val] Examples a[href^="http://"] p[title^="Hello"] Example HTML 2 ©Inbal Geffen 2012
8.
Attribute Selectors ● [attr$='value']
- the “ends with” selector The Syntax element[att$=val] Examples a[href$=".pdf"] p[title$="World"] ● [attr*='value'] - the “contains” selector The Syntax element[att*=val] Examples a[href*="google.com"] p[title$="orl"] ©Inbal Geffen 2012
9.
Attribute Selectors ● E~F
○ Perform css style on all F typed elements that exist after E typed elements in the same DOM level h2 ~ p { font-style:italic; } h2 + p { font-style:bold; } Example HTML 3 ©Inbal Geffen 2012
10.
Pseudo-Class Selectors ● Structural
○ Dynamically select content based on its position in the document ■ :first-child ■ :first-of-type ■ :nth-child(n) ● UI-Element State ○ Dynamically select content based on the element state ■ Checked ■ Disabled ©Inbal Geffen 2012
11.
Structural Selectors ●
Dynamically select content based on its position in the document ○ :first-child :last-child :only-child ○ :first-of-type :last-of-type :only-of-type ○ :nth-child(n) :nth-last-child(n) ○ :nth-of-type(n) :nth-last-of-type(n) Example HTML 4 ©Inbal Geffen 2012
12.
UI-Element State Selectors ●
Dynamically select content based on its UI state e:pseudo-class {} .class:pseudo-class {} #id:pseudo-class {} a:hover { background-color: #ccc; text-decoration: none; } ● :disabled :enabled ● :checked ● ::selection - what the user selected on the page Example HTML 5 ©Inbal Geffen 2012
13.
CSS3 - Design
Features ©Inbal Geffen 2012
14.
CSS3 Borders Border-radius (Rounded
corners) #div1 { border-radius: 20px 20px; background-color: red; width: 200px; height: 100px; } ● border-top-left-radius ● border-top-right-radius ● border-bottom-left-radius ● border-bottom-right-radius ©Inbal Geffen 2012
15.
CSS3 Shadows Box-shadow E {
box-shadow: inset horizontal vertical blur spread color; } #div1 { box-shadow: 4px 4px black; background-color: silver; width: 200px; height: 100px; } ©Inbal Geffen 2012
16.
CSS3 Shadows Text-shadow E {
text-shadow: x y blur-radius color; } #header1 { text-shadow: 3px 3px gray; font-size: 80px; font-family: Tahoma; } <h1 id="header1">Hello CSS3</h1> ©Inbal Geffen 2012
17.
CSS3 Columns .columns //
System 1 { -webkit-column-count: 4; -moz-column-count: 4; } .columns // System 2 - more dynamic { -webkit-column-width: 100px; -moz-column-width: 100px; width: 850px; } <div class="columns"> René Descartes French (31 March 1596 – 11 February 1650) was a .. </div> ©Inbal Geffen 2012
18.
CSS3 Columns -2- .columns {
-webkit-column-count: 3; -webkit-column-gap: 2em; -webkit-column-rule: 0.3em double silver; -moz-column-count: 3; -moz-column-gap: 2em; -moz-column-rule: 0.3em double silver; } ©Inbal Geffen 2012
19.
CSS3 Opacity &
Color #img1 { filter: alpha(opacity=50); } p { color: rgba(0,0,0,0.5); } Example HTML Opacity ©Inbal Geffen 2012
20.
CSS3 2D Transforms
● Translate div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); -webkit-transform: translate(50px,100px); -o-transform: translate(50px,100px); -moz-transform: translate(50px,100px); } ● Rotate ● Scale ● Skew div { -webkit-transform: rotate(-40deg) scale(0.75) translate(-20%, -220%); } ©Inbal Geffen 2012
21.
CSS3 Animations ●
CSS can also affect design by behavior (:hover) ● Transitions occur only when the relevant attribute changes ● Animations occur immediately when they are given to an element ©Inbal Geffen 2012
22.
CSS3 Animations -
Transitions --------- in head style/css file -------- h1 { font-size:70px; -webkit-transition: font-size 2s; -moz-transition: font-size 2s; } --------- in Body -------- h1:hover { font-size: 200px; } ©Inbal Geffen 2012
23.
CSS3 Animations -
Transitions --------- in head style/css file -------- #div1 { background-color: Black; -webkit-transition: background-color 2s; -moz-transition: background-color 2s; width: 100px; height: 100px; } #div1:hover { background-color: silver; } --------- in Body -------- <div id="div1"> </div> ©Inbal Geffen 2012
24.
CSS3 Animations -
Transitions #div1 { background-color: Black; -webkit-transition: background-color 2s; -moz-transition: background-color 2s; width: 100px; height: 100px; } #div1.transition { background-color: silver; } function startAnimation() { document.getElementById("div1").className = 'transition'; } <input type="button" value="Start Animation" onclick="startAnimation();" /> ©Inbal Geffen 2012
25.
CSS3 Transitions div:hover {
width:300px; } Multiple changes! div { -moz-transition: width 2s, height 2s, -moz-transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; -o-transition: width 2s, height 2s,-o-transform 2s; } ©Inbal Geffen 2012
26.
CSS3 Animations @keyframes -
no triggers needed! div{ width: 100px; height: 100px; background: red; position:relative; -moz-animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; } @-moz-keyframes mymove /* Firefox */ { from {top: 0px;} to {top: 200px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { from {top: 0px;} to {top: 200px;} } ©Inbal Geffen 2012
27.
CSS3 Animations Multi -
animation @-moz-keyframes myfirst /* Firefox */ { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } ©Inbal Geffen 2012
Baixar agora