Now we don’t have to rely on animated gifs in creating AJAX loading animation effects. This CSS3 tutorial will teach us how to create three different types of loading animation. Let’s start off with our HTML markup. HTML Markup <div id=’loading’> <div id=’Column1′ class=’Columns’></div> <div id=’Column2′ class=’Columns’></div> <div id=’Column3′ class=’Columns’></div> <div id=’Column4′ class=’Columns’></div> <div id=’Column5′ [...]
The web developers at Maui Website Design have designed a dynamic image menu that allows you to navigate easily through any visual content with a Motools-inspired effect, powered by jQuery Javascript. The menu’s main functions require a jQuery-compatible script, a valid XHTML, a Motools-like sliding effect, and it should be lightweight. It comes in two [...]
Here’s a shortlist of five simple yet cool HTML5 effects that can add life to your website! No images and JavaScript are necessary, as all of them are accomplished using only a combination of HTML5 and CSS3. 1. CSS3 Loading Animation A very basic loading animation. CSS code: <style type=’text/css’> @-webkit-keyframes rotate { from { [...]
Tired of the same old loader image? Then try James Padolsey‘s JavaScript loader called the Sonic Looping Loader. Sonic is a tiny JS “class” utilizing the creation of custom loading animations. It is highly customizable style, and you can define the path using arc, bezier and line as functions. Click on the image to view [...]
Speed up your page loading time with the Lazy Load plugin! Instead of preloading images, it only loads the images that are currently viewable in the browser window, but not the other images below the page unless you scroll down. Click on the image above to view the demo. Even when viewing large file-size images, [...]
If you’re conducting an online business, this jQuery plugin called Smart Validate will be a helpful addition to your website. Created by the egrappler.com web developers, it makes credit card validation easier and more convenient. The following credit cards are supported by Smart Validate: - Visa Card - Master Card - Discover - American Express [...]
I’ve come across this neat tutorial on how to create nice-looking linked tooltips using CSS3 and a little bit of jQuery for that cool fade in/out effect. Below is a screenshot of what the tooltips in the tutorial look like: There are 3 variations of the balloons’ arrows, wherein they can point left, center, or [...]
Mary Lou of Tympanus.net shows us a fun way to add a background image to a text element by experimenting with the CSS property “background-clip: text”. We can create very beautiful effects with the addition of these CSS3 transitions. Take note that the property ‘background-clip: text’ is supported in Webkit browsers only. Check out the [...]
Ivan Vanderbyl‘s cool CSS progress bar actually shows you a percentage of how much longer the process takes, unlike the others that just leave you guessing. Click on the screenshot above to see the code in action. HTML Markup <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>Pure CSS Progress Bar</title> <link rel=”stylesheet” href=”stylesheets/ui.css”> <link rel=”stylesheet” [...]
The tag cloud lets the visitors see the available site topics, additional info, and it can also be used to link blog posts, images, videos, etc. in your site. It’s so popular that several tag cloud versions have been created by many web developers and designers, and one of them is Dan Wellman who has [...]
0
511
