You already know that inline styles are “bad practice.” Inline styles aren’t reusable like CSS in separate files is, and thus, inefficient bloat. Unless of course, when it isn’t. …
A reader writes in:
Would it be possible to draw an entire typeface in CSS to be sent in emails? Our company needs to send out emails to about 20k people to introduce a new brand that we are launching. The emails will be in HTML/CSS. My CEO is very specific about the type of aesthetic he wants to achieve, and this includes using a typeface that is not native to either Mac or Windows computers. We do not want …
During the previews for a movie I saw recently, there was an advertisement for an Oprah-related something or another. I wasn’t paying attention because I was trying to get out my phone so I could snap a picture of it. Which I failed to do. There was these neat title screens that I thought would be fun to recreate with CSS. …
There is a new Mac app called SpriteRight for doing CSS sprites that is pretty darn nice. …
There is a certain style of button on the latest YouTube design (most easily found in the footer) where the default state of the button has a very subtle bevel to it, but on :hover and :focus states the button pops up, eager to be clicked. …
Chartwell is a font specifically for making simple and beautiful pie charts, bar charts, and line graphs. It's as simple as writing out simple equations like 40+20+25+15. In desktop software like Adobe Illustrator, you control the graph by writing out the formula in that font then turning on ligatures. On the web, the formula is in text and you apply the font via @font-face and a JavaScript polyfill for ligature support. Browser support goes back even to IE 6.
Links from video:
To figure out your grid width percentages for a fluid design, you start with a fixed design and divide the column widths by the container width. Elliot Jay Stocks calls for us to stop the self-torture and use 1000px for the container, so the math is super easy.
I've long been convinced icon fonts are awesome. Now Drew Wilson's new service (and article I'm linking to) put to rest any of the last possible arguments against them. Think they use unsemnatic markup? Apply them via pseudo element. Worried some screen readers still read those? Not if you use aria-hidden="true" or map them to an unused plane of unicode characters. Too heavy weight? Build your own icon font and serve only what you need with this service.
Bookmarklet by Benjamin Keen which automates an idea by Lennart Schoors where the current page is loaded into a bunch of differently sized iframes, so when working on a large monitor, you can see what a design looks like at a bunch of different smaller sizes quickly and all at once.
