Placed in: Home arrow Programming viagra australia
viagra online
viagra sale
cialis online
cialis australia
Programming
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
 
Nostalgia: Dragging the Windows XP error dialog

Remember the "good old days" when you were still using Windows XP? If so, I'm pretty sure you remember the loads of error dialogs that would pop up at a totally random time. Although these dialogs always show up at a bad time, you could do something pretty neat with them. Drag the window around and it would duplicate itself over and over!

Sadly, I haven't seen this effect alive in Windows 7, so to keep those memories alive for XP, I re-created the effect using HTML/CSS with jQuery and jQuery UI.

Dragging the Windows XP error dialog

Simply check out the demo to see if you can remember how it would look like. Be creative and fill up the screen with some beautiful error dialogs.

Demo Dragging the Windows XP error dialog   Download Dragging the Windows XP error dialog

I hope you understand that I'm pretty sarcastic; I don't like these kind of error messages that would make your PC crash. Yet, I wanted to give it a try to bring this effect to your browser. Now let's see on how you can create this fantastic effect yourself!


Tags:  windows xp error nostalgia jquery fun
 
New CSS3 properties added to Firefox 3.6

A couple of days ago, Mozilla released their newest version of their ever popular browser: Firefox. It was in beta before, but now version 3.6 can be officially downloaded. This version of the browser brings us a couple of improvements on several aspects, like using Personas (themes), improved (JavaScript) performance and an extended version of the CSS engine compared to the 3.5 release. Today, we're going to look at a couple of the new CSS3 properties that are added to Firefox 3.6.

New CSS3 properties added to Firefox 3.6

In this article, we'll be looking at the following properties that are now supported by Firefox 3.6: pointer-events, Using gradients and Multiple backgrounds.

Demo Demo New CSS3 properties added to Firefox 3.6   Download Demo New CSS3 properties added to Firefox 3.6

Please note that this article only aims at Firefox 3.6, using the -moz CSS prefix. Therefore, not all techniques will be visible when using any other browser (or older versions of Firefox). So let's see what the latest version of this browser has added to his CSS arsenal.


Tags:  firefox css pointer-events gradients multiple backgrounds
 
CSS3 animations and their jQuery equivalents

As you might know already, I'm not a big fan of animations that are added in CSS3. Yet, several people on Twitter told me why they really like the feature. At that point, I wanted to play around with it too.

At the same time, I wanted to see if those animations with CSS3 could be created with jQuery too (especially for those browser that don't support CSS3 animations yet). So today, I present you Five examples of CSS3 animations and their jQuery equivalents.

CSS3 animations and their jQuery equivalents

This tutorial/these examples will show the use of the same HTML, with different classes for CSS3 and jQuery. You can compare both the codes and see which one you like more. Don't forget to check the demo/download the source code to view how everything is working under the hood.

Demo CSS3 animations and their jQuery equivalents   Download CSS3 animations and their jQuery equivalents

IMPORTANT NOTE:
Sadly, CSS3 and HTML5 aren't the standards (yet) these days (when will it ever be?). Since this demo is using CSS3 animations, not all (modern) browsers will be able to show off the full effects. Because of this, it only works on Apples Safari and Google Chrome as they are the only browsers supporting the CSS3 animations via the -webkit- prefix. So, for now, this is just for fun and learning more about CSS3 and jQuery. The jQuery effects will work on other browsers though.

With that said, check out how you can re-create these and learn some more about CSS3 animations and jQuery.


Tags:  CSS3 animations jquery webdevelopment CSS
 
Sweet tabbed navigation using CSS3

Although I don't understand why animations have been added in CSS3, this upcoming standard does have a couple of very neat features added to the CSS we're using today. I wanted to take a couple of these new things, and create a Sweet tabbed navigation using CSS3.

Sweet tabbed navigation using CSS3

This tutorial takes on the following CSS(3) properties:

  • rgba
  • opacity
  • text-shadow
  • pseudo selectors
  • rounded corners
  • gradients
  • box-shadow

Demo tabbed navigation using CSS3   Download tabbed navigation using CSS3

As you could expect, this demo only works in browsers that support the new CSS3 features. This code fully works in Safari / Firefox 3.6, but hasn't been tested in other browsers. Now let's see how you can create this kind of sweet menu yourself!


Tags:  tabs navigation css3 webdesign css
 
<< Start < Prev 1 2 3 4 5 6 7 8 9 10 Next > End >>

Results 31 - 36 of 105
Subscribe

Subscribe to Marcofolio