Archive by Author

Your Brain on Front-End Development

Part of the job of being a front-end developer is applying different techniques and technologies to pull off the desired UI and UX. Perhaps you work with a design team and implement their designs. I know when I look at a design (heck, even if I know I’m not going to be building it), my front-end brain starts triggering all sorts of things I know will be related to the task.

Let’s take a look at what I mean.…

The post Your Brain on Front-End Development appeared first on CSS-Tricks.

Frustration

Jeremy Keith talks about a couple of recent frustrating moments in his life. One regarding a musical instrument, one involving a build process:

That feeling of frustration I get from having wiring issues with a musical instrument is the same feeling I get whenever something goes awry with my web server. I know just enough about servers to be dangerous. When something goes wrong, I feel very out of my depth, and again, I have no idea how long it …

The post Frustration appeared first on CSS-Tricks.

HSL() / HSLa() is great for programmatic color control

If you ever need to hand-manipulate a color in native CSS, HSL is pretty much the only way. HSL (the hsl() and hsla() functions in CSS) stands for hue, saturation, lightness, and optionally, alpha. We’ve talked about it before but we can break it down a little more and do some interesting things with it.

  • Hue: Think of a color wheel. Around 0o and 360o are reds. 120o is where greens are and 240o are blues.

The post HSL() / HSLa() is great for programmatic color control appeared first on CSS-Tricks.

Transmit Droplets

Ethan Marcotte documented his workflow for storing GIFs in a web directory. Sometimes just SFTPing files into a folder is as fancy a workflow as you need, and in fact, modern workflows don’t have anything on it!

I’ve also used Transmit’s fancy features for this kind of thing. I prefer saving the connection as a Droplet, which is basically a little application you can drop a file onto and have it upload to exactly where you want it…say a GIF …

The post Transmit Droplets appeared first on CSS-Tricks.

Just a Couple’a Fun Typography Links

The post Just a Couple’a Fun Typography Links appeared first on CSS-Tricks.

A Strategy Guide To CSS Custom Properties

CSS preprocessor variables and CSS custom properties (often referred to as “CSS variables”) can do some of the same things, but are not the same.

Practical advice from Mike Riethmuller:

If it is alright to use static variables inside components, when should we use custom properties? Converting existing preprocessor variables to custom properties usually makes little sense. After all, the reason for custom properties is completely different. Custom properties make sense when we have CSS properties that change relative …

The post A Strategy Guide To CSS Custom Properties appeared first on CSS-Tricks.

Responsive tables, revisited

Lea Verou with some extra super fancy CSS trickery. No way we could miss linking this one up!

One of the problems with responsive table solutions, at least the ones where you are using CSS to rejigger things, is that there is duplicated content somewhere. Either in CSS or HTML.

Lea finds two ways to prevent that. One of which uses text-shadow to “duplicate” a copy of the text and move it into place. Another uses the Firefox-only element() function. …

The post Responsive tables, revisited appeared first on CSS-Tricks.

Custom List Number Styling

How about a classic CSS trick! This isn’t even so tricky anymore, since CSS has counter-increment and counter-reset and such that is perfect for this. I just wanted to make sure you knew how it works and had some easy-to-copy examples at the ready.

Let’s say all you wanna do is style the dang numbers:

See the Pen Custom List Style 2 by Chris Coyier (@chriscoyier) on CodePen.

Here’s an example from the CodePen Challenges pages:

See …

The post Custom List Number Styling appeared first on CSS-Tricks.