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 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. ...
3D Image Gallery Room
By Mary Lou on
An experimental image gallery with a realistic touch: the images are displayed in a 3D room with walls. ...
3D Book Showcase
By Mary Lou on
An experiment about a realistic looking book showcase with some interactivity using CSS 3D transforms. ...
How to Create a Simple Multi-Item Slider
By Mary Lou on
A tutorial on how to create a simple category slider with a minimal design using CSS animations and jQuery. The idea is to slide the items sequentially depending on ...
Slider Pagination Concept
By Mary Lou on
An experimental slider pagination using the jQuery UI slider. The idea is to use a simple navigation concept that preserves layout and style while allowing content t ...
CSS Click Events
By Hugo Giraudel on
An article about different experimental approaches of employing click events using CSS only. It summarizes and shows some clever hacks and smart tricks. ...
Sticky Captions Concept
By Mary Lou on
A little trick on how to make captions of thumbnails or items "sticky" in order to stay visible in the window or viewport. ...