I Think I Have a CSS Problem

My late-night habit used to be baking. Now, I think I’ve finally moved on to something more digital: CSS. Aside from fewer dishes, CSS-as-a-habit is also great because I can improve my skills, have something pretty to show off, and (thanks to the auto-assigned MIT License from CodePen) share with the community.

Here’s what I’ve been up to lately:

See the pen on CodePen.

My first pen was an example for my Web Development students last semester. I found that CodePen was incredibly helpful for my class; they could see the code and the end result side-by-side. I first created an anonymous pen for the class, but I’ve moved on to a formal account these days. Admittedly, many of these examples are heavy on the design and not-so-heavy on the practicality, but this assignment was about adding complex styles with CSS.

See the pen on CodePen.

This is a type specimen / webfont demo of Google Fonts and some styling with CSS. This pen is a recreation of another classroom example. The first has been lost, and it’s my own fault — between semesters, our department chair wiped the student accounts from the digital media server and my account was accidentally removed too. I had backups of all lecture notes and most examples, but this one fell through the cracks. Luckily, I get way too excited about webfonts and typography and really enjoyed creating Round Two.

I also had a starstruck moment: Chris Coyier of CSS-Tricks (and also the creator of CodePen!) hearted my pen shortly after it was created and featured my pen on the front page. Not only do I read CSS-Tricks all the time, use it as a reference, and recommend it to my students, but my webfont demo reached a huge audience, including the author of the quote I used (hi, Josh Collinsworth!). It was his first visit on CodePen. I came across Josh’s great quote via Quotes on Design, which is curated by none other than Chris Coyier. Small world; things really went full-circle there.

See the pen on CodePen.

Next up, I created CSS-only text effects. For anyone who reads design blogs, Photoshop text styles are all over the place for free downloads and inspiration. Whenever possible and reasonable, I prefer to keep text out of images and on a webpage so that it is easily editable, selectable, and can respond well to changes in font size or display (mobile vs. desktop, I’m looking at you). Many of those same techniques can be accomplished just using CSS, though browser support isn’t quite there for everything you’d want to do (background-clip: text, which acts like a clipping path in Adobe products, only likes to play nice in certain webkit browsers). With careful selectors, you can target only supported browsers and have a graceful fallback solution. This is more complicated than you’d think. Another solution would be to use SVG, but we’d only barely touched on that in class and I didn’t want to spook my students too much.

See the pen on CodePen.

Last up is a totally image-free postcard-inspired design that I made for a side project. I first started with the stitched ribbon on a white background, but the composition was missing a little something… and well, that’s what happens when you can’t sleep and want to play with CSS instead. Using gradients, I created a striped pattern inspired by old postcards. The gradients can look jagged at larger sizes, but for just a little decoration, they do just fine. I also included some basic Sass so that the ribbon colors, gradient, and background pattern can be easily edited (colors are declared in multiple places, so color variables are beyond amazing).

Overall, there are worse hobbies to have! Looking forward to more creations, even if they often come with some hair-pulling frustrations trying to figure out stacking order or browser support.

© Stephy Miehle as Blinding Stars