Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Get the Look

Get the Look

An expanded version of my Get the Look talk. The original version was given on Saturday, 10 March 2012 at SxSW. I take 3 real-life examples of iconic design styles and explore what it takes to translate the original design idea to the web. Along the way, I explore fun CSS3 properties and how they can be used for great typography online that respects our design roots. In the expanded version, I add more examples and CSS, and I also look at an example that didn't turn out so well.

Sean McBride

May 19, 2012
Tweet

More Decks by Sean McBride

Other Decks in Design

Transcript

  1. Get the LOOK Use font-face & CSS3 Like the Stars

    @smcbride – [email protected] – seanmcb.com/get-the-look
  2. ?

  3. @font-face @font-face { font-family: 'my-family'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'),

    url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); style: normal; weight: 400; }
  4. .sign h1 .name { font: 400 normal 20em/1 cursive; }

    .sign h1 .welcome, .sign h2 { font: 400 normal 7em/1 sans-serif; }
  5. .sign h1 .name { font: 400 normal 20em/1 “corner-store”, cursive;

    } .sign h1 .welcome, .sign h2 { font: 400 normal 7em/1 “bello-caps”, sans-serif; }
  6. .sign h1 .name { text-shadow: -3px 3px 0 #393431, 0

    3px 0 #393431, -3px 0 0 #393431, -4px 4px 0 #b06955, -6px 6px 0 #b06955, -8px 8px 0 #b06955; }
  7. .sign h1 { -webkit-mask: url(images/wood.png) 4.5em 0; mask: url(images/wood.png) 4.5em

    0; } .sign h2 { -webkit-mask: url(images/wood.png) -9.32em -6em; mask: url(images/wood.png) -9.32em -6em; }
  8. Get the LOOK Use font-face & CSS3 Like the Stars

    @smcbride – [email protected] – seanmcb.com/get-the-look
  9. rgba color background: rgba(0, 0, 0, 0.5); color: rgba(0, 0,

    0, 0.5); border: 1px solid rgba(0, 0, 0, 0.5); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  10. .para4 .condensed { color: #5d608f; color: rgba(45, 57, 128, 0.75);

    text-shadow: 0.02em 0.02em 0 rgba(217, 20, 43, 0.75); }
  11. :before + content h1:before { content: "1"; } h1:after {

    content: "2"; } <h1>Test</h1> 1Test2
  12. :before + content h1:before { content: attr(data-one); } h1:after {

    content: attr(data-two); } <h1 data-one="1" data-two="2">Test</h1> 1Test2
  13. .chroma { position: relative; } .chroma:before { color: #999; display:

    block; content: attr(data-content); font-family: "delittle-chromatic-inlay"; position: absolute; width: 100%; }
  14. .para3 .chroma { color: #5d608f; color: rgba(45, 57, 128, 0.75);

    text-shadow: 0.04em 0.03em 0 rgba(199, 162, 12, 0.5); } .para3 .chroma:before { color: #dd434d; }
  15. @font-face – variety of quirky styles rgba color – texture,

    double-printing :before + content – chromatic type Wood type poster
  16. Get the LOOK Use font-face & CSS3 Like the Stars

    @smcbride – [email protected] – seanmcb.com/get-the-look
  17. Elegance High-contrast type Photos / color Full use of page

    PRINTED BOOK PERIODICAL STANDARD SIZE
  18. responsive design “The control which designers know in the print

    medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this exibility.” John Allsopp, “A Dao of Web Design”
  19. Fluid layout Horizontal measurements in % FitText.js for full-width heading

    Viewport meta tag for mobile devices <meta name="viewport" content="width=device-width, initial-scale=1.0">
  20. Flexible images Scaling background image using background-size html { background:

    #00a3b0 url(images/background.jpg) no-repeat top center; background-size: cover; }
  21. Media queries Overriding CSS properties in certain situations @media screen

    and (max-width: 400px) { .heading h2 { font-size: 2em; } }
  22. .text { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; margin: 0

    40% 2em 5%; } @media screen and (max-width: 1024px) { .text { margin: 1em 5% 2em; } }
  23. .text { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; margin: 0

    40% 2em 5%; } @media screen and (max-width: 640px) { .text { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; } } @media screen and (max-width: 1024px) { .text { margin: 1em 5% 2em; } }
  24. @font-face – elegant, high-contrast columns – shorten lines at wide

    widths Magazine spread ttext.js – t headline to available space
  25. @font-face – elegant, high-contrast columns – shorten lines at wide

    widths Magazine spread ttext.js – t headline to available space responsive design – adapt to canvas
  26. Fashion 1 by Stephen Drake 4/5 Hey there by Petra

    Cross 6 Flickr Image Credits Soda Crackers by Lane Pearman 26 Hand-Made Signs in Baltimore by Colin Dunn 25 Brooklyn Circus SF by Damon Styer 27 The Phoenix Pub by Damon Styer 27 Quiet by Damon Styer 27 Far West Harvest by Damon Styer 28 Hand-Made Signs in Baltimore by Colin Dunn 31 Glyphs hunter by Camil Tulcan 69 The a Mano / Dean... by Nick Sherman 70 On the press by Nick Sherman 71 Moldy kiss by Nick Sherman 72 Hamilton's Wood Type... by Nick Sherman 73 Modern Honors Bound by Nick Sherman 73 1987 Vogue layout spread by Nate Bolt 106 Responsive Web Design by Jason Santa Maria 131 Moldy kiss by Nick Sherman 72 Gutenberg Bible by NYC Wanderer 144 Gutenburg Press by Kill le 145 Gutenberg Bible, rubrication by vlasta2 146 Portion of an early parchment... by kladcat 149