look ma! no images!

Look ma,NO IMAGES!

Lennart Schoors

Me

.web designer at Massive Mediahttp://massivemedia.eu

. personal site at http://lensco.be

.@lensco

Somewhere last year, all the craze began...

http://desandro.com/articles/opera-logo-css

http://nicolasgallagher.com/pure-css-social-media-icons/

http://cordobo.com/1630-internet-explorer-pure-css-logo

http://graphicpeel.com/cssiosicons

http://lensco.be/2010/04/04/css-world-clocks

Nice gimmick to show off your 1337 skillz !!1!

But there's some real value here as well...

Why use CSS to make visuals?

1. Performance

. smaller overal filesize (but not always, mind you!)

. the iOS icons example:56K (not g-zipped)

. fewer HTTP requests

2. Maintainability

.everything in one place

.no need to open an editor and resave a file just to tweak a color or shape

3. Resolution independence

. full page zooming

.blurry images vs crisp HTML + CSS

Examples from bricss.net

How to: Shapes

Rectangles

I assume you already know how to do this, right?

Circles/ellipses/rounded rects

-webkit-border-radius -moz-border-radius border-radius

Example: Bricss logo

Example: Bricss logo

Triangles

border-bottom: 20px solid yellow;border-left: 10px solid transparent;border-right: 10px solid transparent;

Triangles

border-top: 20px solid yellow;border-right: 20px solid transparent;

Beware of bad anti-aliasing!

Triangles: using gradients

background: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.5,transparent), color-stop(.5, yellow)),-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.5,transparent), color-stop(.5, yellow)),-webkit-gradient(linear, 0 0, 100% 0, from(yellow), to(yellow));

background: -moz-linear-gradient(-45deg, transparent 50%, yellow 50%),-moz-linear-gradient(45deg, transparent 50%, yellow 50%),-moz-linear-gradient(yellow, yellow);

background-position: 0 0, 0 100%, 10px 0;

background-size: 10px 50%, 10px 50%, 100% 100%;

Better anti-aliasing, but verbose & cumbersome!

How to: Generating

HTML elements

.div, span, p, a, ... whatever suits best

. try to avoid extra/empty/unnecessary elements

Generated content

. :before & :after pseudo-selectors

div:after {content: "";position: absolute;/* other styles */}

Example: date ribbon

.date { background: #fc0; position: relative; } .date:before, .date:after { content: " "; position: absolute; border-top: 5px solid #fc0; border-left: 15px solid transparent; bottom: -5px; right: 0; } .date:after { border-left: none; border-right: 15px solid transparent; right: auto; left: 0; }

How to: Manipulating

Masks

square mask: container element with overflow: hidden

Transforms

. translate/translateX/translateY

. rotate

rotate(-45deg) = +

How to: Effects

CSS3 FTW

.gradients

.box-shadow

.box-reflect

. ...

http://matthamm.com/box-shadow-curl.html

http://nicolasgallagher.com/css-drop-shadows-without-images/

Browser support?

Your good friend Internet Explorer.

.Various levels of supporttriangles: IE6, border-radius: IE9, ...

. If you only aim for IE9+ support, go nuts.

.Google dropping support for IE7 this summer.

.Do websites have to look the same in every browser?

.My motto: If it works, it works.™

That’s all folks!

Read on at http://lensco.be & http://bricss.net

Questions?