Placed in: Home arrow Programming viagra australia
viagra online
viagra sale
cialis online
cialis australia
Programming
Animated wicked CSS3 3d bar chart

Do you remember the Wicked CSS3 3d bar chart that I placed online a couple of weeks ago? Paul Irish left a comment, requesting for an example with transitions. My reply was that I was already working on that, and today I'm proud to release the animated wicked CSS3 3d bar chart.

The principle is the same as the previous version: Create a beautiful 3d bar chart. But this time, we don't create a "stacked" one (since animation would be hard), but several bars placed under each other. When hovering, the animation shows and the bar will grow to the appropriate size.

Animated wicked CSS3 3d bar chart

One of the neatest things of this example (in my opinion), is that it uses the exact same HTML (except for the title) as the original article (wicked CSS3 3d bar chart). It's a great example to show what you can do with flexible CSS; You can create a totally different page with the same HTML and using only a different style sheet file.

Demo Animated wicked CSS3 3d bar chart   Download Animated wicked CSS3 3d bar chart

Take note that this example only works in -webkit based browsers (Safari and Chrome), because those are the browsers that currently only support CSS3 animation (The next version of Firefox will support animations too). So, once again, this example is just a sneak peak into some awesome stuff CSS3 can do for us.


Tags:  animation css3 bar chart 3d
 
Wicked CSS3 3d bar chart

More and more CSS3 articles are popping up on Marcofolio and all across the web. Although CSS3 is just future talk (since not all browsers support it yet), it's pretty cool to get a sneak peak on what the future will hold for us.

While browsing the web, I came across a pretty cool 3d bar chart created with Flash. I was wondering if I could recreate the same neat effect using pure CSS3 and started working on this wicked CSS3 3d bar chart. Check out the example to see that (almost) no images were used to create this wicked effect.

CSS3 bar chart

The only images that are used in this example, were taken from the Superpack icon pack and only show the Apple icons. Everything else you see in this demo, is created using pure CSS3.

Demo CSS3 3d bar chart   Download CSS3 3d bar chart

This example only works in the latest versions of Firefox, Chrome, Safari and Opera. Since Internet Explorer still doesn't fully support CSS3, this example looks a bit weird in IE. So, for now, this is just another sneak peak into the future. Let's check out how you can create this!


Tags:  bar chart 3d css3
 
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
 
<< Start < Prev 1 2 3 4 5 6 7 8 9 10 Next > End >>

Results 25 - 30 of 105
Subscribe

Subscribe to Marcofolio