Using Custom Data Attributes and Pseudo-Elements
By Mary Lou on
A tutorial on how to (ab)use custom data attributes and pseudo-elements for creating image captions.
CSS3
Creative Button Styles
By Mary Lou on
Some creative and modern button styles and effects for your inspiration.
Simple Icon Hover Effects
By Mary Lou on
A set of simple round icon hover effects with CSS transitions and animations for your inspiration.
Examples of Pseudo-Elements Animations and Transitions
By Marco Barria on
Some creative experiments that use animations and transitions on pseudo-elements to create interesting effects.
Natural Language Form with Custom Input Elements
By Mary Lou on
An experimental form that uses natural language instead of the usual form display. Values are entered using custom input elements.
Morphing Devices
By Mary Lou on
An experimental morphing devices slideshow with CSS Transitions for showcasing responsive web design screenshots.
Responsive Retina-Ready Menu
By Stéphanie Walter on
A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes.
A Collection of Page Transitions
By Pedro Botelho on
A showcase collection of various page transition effects using CSS animations.
Automatic Figure Numbering with CSS Counters
By Hugo “Kitty” Giraudel on
Learn about CSS counters, the figure element and how to combine both for automatically numbering figures in a web page.
Text Opening Sequence with CSS Animations
By Mary Lou on
A simple and fun text opening sequence effect with blurry letters using CSS animations.
Simple YouTube Menu Effect
By Mary Lou on
A tutorial on how to recreate the effect of YouTube's little left side menu. The idea is to slide a little menu icon to the right side while revealing some menu item
Fullscreen Layout with Page Transitions
By Mary Lou on
A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additional page transitions are added for
App Showcase with Grid Overlay
By Mary Lou on
A tutorial about creating a simple grid overlay with subtle transitions for an app showcase.
Thumbnail Grid with Expanding Preview
By Mary Lou on
A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
HexaFlip: A Flexible 3D Cube Plugin
By Dan Motzenbecker on
HexaFlip is a JavaScript UI plugin that let's you use 3D cubes as interface elements. Dive into the process of creating the plugin and learn some best practices rega
Interactive Infographic with SVG and CSS Animations
By Adam Coulombe on
Learn how to build an interactive animated infographic using SVG, CSS and JavaScript.
Flipping Circle Slideshow
By Mary Lou on
A simple circular slideshow where we flip the image in order to navigate.
Putting CSS Clip to Work: Expanding Overlay Effect
By Mary Lou on
A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions.