Grow your CSS skills. Land your dream job.

A Look at SVG Light Source Filters

The following is a guest post by Joni Trythall. Joni recently finished a Pocket Guide to Writing SVG. I've been excited about SVG for a while now, working with it, learning about it, writing about it... but there is so much to know. It really is another whole universe of the web. So I reached out to Joni to see if she would like to write something for CSS-Tricks on SVG and she agreed! Here's Joni on lighting in

Read Article →

Sponsor: Hack Reactor – New Remote Beta Classes 

With the success of their first online cohort, Hack Reactor is happy to announce two new Remote Beta classes. Aspiring engineers no longer need to relocate to San Francisco in order to attend their 12-week immersive JavaScript coding school. Take Hack Reactor’s program from home and gain the skills and confidence needed to build amazing products.

Remote Beta Classes begin October 27th & December 8th with recommended application deadlines of September 29th and November 10th, respectively. Apply today and take their exceptional Remote Beta program from wherever you are!

AMCSS 

"Attribute Modules for CSS"

An idea by Glen Maddern for moving styling with attributes rather than classes. Not an entirely new concept, but it's interesting to give it a name and explain a system based around it. Thoughts:

  • It avoids namespacing. Using modifiers like "large" is often a tempting naming convention, but too generic for a class name on its own. "Large" would be fine as an attribute value e.g. am-Button="large"
  • Cleaner on the HTML side, messier on the CSS side.
  • Probably technically slower CSS selectors, but that has been shown over and over to make very little difference except in extreme situations.
  • It probably makes the most sense while building a framework or pattern library that features variations. It's OK that these parts of your site would use an approach like this and your day-to-day styling doesn't.
  • I like how it sounds like caveman talk. <i am-Ogg="you jane.">

Give Designers Tools To Get You What You Need

Let's say you're having a healthy back-and-forth between you (a front end developer) and a designer. All the best work comes through collaboration and iteration, right? I believe that. But I also believe there are time traps in there. If you feel you're wasting time by getting peppered with tiny design tweaks, there might be salvation in giving designers tools to do the tweaks and then give you exactly what you need.

Let's see some simple examples.…

Read Article →

Glitch Effect on Text / Images / SVG

Lucas Bebber's Glitch is a super cool effect. It's like you're looking at some text displayed on a progressive scan monitor that has been dropped on the ground one too many times and so the alignment of the pixels is off in weirdly un-even amounts time and space.

It's bonafide CSS trick if there ever was one! It took me a bit to figure out how it was working, so I thought I'd explain. Then I ended up making it …

Read Article →

Sponsor: Frontend Masters – Expert Web Development Training 

Frontend Masters produces quality video training by industry leaders like Kyle Simpson, Douglas Crockford and Estelle Weyl. I like how these courses are targeted at intermediate and advanced developers:

You've got the basics down and don't want to learn from teachers who just spoon feed you their google results - you want to learn from the masters! Here, you get experts as teachers - people who are actively shaping the industry

Upgrade your JavaScript, CSS and front-end skills with Frontend Masters courses. Check out the complete course list.

Centering in CSS: A Complete Guide

Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to do, but in that there so many different ways of doing it, depending on the situation, it's hard to know which to reach for.

So let's make it a decision tree and hopefully make it easier.…

Read Article →

Advantages to Native CSS Variables 

I tend to think variables are best left to a preprocessing step, but there are some distinct things that having them directly in CSS can do:

  1. Daniel Imms:

    [they] can change at runtime, allowing the implementation of things like theming to be done more elegantly.

    i.e. change the value of a variable on a live, rendered web page and see the changes reflected everywhere that uses that variable.

  2. Peter Gasston:

    you can set the value through the setProperty() method on the style object

    Which makes #1 possible and opens up cool possibilities.

  3. They can be scoped to an element. So perhaps you could set variables representing color to theme a site, but override them at a component level to apply different themes in smaller places as needed.

#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".