Download - Look ma! No images!
![Page 1: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/1.jpg)
Look ma,NO IMAGES!
Lennart Schoors
![Page 2: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/2.jpg)
Me
.web designer at Massive Mediahttp://massivemedia.eu
. personal site at http://lensco.be
.@lensco
![Page 3: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/3.jpg)
Somewhere last year, all the craze began...
![Page 4: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/4.jpg)
http://desandro.com/articles/opera-logo-css
![Page 5: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/5.jpg)
http://nicolasgallagher.com/pure-css-social-media-icons/
![Page 6: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/6.jpg)
http://cordobo.com/1630-internet-explorer-pure-css-logo
![Page 7: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/7.jpg)
http://graphicpeel.com/cssiosicons
![Page 8: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/8.jpg)
http://lensco.be/2010/04/04/css-world-clocks
![Page 9: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/9.jpg)
Nice gimmick to show off your 1337 skillz !!1!
But there's some real value here as well...
![Page 10: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/10.jpg)
Why use CSS to make visuals?
![Page 11: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/11.jpg)
1. Performance
. smaller overal filesize (but not always, mind you!)
. the iOS icons example:56K (not g-zipped)
. fewer HTTP requests
![Page 12: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/12.jpg)
2. Maintainability
.everything in one place
.no need to open an editor and resave a file just to tweak a color or shape
![Page 13: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/13.jpg)
3. Resolution independence
. full page zooming
.blurry images vs crisp HTML + CSS
![Page 14: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/14.jpg)
Examples from bricss.net
![Page 15: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/15.jpg)
How to: Shapes
![Page 16: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/16.jpg)
Rectangles
I assume you already know how to do this, right?
![Page 17: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/17.jpg)
Circles/ellipses/rounded rects
-webkit-border-radius -moz-border-radius border-radius
![Page 18: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/18.jpg)
Example: Bricss logo
![Page 19: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/19.jpg)
Example: Bricss logo
![Page 20: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/20.jpg)
Triangles
border-bottom: 20px solid yellow;border-left: 10px solid transparent;border-right: 10px solid transparent;
![Page 21: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/21.jpg)
Triangles
border-top: 20px solid yellow;border-right: 20px solid transparent;
Beware of bad anti-aliasing!
![Page 22: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/22.jpg)
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!
![Page 23: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/23.jpg)
How to: Generating
![Page 24: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/24.jpg)
HTML elements
.div, span, p, a, ... whatever suits best
. try to avoid extra/empty/unnecessary elements
![Page 25: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/25.jpg)
Generated content
. :before & :after pseudo-selectors
div:after {content: "";position: absolute;/* other styles */}
![Page 26: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/26.jpg)
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; }
![Page 27: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/27.jpg)
How to: Manipulating
![Page 28: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/28.jpg)
Masks
square mask: container element with overflow: hidden
![Page 29: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/29.jpg)
Transforms
. translate/translateX/translateY
. rotate
rotate(-45deg) = +
![Page 30: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/30.jpg)
How to: Effects
![Page 31: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/31.jpg)
CSS3 FTW
.gradients
.box-shadow
.box-reflect
. ...
![Page 32: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/32.jpg)
http://matthamm.com/box-shadow-curl.html
![Page 33: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/33.jpg)
http://nicolasgallagher.com/css-drop-shadows-without-images/
![Page 34: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/34.jpg)
Browser support?
![Page 35: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/35.jpg)
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.™
![Page 36: Look ma! No images!](https://reader033.vdocument.in/reader033/viewer/2022052522/54c7601e4a795918288b4582/html5/thumbnails/36.jpg)
That’s all folks!
Read on at http://lensco.be & http://bricss.net
Questions?