SlideShare a Scribd company logo
1 of 30
[object Object],[object Object]
The big picture ,[object Object]
IE defenestration is not required ,[object Object]
The Merriam-Webster dictionary
Current status ,[object Object]
Firefox : -moz-*
Chrome, Safari : -webkit-*
Opera (10+) : -o-*
Start small ,[object Object]
start with rounded corners,
then  continue scratching
border-radius ,[object Object]
{topleft, bottomright} {topright, bottomleft }
{topleft} {topright} {bottomright} {bottomleft} .container { border: 4px solid #f00; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
box-shadow ,[object Object]
{x offset} {y offset} {blur} {spread} {color}
{shadow1}, {shadow2}, {shadow3}... .container { -moz-box-shadow: 5px 5px 5px #000; -webkit-box-shadow: 5px 5px 5px #000; box-shadow: 5px 5px 5px #000; }
text-shadow ,[object Object]
{text-shadow1}, {text-shadow2}, ... .container { text-shadow: 5px 5px 5px #000; }
rgba ,[object Object],.using-opacity { opacity: .5; } .using-rgba { background-color: rgba(218, 37, 29, .5); }
Wherever a color fits in ,[object Object],.block { background: rgb(218, 37, 29); /* fallback */ background: rgba(218, 37, 29, .5); text-shadow: 0 0 10px rgba(0, 0, 0, .5); }
New fonts ,[object Object]
@font-face @font-face { font-family: 'permanentmarker'; src: url( 'pm.eot' ); /* IE */ src: local('permanentmarker'), url( 'pm.ttf' ) format('truetype'); } h1 { font-family: permanentmarker; }
Flash Of Unstyled Text ,[object Object]
IE / Webkit : do not display anything while downloading
Font repositories ,[object Object]
Google Web Fonts ,[object Object]
Transitions ,[object Object]
Transitions ,[object Object],a {  color: #000;  } a:hover {  color:#f00;  }
Transitions: example a {  color: #000; -webkit-transition: color 1s ease-in; -moz-transition: color 1s ease-in;  transition: color 1s ease-in;  } a:hover {  color: #f00;  }

More Related Content

What's hot

5.1 css box model
5.1 css box model5.1 css box model
5.1 css box model
Bulldogs83
 

What's hot (18)

5.1 css box model
5.1 css box model5.1 css box model
5.1 css box model
 
Box Model
Box ModelBox Model
Box Model
 
Responsive Web Design & Typography
Responsive Web Design & TypographyResponsive Web Design & Typography
Responsive Web Design & Typography
 
Css rollover
Css rolloverCss rollover
Css rollover
 
Rollov
RollovRollov
Rollov
 
Getting rid of images with CSS
Getting rid of images with CSSGetting rid of images with CSS
Getting rid of images with CSS
 
card flip
card flip card flip
card flip
 
Css (1)
Css (1)Css (1)
Css (1)
 
Css introduction
Css  introductionCss  introduction
Css introduction
 
Responsive Typography II
Responsive Typography IIResponsive Typography II
Responsive Typography II
 
Css frameworks
Css frameworksCss frameworks
Css frameworks
 
popular posts widget
popular posts widgetpopular posts widget
popular posts widget
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
 
Css box-model
Css box-modelCss box-model
Css box-model
 
Oocss & progressive css3 selectors
Oocss & progressive css3 selectorsOocss & progressive css3 selectors
Oocss & progressive css3 selectors
 
Floating ad widget
Floating ad widgetFloating ad widget
Floating ad widget
 
Lab#8 page layouts
Lab#8 page layoutsLab#8 page layouts
Lab#8 page layouts
 
The Future of CSS
The Future of CSSThe Future of CSS
The Future of CSS
 

Similar to Css3 101

Big Design Conference: CSS3
Big Design Conference: CSS3 Big Design Conference: CSS3
Big Design Conference: CSS3
Wynn Netherland
 
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev toolsHTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
Dirk Ginader
 
How do speed up web pages? CSS & HTML Tricks
How do speed up web pages? CSS & HTML TricksHow do speed up web pages? CSS & HTML Tricks
How do speed up web pages? CSS & HTML Tricks
Compare Infobase Limited
 
Progressive enhancement - Bridging the gap between CSS2 and CSS3
Progressive enhancement - Bridging the gap between CSS2 and CSS3Progressive enhancement - Bridging the gap between CSS2 and CSS3
Progressive enhancement - Bridging the gap between CSS2 and CSS3
Zohar Arad
 

Similar to Css3 101 (20)

Fundamental CSS3
Fundamental CSS3Fundamental CSS3
Fundamental CSS3
 
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong?
 
Css3
Css3Css3
Css3
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
 
Big Design Conference: CSS3
Big Design Conference: CSS3 Big Design Conference: CSS3
Big Design Conference: CSS3
 
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.comA 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
 
Sass compass
Sass compassSass compass
Sass compass
 
HTML5, CSS3, and other fancy buzzwords
HTML5, CSS3, and other fancy buzzwordsHTML5, CSS3, and other fancy buzzwords
HTML5, CSS3, and other fancy buzzwords
 
[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
 
CSS3
CSS3CSS3
CSS3
 
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
HTML5 Dev Conf - Sass, Compass &  the new Webdev toolsHTML5 Dev Conf - Sass, Compass &  the new Webdev tools
HTML5 Dev Conf - Sass, Compass & the new Webdev tools
 
How do speed up web pages? CSS & HTML Tricks
How do speed up web pages? CSS & HTML TricksHow do speed up web pages? CSS & HTML Tricks
How do speed up web pages? CSS & HTML Tricks
 
Progressive enhancement - Bridging the gap between CSS2 and CSS3
Progressive enhancement - Bridging the gap between CSS2 and CSS3Progressive enhancement - Bridging the gap between CSS2 and CSS3
Progressive enhancement - Bridging the gap between CSS2 and CSS3
 
HTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.pptHTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.ppt
 
css.ppt
css.pptcss.ppt
css.ppt
 
css.ppt
css.pptcss.ppt
css.ppt
 
CSS and CSS3
CSS and CSS3CSS and CSS3
CSS and CSS3
 
The Trouble With Type
The Trouble With TypeThe Trouble With Type
The Trouble With Type
 
Progressive enhancement
Progressive enhancementProgressive enhancement
Progressive enhancement
 

Recently uploaded

Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 

Recently uploaded (20)

Buy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptxBuy Epson EcoTank L3210 Colour Printer Online.pptx
Buy Epson EcoTank L3210 Colour Printer Online.pptx
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
Buy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdfBuy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdf
 
THE BEST IPTV in GERMANY for 2024: IPTVreel
THE BEST IPTV in  GERMANY for 2024: IPTVreelTHE BEST IPTV in  GERMANY for 2024: IPTVreel
THE BEST IPTV in GERMANY for 2024: IPTVreel
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
The UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoThe UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, Ocado
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 

Css3 101

Editor's Notes

  1. Esto es sin tener en cuenta lo que viene con HTML5: webgl,svg, canvas, new form fields
  2. Cada navegador añade un prefijo a cada estilo no definitivo de CSS3. Estos prefijos van antes que el nombre del modificador de CSS
  3. Para el caso de una pestaña usaríamos: 5px 5px 0 0 Sigue siendo sentido de agujas de reloj.
  4. Puede definirse más de una sombra El valor de spread es lo que crece la sombra del objeto antes de aplicar el blur. No se suele usar. Un efecto que suele quedar muy bien es aplicar offsets de cero y sólo poner blur. Si la sombra es #fff o similar, el efecto es de brillo en lugar de sombra.
  5. Notar que text-shadow no lleva prefijo de navegador
  6. No es sólo que afecta al color especificado exclusivamente, sino que tampoco afecta a los nodos hijos (no se hereda) Ojo que alpha es un valor decimal entre 0 y 1, mientras que los otros tres son enteros entre 0 y 255 Para IE puede usarse opacity o un png semitransparente de fondo
  7. Por la definición del W3C, puede usarse donde se pueda usar cualquier color Si el navegador no reconoce rgba, lo ignorará por completo así que hace falta un fallback Puestos a especificar el fallback, es más facil usar el rgb que convertir a hex
  8. You give your custom font a name, like "gillsans" This line is for IE - src: url(gillsans.eot);. It asks for an .eot font file This line is for pretty much every other browser url(gillsans.ttf) format('truetype'). It needs a .ttf font file Ojo: el resultado final depende del sistema operativo (XP con o sin ClearCase, Linux, Mac, etc). Antialiasing etc.
  9. Qué sucede mientras se descarga la fuente? Por esto suele verse que se usa para los títulos, pero no para el cuerpo de la página
  10. Usarlos a mano es un fastidio: * generar el eot y el ttf * Comprimir gzip * Poner far expires cache header * Probar en cada navegador
  11. This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element’s class attribute).
  12. ease-in: suave al principio. Cualquier cambio en el color aplica esta transición Hay una versión más larga usando transition-property, transition-duration etc, pero es menos intuitiva y más larga de escribir
  13. Más facil que animar una a una
  14. Cada uno de estos se corresponde con varios atributos de CSS, claro.
  15. Cómo se compara el rendimiento de una transition de CSS con las animaciones de jQuery de toda la vida?
  16. Esta web es de Microsoft. Todo el mundo quiere eliminar IE6. Fijarse que IE6 está por debajo del 5% en todos lados menos en China e India.
  17. First-child, last-child, >, +, PNG fix, etc. En la página del proyecto vienen los selectores soportados y páginas de test.