CSS is a mess. We all love it, but it’s a mess. I liken it to English: there are a bunch of rules, and you can learn them. But sometimes you’re better off just trying shit and seeing what works and what doesn’t. Magic is a codification of what I’ve learned in that crazy process.
The material in this textbook is intermediate-to-advanced. It assumes an understanding of the CSS syntax, cascading and inheritance, and commonly used selectors. It also assumes you’ve had enough experience with CSS to have learned not to make these common mistakes anymore.
I teach a weekly course to HubSpot engineers for which this is the textbook. The potions listed on the home page are used for the workshops in the latter half of each lesson.
As always, feedback is welcome. I hope you enjoy reading Magic.

Grunticon makes it easy to use HD-ready (retina) vector illustrations, icons, and background images in your web project without the hassles of spotty browser compatibility. The tool processes a set of SVG files, generates PNG fallback images for legacy browsers, and exports a demo page showing how to use the final icons. Visit the GitHub repo for the command line version or to learn more about how grunticon works.
To start, export SVG files for each of your images, drop those files onto the grumpy animal above, then click the 'Downlode it!" button to grab the files.
Once downloaded, check out preview.html to see a preview of your icons and their class names. To integrate in your site, you can drop the exported files into a folder on your site and paste the contents of grunticon.loader.txt into the head section of your HTML templates. Note: Be sure to replace the 4 [YOUR PATH HERE] parts of that text with the path to your own grunticon files (a root-relative path often works best across a whole site).

Мультимедийная история А. Галустяна

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. via Pocket

This page lists all CSS properties and indicates if and how they are animatable.

The internet was missing the ability to provide custom-sized placeholder images of Bill Murray. Now it can.

Мультимедийная презентация

Grids do not exist in a vacuum. They exist in relation to the content. We never start with a grid. We start with an idea which is then translated into a form, a structure.
Contains a list of common problems of responsive layouts.

How hard could it be to draw a horizontal line on the screen? It seems wrangling a few pixels together to stand in a file would be something computers should be pretty good at anno domini twenty-fourteen.
One would think so, but simple things are rarely simple under the surface… at least if they are worth anything. Typography, likewise, is a game of nuance. This is a story on how a quick evening project to fix the appearance of underlined Medium links turned into a month-long endeavour.

Scaffold styles, variables and structure for Bourbon projects. Twitter Bootstrap for SASS/Bourbon

A collection of font pairings from Typekit and H&FJ. Fair warning: the pages of this site are pretty heavy in download sizes – up to 3mb. Don’t say I didn’t warn you.

These are tales of friendship, love, revenge, and magic.

From #000 to #fff in 45 minutes

Pure CSS, not a script to be found

With the introduction of HTML 5, the audio tag provides a simple way to play audio files without the use of Adobe Flash. However, with the generic controls attribute, all audio tags look the same, but without any controls defined, the audio tag is invisible. In this tutorial I provide examples and a simple library on interacting with the audio element through Javascript and CSS. This provides the developer the ability to stylize all of the buttons and make a custom UI for the Audio element.

parallax scrolling for the masses

In Roman’s experiment, he is using absolutely positioned pseudoelements to cover the shadows (which are basically radial gradients as background images), taking advantage of the fact that when you scroll a scrollable container, its background does not scroll with it, but absolutely positioned elements within do. Therefore, when you scroll, the shadows are no longer obscured and can show through. Furthermore, these pseudoelements are linear gradients from white to transparent, so that these shadows are uncovered smoothly.

When I saw Roman’s demo, I started wondering whether this is possible with no extra containers at all (pseudoelements included). It seemed like a perfect use case for background-attachment: local. Actually, it was the first real use case for it I had ever came up with or seen.

Роль правильно разработанных интерфейсов в успехе продукта всё возрастает — кажется, пользователи впервые начали столько задумываться о том, как именно они взаимодействуют с приложениями и сервисами. Последний пример — всеобщее восхищение новым приложением компании Facebook Paper, при использовании которого есть риск подхватить морскую болезнь, так там все динамично. По просьбе Look At Me дизайнер интерфейсов Дмитрий Чута разобрал несколько интерфейсных приёмов и объяснил их значение.