A client asked me to create an improved version of a poster graphic to be embedded in a marketing email. The main problems with the original graphic were color contrast and readability (too much prose text where bullet lists would be better). My initial approach was to open the original PDF in Adobe Illustrator and make the modifications there. However, the file’s layer palette was a hot mess of nested groups and clipping paths. Abandoning Illustrator, I opted to create the new graphic with HTML and CSS — specifically, CSS Grid and Grid Template Areas. This blog post shows how I did it.
CSS
Avoid Direct Styling; Use CSS Instead
In this article I urge people to avoid the use of direct styling and instead rely on CSS for defining how the elements of a page or post should appear. I explain the downsides of direct styling and the advantages of CSS. Although, CSS is a huge topic, you don’t have to be an expert in CSS to use it in some basic and helpful ways.
Shortest CSS Grid Tutorial EVER!
I’ve been a reluctant/late adapter of the Flexbox and CSS Grid layout systems. I’m not proud of that, but it is what it is. After reading and watching a boatload of tutorials and videos on these systems, I got the idea that I should dive into Flexbox first — and I did. But then I watched a Kevin Powell video on how easy it is to get started with CSS Grid, and I was converted.
CSS Descendant Selectors
CSS descendant selectors (also known as contextual selectors) allow you to write lean, clean, semantic html and CSS markup with a minimum number of class and ID names, making your code easier to understand and maintain, and maybe even giving you a sense of harmonious calm. In this article, I explain this claim with an example.
How to Create Tooltips with CSS (Only)
CSS is so big that unless we work with it diligently on a day-to-day basis — and live long enough, we’re likely to be dealing with just the tip of the iceberg. In this article, I show a simple technique for creating tooltips with nothing more than CSS (no JavaScript). Hat-tip to Travis Neilson, whose DevTips YouTube channel is very informative and a real hoot.
Underlining for Emphasis: How to un-underline text on a Web page with CSS
No matter how loudly and often we tell our clients who maintain their own Web sites (via WordPress and other CMS-driven platforms) that using underlining for emphasis on the Web is a very bad idea, many of them do it anyway. This article explains, first of all, why this practice is a bad idea, and then it offers a simple CSS solution for removing underlines that shouldn’t appear on Web pages.
Fun with CSS3 Multiple Backgrounds
CSS3 supports multiple backgrounds for an element. There are lots of resources on the Web that tell you how to do it. It’s actually remarkably easy and intuitive. And most modern browsers support multiple CSS backgrounds.
What I want to do here is show you why and when you might want to try this.