Post Flat Design * GitHub Cheat Sheet * steps() * CSS and SVG Masks * Color Picker * Treed * Cognitive Lode * Torpedo
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.
A tutorial on how to implement the circular progress button concept by Colin Garven. We are using the SVG line drawing animation technique as described by Jake Archibald to animate the circular progress and provide a success and error state to indicate the final status.
Google Night Walk * Font-To-Width * GitBook * Magic of CSS * GridList * Infinite Creativity * Resource Lists
A very simplistic form interface that shows only one text input at a time and reveals the next input with a subtle transition. The concept is based on the form at the bottom of the PageLanes website.
devices.css * WTF, HTML and CSS? * Clean CSS * Srcset and sizes * Dribbbox * Velositey * Soundslice
A proof-of-concept effect recreation of the animation seen in a prototype app by Marcus Eckert. The idea is to flip a grid item in 3D, expand it to fullscreen and reveal some associated content. We've created two demos with a vertical and a horizontal rotation.
CSS Diner * CSSynth * Picture Element * CSS Grid * Color Lightness * Animal Characters Set * Responsive Table
A responsive Masonry grid with a gallery view using 3D Transforms. Based on the gallery seen on the Chromebook Getting Started guide by Google.
100% width tabbed content with some example media queries for smaller screens.
Some inspiration and ideas for item transitions considering different scenarios and use cases, including a small component, a full-width image header and a product image with a transparent background. State transitions are done using CSS Animations.
Web at 25 * Custom CSS preprocessing * Brick Webfonts * SVG Sprites * Device-Agnostic * MakeHuman * Web Font Trends * Redesigning IMDB * UI Feeback
A tutorial on how to recreate the slideshow seen on the FWA landing page with 3D effects involving random animations.
Responsive SVG * What's my browser * Typographic Email Design * Animatron * ScrollMagic * PixelBudda * Select to Switch
A set of simple stack effects for inspiration. The main idea is to have one item shown initially and then, on some trigger, more items are revealed as decoration. As seen in image grids or on scroll websites as creative effect.
Sticker.js * Code Guide * Off The Beaten Canvas * Atom * Matter.js * Honest logos * Peek * CSS Shake