Placed in: Home arrow Programming viagra australia
viagra online
viagra sale
cialis online
cialis australia
Programming
jQuery quickie: Colourful rating system with CSS3

Today, we're going to do a relatively simple jQuery tutorial. Rating systems are used a lot on websites, for example to rate how good a certain product, article or comment is. I slightly wanted to improve this idea, by making it more visually attractive.

By using the jQuery Color plugin, we can animate colours. Simply use the animate() function from jQuery to have colours fade to another colour. When using this technique, combined with some CSS3 feautures (rounded corners and drop shadow), we can create a Colourful rating system.

Colourful rating system with CSS3

As usual, since CSS3 isn't supported (yet) by every browser, the demo page only fully works on those browsers that support it (Firefox, Safari and Chrome). Other browsers will not see the circles, but will see colourful blocks that can be used as a rating system.

Demo Colourful rating system with CSS3   Download Colourful rating system with CSS3

Should I do more jQuery "basic"/quickies in the future? Simply let me know and I'll do that! For now, let's see how you can create your own colourful rating system with jQuery and CSS3.


Tags:  rating colour jquery css3 simple
 
3d animation using pure CSS3

A couple of days ago, somebody tweeted a great looking CSS3 example. I was absolutely stunned by the example And all that Malarkey created and was wondering how he was able to produce that kind of effect. I knew about the CSS3 transition property, but how to create that 3d effect?

At that point, I started digging through the Safari Reference Library, where I eventually found the Safari CSS Visual Effects Guide: Transforms page. This page describes a CSS property I've never seen before: -webkit-perspective.

The perspective property is what we need to create the 3d effect. Using transform and transition, we can create 3d animation using pure CSS3.

3d animation using pure CSS3

Simply open up the demo page and hover the movie poster elements and be amazed. As you could have expect, this technique will only work on -webkit based browsers (Latest version of Safari and probably Chrome too). Even Safari on the iPhone displays the 3d effect, but not the animations.

Demo 3d animation using pure CSS3   Download 3d animation using pure CSS3

For those who don't have a webkit browser, I've added a small video to this post to see the demo in action. This really opens up the possibilities and shows the strength of CSS3!


Tags:  3d css3 animation transition perspective
 
jHTML-Ipsum: HTML Ipsum using a jQuery plugin

Most webdesigners/developers know what Lorem Ipsum is. For those who don't, it's simply dummy text of the printing and typesetting industry. Although I hardly use it myself (others think it's killing your designs), I still think the idea behind it is pretty good. Chris Coyier took this idea to a whole new level and created HTML-Ipsum. You can copy HTML elements to your own project to see if you've styled all the elements in a proper way.

There is just one thing which bugged me for a long time about Lorem Ipsum. When you copied all the text (or HTML), style it etc., you'll need to remove everything afterwards. When you created loads of different pages, it might take a while to find all your Ipsum traces. Because of that, I created jHTML-Ipsum: a jQuery HTML Ipsum plugin.

jHTML-Ipsum: HTML Ipsum using a jQuery plugin

Simply set your selector and let jHTML-Ipsum do his work. It dynamically creates all the HTML elements so you can see if all your CSS works in a proper way. Using various parameters, you can set how the plugin behaves and see which elements it should create.

Demo jHTML-Ipsum   Download jHTML-Ipsum

When you fully designed your website, you simply delete the plugin and you don't need to delete or change the individual pages. Read below how you can install the plugin and which options you can set.


Tags:  jhtml-ipsum html ipsum jquery plugin
 
Advanced jQuery background image slideshow

A couple of weeks ago, I received an e-mail from a guy named Patrick. He just visited the website from Philadelphia and wanted to know how to create the slideshow header that's on top of the page. Since I was also impressed by the effect, I took the time to recreate this effect myself. Our focus is the background image slideshow (including the text), not the other things (like the dropdown menu).

With the use of transparent PNG's, some HTML, pretty nifty CSS and jQuery, we can make this technique work. Read the rest of this article to learn how to create a beautiful advanced jQuery background image slideshow.

jQuery background image slideshow

It features changing text and playback controls. When the animation doesn't seem smooth, the images might not be loaded. This script can perfectly be combined with an image preloading plugin to get rid of this effect. Tested and works on Firefox, Safari, Chrome and Opera. I've used images with a width of 1500px, just to cover most of the currently used screen resolutions.

Demo jQuery background image slideshow   Download jQuery background image slideshow

Start up your HTML/CSS/jQuery editor and let's see how you can create this effect yourself! Of course, you can also download the source and dig through the code and learn from there. As always, comments are left on the source code to explain what it does.


Tags:  slideshow jquery tutorial webdevelopment
 
jFancyTile: A jQuery tile shifting image viewer plugin

Previous week, colleague Willem and I were checking out the mosaic slideshow created by Martin. We were both impressed by his example, but wanted to take it to another level. We discussed on how we could add some features and how it should look like. Willem tranformed this idea to Silverlight and I created an easy to use jQuery plugin that does the same.

This jQuery plugin called jFancyTile is a tile shifting image viewer. It allows you to tranform any list with images to a beautiful tile shifting photo presenter.

jFancyTile: A jQuery tile shifting image viewer plugin

Check out the demo to see the plugin live. It's very customizable to fit your own needs. Read the rest of this article to see how this plugin works "under the hood".

Demo jFancyTile   Download jFancyTile

Take note this plugin is pretty CPU intense and works best when a low rowCount and columnCount is used on relatively small images. Experiment and use with caution. The Silverlight version from Willem doesn't have this problem.


Tags:  jfancytile jquery plugin image viewer
 
Pure CSS3 bokeh effect with some jQuery help

Bokeh - In photography, bokeh is the blur, or the aesthetic quality of the blur, in out-of-focus areas of an image, or "the way the lens renders out-of-focus points of light." (from Wikipedia). I'm pretty sure you've seen this effect before, since there are loads of wallpaper roundups and tutorials using this technique. Currently, one of my favourite wallpapers has to be this bokeh effect from -kol.

Today, I want to add another addition to the bokeh "hype", by creating a pure CSS3 bokeh effect. With some help from jQuery, we can add some randomness in colour, size and position for the effect.

Pure CSS3 bokeh effect

Still don't know what we'll be creating? Make sure to check out the demo and view the source code to learn some more.

Demo Pure CSS3 bokeh effect   Download Pure CSS3 bokeh effect

IMPORTANT NOTE:
Sadly, CSS3 and HTML5 aren't the standards (yet) these days (when will it ever be?). Since this demo is using CSS3, not all modern browsers will be able to show off the full effect. Because of this, it only works on Apples Safari and Google Chrome and the latest version of Firefox. So, for now, this is just for fun - until Microsoft comes with a CSS3 supporting Internet Explorer.

The effect looks pretty neat, doesn't it? Check out this tutorial on how you can create it yourself! For those people who use IE, I've added a little video showing the full effect.


Tags:  bokeh css3 jquery tutorial
 
<< Start < Prev 1 2 3 4 5 6 7 8 9 10 Next > End >>

Results 25 - 30 of 103
Subscribe

Subscribe to Marcofolio