background preloader

Draggable Image Boxes Grid

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 like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area. View demo Download source The main idea for this template and its effects comes from the beautiful Flash-based website of Stephen Hamilton. To make the grid draggable, we used jQuery.kinetic by Dave Taylor. The beautiful images in the demo are by Ibrahim Iujaz. So, let’s begin! The Markup The main container will be a div with the class and ID ib-main-wrapper. The boxes for the content will have the class ib-content. For the content and image preview we will use jQuery templates. We will have the large image, the navigation buttons, a closing cross and a loading element. The template for the fullscreen content preview looks like this: Now, let’s style the grid. The CSS And that was all the style.

http://tympanus.net/codrops/2011/10/07/draggable-image-boxes-grid/

Related:  CSS3, HTML5, JAVA, PHP

Web design predictions for 2012 Everything changes. The Internet and web design are certainly no exceptions to the rule. As we move through the days and months ahead, it’s likely that in short time we’ll find ourselves talking about new design developments that haven’t rolled across our lips or screens yet. We asked some of the leading web and user experience designers in the field for their predictions about what we might expect to see in the web design world in 2012. Joining us are: Adelle Charles, Whitney Hess, Lis Hubert, Randy J. Hunt, Franz Jeitz, Michael Martin, Eric A.

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 make a bubble with a thumbnail appear. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows. The effect is done with CSS3 transitions. View demo Download source An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements Hola a todos! (Hello, everyone!) In my early days of web design, I had to learn things the hard way: trial and error. There was no Smashing Magazine, Can I Use, CodePen or any of the other amazing tools at our disposal today.

The best way to learn creative and technical skills. The first official Nettuts+ quiz was a massive success with an impressive number of developers participating and evaluating their knowledge. There were a non-trivial number of comments asking how the mini quiz engine was built. And lo and behold! 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 Facebook is an example for such a behavior. Today we want to show you how to use jScrollPane and extend it with the functionality to hide the scrollbar and show it on hover.

Google Plus Circle Animation With Jquery and CSS3 in Your Website — Tech Blog If you are a Google plus user, I am sure you will fall in love with Google plus circle animation. Google plus given an awesome user experience, specially circle’s animations. When I saw the rotation animation first time in Google plus, I was so excited to create my own rotation animation like Google plus.

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. The idea is to avoid that the user has to scroll the content area into place. We'll also add some nice CSS3 transitions for the arrow to appear and to rotate when we click on an item. 8 Best Tools to Make Easy CSS3 Development CSS or cascading style sheet is basically a style sheet language that is used to describe the presentation semantics or the looks and formatting of a document. This document is written in a mark-up language. One of its basic uses is to style the web pages that are either written in HTML or XHTML but this language can also be applied to any other kind of document. CSS also does a major job that is it separates the content of the document from the presentation of the document and in addition it also includes features like layouts, colors and fonts. This separation that is done by CSS improves the accessibility of the content and also provides more flexibility and control in the specification of presentation.

Related: