The why and how of using CSS to generate visuals.

1. Look ma,
NO IMAGES!
Lennart Schoors

2. Me
. web designer at Massive Media
http://massivemedia.eu
. personal site at http://lensco.be
. @lensco

3. Somewhere last year, all the
craze began...

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

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

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

7. http://graphicpeel.com/cssiosicons

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

9. Nice gimmick to show off
your 1337 skillz !!1!
But there's some real value
here as well...

10. Why use CSS to make visuals?

11. 1. Performance
. smaller overal filesize (but not always,
mind you!)
. the iOS icons example:
56K (not g-zipped)
. fewer HTTP requests

12. 2. Maintainability
. everything in one place
. no need to open an editor and resave a
file just to tweak a color or shape

13. 3. Resolution independence
. full page zooming
. blurry images vs crisp HTML + CSS

14. Examples from bricss.net

15. How to: Shapes

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

17. Circles/ellipses/rounded rects
-webkit-border-radius
-moz-border-radius
border-radius

18. Example: Bricss logo

19. Example: Bricss logo

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

21. Triangles
border-top: 20px solid yellow;
border-right: 20px solid transparent;
Beware of bad anti-aliasing!

22. 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!

23. How to: Generating

24. HTML elements
. div, span, p, a, ... whatever suits best
. try to avoid extra/empty/unnecessary
elements

25. Generated content
. :before & :after pseudo-selectors
div:after {
content: "";
position: absolute;
/* other styles */
}

26. 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;
}

27. How to: Manipulating

28. Masks
square mask: container element with
overflow: hidden

29. Transforms
. translate/translateX/translateY
. rotate
= + rotate(-45deg)

30. How to: Effects

31. CSS3 FTW
. gradients
. box-shadow
. box-reflect
. ...

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

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

34. Browser support?

35. Your good friend Internet Explorer.
. Various levels of support
triangles: 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.™

36. That’s all folks!
Questions?
Read on at http://lensco.be & http://bricss.net