Flexible Slide-to-top Accordion
In today's tutorial we'll be creating a simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in.
Archive
Here you can browse through all posts from the categories articles, tutorials and playground.
Circle Navigation Effect with CSS3
Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and ma
25 Examples of Emphasis Applied in Web Design
In Articles by Gisele Muller on
Last week Patrick wrote a nice article about Developing Emphasis in Web Design, and today, based on that article, we decided to show you some examples of emphasis in
Draggable Image Boxes Grid
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
Mobile: The Web’s New Minimalist Movement
In Articles by Patrick Cox on
Is it just me or is the popularity of mobile devices pushing a new minimalist movement in web design? Web design trends come and go from time to time: the dancing ba
Scrollbar Visibility with jScrollPane
Sometimes it can be very useful to hide the scrollbar of elements in a website and only show it when the user really needs it. The real-time activity feed in Faceboo
Developing Emphasis in Web Design
In Articles by Patrick Cox on
Developing emphasis in web design can be tricky in that it all depends on what you want to accomplish with it. For the most part, whatever the product is, is what wi
Multi-level Photo Map
In Playground 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
Is There Room for Negative Space in Web Design?
In Articles by Patrick Cox on
Negative space is most commonly associated with logos or compositions where the empty space creates a unique shape or represents something - like the arrow in the Fe
Responsive Image Gallery with Thumbnail Carousel
A tutorial on how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter's "user gallery" and upon a request to show a
Developing Balance in Web Design
In Articles by Patrick Cox on
Your design should be inviting and allow your users to sit down, relax, hang out and maybe look around a bit and the best way to achieve this is through visual balan
Elastislide – A Responsive jQuery Carousel Plugin
In Playground 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
In Playground 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
J is for jCookies – HTTP Cookie Handling for jQuery
In Playground by Brian S. Reed on
jCookies, a jQuery plugin, makes getting and settings HTTP Cookies a breeze. jCookies allows the storage of any type of data: strings, arrays, objects, etc. A while
HTML Only – The Significance of Proper Markup in Web Design
In Articles by Patrick Cox on
This article is about the importance of proper markup in a website. A great way to make sure your site works properly is to write your HTML first before you jump int
Automatic Image Montage with jQuery
In Playground 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
Why Do Chairs Have Four Legs? The Cornerstones of Usable Websites
In Articles by Patrick Cox on
A huge, gigantic, humongously important part of web design and development is usability - the ability for your users to actually use your web site. Just as chairs ne
Image Zoom Tour with jQuery
In Playground by Mary Lou on
Today we want to share a little zoom tour script with you. Showing a main image initially, we want to be able to zoom into certain parts of the image by clicking on