Multibox Menu
By Mary Lou on
A simple grid-powered multibox menu where the boxes get shown with a reveal animation coming from different directions. ...
responsive
Tab Styles Inspiration
By Mary Lou on
A couple of modern and subtle tab styles and effects for your inspiration. We use pseudo-elements, SVGs and CSS transitions for some of the techniques. ...
Making SVGs Responsive with CSS
By Sara Soueidan on
An article on how to make embedded SVGs cross-browser responsive. We're going to cover embedding techniques, how to apply the "Padding Hack" and how to use inline me ...
Sticky Table Headers & Columns
By Terry Mun on
A tutorial on how to create sticky headers and columns for tables using jQuery. The solution is an alternative to other sticky table header approaches and it address ...
Techniques for Responsive Typography
By Sara Soueidan on
When it comes to responsive type on the web, there's more to do than just resizing the text's container and having the text reflow inside of it. This in-depth articl ...
A Collection of Separator Styles
By Mary Lou on
A collection of separator styles for horizontally dividing sections on a website. The dividers are created using several techniques, including styling pseudo-element ...
Responsive Retina-Ready Menu
By Stéphanie Walter on
A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes. ...
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 ...
Responsive Multi-Level Menu
By Mary Lou on
A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage. ...
Creating Nestable Dynamic Grids
By Larry Botha on
Learn how to create flexible and fluid grids which make nesting at arbitrary depths easy, while allowing full freedom for how the grid behaves in all viewports. ...
UI Design Guidelines for Responsive Design
By Kayla Knight on
Some UI guidelines and tips to consider when designing a website to make it cross-device friendly and responsive. ...
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. ...
Responsive & Touch-Friendly Audio Player
By Osvaldas Valutis on
A jQuery audio player plugin that is responsive and touch-friendly. The UI is css-only, no images used. ...
Calendario: A Flexible Calendar Plugin
By Mary Lou on
A jQuery calendar plugin for creating flexible calendars. ...
Gamma Gallery: A Responsive Image Gallery Experiment
By Mary Lou on
Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slide ...
Becoming Device-Agnostic
By Patrick Cox on
Responsive Web Design is more than just adjusting a web experience to different screen sizes. Becoming device-agnostic is an important step for creating future-proof ...
Elastislide Revised
By Mary Lou on
Elastislide, the responsive image carousel, has been updated and improved. It can be used vertically or horizontally and a minimun number of visible images can be sp ...
Vertical Showcase Slider with jQuery and CSS Transitions
By Mary Lou on
A tutorial on how to create a responsive vertical fullscreen slider that moves its sections in opposite directions. We'll be using jQuery, CSS Transitions and media ...
3D Restaurant Menu Concept
By Mary Lou on
A responsive 3D menu concept for a restaurant website. The idea is to show the menu as a folded flyer and unfold it in order to show the menu items. ...
Tips & Tools for Grid-based Layouts
By Carrie Cousins on
Developing a vertical (and responsive) grid can help maintain consistency in website design and ease the creation of responsive layouts. ...
Responsive 3D Panel Layout
By Mary Lou on
A responsive layout experiment where we arrange panels in a grid-like structure and transition the elements with 3D effects. ...
Experimental Page Layout Inspired by Flipboard
By Pedro Botelho on
An experimental page layout that let's you navigate pages by swiping or dragging as in a booklet, inspired by Flipboard. ...
Slideshow with jmpress.js
By Mary Lou on
Today we will create a slideshow using jmpress.js. The jQuery plugin that is based on impress.js will allow us to use some interesting 3D effects for the slides. ...
Responsive Horizontal Layout
By Mary Lou on
In this tutorial we'll create a horizontal website layout with individually scrollable content panels. We'll change the layout for smaller screens, making it respons ...