CSS Examples & Tutorials

CSS Examples & Tutorials

Creating a polaroid photo viewer with CSS3 and jQuery

Italy. A beautiful country that my girlfriend and me visited last year during our summer holiday. While we were there, we took a lot of pictures that would look pretty nice on polaroid.

Creating accessible charts using canvas and jQuery

Data visualization in HTML has long been tricky to achieve. Past solutions have involved non-standard plugins, proprietary behavior, and static images. But this has changed with the recent growth in support for the new HTML Canvas element, which provides a native drawing API that can be addressed with simple Javascript. This article is a proof of concept for visualizing HTML table data with the canvas element.

Fullsize is an attempt to get a new <IMG> attribute called fullsize into the next version of HTML.

What is Fullsize all about?


Fullsize is an attempt to get a new <IMG> attribute called fullsize into the next version of HTML. Hopefully this site will get the attention of the W3C, and they will add fullsize to HTML and make it a standard. This is an attempt to bring something truely useful to all web developers and is by no means a completely polished idea, but rather a step in the right direction. Please visit the Fullsize Google Group to add your thoughts on how you think this idea can be improved upon.

Please vote for Fullsize at the bottom of this page and add your name to the list of those who support the Fullsize idea.

jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

Tabbed Interface or Tabbed Structure Menu is getting really famous in web design & development. This tutorial will show you how to build your own tabbed Interface using jQuery with slideDown/slideUp effect. Be sure to check out the demo, you definetely will like it.

1. Introduction

Nowadays, a lot of websites are using tab based content as a way to save spaces in a webpage. I have seen a lot of wordpress websites using a tabbed interface for its category, posts, comments and random posts content. It's a good "space-saver" and if used it correctly, it can boost your website usability as well. Right, first of all, we need to have the ideas and the design structure for this tabbed interface.

PlotKit - Javascript Chart Plotting

Below is a demo of a simple HTML Canvas example which should work in Safari 2, Firefox 1.5, Internet Explorer 6 and Opera 9. And SVG Demo can also be found.

Form field hints with CSS and JavaScript

My co-workers pointed out a nice effect on the Vox registration form. As you tab through each input field, some helper text appears in box out to the right. Try it out. Update (4/20/2007): It has been pointed out that Vox has changed their form, and it no longer uses this effect.

Vox Registration Form

It's a basic example of how helpful a little JavaScript and CSS can be in a form. Instead of the input hints always showing and potentionally cluttering a very simple form, only the hint for the currently focused input will show. This article will show a way to do this.

Syndicate content