As designers and developers we tend to always be on the look out for awesome resources to add to our virtual toolboxes. With the web design landscape moving in the direction of CSS3 and HTML5 we thought that we would help our readers find a few choice tools to start building up their toolboxes. So we went out across the web looking for some of the top offerings from the development and design community that can help get you started on using CSS3 and HTML5 today.

So take a look down through the round up of available resources that you can hopefully find some tools that you have not come across before, and that can help aid both designers and developers alike.

CSS3 Tools

CSS3 Button Maker

This intuitive tool from CSS-Tricks is labeled a “CSS3″ button maker owing to the fact that it makes use of gradients, shadows, and rounded corners which are generally not supported in older browsers. However, whenever these properties are not supported, the buttons degrade naturally and nicely. To use, you simply adjust the settings until the example looks like you want it to then you just click the button to get the CSS code. Then you copy and paste it into your stylesheet.

CSS3 Maker

Another uber easy and user-friendly code generator is CSS3 Maker which supports “border radius” “gradient” “css transform” “css animation” “css transform” “RGBA” “Text Shadow” “Box Shadow” “Text Rotation” and “@Font Face” with browser and mobile compatibility. Users can also create an account to save snippets created during your session. (If you want essentially the same service with a different ui, give http://css3generator.com/ a try)

CSS3 Please

How about a handy cross-browser CSS3 rule generator? Just say please! CSS3 Please is an online stylesheet with an inlaid code generated example so you can see the changes you make take immediate effect. And the best part is, change one value, and all the corresponding values update to reflect these changes as well. Then when you are ready and have the box styled as you like, then just copy the whole code or just part of the code and paste it into your own stylesheet. With great annotations this is an awesome learning tool to boot as you are working directly with the code itself.

Modernizr

Need a compact, easy to use JavaScript library to aid in implementing emerging web technologies like CSS3 or HTML5, without sacrificing function and control in older browsers that have not made it ahead of the curve? Modernizr might be the answer. With feature detection for browser testing supporting “RGBA”, “Border-Radius”, “CSS Transitions” and more, this is a great way to get started modernizing your site while keeping control of the fallbacks for older browsers.

CSS3 Transforms

If it is transforms that you are interested in, then step right up! With this useful tool you can rotate, scale, skew, and otherwise transform your HTML elements with CSS3. (This resource is supported in multiple browsers such as Opera 10.5, Firefox 3.5 and Safari 4 and higher).

CSS3 Pie

If it is progressive enhancement that you are looking for, and you are tired of holding off on using CSS3 due to older versions of IE, then CSS3 PIE is for you. Progressive Internet Explorer (PIE) makes Internet Explorer versions 6 through 8 capable of rendering many of CSS3′s most promising and decorative features. Currently, PIE fully or partially supports the following CSS3 features:

• Border-radius
• Box-shadow
• Border-image
• Multiple background images
• Linear-gradient as background image
• Other features are under active development

CSS3 Menu

Time for menus, don’t you think? With CSS3 Menu you can build a rounded navigation menu, without using any images or Javascript. And the fun doesn’t stop there, you can also effectively make use of the new CSS3 properties border-radius and animation. This menu works with Firefox, Opera, Chrome and Safari. The dropdown elements also work on non-CSS3 compatible browsers such as IE7+ in limited fashion, without the rounded corners and shadow effects.

CSS3 Pattern Gallery

What toolbox would be complete without some patterns and textures that you can use for your web projects. CSS3 Pattern Gallery is a growing collection of both simple, repeating textures and patterns created using pure CSS3. This is useful for reducing load time on large patterned backgrounds for websites.

CSS3 Watch

As far as CSS3 inspiration goes, CSS3 Watch is a fantastic resource that provides examples of extremely creative, innovative and at times unexpected uses of CSS3. This is a great way to kick start your outside the box thinking with regards to the style of your site.

CSS3 Power Tools Tut

And now that you have all of these great tools to play with, you need to be sure that you completely understand the elements of CSS3 that you will be creating. Enter the NetTuts tutorial, Getting to Work with CSS3 Power Tools, which is a wonderful starting point.

More on CSS3

• CSS3 Click Chart is also a great visual learning tool for CSS3
• CSS3 Cheat Sheet at Smashing
• Push Your Web Design Into The Future With CSS3

HTML5 Tools

Initializr

As generators go, Initializr is a nifty little one that specializes in creating HTML5 templates to get you started with any of your HTML5 projects. Initializr will generate you a crisp, clean fully customizable template based on Boilerplate with just what you need to get rolling.

Switch to HTML5

Making the switch over to HTML5 is one timely task that keeps many on hold, rather than moving forward, but with Switch to HTML5 that not be a bother or barrier anymore. With this tool you can generate a bare bones html5 framework, making it easy to both start new HTML5 projects or convert existing sites to HTML5. This is the first step…

HTML5 Demos

Once again, if it is a matter of inspiration you are looking to amass and creatively pour through, then HTML5 Demos should be a stop over you make soon. This is a growing collection of HTML5 experiments complete with the source code so you can see the full scope of the project.

Canvas Demos

If you want to get a little more specific for your sampling of HTML5 in use, then head over to Canvas Demos. It is home to applications, games, tools and tutorials that all use the HTML 5 canvas element which allows for dynamic scriptable rendering of bitmap images.

HTML5 Rocks

One tool that is something of a toolbox in and of itself, is HTML5 Rocks. This is Google’s full featured HTML5 resource hub including an interactive presentation, an HTML5 playground, demos and tutorials, oh my. Certainly a place worth checking out for the coding enthusiast and expert alike.

HTML5 Boilerplate

Most of our readers are probably already familiar with HTML5 Boilerplate, but we couldn’t do a toolbox post and not include this fully customizable coding base. This template base that comes ready to rock for any of your HTML/CSS/JS needs, has a reputation that precedes it when it comes to future-proofing your site. Through years of development it is ready for cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash.

HTML5 Doctor

HTML5 Doctor is a dedicated blog focused on helping you implement HTML5 today. Their archives are loaded with articles relating to HTML5, its semantics, and how to use it without delays in your current web design projects. There is also a section for submitting questions for help with your troubleshooting and more, the answers to which are posted in future articles on the blog.

Sproutcore

App developers around the web are very excited about this latest development in the field with regards to HTML5 and beyond. That is SproutCore. With their bindings system you can create your very own data-centric applications. Simply input your app details, down to your data flow specs and this resource handles the rest. These semantic templates allow you to write HTML and CSS that automatically updates with each of your alterations. With data management and syncing features to boot it is easy to see what all the excitement is about.

Dive into HTML5

Speaking of those eager to learn, Dive Into HTML5 by Mark Pilgrim is another fantastic tool that can assist you on this quest for knowledge. Here Pilgrim seeks to expand on certain features, one he has hand-picked in fact, from the HTML5 specification and other fine standards for anyone interested in bulking up on their grasp of this expansive version of this programming powerhouse.

More on HTML5

• HTML5 Cheat Sheet
• Coding A HTML 5 Layout From Scratch

(rb)

  

As we all know, a lot of complicated CSS code snippets had to be used back then when you simply wanted to achieve a rounded corner, and even had to use JavaScript for simple animations. But since the coming out of CSS3, life has become a lot easier.

In this post we provide you with a great collection you can always turn back to; whether you’re a pro and haven’t seen that particular tutorial yet, or a beginner who has newly discovered their love for CSS3. Either way, please feel free to mention tutorials that were missed out and would like to share with others.

Awesome Cufonized Fly-out Menu with jQuery and CSS3
In this tutorial you can learn how to create a full page cufonized menu that has two nice features:

Subtle CSS3 Typography That You’d Swear was Made in Photoshop
Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby!

CSS3 Minimalistic Navigation Menu
Here is a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers:

CSS3 Background-Clip: Text
To carry out the DIN typeface, a transparent PNG with letters was used to achieve that subtle yellow to blue fade animation: Click on the image to read more:

Create a Vibrant Digital Poster Design with CSS3
Follow this walkthrough of the making of Circlicious — a vibrant and abstract digital poster design made purely of HTML and CSS:

How to create a kick-ass CSS3 progress bar
In this tutorial you can learn how to create a fancy progress bar using CSS3 and jQuery, without using Flash or even images:

Colourful Rating System
In this tutorial you are going to follow a relatively simple jQuery tutorial. Rating systems are used on a lot on websites, for example on how to rate a certain product, article or comment:

Create Animated Price Grid Using CSS3
In this tutorial, an animated Price grid will be created with only the help of CSS3. No jQuery, No Images, No Flash at all:

Related Posts Slide Out Boxes with jQuery and CSS3
In this tutorial, a fixed list is created at the right side of the screen with some thumbnails sticking out:

Halftone Navigation Menu with jQuery & CSS3
In this tutorial you will find out how to create a CSS3 and jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links:

How to Create A Multi-Step Signup Form With CSS3 and jQuery
In this tutorial, a simple multi-step signup form using CSS3 and jQuery will be created. To spice things up a bit, we will include a progress bar with the form, so the users will be able to see the percentage of form completion:

Coding a Rotating Image Slideshow w/ CSS3 and jQuery
In this tutorial you are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow:

Animated Navigation Menu with CSS3
In this tutorial you will be shown how to create an animated navigation menu with CSS3:

Create Ajax Loading Animation with CSS3
Normally, frontend developers use GIF animations for Ajax data loading. But now CSS3 animation properties allow us to achieve the same Ajax loading animation effect, without GIF animation required:

Slick CSS3 Animated Image Caption
This is an experiment to create an animated image caption. You might have seen enough of this effect all over the web, but here we’re trying to achieve the same effect using CSS3 Transitions:

Create Animated Landscape using Pure CSS3
In this tutorial you’ll see how you can create a landscape effect with pure CSS3 technology:

Sticky Notes with CSS3
In thios tutorial you can see how sticky notes with CSS3 can be created:

How To Create a Sexy Vertical Sliding Panel Using jQuery and CSS3
In this tutorial you can find out how to create a sexy vertical sliding panel using jQuery and CSS3:

Display Social Icons in a Beautiful Way Using CSS3
The goal here was to slowly fade-in and fade-out the opacity changing, and animate the position of the tooltip a little bit:

Animated Wicked CSS3 3D Bar Chart
In this tutorial you can learn how to create a beautiful 3D bar chart::

3D Animation Using Pure CSS3
The perspective property is what we need to create the 3D effect. Using transform and transition, we can create 3D animations using pure CSS3:

Cross-Browser Rounded Buttons with CSS3 and jQuery
In this tutorial, a cross-browser with rounded buttons will be created with the help of CSS3 and jQuery:

Slide Down Box Menu with jQuery and CSS3
In this tutorial, a unique sliding box navigation is created. The idea is to make a box with the menu item slide out, while a thumbnail pops up:

Beautiful Photo Stack Gallery with jQuery and CSS3
In this tutorial you can learn how to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, the images of that album are shown as a beautiful photo stack:

How To Change Default Text Selection Colour
Whilst this CSS3 declaration might not be crucial to your project or design and yes it is not supported by all browsers, but it is a fantastic effect that really takes your design one step further:

Making Better Select Elements with jQuery and CSS3
Here you can find out how to build a script, one which is going to take an ordinary ‘select’ element, and replace it with a better looking, markup powered version, while keeping all the functionality intact:

CSS3 Animated Bubble Buttons
Here is a useful set of animated buttons created with the power of CSS3s multiple backgrounds and animations. No JavaScript necessary:

BounceBox Notification Plugin with jQuery & CSS3
In this tutorial you will find out how a bouncebox notification plugin can be created with jQuery & CSS3:

Use CSS3 to Create a Dynamic Stack of Index Cards
In this tutorial you can learn how to create a dynamic stack of index cards solely with the help of HTML and CSS3 features:

Interactive Image Vamp up with jQuery, CSS3 and PHP
In this tutorial, an online application for giving some funny touches to an image is created.  jQuery, jQuery UI and PHP are needed:

Contextual Slideout Tips with jQuery & CSS3
Knowing the importance of HTML standards, here is a set of contextual slideout tips with jQuery & CSS3 which are ideal for product pages and online tours:

Carbon Fiber Signup Form with PHP, jQuery and CSS3
In this tutorial you can see how you can make a carbon fiber signup form using PHP, jQuery and CSS3:

Sexy Image Effects Similar to Flash – in Pure CSS3
Here is a very different image effect that can be achieved by not only using Flash but also CSS3:

Awesome Buttons using CSS3
Here you can check out a new look to Buttons that can be adjusted in CSS3:

Getting Clever with CSS3 Shadows
As soon as we detach a shadow from the element, itself, we can then transform the shadow in interesting and creative ways. Click on the image to find out more:

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu
In this tutorial you can learn how to build a cross-browser with an awesome CSS-only drop-down mega menu, using nice CSS3 features:

Flexible, Mobile-First Layouts with CSS3
CSS3 provides a fairly rich toolset for mobile-friendly formatting, relying on the client’s browser capabilities instead of back-end templating:

CSS3 Slideup Boxes
Follow along and see how we can use a few very simple CSS3 transitions to create a “slideup” box effect:

How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery
In this tutorial you can take a look and see what can be achieved with the help of HTML5 and CSS3 as well as some jQuery:

Fancy Image Hover Using CSS3
In this tutorial you can learn how to create a fancy image hover with CSS3. As you all know, we can have cool image hover effects using jQuery. By using transform and transition properties of CSS3 we can have an even better effect:

CSS3 Dropdown Menu
Here is a Mac-like multi-level dropdown menu that can be created using border-radius, box-shadow and text-shadow:

Fun with CSS3 and Mootools
These examples came about when experimenting with the ‘extend’ property in MooTools:

Colorful Sliders with jQuery & CSS3
In this tutorial you can learn how to use jQuery and the new transformation features brought to you by CSS3 to create a three dimensional dynamic slider effect:

Coding a CSS3 & HTML5 One-Page Website Template
In this tutorial you are going to make a HTML5 web template by using some of the new features brought to you by CSS3, jQuery and the ‘ScrollTo’ plug-in:

Create a Yoyo with jQuery and CSS3
Here you can learn how to create your own yoyo with the help of CSS3 and jQuery:

How to Create Depth and Nice 3D Ribbons Only Using CSS3
In this tutorial you can learn how to create nice 3D ribbons with the help of CSS3 only:

Create a Fancy Web Form with Field Hints Using Only CSS3
Here you’ll be shown how to create a fancy web form with field hints using only CSS3:

Pure CSS Social Media Icons
This is an experiment that creates social media icons using CSS and semantic HTML:

Build a Simple Portfolio Image Gallery with CSS3
Here’s how you can use CSS3 to create a Javascript-free gallery that enlarges your images on hover:

Create Beautiful CSS3 Typography
In this tutorial, you will find out how to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3:

Old School Clock with CSS3 and jQuery
Here is an interesting tutorial on how to create an old school clock with the help of jQuery and CSS3 features:

Build Awesome Practical CSS3 Buttons
Here is a video tutorial that will show you how to build some awesome practical CSS3 buttons:

(ik)

  

With version three of CSS, many exciting features will be implemented. CSS3 leads to greater flexibility and makes it much easier to recreate previously complex effects. Many time-saving rules are being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image ,multi-column layout, etc…

Although only the most modern browsers currently support these effects, it’s still fun to see what’s around the corner!

In this post we will take a look at some interesting properties of CSS3 that you can put into practice in your website designs today.

CSS3 Color Module

CSS3 supports more color and a wider range of color definitions. The new colors that CSS3 support are HSL, CMYK, HSLA and RGBA. This powerpoint explains in details the CSS3 colors and how use them.

Gradient Borders

You can have gradient border using the -moz-border-radius / -webkit-border property.

Border Image

Sometimes usual CSS border properties are not enough. If want to use images for borders, CSS3 supports border image through border-image and border-corner-image property.

Rounded Corner Boxes

Andy budd shows us how to easily create rounded corners for any box using border-radius and background position.

Box Shadow

The css3 property box-shadow allows you to add a shadow effect without using images to a selected element. Currently Safari 3+ and Firefox 3.1 (Alpha) supports box-shadow.

Multiple background Images

If you want to add multiple background to a box or a paragraph, CSS3 allows multiple background images on one element.

Multiple Columns

This CSS3 module allows to create multi-column texts without adding table using -moz-column-count and -moz-column-width. If you have text in your web pages that runs too long this CSS3 tag could be really useful.

Text Shadow

Need a Photoshop like Text shadow? CSS3 text-shadow property allows to add a shadow to each letter of some text. Also, text-shadow is not new to CSS3, it was originally proposed in CSS2, but was removed from CSS 2.1.

Box-sizing and Box-model

CSS3 property box-sizing allows you to specify the behavior of the browser in calculating the width of an element and control if a box should be resizable.

CSS3 Opacity

Although, CSS opacity property has been around for while, When CSS3 rolls out there will be more use of the opacity property. You can set the transparency of box, image and text using the opacity property.

CSS3 Selectors

Are you Confused with all CSS3 new selectors? This article provides useful insights and explanation of CSS3 selectors.

Brilliant implementations of CSS3 Properties

Awesome Buttons with CSS3 and RGBA

You won’t believe that these button are created using CSS3 properties only without any images.

Render User Interface Using CSS3

Here is a creative example of CSS3. A mock up of OSX user interface using CSS3. Click on the image to see the working demo.

CSS3 Template Layout with jQuery Plugin

This plugin allows web designers to use the W3′s CSS Template Layout Module using jQuery.

View Demo

Using CSS3 RGBA for Transparency

If you are wondering how to achieve a transparent box like 24 ways, this article discusses RGBA which lets you specify a color as being translucent and how to use it.

Custom Font with CSS3

While there are other ways to embed font, using CSS3 for custom font will be much easier.

Creating a Polaroid Photo Viewer with CSS3 and jQuery

Web designer Marco Kuiper shows us how to create a Polaroid Gallery by combining CSS3 and JQuery.

View Demo

Example and Use of Box Sizing

This article discusses how to use CSS3 box sizing property.

CSS3 Corporate Fun

This menu mimics the pushed button when you hover by using CSS selectors.

CSS3 Links Creation and Usage

In CSS3 it is possible to mange links with more control and effectively. We can easily specify the values of various states of links which are link, visited, hover, and active states.

Tooltip with CSS3

This post discuess how to create a tooltip using :before (or :after) pseudo element combined with the :hover pseudo class.

View Demo

Styling Forms with Attribute Selectors

This example focuses on how to style web form using attribute selectors.

CSS Opacity

There are so many ways to use CSS transparency to create to make website user friendly website. You can control the opacity of the text or images that to create visually ecstatic content.

Using CSS3 Selectors to Apply Link Icon

Adding an icon next to your link is much easier with CSS3 Selectors.

Simple CSS3 rounded Corners with Support for IE

Although CSS3’s border-radius property is supported in the current versions of Safari and Firefox, Internet Explorer does not support it. However, using IE’s condition statement and image you can have cross browser nice rounded corner.

View Demo

The Shadow Effect in CSS3

CSS3 property -webkit-box-shadow creates shadow on any specified div. The Demo is Safari only.

View Demo

Must Read CSS3 Related Articles :

Six Questions: Eric Meyer on CSS3

5 Techniques to Acquaint You With CSS3

Push Your Web Design Into The Future With CSS3

So, which CSS3 feature are you excited about? Let us know in comment.

Author: Kawsar Ali

Kawsar Ali is a web designer, graphic designer, and wannabe photograper based in NY, U.S. He’s also the founder of Desizn Tech, a site for web designer and web developer. If you’d like to connect with him, you can follow him on Twitter or at his Personal Website.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.

  

The web is a perfect playground for lots of creative designers and developers. Static HTML is just boring and these days the user wants to see some more eye candy from/on the web. By using and/or combining awesome web techniques like JavaScript (and of course, jQuery), CSS(3) and Flash (or Adobe Flex) this kind of interaction can be achieved.

Since "the sky is the limit" with these techniques, the programmers can get really creative and innovative. Some really like to take it to the next level and want to show off their use of the technique, even if it doesn’t have any practical use. These Proof of Concepts are just created because they CAN. Most of them are just really for fun or just beautiful to watch.

These PoC’s (or experiments) show off some serious power and potential, but don’t have any real practical use (yet). They’re insanely cool to watch, but really seek some better use.

Blurry Background Effect

Although not a real experiment, Chris Coyier shows the use of one often forgotten CSS trick using background-attachment. When checking the demo and resizing the browser, a blurry effect is added by using two images. Simple, yet effective and this one could actually be implemented more. Sadly, I haven’t seen it anywhere (yet).

3d Monster

No: It’s not a 3d render created with fancy software that you see below. It is an actual JavaScript "monster". This wicked Javascript experiment really shows some potential of a functional 3d engine. Simply check out the demo and be amazed. The monster is growing, rotating, resizing en you have the power to have influence on it.

BallDroppings

BallDroppings is an addicting and noisy play-toy. It can also be seen as an emergence game. I first met this program while browsing some cool Mac Apps, but the JavaScript version works just as well. Balls fall from the top of the screen and bounce off the lines you are drawing with the mouse. They play a melodic sound when they bounce of the lines. Useless, yet very addictive and fun.

BoingPic

You got to love these useless JavaScript experiments. This one, from Kelvin Luck, allows you to load an image and split it to pieces. The pieces move away when hovering with your mouse, as if they are afraid. Yet another fun experiment.

BrowserBall

This JavaScript experiment has the tagline Possible More Cool Than You Think It Will Be. When I first stumbled on that page, I really didn’t know what to expect. After launching the project and creating child windows, I was absolutely stunned. This experiment allows the user to throw a ball across several windows! I’m not sure if this will ever become useful in the future, but it sure is an awesome demonstration of some JavaScript power.

BrowserTalk

Just like BrowserBall, this JavaScript experiment manipulates the windows of your webbrowser. This proof of concept is really cool, since it is a bit more interactive. First, you’ll need to enable your microphone and grant access to the app. Launch the app, speak and (or let others) be amazed.

Clock with CSS3 and jQuery

Toby Pitman saw a real good experimental use of the CSS3 rotate property. By combining this CSS3 property with some great jQuery, he managed to create a fully working old school clock in your webbrowser. Now that’s something really creative.

CSS Puzzle

It’s amazing wot CSS can do. This example of a CSS Puzzle really shows that. Walk through the maze with your mouse and be amazed. Not by how difficult the maze is, but just by keeping in mind this example is fully written with CSS without a single line of JavaScript.

DragCaptcha

This example is actually more than a regular proof of concept. This jQuery plugin could really be used. DragCaptcha is created to drag a specified icon on a certain spot to determine if the visitor is an actual human. This fun experiment is not really userfriendly (when does CAPTCHA ever become userfriendly?), but it still shows an amazing technique.

CSS Decorative Gallery

Yet another CSS Proof of Concept that really could be used in the wild. Nick La shows a simple, yet effective technique to decorate an image gallery. This trick, using only CSS and some images, could make any image gallery outstanding.

jQuery Gestures

With the coming of the iPhone and the rise of Mac OS, gestures have really become part of our lives. This example shows an image gallery that fully works on the gestures that you make with your mouse. You can even download this experiment and implement it on your own website! Sadly, this experiment isn’t that useful, still it does demonstrates an awesome technique.

CSS Gradient Text Effect

Check out this sweet little CSS trick from WebDesignerWall. Creating images from your text, just to achieve a nice gradient, isn’t very search friendly. Also, the user isn’t able to select the text. This simple proof of concept shows a way how you can change your normal headings into some fancy gradient headings. If you don’t like gradients, there also is a Grunge effect of this technique.

Simulate Gravity with jQuery

With the use of the jQuery easing methods, Gaya Kessler created a sweet Proof of Concept to simulate some actualy gravity in your webbrowser. Cut the strings and see the blocks fall down, bouncing up and down untill they stop. As you could have expect, this has no practical use (yet?), but it really adds some fun to your website.

CSS3 Hidden Messages

Craig Wilson shows an amazingly simple technique using the CSS3 selection property to hide messages on your webpage. Just read the article, check out the demo and select some text. You’ll clearly be able to see the hidden message; A great way to add sumliminal messages to your site.

CSS Image Text Wrap

This is one technique that I actually don’t really like. Not because of the crazy code you would have to write to achieve it, but just because it doesn’t look that fancy. With CSS Image Text Wrap, you can wrap your text around an image, giving the user the feeling that it’s created outside the box model. To wrap your text around an image, simply think outside the box!

jParallax

I absolutely love the parallax effect, it just gives the browser a whole new dimension. jParallax, a jQuery plugin, allows you to create this effect and act on mousemovement. Althouh some websites make use of this technique, it could be used in more ways. If you’re a MooTools lover, there also is a Mootools version: mParallax.

The Leopard Desktop

What? Placing an OS inside your webbrowser? What’s the use of that? None (just like creating the iPhone for your browser is useless fun)! It just shows the power of jQuery and brings some beauty of the OS to your browser. Harley did a great job converting a big part of the Leopard Desktop to a webpage, just to show that he can. Some parts might be useful, most parts of the tutorial are just for fun.

CSS3 3d Cubes

Did you ever thought you could create an actual 3D cube using only CSS? Paul Hayes managed to create this effect using the CSS3 transform properties. Combined with the transition property, these cubes can move too: All without the help of any JavaScript. These kind of experiments could give the web a whole new dimension.

Illusion using the Parallax effect

A great example using the CSS parallax effect to create an awesome illusion. You would simply have to check out the demo and be amazed. You can also learn how to create such an effect of your own to use in any of your future projects. There are no real practical uses that I can think of, still it’s pretty cool to see.

CSS3 Polaroid Photo Viewer

Another creative CSS3 and jQuery experiment. Although pretty cool to use when the CSS3 options aren’t enabled, the real fun of this application is the rotation of the polaroids. It simply gives you more feel, as if you’re really tossing those pictures around. Combined with a neat look, this example could be used when CSS3 will be more of a standard. For now, this is a real cool proof of concept.

Animated Cartoon Robot

The article from Anthony Calzadilla starts with Why?. Like I said in the start of this article, the answer is: Just because it can! Check out this cute little robot moving and bouncing on your script, mainly using jQuery. His detailed tutorial even explains how he created the little fella.

CSS Secret Message by scrolling

Chris Coyier once again makes the name of his website – CSS-Tricks – proud. Another kind of Secret Message, but now the user only sees the message when scrolling down. Very easy to implement and use, but not really userfriendly. Still once again showing some unique uses of CSS.

BONUS: Facebook Lens Flare

I learned this little trick from Jacob Cass. Click on the background of the Facebook website and press the following: Up, Up, Down, Down, Left, Right, Left, Right, b, a, enter, click. Check it out: An awesome lens flare! The combination of pressing the keys is the Konami Code. Useless? Kinda. Fun? Absolutely.

Do you know any proof of concepts out there that are really awesome, but aren’t on the list? Please share it with us!

Author: Marco Kuiper

Marco Kuiper is just another creative design geek that loves PHP, CSS and jQuery and is always looking for innovative things. He’s also the founder of Marcofolio.net: His blog and personal playground where he shares all kinds of stuff. If you’d like to connect with him, you can follow him on Twitter.

Write for Us! We are looking for exciting and creative articles, if you want to contribute, just send us an email.