Keith Frias sees himself as an artist whose talent is in a state of coma, and a tech gadget freak who also loves to dabble in photography.
Ever noticed how shopping sites can filter out certain items according to the visitor’s preferences? Here’s a quick and very helpful tutorial that will teach you how to do something similar to that without any need for database calls or page refreshes. Let’s begin with the CSS structure to make the layout presentable. /* SIMPLE [...]
What’s great about sequence.js is that unlike most other slider plugins, it presents unlimited customization options, which is why designer Ian Lunn touts it as ‘the jQuery slider plugin with infinite style’. Rotate, fade, skew, 3D transform, parallax effects, you name it, you got it! It’s also responsive, supports touch devices, non-JS fallbacks, and it [...]
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′ [...]
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 { [...]
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, [...]
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 [...]
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” [...]
First off, don’t dismiss this menu design based on the screenshot image alone. Instead, click on the image below to view the impressive demo. This cool navigation menu was created by 17-year old Felix Buhler, and it uses CSS3 keyframes property. To create the flashing effect, the menu’s attribute is simply changed from a static [...]
Create dramatic and responsive headlines with slabText! Created by frequency-decoder, this jQuery plugin splits a body of text (i.e. headline) into rows before resizing each row to fill in the available horizontal space. Click on the image above to download the plugin. There are two ways to accomplish this. The first is to let the [...]
Now you don’t have to log in to your Facebook account just to check on your wall! Thanks to NeoSmart’s jQuery plugin called fb.wall, you can view the contents of your Facebook wall right on your website’s page. Fb.wall uses Facebook’s Graph API, which allows the designers and the developers to display Facebook users’ wall [...]
0
465
