Grow your CSS skills. Land your dream job.

How SVG Shape Morphing Works

While animating SVG with CSS is easy and comfortable, CSS can't animate all the SVG properties that are possible to animate. For instance, all the properties that define the actual shape of the elements aren't possible to change or animate in CSS. You can animate them through SMIL though. Sara Soueidan covers this in her guide to SMIL here on CSS-Tricks, but I thought I would shine a light on this particular ability.…

Read Article →

Sponsor: Hack Reactor’s Immersive Remote Beta Course 

Hack Reactor's Coding School is accepting applications for its next online immersive course, Remote Beta. Their team of exceptional instructors and staff work towards a two-fold mission of empowering people and transforming education through rapid-iteration teaching. Students build the skills and confidence they need to graduate as mid-to-senior level engineers and work for top tech companies in both backend and front end tasks.

Apply today for an upcoming onsite or online cohort and be on your way to becoming an engineer in 12 immersive weeks.

Two anecdotes from me:

  1. I just watched the documentary Ivory Tower and it's a pretty interesting look at the state of universities. One thing is for sure: education is changing.
  2. I now have two personal friends who have transformed their career through coding schools.

Lobotomized Owls 

I had a post in my drafts for CSS-Tricks recently I called "Removing the Space from the Bottom of Modules". It's all about that tricky situation where you want even padding all the way around some elements to visually separate them. But elements inside will also need bottom margins, and that might lead to extra space along the bottom where that margin hits the padding.

Apparently I'm getting old and losing my mind, because I've already written about it. But I didn't come to any stunning conclusion in that article. The best I came up with was a kinda gross compound selector that I don't even want to talk about.

Heydon Pickering does have a stunning conclusion for this issue:

* + * {
  margin-top: 1.5em;
}

I'd definitely try that in a new project. It does make me think that future CSS could help us here though. Perhaps specifying that a particular edge of padding was allowed to collapse into margin?

Probably Don’t Base64 SVG

Perhaps you've heard of data URIs. It's a really nice way of including a resource that would have otherwise been a separate HTTP request. The format that you use in a data URI can vary. Essentially you just tell it what content type it is (e.g. image/png), semicolon, then the data of that file.…

Read Article →

SVG Artboard Sizing

There are a couple of different (rational) approaches to SVG artboard sizing.

The term "Artboard" here is referring to that concept in Illustrator, basically the white drawing area you have for the document. Ultimately it refers to the viewBox in the actual SVG output. It matters very much for front end developers, because if there is no consistency, the positioning of the SVGs will always be a little one-off battle and really hurt the idea of SVG being a useful …

Read Article →

How To Get Started in Web Design

Here's an answer to how to get started building websites that I fully endorse and isn't vague. This is going to cost a little money, just like learning to play the guitar requires buying a guitar and some accessories. This is also going to require a little time and mostly isn't directly about the coding itself. It's about getting you to a place where you're doing web design for real and you can't help but learn!

I'm going to …

Read Article →

Sponsor: Creative Market – October Big Bundle 

It's always great to have a personal collection of design resources you know that you can use for whatever you like at your fingertips. Vectors flourishes and illustrations, photos, textures, patterns, fonts, layouts, all that good stuff.

No better place to stock up than Creative Market. This week, they have put together a Big Bundle of their best products. From graphics and fonts to photos and Photoshop actions. For only $39, you can fill up your designer's toolkit with 105 resources. This will only be available until October 21st, so be sure to grab it before it's too late.

A Guide to SVG Animations (SMIL)

The following is a guest post by Sara Soueidan. Sara has a knack for digging deep into web features and explaining the heck out of them for the rest of us. Here she digs into SMIL (and friends), and animation syntax built right into SVG, and gives us this epic guide.…

Read Article →

#134: A Tour of a Site In-Progress Built with Jekyll, Grunt, Sass, an SVG System, and More

Warning: this is a meandering, intermediate level screencast in which we look at the code that powers a build process for a site. We don't write any code.


A "build process" is all the stuff that happens between the code you write and code that goes out to a live website. We've talked before about using Grunt for this. Sass is processed, assets are combined, minification and optimization happens, etc. There are endless things that a build process can …

Watch Video →

More Blog Posts →

*May or may not contain any actual "CSS" or "Tricks".