Placed in: Home viagra australia
viagra online
viagra sale
cialis online
cialis australia
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
 
WordPress 2.9 E-Commerce: Book review and Giveaway

Packt PublishingA while ago, I reviewed the jQuery 1.3 and PHP and Zend Framework 1.8 books. These books are published by Packt Publishing (who just had a redesign on their site) and they asked me to review another book for them. This book, written by Brian Bondari, is called WordPress 2.9 E-Commerce. As you could have guessed by the title of the book, it shares great information about WordPress combined with the WP e-Commerce plugin. This book was an eye opener for myself too, since I'm a Joomla! user myself (combined with VirtueMart) and new in the WordPress scene.

I've read the book and wrote a review about it that you can read below. Now, you have a chance to win this 250+ pages thick book and read it yourself!

WordPress 2.9 E-Commerce

What you'll learn from this book:

  • Some basic WordPress stuff and more advanced E-commerce things
  • Different Payment options
  • Securing and Maintaining your webshop
  • Use of different plugins for your online store
  • and much more!

Read the review below and make sure to check out how you can win a hardcopy version of this book. Also, make sure you subscribe to the RSS feed or follow me on Twitter to get updates on more future giveaways.


Tags:  wordpress e-commerce book review giveaway
 
<< Start < Prev 1 2 3 4 5 6 7 8 9 10 Next > End >>

Results 46 - 60 of 361
Subscribe

Subscribe to Marcofolio