Yours truly over at CSS Tricks: “How do you design block quotes and pull quotes to reflect a brand’s visual identity and help tell its story? Here’s how I do it by styling the HTML blockquote element using borders, decorative quote marks, custom shapes, and a few unexpected properties.”

Lately, while I’ve been making my Toon Titles and writing about SVG animations, I’ve been pondering where the sweet spot is between CSS and GSAP for animations. This Toon Title, featuring Hanna Barbera’s Quick Draw McGraw in his alter ego El Kabong, illustrates it nicely.

I’ve always loved it when designers take the time to give their blog posts a little extra polish. Jason Santa Maria did this brilliantly on his old site, and my design hero, Trent Walton, made each post feel like a one-off. With my recent code overhaul, I thought—why not do the same?

Yours truly over at CSS Tricks: “How can you style drop and initial caps to reflect a brand’s visual identity and help to tell its stories? Here’s how I do it in CSS by combining::first-letter and initial-letter with other unexpected properties, including border-image, and clip-path.

Yours truly over at the Smashing Magazine: “What’s the best way to make your SVGs faster, simpler, and more manageable? Andy Clarke explains the process he relies on to prepare, optimise, and structure SVGs for animation and beyond.”

Yours truly over at CSS Tricks: “How can you take dialogue box design beyond the generic look of frameworks and templates? How can you style them to reflect a brand’s visual identity and help to tell its stories? Here’s how I do it in CSS using::backdrop, backdrop-filter, and animations.”

Working on a design for composer Mike Worth gave me an idea. What if I created animated title cards inspired by classic Hanna-Barbera cartoons? Thirty-five SVG animations later, Toon Titles Series 1 is complete. These are based on artwork from the first appearance of Yogi Bear in The Huckleberry Hound Show.

Yours truly over at the Smashing Magazine: “Now, you might’ve heard that SMIL is dead. However, it’s alive and well since Google reversed a decision to deprecate the technology almost a decade ago. It remains a terrific choice for designers and developers who want simple, semantic ways to add animations to their designs.”

Yours truly over at the Smashing Magazine: “What if you could take your CSS animations beyond simple fades and slides—adding an extra dimension and a bit of old-school animation magic?”

Yours truly over at the Smashing Magazine: “Have you ever thought about how the limitations of early cartoon animations might relate to web design today? From looping backgrounds to minimal frame changes, these retro animation techniques have surprising parallels to modern CSS.”

Yours truly over at CSS Tricks: “Designing Mike Worth’s website gave me a chance to blend expressive design with modern development techniques, and revisiting image maps reminded me just how important a tool image maps were during the period Mike loves so much.”

Designing for Mike Worth’s new website reminded me how much I love classic cartoons. So, after handing over his design, I carried on exploring CSS, SVG, and SMIL animations. I now have a growing collection of Toon Titles.

I now have a growing collection of Toon Titles. But while making them, I discovered two gotchas, which I haven’t seen documented. One for Firefox, the other for Safari.

Yours truly over at CSS Tricks: “I’ve used border-image regularly. Yet, it remains one of the most underused CSS tools, and I can’t, for the life of me, figure out why. Is it possible that people steer clear of border-image because its syntax is awkward and unintuitive? Perhaps it’s because most explanations don’t solve the type of creative implementation problems that most people need to solve. Most likely, it’s both.”

Yours truly over at CSS Tricks: “Honestly, it’s difficult for me to come to terms with, but almost 20 years have passed since I wrote my first book, Transcending CSS. In it, I explained how and why to use what was the then-emerging Multi-Column Layout module. Yet, CSS Columns remains one of the most underused CSS layout tools. I wonder why that is?”

Kingdom of the Planet of the Apes is out and I’m seeing it this coming Saturday. I’m so excited that I decided to update one of my responsive easter egg headers— Kerfuffle on the Planet of the Apes —with more efficient, modern code. In this final post of the short series, I’ll explain how I added animations and subtle transitions to bring the design to life.

Kingdom of the Planet of the Apes is out, and I’m so excited that I decided to update one of my responsive easter egg headers— Kerfuffle on the Planet of the Apes —with more efficient, modern code. Today, I’ll explain how I made the layout using a combination of container queries, Flexbox, and grid.

I don’t look at my analytics often, but after last week’s site revamp, I thought I’d check to see which pages were popular. Oddly, a post in my ancient archives about CSS specificity had been getting a fair few Google referrals, so I decided to spend a few hours updating that, too.

This week, I launched Design Chatter. It’s a weekly one-hour Zoom call where like-minded designers can give each other constructive, friendly feedback.

One of my favourite CSS writers Ahmad Shadeed has written about CSS Masking and I thought I could put his techniques to good use on Emma’s website.

Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned more about SVG while working on it. I’m digging into the details this week, and today I’ll reveal the Easter Egg theme which I hid on Emma’s website.

Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned more about SVG while working on it. I’m digging into the details this week, and today I’ll explain how I made experimental banner images for Emma’s home page using SVG masks.

Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned more about SVG while working on it. I’m digging into the details this week, and today I’ll explain how I made an experimental word search concept for Emma’s home page.

Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned a few things while working on it. I’m digging into the details this week, and today I’ll explain the pseudo-3D design I created for Emma’s home page banner.

Emma Bodger is a film/television producer, and recently, I’ve spent time working on her visual identity and a new website. It’s been a lot of fun, and I also learned more about SVG while working on it. I’m digging into the details this week, and today I’ll explain the SVG filters I created to transform images on Emma’s website.

In a video of one his talks, Andy Bell mentioned CUBE CSS and his approach to using data attributes for variations (exceptions) to design styles. I’m currently working on a grid system for a product project and revamping my Layout ❤︎ templates, so was keen to implement this approach.

Most parts of Apple’s website are fabulously flexible. But today, I was browsing for Black Friday deals and found a fixed-width design element which I was determined to make flexible.

Safari Technology Preview is my every day browser. When the latest version dropped, a feature in the release notes interested me. It was experimental support for three new relative colour CSS values. So, I tried what’s possible now.

There’s been a meta tag for specifying a theme-color for UI elements on websites for a while. If you’ve used it, now’s time to change that element along with the upcoming version of Safari.

Let’s face it, unless you develop a complex product—and even if you do—you probably don’t need half the humungous hunk of CSS you bung at a browser. In fact, it’s possible you only need one default and one alternative style for every element.

Sam Sycamore tweeted a utility class for breaking an element out of its container to fill the full width of a page. It prompted me to think about how and when to use utility classes.

I’ve said over and over again that a well-chosen grid can do much, much more than align content. The choice of grid can influence how we approach a design, it can change how we think.

For as long as I can remember, I’ve been specifying different colours for hyperlinks and their:hover pseudo-classes. Recently, I’ve been experimenting with CSS filters and found they make development much easier.

I know some people swear by frameworks and I do understand why, although my work rarely needs them. I also appreciate why some people find the grids component in frameworks useful. But, to me, including a framework just for its grid has always seemed excessive. Particularly when there are other ways to develop reusable layout components which are far less generic, but no less flexible than a framework.

While developing prototype designs for a French football magazine, I came across a strange bug when Chrome’s translate feature comes into contact with CSS generated content.

While I was researching typefaces for a new project, I came across Dalton Maag’s case study for Universal TV. The type is beautiful, of course, but it was their graphics which got my attention.

It’s 20 years to the day since my wife, and I started Stuff & Nonsense, our little studio and my outlet for creative ideas on the web. Over on 24ways, it’s also my fourteenth article, this time how to Design your site like it’s 1998. It’s a tongue-in-cheek look back at how we developed websites when I started my company, complete with not so old favourites like font elements, frames, layout tables, and spacer gifs.

Working with CSS Grid is a lot of fun, as well as making distinctive and original layouts easier and with less code. However, using Grid does occasionally come at a cost and that is semantic markup. Fortunately, there’s a new CSS display property which—when used thoughtfully—can overcome the problem of ‘flattened HTML.’

If you liked my Specificity Wars, you’re going to love Mandy Michae’s Batificity.

Here’s a quick entry about something I learned just this week about:not() pseudo-class selectors and how to combine them.

It’s been a while since I’ve written seriously, but since I started working on my new ‘ Art directing for the web’book, I’ve got the bug. So when Smashing Magazine asked me to write for them again, I couldn’t resist. My latest article, on ‘Art Directing For The Web With CSS Grid Template Areas’ was published today and I’m very pleased with how it turned out. You can read it here.

I always vowed that I wouldn’t update Transcending CSS, but there’s always been something about that old book that disappointed me and now I have the chance to fix it.

The Guardian’s Kaelig Deloumeau-Prigent recently wrote about their struggles and strategy for dealing with Internet Explorer 8. People visiting my site using Internet Explorer 8 are few and far between these days, but those that do could be good customers, so with our redesign I wanted to make a real effort to give them a good experience.

I’m struggling to believe it quite frankly, but The CSS Zen Garden was planted ten years ago today. I don’t think we should underestimate the importance of The CSS Zen Garden in the history of the web. Its influence still resonates today. Now it’s back accepting submissions and making some of us feel very old.

We know that it’s only web designers who habitually resize a browser window to see if a site’s responsive. But why not reward their dedication with a little something special? Add this to your stylesheet: @media only screen and (min-width: 960px) and (max-width: 970px) { body { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } } This could be the most essential CSS3 media query you’ll need today.

After pushing my redesign live yesterday, I’ve been asked a few times about why I pulled respond.js (and with it, CSS3 Media Query support for older versions on Internet Explorer) from the new site.

As Jeremy mentioned yesterday, just before An Event Apart in Seattle, I spent a few hours on a spot of guerrilla testing at an AT&T store. Specifically, I was looking at how Windows Phone 7’s Internet Explorer browser handles ‘responsive sites’.