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. 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. After you’ve had a chance to read their prognostications, please take a moment and tell us yours, too. Adelle Charles I believe a few directions in 2012 will include heavy use of handwritten fonts and an even bigger boom in using font replacement technology (eg. From a visual point of view, I think a lot of web design is too trendy, ‘do what’s hot right now’. I also hope Internet Explorer gets put to death this year. Whitney Hess Lis Hubert Randy J.

Build a Spiffy Quiz Engine | Tuts+ Premium | 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! A Word from the Author Quizzes are a great way to engage the community — just take a look at our recent quiz. I believe a demo is worth a thousand words. Today, we are going to look at how to implement this with, you guessed it right, our favorite JavaScript library, jQuery. Design Goals The design goal for this version are incredibly simple. We’ll something that looks slick and elegant — one that invites the user to take the quiz.This is no place for a long list of questions with radio buttons and labels. Some notable features that I’m opting out of: No post quiz reviews. That’s about it, I guess. Plan of Action We’ll now need to map out what needs to be done in a specific order. Now let’s dig into some code and get our hands dirty. Core Markup

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. I have tried circle rotation animation effect with Jquery and CSS3. Click here to watch live demo T1 Click here to watch live demo T2 Circle CSS3 circle diameter 50px

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. CSS3 is similarly an improved version of CSS and it helps the designers to insert stylish fonts and effects to their website very easily. This is very helpful css3 code generator, Create code for some most popular CSS3 Properties - text-shadow, border-radius, Box Resize and more.

Prefix free: Break free from CSS vendor prefix hell! -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. The target browser support is IE9+, Opera 10+, Firefox 3.5+, Safari 4+ and Chrome on desktop and Mobile Safari, Android browser, Chrome and Opera Mobile on mobile. If it doesn’t work in any of those, it’s a bug so please report it. In older browsers like IE8, nothing will break, just properties won’t get prefixed. Test the prefixing that -prefix-free would do for this browser, by writing some CSS below: Properties/values etc that already have a prefix won’t be altered. It’s not ideal, but it’s a solution, until a more intuitive way to deal with these cases is added in -prefix-free. Please note that in unsupported browsers like IE8, no such class will be added. You can exclude a file from being prefixed by adding the data-noprefix attribute to the <link> or <style> element. Firefox (and IE?) Get the jQuery plugin now:

Documentation | Spritely Spritely is a simple plugin with only two key methods, sprite() and pan() both of which simply animate the background-image css property of an element. The difference between the two is that a 'sprite' image contains two or more 'frames' of animation, whereas a 'pan' image contains a continuous image which pans left or right and then repeats. Typically, in either case, you would use a png file (with or without transparency) for this. You might wish to use a transparent gif for Internet Explorer 6, though it probably won't look as good. Your html elements must already be the correct size you want the sprite to appear, but the background image will typically be larger than the html element, and the spritely methods reposition the background image within the html element. For documentation in languages other than English, please see Unoffical Documentation. Please note: there is a problem with the current version of Mobile Safari on the iPad Quick start What's new in version 0.6? For example,

Save form values script We have all had it happen. You spend ages filling in an online form, but before you can send it, your computer crashes, or you try to send it, but your internet connection fails, or you hit the exit button by accident. In all cases, you have just lost all the work that you put into filling in the form. That is what this script is designed to prevent. It saves all the options that you chose, and all of the text you wrote, so that in the event of you losing it all, you can recover it later, just by opening the page again, or by clicking on a button. It also allows you to save usernames and passwords, so that you don't have to remember them every time. The author of the page containing the form only needs to include the script in their page, and offer a way to save and recover the values, as I will describe here. To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page. Demonstration

50 Free and Premium Attractive User Interface Design Kits | UI Kits Designing a website is a time consuming task. This is especially true if you start from scratch and create every element that you want to put on your web project. Good thing there are user interface design (UI) kits. UI kits allow you to prototype your conceptual ideas and develop them until you arrive at the final web design setup your client needs. With UI kits, you can make a uniform design for each web page quickly and easily. Also by having web elements that can be readily placed or arranged, you can have an idea as to how your design would look like once it becomes final. So here, we are sharing with you some user interface design kits that will prove useful in every web designing project you want to undertake. Disclosure: Please note that some of the links below are affiliate links and I will earn a commission if you purchase through those links (at no extra cost to you). Advertisement Index Free User Interface Design Kits Minimalistic UI Google Plus inspired UI. Moonify UI Mobility

Related: