Get the Look: Use @Font-Face + CSS3 Like the Stars

Saturday, March 10 5:00PM – 6:00PM
Sean McBride Web Dev Adobe Typekit

Taking iconic sign styles and transforming them into the web using web technologies.

Ideas vs. Forms
Idea -> Design System -> Form

Many times we try to go from an original form to a new form without any sort of consideration of where it came from and how exactly to get it into that new form.

@font-face
Call @font-face and point to the URL of the web font.

CSS Transform will let you rotate the font on the page.

@text-shadow
you can add offset and color as well as multiple shadows to text. (this is not supported in IE9)

mask
you can use an image to hide and show certain elements using transparency in PNG images. (unofficial property, so it won’t work in many browsers – currently only webkit browsers)

Slides and visuals from this presentation located at: http://seanmcb.com/sxsw2012/