Diagonal Slideshow
By Mary Lou on
A slideshow with a "diagonal" look and three visible slides. A decorative background element expands to fullscreen when opening the content preview. ...
images
Resizing and Cropping Images with Canvas
By Mike Riethmuller on
Learn how to resize and crop images using JavaScript and the HTML5 Canvas element using controls, commonly seen in photo editing applications. ...
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. ...
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. ...
Image Techniques for Creating Depth in Web Design
By Carrie Cousins on
Creative manipulation of images, from layering to composition to special effects, can add depth to web projects. ...
Using Transparency in Web Design: Dos and Don’ts
By Carrie Cousins on
Experimenting with transparencies is a great way to expand your design repertoire. Like many other effects, use this technique sparingly and test the design in multi ...
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 ...
Animated Responsive Image Grid
By Mary Lou on
A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorati ...
Line That Up: Proper Alignment in Web Design
By Carrie Cousins on
Proper alignment techniques for text and other elements can add punch and readability to your website. ...
Making Room to Breathe: Wrapping Text Around Elements
By Carrie Cousins on
Text wrap can be a useful tool when embedding images into blocks of text and when used properly can add to your site’s readability. ...
Sliding Image Panels with CSS3
By Mary Lou on
Today we'll show you how to create some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking o ...
Experimental CSS3 Animations for Image Transitions
By Pedro Botelho on
Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We'll be using CSS3 3D Transforms for Webkit only. ...
Elastic Image Slideshow with Thumbnail Preview
By Mary Lou on
Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and ...
Wave Display Effect with jQuery
By Mary Lou on
How cool is it to sometimes just display content a little bit differently? Today we want to share an experiment with you that let's you show images and content in a ...
Draggable Image Boxes Grid
By Mary Lou on
Today we want to create a template with a fullscreen grid of images and content areas. The idea is to have a draggable grid that shows boxes of thumbnails and menu l ...
Multi-level Photo Map
By Pedro Botelho on
This multi-level map based image gallery makes it possible to show images related to their location. The first level indicates the location of the places where each ...
Elastislide – A Responsive jQuery Carousel Plugin
By Mary Lou on
Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defi ...
Slicebox – A fresh 3D image slider with graceful fallback
By Pedro Botelho on
Slicebox is a jQuery 3D image slider plugin that makes use of CSS 3D Transforms and provides a graceful fallback for older browsers that don't support the new prope ...
Automatic Image Montage with jQuery
By Pedro Botelho on
Arranging images in a montage like fashion can be a challenging task when considering certain constraints, like the window size when using fullscreen, the right imag ...
Portfolio Image Navigation with jQuery
By Marcin Dziewulski on
Today we want to create a portfolio image navigation template with jQuery. The idea is to show some portfolio items in a grouped fashion and navigate through them in ...
Fullscreen Slideshow with HTML5 Audio and jQuery
By Jay Salvat on
In today’s tutorial we'll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to ...
25 Examples of Creative Thumbnail Usage in Web Design
By Gisele Muller on
Wikipedia tells us that "thumbnails are reduced-size versions of pictures, used to help in recognizing and organizing them, serving the same role for images as a nor ...
Image Wall with jQuery
By Mary Lou on
Today we want to show you how to create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slid ...
Rotating Image Slider with jQuery
By Mary Lou on
In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the slidi ...