This article demonstrates how to use CSS transforms, perspective and some scaling trickery to create a pure CSS parallax scrolling website.

High-level advice and guidelines for writing sane, manageable, scalable CSS

Håkon Wium Lie is the father of CSS, the CTO of Opera, and a pioneer advocate for web standards. Earlier this year, we published his blog post, “CSS Regions Considered Harmful.” When Håkon speaks, whether we always agree or not, we listen. Today, Håkon introduces CSS Figures and argues their case.

Pete R. introduced his One Page Scroll to the world a few weeks ago. He did a great job on replicating the one page scrolling effect used on the new Apple iPhone 5S/5C websites. Today I want to show you how these animations were created in a more detailed breakdown.

Gumby 2 is an amazing responsive CSS Framework. Websites built today must be mobile friendly in order to survive. Why have two different sites for mobile and desktop when you can have your main site be one size fits all? Gumby Framework is also incredibly customizable; it’s as easy as download, tweak, deploy!

Start your project with the Web Starter Kit and ensure you're following the Web Fundamentals guidelines out of the box.

Before I came up with the interactive placeholder, I was just using a normal one. I liked the simplicity of using a placeholder as a label. It actually made a pretty crappy interaction for the user though. A user would type and the text disappeared.
Entire teams use Circle — the person who enters a value first isn’t always the same person who sees it later. To solve this problem I tried making the placeholder persist through the typing.
This worked well and made handling pre-filled data that much easier. When the <input> gets pre-filled, it behaves as it would if the user entered it themselves. Now teammates who view this in the future will know what this input is meant for right away.

Animated Navigation Icons with CSS3 Transforms

Packery makes your crazy & clever layout a real thing. Be clever. Get crazy.

Презентация о flexbox

Flexbox - это новый способ располагать блоки на странице. Это технология, созданная именно для раскладки элементов, в отличие от float-ов. С помощью Flexbox можно легко выравнивать элементы по горизонтали и по вертикали, менять направление и порядок отображение элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю.

Code School teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts.

bounce.js lets you create tasty CSS3 powered animations in no time.

CSS Conf May 2014

A responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control.

Some inspiration for effects applied to title headers of articles with a fullscreen image. The idea is to show some creative transition when continuing to the article body.

The story of Jess & Russ

Any CSS color notation supported by your browser is valid, including named colors, #hex, rgb(), hsl() etc. Use the keyboard up/down arrow keys to increment/decrement numbers.

Convert plain symbols to HTML entities, CSS ASCII codes (for 'content' property), JS...