Animation and effects with CSS
I've been become more comfortable playing with CSS features that are beyond just making sure that typography works well in all form factors. Rotate On Hover # One of the things that I like is the...
Center vertically and horizontally
I was working on typesetting poems when I thought what it would take to center a piece of content both vertically and horizontally? For image and smaller blocks of text like poems, I choose to work...
Generating footnotes on a web page
As I was working on my last post about paged media I discovered one thing we can do to make footnotes for the web a little more user-friendly. Paged Media has a way to hide the text of the footnote...
Revisiting paged media stylesheets for the web
One thing that the web is sorely lacking is the ability to create print-ready content from our web pages. CSS provides specifications for paged media but the support in browsers leaves a lot to be...
Link text for printed web pages
One of the most frustrating things that happen when I print a web page is that all links appear as underlined text without any reference to what the links point out to. One way to solve the problem...
Multicolumn Layouts Revisited
It's been possible to work in multiple columns of text without having to resort to hacks to make columns work in multiple browsers and in multiple form factors. According to caniuse.com developers...
Revisiting design systems
Design systems are interesting because of how they scale design to multiple teams and multiple sites/products while still providing a consistent and recognizable brand. For a full introduction to...
Using Counters in CSS
I've always wanted to avoid manually doing data replacement and numbering if I can avoid it. We'll add counters for the following: Chapters defined by <h2> elements Sections defined by...
Building a 3D scene
3D content is a really interesting way to create interactive content for the web but until recently it has been a pain to develop on a Mac, particularly since most device makers decided early on that...
Dropcaps in CSS
Dropcaps have always been a pain in terms of implementation and cross-browser support. Perhaps you've seen something like this in CSS style sheets before: p::first-letter { color: #FE742F; float:...