Playground

In this category you will find experiments, plugins and articles related to web development and programming. Here we present some new ideas and inspiration for solving problems and tackling challenges around web development.

A Collection of Separator Styles

By Mary Lou on October 3, 2013

A collection of separator styles for horizontally dividing sections on a website. The dividers are created using several techniques, including styling pseudo-element ...

Creative Loading Effects

By Mary Lou on September 18, 2013

Some ideas and inspiration for loading effects on a website. ...

Sliding Horizontal Layout

By Mary Lou on September 5, 2013

A slider-like layout where the neighboring sections are positioned horizontally next to each other. ...

Transitions for Off-Canvas Navigations

By Mary Lou on August 28, 2013

Some inspiration for transition effects for off-canvas navigations. ...

Creative Link Effects

By Mary Lou on August 6, 2013

An inspirational collection of experimental link effects mostly using transitions on pseudo-elements. ...

3D Effect for Mobile App Showcase

By Mary Lou on August 1, 2013

A fancy 3D effect for a mobile app showcase where the app screens animate to a layered stack. ...

On Scroll Header Effects

By Mary Lou on July 16, 2013

Some inspiration for headers that animate when scrolling the page. ...

Animated Books with CSS 3D Transforms

By Marco Barria on July 11, 2013

A creative way to show interactive books using CSS 3D Transforms. ...

Interactive Particles Slideshow

By Francesco Trillini on July 3, 2013

An interactive particles slideshow experiment built with HTML5 Canvas. ...

Loading Effects for Grid Items with CSS Animations

By Mary Lou on July 2, 2013

Some inspiration for loading effects of grid items using CSS animations. ...

Dynamic Grid with Transitions

By Mary Lou on June 19, 2013

A dynamic grid layout that let's you choose how many rows and columns of items are shown. Partly based on the visualization of Google Trends, except that you can ad ...

Creative Button Styles

By Mary Lou on June 13, 2013

Some creative and modern button styles and effects for your inspiration. ...

Simple Icon Hover Effects

By Mary Lou on May 30, 2013

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 May 22, 2013

Some creative experiments that use animations and transitions on pseudo-elements to create interesting effects. ...

Morphing Devices

By Mary Lou on May 15, 2013

An experimental morphing devices slideshow with CSS Transitions for showcasing responsive web design screenshots. ...

A Collection of Page Transitions

By Pedro Botelho on May 7, 2013

A showcase collection of various page transition effects using CSS animations. ...

Text Opening Sequence with CSS Animations

By Mary Lou on April 30, 2013

A simple and fun text opening sequence effect with blurry letters using CSS animations. ...

Fullscreen Layout with Page Transitions

By Mary Lou on April 23, 2013

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 ...