CSS3 now

CSS3 NOW!Monday 29th of November — Tech Mondays Kaho St. Lieven — Johan Ronsse

Tuesday 30 November 2010

Hi! I’m Johan.

FLANDERS WEB VALLEY!

#introductionTuesday 30 November 2010

Netlog.com

Larian Studios

I work at Netlash, a web agency

Who writes CSS on a regular basis?

Who uses CSS3 properties in their CSS?

Fallacy

The web developer implements

The spec writer writes feature

The browser developer implements

Visitor sees feature

Browser feature: traditional

The web developer needs feature

The browser developers implement the feature (wait a few months)

Web developer hacks feature into code (with JS)

CSS feature: now

Visitor sees feature

The spec writers write about it in the spec (wait a few years)

WEB DEV’SRESPONSIBILITY

Advance the web!

USE CSS3 NOW!How?

1. @FONT-FACE

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Typekit.com

By Jason Santa Maria

By Frank Chimero

Free alternatives to Typekit:

FontSquirrel Google font directory

Door populariteit Typekit:

• .woff support in Firefox, coming in other browsers

• meer beschikbare fonts voor web embedding

• fonts worden herbekeken voor betere weergave op scherm (e.g. FF META)

2. LIGHT&SHADOWS

Simulate Photoshop layer styles with CSS3: border-radius, (inset) box-shadow, opacity, rgba/hsl

Box shadow demo

#element { box-shadow: 2px 2px 6px #000;}

#element { box-shadow: inset 2px 2px 6px #000;}

(Before: try to recreate shadow with images)

IE Fallback:Simulate shadow with border-right and

border-bottom

rgba() demo

#elementRGBA { background: rgba(0,0,0,0.33); width: 200px; height: 100px; margin: 20px;}

#element { background: rgb(0,0,0); width: 200px; height: 100px; margin: 20px;}

CSS2: CSS3:

#element { background: #1E5799; /* old browsers */ background: -moz-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207cca 51%, #7db9e8 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1E5799), color-stop(50%,#2989D8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799', endColorstr='#7db9e8',GradientType=0 ); /* ie */}

Gradients demo

http://www.colorzilla.com/gradient-editor/

IE Fallback:Gradient filter/repeating PNG background/

flat color

3. ANIMATE!(hardware accelerated)

deaxon.com

Great animation demo

http://www.nevermindthebullets.com

IE Fallback:Gradient filter/repeating PNG background/

flat color

Use modernizr.js(for feature detection)

http://www.modernizr.com/

Some popular websites in IE6

http://www.elated.com/articles/top-30-websites-viewed-in-ie6/

To end this presentation:

Twitter.com: very much broken.

MSN: Can’t click lightbox. Javascript error.Stuck on this page.

Wordpress: layout borked.

Flick: layout borked too.

IE: the best browser to download Firefox.(Firefox.com borked in IE6 too)

CNN: politics page crashes the browser.

Summary

1. Websites don’t have to look the same in every browser

2. Stop spending 5 hours debugging IE on a 20 hour project

3. Don’t spend your time creating crazy sprites and hacking functionality into older browsers

4. Use progressively enhanced CSS3 instead :)

Q&ATuesday 30 November 2010

johan@johanronsse.behttp://www.netlash.com

http://www.wolfslittlestore.beTwitter: @wolfr_

CSS3 now

Technology

Presentation css3

Pro CSS3 Animation - DropPDF2.droppdf.com/files/V55Pt/pro-css3-animation.pdf · Now, we have the CSS3 Transforms, Transitions, and Animation Modules. These are extensions of CSS syntax

Fundamental CSS3

DotNetNuke World CSS3

HTML5 & CSS3

Css3 shubelal

CSS3 Transitions

CSS3 notes

CSS3 Fundamentals. CSS3 Introduction CSS3 is the latest standard for CSS. CSS3 is completely backwards-compatible with earlier versions of CSS

HTML5 CSS3 Basics

Mastering CSS3

Ins & Outs of. CSS3 is Modular Can we use it now?

Html5 CSS3

CSS3: The Future is Now at DrupalCon San Francisco

CSS3 secrets: 10 things you might not know about CSS3

CsS3 surfantants

Work shop css3

CSS3 Refresher

CSS3 (dutch)

CSS3 Presentation