Are you new to CSS? This article is for you! Perhaps the biggest key to understanding CSS is understanding selectors. Selectors are what allows you to target specific HTML elements and apply style to them. Let's not think about style right now though, let's just focus on the selecting.
Welcome to THE ultimate resource for creatives. Up-to-the-minute updates from over 180 of your favorite design/dev/photo blogs around the web, all in one place... Stay a while!
We also contribute our own content to the design community. View our Original Posts.
Hotjar Insights is a web app to help you understand your website visitors. It combines a lot of insight tools (that you might pay for separately) into one unified platform. Heatmaps that tell you where your users are clicking. Feedback forms. Exit polls. Surveys. Video recordings of users using your site. A platform for recruiting people to do user testing for you. Live chat integration. Funnel analysis. And of course, more :)
The following is a guest post by Julian Shapiro. Julian has been working on Velocity.js recently, which he has written about here on CSS-Tricks before. Julian lives in a world of animation, so it's no surprise he's collected together some interesting examples of exotic animation techniques. Here he shares all about step easing, which you might not even be aware of. A type of animation transition that jumps from keyframe to keyframe in a set number of steps, rather …
MyFonts sells fonts that you can use on your websites directly through @font-face. They are a one-time fee — no subscriptions or recurring payments. Host the files however you would like, there is no third-party to rely on. Not only that, but you can try any font on your site free for 30 days.
Inspired by Mark Otto's tour of GitHub's CSS and Ian Feather's tour of Lonely Planet's CSS, I thought I would join the party and talk about how we do CSS at CodePen.
The following is a guest post by Giles Thomas from Ghostlab. Ghostlab is cross-browser cross-device testing software for Mac and PC. One of the things I'm very impressed Ghostlab can do is sync the events from one browser to all the others. Scroll one page, the others you are testing scroll. Click somewhere on one page, that same click happens on the others. I asked Giles about how the heck it does that when there is so much that …
When you change a CSS properties value, the browser needs to react to your change. Some values change the layout of the page. For instance, a change in width requires the browser to update layout, then "paint" any pixels that have changed, then "composite" them together. That's a lot of work. Some CSS properties can be changed more inexpensively. For instance, a change in background-image doesn't require any layout changes, but does require paint and composite.
Dave Rupert does an in-depth analysis of his own responsive site to figure out where he's at, identify places to improve, and evaluate the idea going around that responsive design is at fault for bloated websites.
This is 90% the same as we do things at CodePen. One major difference is that they combine all their CSS into two files and just serve them on all pages. I suppose that way once you've visited any page of GitHub.com, you've browser-cached all the CSS you'll ever need there. I have tended to go …
The following is a guest post by Katy Decorah (edited by Jason Morris). Katy was researching CSS columns and how they can work responsively, as there wasn't much information she could find out there on the subject. So, like a hero, she wrote it all up. Here's Katy:
The following is a guest post by Tobias Günther. Together with his team, Tobias creates Tower, a Git client for Mac. I personally use it every day. Just this week, they released version 2 of Tower, which I was a beta tester for. I'll let him explain all about Tower, why they created it, and what's new in this version.
Andreas Bovens put together this epic recipe list for / . There are four scenarios:
Mathias Bynens is the master of finding, investigating, and playing with quirky (yet often valid) bits of CSS and HTML.
These are overview articles covering lots of stuff relating to SVG. Why to use it and the basics of how to use it. Mostly: , background-image, , , and /.
The overall point here by Harry Roberts is to keep the specificity on your selectors as low as you can. The end result of that effort is: