Today’s featured jQuery plugin is called the Dynamic Grid: XML Gallery from Nikolay Dyankov. It’s a plugin that lets you create an image gallery slider that is highly customizable, and by customizable I mean not only can you change the animation but also the layout (no. of rows & columns), scroll speed, padding, etc. It [...]
Calatin Rosu creates a sleek CSS3 and jQuery folder tabs that can be useful in updating your site’s look. He uses the same procedures in creating good-looking CSS3 tabs. Here’s how you can do it. HTML <ul id=”tabs”> <li><a href=”#” name=”tab1″>One</a></li> <li><a href=”#” name=”tab2″>Two</a></li> <li><a href=”#” name=”tab3″>Three</a></li> <li><a href=”#” name=”tab4″>Four</a></li> </ul> <div id=”content”> <div id=”tab1″>…</div> [...]
Chris Coyier shares a tutorial that creates a bubble point tooltips with CSS3 and jQuery. Note that its demo will not work on Opera. To start with, here’s the HTML: <a href=”#” title=”Hi, I’m a tooltip thingy.”>link</a> Givje the link a title attribute. jQuery: $(“article a[title]“).tooltips(); The plugin will do the following: loop through each [...]
Arctext.js is a plugin created by web developer Pedro Botelho that rotates the letters with CSS3 transformation and arranges them along a curved path. The lettering.js calculates the right rotation of each letter then distributes it across the imaginary arc of the radius. Below is the code: radius : 0, // the minimum value allowed [...]
Today’s featured tutorial is written by Valeriu Timbuc from DesignModo, which teaches you how to create a video player using a combination of HTML5, jQuery, and CSS3. The look and feel of the video player is based on Vladimir Kudinov’s Impressionist UI design, which of course, we’re going to recreate using CSS3. As for the [...]
Here’s another awesome tutorial by Mary Lou and it’s about how to create a neat thumbnail proximity effect with jQuery. To start with, here’s the markup: <ul id=”pe-thumbs” class=”pe-thumbs”> <li> <a href=”#”> <img src=”images/thumbs/1.jpg” /> <div class=”pe-description”> <h3>Time</h3> <p>Since time, and his predestinated end</p> </div></a> </li> <li><!- … -></li> </ul> Styling: CSS Adding background image [...]
Web developer Martin Angelov demonstrates how you can create a Timeline Portfolio. Timeline is a jQuery plugin that shows chronological series of events. Here, you can embed different types of media such as videos, maps, tweets then associate them with date. Basic layout: HTML Index.html <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>Timeline Portfolio | [...]
Here’s a pretty neat interface design from WebDevelop+ which I think some of you might want to adapt to your website. It’s a collapsible drag and drop panel that allows your users to control how they want to see the information on your site. Check out the DEMO. If you think that this type of [...]
Here’s another good CSS3 and jQuery tutorial from awesome web developer Mary Lou. Her creation is a direction-aware hover effect using these two elements. Reminder: This only works on browsers that support CSS transactions. Unordered list for thumbnails and descriptions overlays: <ul id=”da-thumbs” class=”da-thumbs”> <li> <a href=”http://dribbble.com/shots/502538-Natalie-Justin-Cleaning”> <img src=”images/7.jpg” /> <div><span>Natalie & Justin Cleaning by [...]
Here’s a nice creation by Janko that mimics a Youtube-like adaptable change view feature. This lets you switch between normal mode and wide mode making it expand or shrink the movie area. Although it changes view, all the information still remains accessible. In simulating the structure, five sections are defined – content, comments, sidebar and [...]
0
510
