• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Look ma! No images!

Look ma! No images!



The why and how of using CSS to generate visuals.

The why and how of using CSS to generate visuals.



Total Views
Views on SlideShare
Embed Views



4 Embeds 70

http://techdesign.posterous.com 55
http://paper.li 7
http://twitter.com 6
https://twitter.com 2



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


15 of 5 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • WOW just Wow! Great stuff
    Are you sure you want to
    Your message goes here
  • There's two: good ol' Rockwell and Geometric Slabserif 703.
    Are you sure you want to
    Your message goes here
  • cool..... what's the font of your presentation?
    Are you sure you want to
    Your message goes here
  • Nice slides! Makes me wish I could’ve been there at Barcamp.

    Some nitpicks:

    Slide 22 needs some Opera love!
    Slide 25: ::before and ::after are pseudo-elements, not “pseudo-selectors”.
    Are you sure you want to
    Your message goes here
  • Hmm, slideshare messed up slide 28. Here's the correct version: http://cl.ly/0S0d2N0a2J2H2L011m0b
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Look ma! No images! Look ma! No images! Presentation Transcript

    • Look ma,NO IMAGES! Lennart Schoors
    • Me. web designer at Massive Media http://massivemedia.eu. personal site at http://lensco.be. @lensco
    • Somewhere last year, all thecraze 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 theres 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
    • RectanglesI 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
    • Trianglesborder-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-selectorsdiv: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
    • Maskssquare mask: container element withoverflow: 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 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.™
    • That’s all folks!Questions?Read on at http://lensco.be & http://bricss.net