Saltar al contenido principal
CargarIdioma (ES)Atención al cliente
EmpresarialesMóvilRedes socialesMarketingTecnologíaArte y fotografíaEmpleoDiseñoEducaciónPresentaciones y charlas públicasGobierno y org. sin ánimo de lucroAtención sanitariaInternetDerechoLiderazgo y gestiónMotorIngenieríaSoftwareReclutamiento y RR. HH.Venta al por menorVentasServiciosCienciasPYMES y liderazgoAlimentaciónMedio ambienteEconomía y finanzasDatos y análisisRelaciones con inversoresDeportesMeditaciónNoticias y políticaViajesDesarrollo personalSector inmobiliarioEntretenimiento y humorSalud y medicinaDispositivos y hardwareEstilo de vida
Denise Jacobs, profile picture
Subido porDenise Jacobs
PDF, PPTX37,870 vistas

Simply Responsive CSS3

Denise R. Jacobs discusses the evolution of CSS3, outlining its new features and importance for modern web design. The document covers key concepts, tools, and best practices for implementing responsive design, ensuring cross-browser compatibility, and utilizing CSS3 properties effectively. With a focus on layout, colors, and visual effects, it serves as a comprehensive guide for designers and developers looking to adopt CSS3 in their work.

Tecnología◦Educación◦
Temas relacionados:
Responsive Design Insights•
Descargar como PDF, PPTX
Simply Responsive CSS3 Denise R. Jacobs // 1 ParisWeb// le 15 October 2011 //
Simple & Responsive Tweets Who I am: @denisejacobs This fine event: @parisweb #parisweb I’m talking about: #css3sr 2
A little about me Denise R. Jacobs is an author, speaker, design thinker, and educator. She is the author of The CSS Detective Guide, and is a co-author for InterAct with Web Standards: A Holistic Approach to Web Design. She is a Consultant Web Design Trainer and Creativity Evangelist based in Miami, Florida. 3 CSSDetectiveGuide.com & InterActWithWebStandards.com
Simple? 4
Responsive? 5
The goal 6
How??? 7
Start here… 1. Know Your CSS3 • Getting started • What’s new • Rules of the road • Helping tools and scripts • Properties • Standard effects • Advanced effects • Selectors 8
…Continue here 2. Get Responsive • Shift your brain • Mobile first • Watch out • 3 components • Flexible grid • Flexible images • Media queries 9
…And end here! 2. Becoming Responsive (cont’d) • 4 Steps • Plan your design • Crunch the numbers • Determine the breaking points • Add media queries 3. Resources 10
What’s New in CSS3 11
What’s New in CSS3? CSS3 is the third generation of the CSS specification recommendations from the W3C. In CSS3 there are new selectors, pseudo- elements and classes, properties, and values specifically created to answer the needs and solve the problems of modern web design and development. 12
CSS3 Modularity CSS3 has been broken up into different unique modules. This means is that, for example, the particular CSS properties and values for layout is grouped into one specific module. 13
CSS3 Modularity: Benefits • Browser producers can now implement CSS3 module by module • Speeds up the browser implementation process • Encourages innovation 14
The CSS3 Modules • Template Layout • Values and Units • Backgrounds and Borders • Web Fonts • Ruby • Behavioral Extensions to CSS • Basic User Interface • Line Layout • Basic Box Model • Flexible Box Layout • Grid Positioning • Image Values • Speech • 2D Transformations • Marquee • Multi-column Layout • Style Attribute Syntax • 3D Transformations • Cascading and Inheritance • Namespaces • Color • Transitions • Fonts • Animations • Text • View Module • Generated Content for Paged • Media Queries Media • Paged Media • Generated and Replaced • Selectors Content 15
Resources: New in CSS3 http://www.w3.org/TR/tr-groups-all# tr_Cascading_Style_Sheets__CSS__ Working_Group 16
Colors in CSS3: RGB • Regular RGB rgb(x, x, x): ex. rgb(255, 0, 0) • RBG with alpha-opacity rgba(x, x, x, y): An RGB value ex. rgba(255, 0, 0, 0.2) 17
RGBA Color Alpha opacity: 0.0 = 0% = no opacity 1.0 = 100% = full opacity 18
Colors in CSS3: HSL HSL stands for hue, saturation, and luminosity (lightness) • Regular HSL hsl(x%, x%, x%): ex. hsl(0, 100%, 50%) • HSL with alpha-opacity hsla(x%, x%, x%, y): ex. hsla(0, 100%, 50%, 0.5) 19
HSL Color Wheel 0º – Red 60º – Yellow 120º – Green 180º – Cyan 240º – Blue 300º – Magenta 20
HSL Color Picker Tool http://www.workwithcolor.com/hsl-color-picker-01.htm 21
Getting Started with CSS3: The Rules of the Road 22 http://www.flickr.com/photos/ilike/3707503212/
CSS3 Browser Compatibility 23 http://www.flickr.com/photos/sfllaw/222795669/
The Scoop • Many properties are browser-specific, requiring vendor prefixes • Plus there is a standard property • There are syntax differences between browser-specific properties and the standard property • All of this causes an increase in the amount of CSS 24
Code bloat in action Ideally: Reality: a.polaroid:active { a.polaroid:active { z-index: 999; z-index: 999; border-color: #6A6A6A; border-color: #6A6A6A; box-shadow: 15px 15px 20px -webkit-box-shadow: 15px rgba(0,0, 0, 0.4); 15px 20px rgba(0,0, 0, transform: rotate(0deg) 0.4); scale(1.05); -moz-box-shadow: 15px 15px } 20px rgba(0,0, 0, 0.4); box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); -webkit-transform: rotate(0deg) scale(1.05); -moz-transform: rotate(0deg) scale(1.05); transform: rotate(0deg) scale(1.05); } 25
Doesn’t Validate 26
None of the older IEs support CSS3 …as in “not any.” 6 7 8 27 http://www.flickr.com/photos/johnsnape/4258191545/
IE9 now supports CSS3 …But still not as fully as the other browsers yet. 28
Resources: IE9 CSS3 support http://msdn.microsoft.com/en- us/ie/ff468705.aspx#_Web_standards_sup port http://msdn.microsoft.com/en- us/library/cc351024%28v=vs.85%29.aspx http://www.impressivewebs.com/css3- support-ie9/ 29
Tools you’ll need: 1. CSS3 Property browser support charts 2. CSS3 Selector browser support charts 3. CSS3 Specifications 4. All browsers to test in and/or cross-browser testers 30
CSS3 Property browser support charts http://www.findmebyip.com/ litmus 31
CSS3 Selector browser support charts http://www.standardista.com/css3/ css3-selector-browser-support 32
The CSS3 Specifications The CSS3 Specifications are THE resource for finding out exactly is the intented behavior and use of any given property. http://www.w3.org/standards/techs/ css#w3c_all 33
Cross-browser testers http://tredosoft.com/Multiple_IE http://crossbrowsertesting.com/ (paid) http://browsershots.org/ (free) 34
CSS3 & Cross- browser Coding 35 http://www.flickr.com/photos/scfiasco/4490322916/
The Goal: Code that works in all most browsers 36
Not all browsers are created equal 37
How can we achieve compatibility? 38 http://www.flickr.com/photos/barretthall/205175534/
Steps to get as close as possible 1. Leverage source order 2. Filter it 3. Let tools do all of the work 39
Leverage source order • Place default properties first • Place browser-specific properties ahead of standard properties • The standard properties will override the vendor’s when the standard is established. 40
A Proper Stack .gradient { color: #fff; 41
A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ 42
A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ 43
A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); /* gradient for the Webkits */ 44
A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); /* gradient for the Webkits */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(sta rtColorStr='#07407c', EndColorStr='#aaaaaa')"; /* filter for IE8 (& IE9) */ 45
A Proper Stack .gradient { color: #fff; background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat; /*fallback background color & image*/ background-image: -moz-linear-gradient(top, #07407c, #aaaaaa); /* gradient for Mozilla */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #07407c),color- stop(1, #aaaaaa)); /* gradient for the Webkits */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(sta rtColorStr='#07407c', EndColorStr='#aaaaaa')"; /* filter for IE8 (& IE9) */ filter: progid:DXImageTransform.Microsoft.gradient(star tColorStr='#07407c', EndColorStr='#aaaaaa'); } /* filter for IE7 and lower */ 46
Apply a Filter • If you must have the effect in IE lt 8, such as alpha opacity, gradient, shadow, transitions etc. you could use a proprietary IE filter. • The -ms-filter attribute is an extension to CSS. This syntax will allow other CSS parsers to skip the value of this unknown property completely and safely. It also avoids future name clashes with other CSS parsers. • In IE 8 mode, filters must be prefixed with "-ms-" and the PROGID must be in single or double quotes to make sure IE 8 renders the filters properly. 47
Filters: {Caveat Coder} • IE filters work, but are essentially hacks – IE filters are proprietary and thus not part of any standard specification, and never will be 48
Resources: IE Filters Microsoft Visual Filters and Transitions Reference http://msdn.microsoft.com/en-us/library/ ms532853%28v=VS.85%29.aspx 49
Let the tools do the work • We’ll talk about those next! 50
CSS3 Tools 51 http://www.flickr.com/photos/johnsnape/4258191545/
Useful CSS3 Tools 1. CSS3 Generators 2. Helper Scripts 3. Browser Feature Detection 4. Templates 52
CSS3 Generators 53 http://www.flickr.com/photos/latca/841730130/
CSS3Please.com 54
CSS3Generator.com 55
CSS3Maker.com 56
CSS3 Tools at WestCiv 57 http://westciv.com/tools/
More CSS3 Generators http://border-radius.com http://www.colorzilla.com/ gradient-editor/ http://csscorners.com http://border-image.com 58
Helper Scripts 59 http://www.flickr.com/photos/keystricken/386106987/
Get a helping hand… These scripts help IE lt 8 behave like CSS3- compliant browsers. However, support of CSS3 properties varies between scripts. 60
ie-7.js (includes IE8 and IE9) 61 http://code.google.com/p/ie7-js/
CSS3Pie.com 62
CSS Sandpaper 63 http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
Browser Feature Detection 64 http://www.flickr.com/photos/johnsnape/4258191545/
Modernizr.com 65
What does Modernizr do? Modernizr detects which CSS3 (and HTML5) properties are supported by the browser, and appends classes to the <html> tag, which then allows you to create styles to target specific properties to individual browsers. It is a premier progressive enhancement tool! 66
How to use Modernizr http://www.alistapart.com/articles/taking- advantage-of-html5-and-css3-with- modernizr/ http://webdesignernotebook.com/css/ how-to-use-modernizr http://www.ericlightbody.com/2010/ modernizr-your-tool-for-html5-and-css3- functionality/ 67
Templates 68 http://www.flickr.com/photos/jazzmasterson/275796175/
HTML5Boilerplate.com Paul Irish’s HTML5 template file http://html5boilerplate.com/ 69
CSS3 Properties! 70
Webfonts 71
@font-face 72 http://lostworldsfairs.com/moon/
@font-face • Note: – Actually part of the CSS2.1 specification. – Therefore, the IEs do support it! • Tips & issues – When you decide to use a font as a webfont, you have to be sure that the EULA supports it. – One way to avoid that is to use ONLY fonts that are listed as approved webfonts. • Browser Support – IE lt 8 require fonts to be in EOT format – IE9 now supports WOFF 73
@font-face bug: IE lt 8 @font-face super bullet-proofing The problem: @font-face doesn’t work, even with the proper normal syntax. What gives? 74
@font-face bug: Webkit @font-face bold and italics “bug” The problem: Applying font-weight:bold or font- style: italic to @font-face'd text doesn’t work. 75
Solution: IE proof @font-face + faux variations Example: @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix‘) format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont- webfont.ttf')format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); font-weight:normal; font-style:normal; font-variant:normal; } 76
FontSquirrel.com 77 http://www.fontsquirrel.com/fontface/generator
Webfont Services Instead of generating the webfonts yourself, you can pay a service where the webfonts are hosted elsewhere, and you link to them and use the fonts on their server. 78
Webfont Services 79 http://www.typekit.com
Webfont Services http://www.typotheque http://www.webtype.com .com/webfonts http://www.fontslive.com http://typekit.com http://www.extensis.com/en http://fontdeck.com /WebINK/ http://kernest.com http://webfonts.fonts.com http://www.ascenderfonts http://webfonts.info/wiki/in .com/webfonts/ dex.php?title=Category:W ebfont_Services 80
Google Font Directory http://code.google.com/webfonts 81
Resources: @font-face • http://www.delicious.com/denisejacobs/ font-face 82
New Visual Effects in CSS3 83
New Visual Effects in CSS3 • border-radius • rgba color • box-shadow • text-shadow • gradient 84
border-radius 85 http://oh-hai.biz
Old-skool: code contortions 86
border-radius • Tips & issues – Different syntax for mozilla, webkit, and opera browsers • Browser Support – IE lt 8 does not support, IE9 does 87
border-radius Syntax comparison breakdown: • -moz allows multiple values for each position • -webkit individual values 88 • Standard is like mozilla
border-radius #contentcolumn { -moz-border-radius: 20px 20px 0 0; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; border-radius: 20px 20px 0 0; } 89
Border-radius.com 90
border-radius Resources http://www.delicious.com/denisejacobs/ border-radius 91
rgba 92 http://aarronwalter.com/designer/
rgba • Tips & issues – More granular control of the color opacity of a particular element • Browser Support – IE lt 8 does not support, IE9 does – There is an IE filter that will give transparency with a color. 93
Cross-browser: rgba • Place after regular rgb color property to override in modern browsers; older browsers will ignore it • IE lt 8 bug: use the property background instead of background-color for the regular color 94
Full solution: rgba .rgba { background-color: #ff0000; /* fallback color in hexidecimal. */ background-color: transparent; /* transparent is key for the filter to work in IE8. best done through conditional comments */ background-color: rgba(255, 0, 0, 0.3); -ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorstr=#4CFF0000, endColorstr=#4CFF0000)"; /* filter for IE8 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#4CFF0000, endColorstr=#4CFF0000); /* filter for older IEs */ } 95
box-shadow 96 http://badassideas.com/work/
box-shadow • Tips & issues – Different syntax for mozilla, webkit, and opera browsers • Browser Support – IE lt 8 does not support, IE9 does – There is a filter for IE: shadow (actually there are 2: shadow and dropshadow, but shadow is said to be better) 97
box-shadow .portfolio { -moz-box-shadow: 0 5px 20px rgba(0,0,0,0.6); -webkit-box-shadow: 0 5px 20px rgba(0,0,0,0.6); box-shadow: 0 5px 20px rgba(0,0,0,0.6); } 98
Full solution: box-shadow .boxshadow { -moz-box-shadow: 3px 3px 10px #333; -webkit-box-shadow: 3px 3px 10px #333; box-shadow: 3px 3px 10px #333; /*standard*/ -ms-filter: "progid:DXImageTransform.Microsoft.Shad ow(Strength=4, Direction=135, Color='#333333')"; /* For IE 8 */ filter: progid:DXImageTransform.Microsoft.Shado w(Strength=4, Direction=135, Color='#333333'); /* For IE 5.5 - 7 */ } 99
Inspiration: box-shadow 100 http://nicolasgallagher.com/css-drop-shadows-without-images/demo/