About IdentyMe

IdentyMe is a service for making of virtual business cards. Collect all your contacts in one place and create a portfolio. Share information with new people, find new friends and business partners.

Examples of vcards on IdentyMe

Check out these examples of vcards produced by IdentyMe.

See other themes, which you can use for free with IdentyMe.

Twitter

Follow IdentyMe on Twitter (and Facebook as well).

What You’ll Be Winning

The award for the 1st winner is 2 Years Premium Account: MAXIMUM ($478 in total) and the 2nd selected winner will get 2 Years Premium Account: Plus ($142 in total).

How to Win

For a chance to win premium account on IdentyMe, simply post a comment.

Giveaway Details

The end of this giveaway is on Friday, October 24th, 2011 and after this date you won’t be able to leave a comment as the comments section will be closed. Make sure that the e-mail you write in a comment form is correct, otherwise we won’t be able to contact you if you win. You can leave only one comment. The winners will be randomly selected.

We will announce the winners of the giveaway on on a separate post and in order to be notified about the results you should to subscribe to our RSS feed. Please pay attention to the rules of leaving a comment because the comments that do not fulfill the requirements won’t be published.

Below you can find the description of its properties. Now let’s go back to the plugin itself. After connecting it, we can write things like:

$('.example').click(function() {
    $(this).animate({rotate: '+=45deg'}, 'slow');
});

Thus, when you click on the element it rotates on 45 °. You can specify the number of properties, such as:

$('.example').click(function() {
    $(this).animate({
       rotate: '+=45deg',
       scale: [1.5, 1.5] //  and zoomed it in 1.5
    }, 'slow');
});

Animation chains

The chains of animated transformations give us great opportunities to create some really cool things without using flash. But here we have two problems we can cope with and the third, a small one, which still remains.

First of all, on default jQuery has two types of easing: linear and swing. In most cases, to create beautiful animation chain linear animation is exactly what we need, but if it does not specified, jQuery will use swing. To do this we need to modify the code by adding the parameter «linear»:

$('.example').click(function() {
    $(this).animate({
       rotate: '+=45deg',
       scale: [1.5, 1.5] // // X (width) and Y(height).
    }, 'slow', 'linear');
});

I’m sure that many of you know how to make a chain animation, but I’ll explain anyway. To create animation chain we simply call the new function after describing the properties of the current animation:

$('.example').click(function() {
    var exemple = $(this);
    exemple.animate({
       rotate: '+=45deg',
       scale: [1.5, 1.5]
    }, 'slow', 'linear', function(){
                exemple.animate({
                     rotate: '+=45deg', //I remind you that the entry + = in new jQuery versions means that we add new value to  the current.
                     scale: [1.5, 1.5]
                });
       });
});

The second problem is that the browsers (except Opera) are terribly slow with the drawing of the object that we transform, if we use translate, translateX or translateY in animation chains. All browsers display the first step normally, but the second and subsequent are entirely unpredictable, right up to the skipping of animation sections.
Here’s what you get (watch it in Chrome or Firefox).

You can overcome this, all you need is to use top, left, bottom or right instead of translates:

$('.example').click(function() {
    $(this).animate({
       rotate: '+=45deg',
       scale: [1.5, 1.5] // // X (width) и Y(height).
       left: '+= 20px',
       top: '+=30px'
    }, 'slow', 'linear');
});

The final result and another example, with a flying block with text inside.

And the third problem is that IE 8.6 draws a black outline on the borders of transparency for transformations of png-images with transparency:

There is a rumor that the same thing happens with fonts, and that zoom: 1 repairs fonts. However, I’m not frustrated, because in IE9 everything is all right and a black outline of the old IE even looks stylish:) However, if anyone knows how to fix it, write!

Cool stuff, bro!

And finally, a list of CSS3 transforms’ properties and plugin bonuses:

matrix: [1, 0, 0, 1, 0, 0] – Performs 2D transformation as the transformation matrix of six values.
reflect: true — bonus feature, rotates the element on 180 °
reflectX: true — bonus, reflects it upside down
reflectY: true — bonus, simply reflects downward
rotate: ’45deg’ —rotate

skewX: ’10deg, skewY: ’10deg’, skew: ['10deg', '10deg'] — distortion in degrees. Below you can see how it looks

scale: [1.5, 1.5], scaleX: 1.5, scaleY: 1.5 – scaling

translate: ['20px ', '20px'], translateX: 20px ‘, translateY: ’20px’ – movement. Not recommended, better use left, right, top, bottom. In both cases it looks like this:

origin: ['20% ', '20%'] – used to determine a starting point for the transformation of the element. For example, when you apply rotate the starting point on default is the center of the element. But for values origin: 0 0 the upper left corner will be the starting point:

For some reason, in comments of the plugin file it is written: – transformOrigin is not accessible. But it should work. May be they simply didn’t realize it at once and then just forgot to remove the comments.

Here you can view some of these properties in action, and get cross-browser code (eg for IE 6.8)(for some reason the site does not work properly in Opera). Just keep in mind that the site does not use IE9 in which these properties are prefixed with-ms-, and replaces it-ms-filter-matrix.

You might also be interested in..

Sprite animation in CSS3
CSS3 Now! Animation, Transparency, and more
Timesaving Tools and Services for Web Developers
CSS3 Now! Transitions

Using CSS3

You can often hear many web designers say “I can’t wait, when it will be possible to use CSS3 ..”. In the meantime, you can use it today. Yes, the use of CSS3 for critical moments of the site is now impossible. But to use it to add small, non-critical parts for the project is feasible, possible and necessary.

For example: It looks really nice when the link on your site changes its color when you hover your mouse over it. Color varies greatly, with no smooth transition, but it does not affect the general appearance of the site, its usability. But the presence of a smooth transition of a color can serve as a little detail, which will make your site more vivid.

In this article we will have a look at CSS-property transition. All examples are for the webkit engine. Just below we consider cross-browser compatibility of these methods.

Transition

W3C gives the following definition of transitions:

CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.

CSS Transitions let you assign changes of CSS properties gradually and over some time period.
Let’s start with the simplest example – add a smooth transition of the reference’s background.

Demo

The classic realization:

a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

If you hover the mouse over the link the background color will change from light blue to dark blue and the font color – from black to white. The ordinary situation.

Now let’s add the smooth transition of the background using CSS transitions:

a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	-webkit-transition-property: background;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

Now our background smoothly changes its color over half a second! As with other properties of CSS, we can combine all the transition properties in one:

a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	-webkit-transition: background 0.5s ease;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

Now we’ll add a smooth changing of font color:

a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	-webkit-transition: background 0.5s ease, color 0.3s ease;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

If you hover the mouse, the following code will gradually change the background color for half a second and the font color within 0.3 seconds. If we need the same properties for all elements, we can replace

-webkit-transition: background 0.5s ease;
-webkit-transition: color 0.3s ease;

with

-webkit-transition: all 0.5s ease;

Now Transition-effect will be applied to all the changing properties of an event and with the same parameters – 0.5 seconds, ease-effect.
Also, we can add a delay to the effect:

a.foo {
	padding: 5px 10px;
	background: #69f;
	color: #000;
	-webkit-transition: all 0.5s ease;
	-webkit-transition-delay: 0.5s;
	}
a.foo:hover {
	background: #33f;
	color: #fff;
	}

Now, our animation will run in half a second after hovering the mouse.
You can apply transition property to anything – the background color, length, font size, etc. This is mainly properties that specify the color or properties that can be expressed in units of length (px, em, ex) or percentage. As an event we can also use pseudo: focus and: active. Actually – you can use the transition with any selectors.

The final summary table:

Browsers

Chrome, Safari, Opera 10.5+, Firefox 4+

In this article the rules for WebKit-browser were used with the prefix. Do not forget to add in your projects, vendors prefix -moz- and -o-. On the example page, you can spy a cross-browser code (without IE, of course).

Demo

Design a Prettier Web Form with CSS 3

Demo Download

Glowform by kaylarose

Demo Download

Clean and Stylish CSS3 Form

Demo Download

How to Create A Multi-Step Signup Form With CSS3 and jQuery

Download

Carbon Fiber Signup Form With PHP, jQuery and CSS3

Demo Download

How to Build Cross-Browser HTML5 Forms

Demo Download

Create a Stylish Contact Form with HTML5 & CSS3

Demo

CSS3 form without images and JavaScript

Demo

Beautiful CSS3 Search Form

Demo

Create a Slick CSS3 Login Form NO IMAGES ALLOWED

Demo

FormBox – A jQuery & CSS3 Drop-Down Menu With Integrated Forms

Demo Download

Fun with HTML5 Forms

Demo

Styling a Simple Form using CSS3

Demo

Designing Modern Web Forms with HTML 5 and CSS3

Demo Download

Create A Clean and Stylish CSS3 Contact Form

Demo Download

Creating a Neon Blink Effect for your Forms using CSS3 and jQuery

Demo Download

Beautiful Form With CSS3

Demo

Customizing web forms with CSS3 and WebKit

Demo

Designing Contact form in CSS3 and HTML5

Demo

Create a Clean and Stylish Login Form With HTML5 and CSS3

Demo

How to Create a Contact Form using HTML5, CSS3 and PHP

Demo Download

Free slick css form

Demo Download

HTML5 and CSS3 fancy form

Demo

HTML5 & CSS3 envelope contact form

Demo

Create an appealing form using some simple CSS3

Styling HTML5 Form Validation Errors

Demo

Designing Form in HTML5 and CSS3

Demo Download

HTML5 Form with CSS

Designing Search Boxes with HTML5 and CSS3

HTML5′s New “form” Attribute

Demo

Bonus

HTML5 formbuilder

The 11 JavaScript Mistakes you’re Making

Image Control Manipulation in JavaScript

Download

How to Speed Up Page Loading With Lazy Loading JQuery and JavaScript

Download

A Guide To Creating Forms In jQuery

Animated Scroll to Top

Demo

Adding HTML Elements Dynamically via JavaScript

Download

Analog JQuery clock

DemoDownload

Learn how to detect browser in javascript

How to get missing leading zero while conversion of number to string in javascript

Learn how to create div element dynamically by using javascript

Simple Images Slideshow With JQuery

DemoDownload

Hover Image Zoom With JQuery

DemoDownload

Create Dynamic Tabs With JQuery

Demo

Get page name from url in javascript

Create Simple One Page Profile With JQuery

DemoDownload

Limit the text length in textbox using javascript

Sliding Stacked Images With JQuery

DemoDownload

Redirection in javascript after some time delay

How to make sure your web pages are not included in other website frames

Nested Arrays in JavaScript

How to Make an Elegant Sliding Image Gallery with jQuery

DemoDownload

Drag-and-Drop with jQuery: Your Essential Guide

Demo

How to Make a Slick Ajax Contact Form with jQuery and PHP

DemoDownload

Simple JQuery Slideshow

Simple jQuery Dropdown Menu

Demo

Words Validation with Javascript

Sliding Letters with jQuery

DemoDownload

Add a splash page on your website using javascript

Grid Navigation Effects with jQuery

DemoDownload

Dynamically Change hyperlink colors on a website using javascript

Image Wall with jQuery

DemoDownload

Copy form field values using javascript

Rotating Image Slider with jQuery

DemoDownload

Moving Boxes Content with jQuery

DemoDownload

Create a grid Image Gallery that has intersecting highlights with jQuery and CSS

DemoDownload

Expanding Image Menu with jQuery

DemoDownload

Visitor counter using cookies and javascript

Detect browser close event and alert some messages using javascript

Animated Content Menu with jQuery

DemoDownload

Thumbnails Preview Slider with jQuery

DemoDownload

Thumbnails Preview Slider with jQuery

DemoDownload

Parallax Slider with jQuery

DemoDownload

How to use an External JavaScript Page

Download

Preloading images and executing code only after all images have loaded

Setting CSS3 properties using JavaScript

How To Build a Sliding Feature Slideshow with jQuery

Demo

Making a Beautiful HTML5 Portfolio

DemoDownload

Generating Files with JavaScript

DemoDownload

Shutter Effect Portfolio with jQuery and Canvas

DemoDownload

Better Check Boxes with jQuery and CSS

DemoDownload

Perkins

Perkins is a pure HTML5/CSS3 Framework created with love.
It has a simple HTML5 template including many of the supported tags, a set of LESS stylesheets and mixins for common tasks such as creating navigation, rounded corners, gradients and much more. Typography, tables, forms, buttons – are styled very elegant.

Demo Download

Inuit.css

Inuit.CSS created by Harry Roberts. This framework built to work on smaller screens straight out of the box with minimal effort. Inuit.css’ main features are fully supported even in IE6 + basic support for new HTML5 elements.

Demo Download

G5 Framework

G5 Framework based on a F Layout. Some features: base CSS & SEO, PHP active class, HTML5 placeholder fallback, sticky footer, HTML5 baseline, smooth scroll to top and very clean organization.

Download

52framework

52framework first HTML5/CSS3 framework created by enavu network.

Demo Download

Less Framework 4

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid. Changes in Version 4: new 992 px default desktop layout, new grid with 68 px columns, more type presets.

Download

Baseline

Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. Baseline was born to be a quick way to prototype a website and grew up to become a full typographic framework for the web using “real” baseline grid as its foundation.

Download

CSS3 Action Framework

CSS3 Action Library aims to gather all the best CSS3 effects in one place.
Today the number of browsers who supports CSS3 is growing , CSS3 in many cases can be used like Java Script replacement and can contribute to better browsing experience.

Demo Download

Baker 2.0

Baker is an HTML5 ebook framework to publish on the iPad & iPhone using open web standards

Download

Roots WordPress Theme Framework

Roots is a starting WordPress theme made for developers that’s based on HTML5 Boilerplate, Blueprint CSS (or 960.gs) and Starkers that will help you rapidly create brochure sites and blogs.

Download

Popcornjs.org

Popcorn.js is an event framework for HTML5 video that provides a simple API for synchronizing interactive and immersive content. Popcorn.js utilizes the native HTMLMediaElement properties, methods and events, normalizes them into an easy to learn API, and provides a plugin system for community contributed interactions.

Download

Gravity

Gravity is a SASS based framework for making powerful, easily maintainable HTML5 websites. It helps you rapidly prototype your ideas and will generally make your life much easier.

Download

The M Project

HTML5 JavaScript framework for cross-platform mobile apps. Some features: MVC HTML5, JavaScript- all development cycle, offline support (automatic cache manifest generation), rich user interfaces, DataProvider for local and remote storage persistence, internationalization (i18n), open source (MIT License), NodeJS based build tools (called Espresso).

Download

HTML5boilerplate

Along with HTML5 Boilerplate’s rock solid commitment to cross-browser consistency, H5BP brings you delicious documentation, a site optimizing build script, and a custom boilerplate builder. In addition to this, we now support lighttpd, Google App Engine, and NodeJS with optimized server configurations (along with Apache, Nginx, and IIS) and we’ve reduced the overall size of the published boilerplate by 50%.

Download

HTML5 Multimedia Framework for WordPress

HTML5 Multimedia Framework is designed to be a highly customisable plugin for wordpress that comes with MediaElement.js. The framework currently support mp4(h.264,aac), ogg(theora,vorbis), mp3(audio only) and also webm (vp8,vorbis). It can also support wmv, flv and wma while MediaElement.js is enabled.

Download

LimeJS

LimeJS is a HTML5 game framework for building fast, native-experience games for all modern touchscreens and desktop browsers.

Download

Global interface

Firstly we should think over the interface of our framework. Let’s name it Canvas Framework, abbreviated – CF. It will be a global variable-a factory for the instance creation. With the first argument we are going to pass a link for the necessary item:

var cf = new CF('#my-canvas');

The realization is simple:

window.CF = atom.Class({
	initialize: function (canvas) {
		this.canvas = atom.dom( canvas ).first;
		this.ctx    = this.canvas.getContext('2d');
	}
});

Then we can create other objects with the help of this construction:

cf.circle([50, 50, 10] , { fill: 'red' , hover : { fill: 'blue' } });
cf.rect ([10, 10, 20, 20], { fill: 'green', hover : { fill: 'blue' } });

To make it easier all objects will have drag and drop function and will respond to mouse’s movements.

Shapes’ realization

Now we need to define the basic class of the shapes.

// Abstract class of the shapes
var Shape = atom.Class({
	Implements: [ atom.Class.Events, atom.Class.Options ],

	cf   : null,
	data : null,
	hover: false,

	path: atom.Class.abstractMethod,

	initialize: function (data, options) {
		this.data = data;
		this.setOptions( options );
	},

	hasPoint: function (x, y) {
		var ctx = this.cf.emptyCanvas.ctx;
		this.path( ctx );
		return ctx.isPointInPath(x, y);
	},

	draw: function () {
		var ctx = this.cf.ctx, o = this.options;
		this.path( ctx );
		ctx.save();
		ctx.fillStyle = this.hover ? o.hover.fill : o.fill;
		ctx.fill();
		ctx.restore();
	}
});

You can see that we need an emptyCanvas – it will be a hidden Canvas, in which we will draw our paths, in order not to break the path of the “main” canvas. Let’s renew the CF constructor:

window.CF = atom.Class({
	initialize: function (canvas) {
		[...]
		this.emptyCanvas = atom.dom.create( 'canvas', { width: 1, height: 1 }).first;
		this.emptyCanvas.ctx = this.emptyCanvas.getContext('2d');
	}
});

Each of the following shape will have to implement only the path method. Let’s add a couple of shapes – Rectangle and Circle.

// circle.data == [x, y, radius]
var Circle = atom.Class({
	Extends: Shape,
	path: function (ctx) {
		ctx.beginPath();
		ctx.arc( this.data[0], this.data[1], this.data[2], 0, Math.PI * 2, false );
		ctx.closePath();
	}
});

var Rect = atom.Class({
	Extends: Shape,
	path: function (ctx) {
		ctx.beginPath();
		ctx.rect.apply( ctx, this.data );
		ctx.closePath();
	}
});

The next thing we need to do – is to initialize the Mouse. We subscribe to the event mousemove Canvas element, and we will remember the cursor position. The mouse will receive items Shape, will check them, change the hover and cause events mousedown and mouseup. You can see that we are faced with a little cross-browser problem – code layerX / Y is not available in Opera and it is necessary to use offsetX / Y. It is not that critical, but it is important to know about it.

var Mouse = atom.Class({
	x: 0,
	y: 0,
	initialize: function (canvas) {
		this.elements = [];
		canvas.bind({
			mousemove: this.move.bind(this),
			mousedown: this.fire.bind(this, 'mousedown'),
			mouseup:   this.fire.bind(this, 'mouseup'  )
		});
	},
	add: function (element) {
		this.elements.push( element );
	},
	move: function (e) {
		// Then we will uselayer*, but further you’d better do it in a more secure way
		if (e.layerX == null) { // opera
			this.x = e.offsetX;
			this.y = e.offsetY;
		} else { // fx, chrome
			this.x = e.layerX;
			this.y = e.layerY;
		}

		this.elements.forEach(function (el) {
			el[i].hover = el[i].hasPoint(this.x, this.y)
		}.bind(this));
	},
	fire: function (name, e) {
		this.elements.forEach(function (el) {
			if (el.hasPoint(this.x, this.y)) {
				el.fireEvent(name, e);
			}
		}.bind(this));
	}
});

// then we add mouse to the constructor:
window.CF = atom.Class({
	initialize: function (canvas) {
		[...]
		this.mouse = new Mouse( this.canvas );
	}
});

Now we need to make a canvas update.

window.CF = atom.Class({
	initialize: function (canvas) {
		[...]
		// 25 fps
		this.update.periodical( 1000/25, this );
	},

	update: function (shapes) {
		this.ctx.clearRect(0,0,this.canvas.width, this.canvas.height);
		this.elements.invoke('draw');
	}
});

On the next step we edit our global object so that we could create elements:

window.CF = atom.Class({
	[...],
	elements: [],
	_shape: function (Class, args) {
		var e = new Class(args[0], args[1]);
		this.mouse.add( e );
		this.elements.push( e );
		e.cf = this;
		return e;
	},
	circle: function (data, options) {
		return this._shape(Circle, arguments);
	},
	rect: function (data, options) {
		return this._shape(Rect, arguments);
	}
})

That’s it, let’s create our application:

var write = function (msg) {
	atom.dom.create('p').text(msg).appendTo('body');
};

var cf = new CF('canvas');

cf.circle([50, 50, 10]    , { fill: 'red'  , hover : { fill: 'blue' } })
	.addEvent('mousedown', write.bind( window, 'circle mousedown' ));

cf.rect  ([10, 10, 20, 20], { fill: 'green', hover : { fill: 'blue' } })
	.addEvent('mousedown', write.bind( window, 'rect   mousedown' ));

Demo

Conclusion

In fact, frameworks are much more than described in this article. For example, the described example can be implemented to the absolutely positioned canvas only; also, there are a lot of optimizations, nuances, etc. It is necessary to adjust the fps for the application, update the canvas only when there are some changes, do not update the status when moving the mouse, but before the drawing, etc. It is a difficult and laborious work. Better to use something readymade, than to implement them from scratch.
By the way, there is an alternative way – use map + area. It has its advantages and disadvantages. It is difficult to synchronize and, most importantly, the inability to implement more complex shapes.

1md.be

agent8ball.com

andrewshanley.co.uk

animowane.pl

aprendizdefeiticeiro.com.br

arno.hoog.ma

awesomeville.com

axvisual.com

az-trustee-sales.com

benthebodyguard.com

birrificioirpino.it

black-meridian.com

brasseriegerard.co.uk

chefdeprojetinternet.com

chicowebdesign.com

clivemoore.ca

concrete5.org

coolendar.com

crackpixels.com

cumplice.net

danielscholten.com

depot.freeagentcentral.com

designlabcph.com

devstars.com

diablo3.be

edgarleijs.nl

eend.nl

effectlab.gr

empirestaterecordings.com

evakipler.com

faciodesign.co.uk

festivalmundo.com.br

ffpbooth.com

floridaafterseven.com

frederickindoor.com

gabereiser.com

gaga-debki.pl

goup.it

greatblueheron.tumblr.com

griottes.fr

humaan.com.au

lagentehadichosi.es

lesjardinsdaglaee.com

lifefroots.com

lilaccreative.com

livid-media.de

localmotive.ca

maartenkal.com

mat-t.com

mckinney.com

newadventuresconf.com

ourswisslife.com

owainlewis.com

pingodeleite.com

piotrkwiatkowski.co.uk

pumpkin-king.com

robedwards.org

singleframedesign.co.uk

studiopygmalion.cz

symb.ly

thesquad.com.au

trafic-factory-referencement.fr

triversecentre.com

virtuti.info

vtech.trefl.com

wakwaw.com

wantist.com

webdesignerwall.com

withoutyouitsjustnot.us

xhtmlized.com

Color Palette Generator

Enter the URL of an image to get a color palette that matches the image. This is useful for coming up with a website color palette that matches a key image a client wants to work with.

Color Blender

ColorBlender – free online tool for color matching and palette design.

Color Hunter

Color Hunter is a place to find and make color palettes created from images.

Color Scheme Designer

Pick your main color and then you can determine other colors you’d like to use, like compliments or triads. It also gives you examples of real world applications.

Color Schemer

Enter an RGB or HEX value, or click on the Color Palette below.

Combo Maker

Generate Color Palette Images to Share.

Generate It!

Color Scheme Generator is a HTML and RGB color code generator that will show you how to match your web site colors and will save you time when choosing a web site color scheme or color code. Easily find out what color matches, specify the main color by entering red green and blue values between 0 and 255 or by entering a hex color code.

Kuler

Adobe® Kuler™ — the web-hosted application for generating color themes that can inspire any project. No matter what you’re creating, with Kuler you can experiment quickly with color variations and browse thousands of themes from the Kuler community.

Border Radius

This is a simple radius generator. just enter the border radius for each corner!

Button Maker

From CSS-Tricks with love! Lets you create custom CSS3 buttons with gradients.

CSS3 Gradient Generator

Nice tool for generating css3 code of your custom gradient.

CSS3 Sandbox

CSS3 Sandbox can generate linear gradients, radial gradients, text properties, box properties, and transforms.

CSS3 Generator

CSS3 Maker

CSS Maker is a free tool to experiment with CSS properties and values and generate a simple stylesheet for your site.

CSS3 Please

You can edit the underlined values in this css file, but don’t worry about making sure the corresponding values match, that’s all done automagically for you.

CSS Typeset

Paste in text you want to modify, and then use the options at the bottom to customize it and it will generate the CSS in real-time.

Navigation Tabs Generator

Primer

Primer undercoats your CSS by pulling out all of your classes and id’s and placing them into a starter stylesheet. Paste your HTML in to get started.

BG Patterns

BgPatterns is a tiny web app for making background patterns in a few clicks. It was created mostly for fun and experimentation by Sergii Iavorskyi.

CSS Menu Maker

Explorer our gallery of professionally designed CSS Menus. Personalize your menus features with our easy to use Menu Maker. Download the HTML, CSS, and Images for your custom menu in a nice neat package.

Dotted Background Generator

This generator lets you create dotted, half-tone style backgrounds.

Php Form

Create HTML Form in Seconds!

Pure CSS Menu

This site lets you create a menu with dropdowns that only uses CSS, no images. It’s simple, but it’s also quick to set up.

Stripe Generator 2.0

Play with sliders and color pickers, untill you obtain a super-cool stripe tile!

Striped Backgrounds

Striped Backgrounds creates boldly-striped backgrounds in any resolution.

Stripe Mania

Stripemania is a simple and free web 2.0 tool to create seamless diagonal stripes for your designs. You are able to choose the size of the stripes and the spacing between those. You can even add color gradient effect for all of your stripes.
Feel free to play with it. You are allowed to use the created image for whatever you would like to.

Tabs Generator

Tweak size, colors, corners and more, generate your design, then download and use in your css style sheet!

Tartan Maker

Text generator

Tired of using Lorem Ipsum for dummy text in your latest masterpiece?
This text generator has been developed based on years of careful research and is guaranteed to improve even the most lacklustre of designs.

Type Tester

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

1kb Grid

The 1KB CSS Grid is a lightweight approach to creating a grid system. Simply select the number of columns you want, the column width and gutter width and your sorted!

Blueprint Grid CSS Generator

This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files.

Yaml

Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

Colorotate

Browse color palettes, or create your own!

Grid System Generator

The grid system generator will create custom grid systems in valid css / xhtml for rapid prototyping, development and production environments.

Templatr

Templatr is simple generator for creating quick WordPress layouts.

Variable Grid System

The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.

WordPress Theme Generator

This online generator creates your own custom unique WordPress Theme. Without any need for HTML, JS, PHP, or CSS knowledge.
Change the colors, settings, layout, preview live, click “save” and download your unique WordPress theme zip-file.

Cool Text

Cool Text is a FREE graphics generator for web pages and anywhere else you need an impressive logo without a lot of design work. Simply choose what kind of image you would like. Then fill out a form and you’ll have your own custom image created on the fly.

Lorem-Ipsum

My Cool Button

Official Seal Maker

Enter some text, choose a border and an emblem, pick your colors, and click the ‘Go’ button. An Official Seal will be generated for you. Collect ‘em, trade ‘em, put ‘em on your website, or e-mail ‘em to your friends.

Quick Ribbon

QuickRibbon is a completely free Web2.0 tool, a website ribbon generator which lets you create a custom ribbon, insert a link in it and place it in the top right corner of your website. It will take you less than 5 minutes to generate your own website ribbon with this trendy widget and add a stylish Web2.0 look to your page – it’s quick, easy and fun. We recommend using our QuickRibbon tool to attract your site’s visitors attention to new features, announcements, sales, etc. Get rid of the boring banners and make your news stand out with a style.

Rounded Cornr

Generate HTML/CSS code and images for rounded corners.

Web 2.0 Badges

They are probably one of the most popular trend in Web 2.0 time. It’s most over-used trendy little design technique in our days, they immediately attract visitor’s attention. Web badges have various round or square corners and eye-catchy colours.

Web 2.0 Free Logo Generator

Web 2.0 Stylr

Enter your text, select your options and you have a logo! You can also “sign” your masterpiece to give yourself some well deserved credit!

Web Form Factory

Web Form Factory is an open source web form generator which automatically generates the necessary backend code to tie your form to a database. By generating the backend code for you, WFF saves you time… time you could spend doing more interesting stuff.

Those who are impatient can find the result of the experiment here, as well as a screenshot of the final result:

The progress bar has turned out pretty simple, but at the same time, in the style of Web 2.0 – round (of course!), with elements of depth and volume: that is, shadows and gradients.

Substrate

Let’s start with a substrate, which will be filled with progress. We are going to round the angles of the rectangle with the help of arc () function, so in this case the rectangle will always be rounded at the angles in a way of semicircles. To create an arbitrary rounding (as when using a border-radius) it is sufficient to use two Bezier curves (Bezier and quadratic curves) and direct interval between them (degenerating to a point in a semicircle, as in our case). Thus, the function of creation of the substrate’s filled outline will look in the following way:

function roundRect(ctx, x, y, width, height, radius) {
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + width - radius, y);
    ctx.arc(x+width-radius, y+radius, radius, -Math.PI/2, Math.PI/2, false);
    ctx.lineTo(x + radius, y + height);
    ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false);
    ctx.closePath();
    ctx.fill();
}

Then we add shadows and volume to the substrate. Create volume using a linear gradient with three stops, the shadows – with the standard properties of the context:

function progressLayerRect(ctx, x, y, width, height, radius) {
    ctx.save();
    // Define the shadows
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    ctx.shadowBlur = 5;
    ctx.shadowColor = '#666';

     // first grey layer
    ctx.fillStyle = 'rgba(189,189,189,1)';
    roundRect(ctx, x, y, width, height, radius);

    // second layer with gradient
    // remove the shadow
    ctx.shadowColor = 'rgba(0,0,0,0)';
    var lingrad = ctx.createLinearGradient(0,y+height,0,0);
    lingrad.addColorStop(0, 'rgba(255,255,255, 0.1)');
    lingrad.addColorStop(0.4, 'rgba(255,255,255, 0.7)');
    lingrad.addColorStop(1, 'rgba(255,255,255,0.4)');
    ctx.fillStyle = lingrad;
    roundRect(ctx, x, y, width, height, radius);

    ctx.restore();
}

Two layers are being used here – the lower solid gray and the top white with gradients of transparency. In my opinion it provides more precise boundaries of the substrate and looks more realistic, in any case you can always experiment with all the color settings.
If everything was done correctly, you will get something like this:

Progress bar

Now let’s move to the creation of progress that will fill the substrate. Progress – it’s the same rectangle with rounded angles, it only has a different color.
But it has a special feature that differs it from the substrate and which should be taken into account in drawing – when the width of the progress is less than the radius of rounding and when the width is greater than the length of the substrate minus radius. In this case it is necessary to determine the angles of rounding’s drawing and the position of chord of circle, all the calculations can be made with the help of geometry course, see the picture below:

Plus we add the shadow on the right angle of the progress to attach the volume effect.
At the end we get the following drawing code of the progress:

function progressBarRect(ctx, x, y, width, height, radius, max) {
    // deplacement for chord drawing
    var offset = 0;
    ctx.beginPath();
    if (width<radius) {
        offset = radius - Math.sqrt(Math.pow(radius,2)-Math.pow((radius-width),2));
        // Left angle
        var left_angle = Math.acos((radius - width) / radius);
        ctx.moveTo(x + width, y+offset);
        ctx.lineTo(x + width, y+height-offset);
        ctx.arc(x + radius, y + radius, radius, Math.PI - left_angle, Math.PI + left_angle, false);
    }
    else if (width+radius>max) {
        offset = radius - Math.sqrt(Math.pow(radius,2)-Math.pow((radius - (max-width)),2));
        // Right angle
        var right_angle = Math.acos((radius - (max-width)) / radius);
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + width, y);
        ctx.arc(x+max-radius, y + radius, radius, -Math.PI/2, -right_angle, false);
        ctx.lineTo(x + width, y+height-offset);
        ctx.arc(x+max-radius, y + radius, radius, right_angle, Math.PI/2, false);
        ctx.lineTo(x + radius, y + height);
        ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false);
    }
    else {
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + width, y);
        ctx.lineTo(x + width, y + height);
        ctx.lineTo(x + radius, y + height);
        ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false);
    }
    ctx.closePath();
    ctx.fill();

    // shadow on the right
    if (width<max-1) {
        ctx.save();
        ctx.shadowOffsetX = 1;
        ctx.shadowBlur = 1;
        ctx.shadowColor = '#666';
        if (width+radius>max)
            offset = offset+1;
        ctx.fillRect(x+width,y+offset,1,total_height-offset*2);
        ctx.restore();
    }
}

Here, unlike the previous function, we don’t save and renew the context as in case with the substrate, because we are going to define context’s global attributes for the progress.

Text of the progress

Now we add the text that will display the state of progress in per cent. If the length of the text is less than the length of the progress, text will be placed directly at the right angle of the progress, otherwise it will be on the left angle of the progress. To measure the text length we use measureText() function:

function progressText(ctx, x, y, width, height, radius, max) {
    ctx.save();
    ctx.fillStyle = 'white';
    var text = Math.floor(width/max*100)+"%";
    var text_width = ctx.measureText(text).width;
    var text_x = x+width-text_width-radius/2;
    if (width<=radius+text_width) {
        text_x = x+radius/2;
    }
    ctx.fillText(text, text_x, y+22);
    ctx.restore();
}

Full-fledged progress indicator

Now we need to unite all the parts together and define the animation that will fill the progress from 0 to 100%. To create the animation we use sеtInterval() and clearInterval() functions:

// Define the size and position of indicator
var i = 0;
var res = 0;
var context = null;
var total_width = 300;
var total_height = 34;
var initial_x = 20;
var initial_y = 20;
var radius = total_height/2;

window.onload = function() {
    // Get the canvas element
    var elem = document.getElementById('myCanvas');
    // Check the canvas support with the help of browser
    if (!elem || !elem.getContext) {
        return;
    }

    context = elem.getContext('2d');
    if (!context) {
        return;
    }

    // Text’s font of the progress
    context.font = "16px Verdana";

    // Gradient of the progress
    var progress_lingrad = context.createLinearGradient(0,initial_y+total_height,0,0);
    progress_lingrad.addColorStop(0, '#4DA4F3');
    progress_lingrad.addColorStop(0.4, '#ADD9FF');
    progress_lingrad.addColorStop(1, '#9ED1FF');
    context.fillStyle = progress_lingrad;

    // Create the animation
    res = setInterval(draw, 50);
}

function draw() {
    // augment the length on 1 for every iteration
    i+=1;

    // Clear the layer
    context.clearRect(initial_x-5,initial_y-5,total_width+15,total_height+15);
    progressLayerRect(context, initial_x, initial_y, total_width, total_height, radius);
    progressBarRect(context, initial_x, initial_y, i, total_height, radius, total_width);
    progressText(context, initial_x, initial_y, i, total_height, radius, total_width );
    // stop the animation when it reaches 100%
    if (i>=total_width) {
        clearInterval(res);
    }
}

That’s all, now all we need is to put javascript code in script tag, and in body document we should add:

<canvas id="myCanvas" width="500" height="150">Your browser does not have support for canvas.</canvas>

The link for the final result: http://pastehtml.com/view/1d7z824.html

Inset Shadow

The thing is that there is no such tools for creation of the inset shadow in canvas as easy as in CSS, and the essence of the method described above is in using the «Opposite winding» technique that also can be used in canvas.
And finally, I prepared another style of the substrate that can be created with the help of inset shadow, in this case the substrate will be sunken inside. The original idea was taken here: http://weblog.bocoup.com/can-i-draw-an-inset-shadow-with-the-html5-canvas-api

To reach the desirable effect first you need to draw an inset shadow, you will first need to punch the shape of your hole in a clockwise direction, onto a large square being drawn in an anti-clockwise direction. Once you have done this, it’s simply a matter of adding your shadow parameters to the Canvas context. To get the inset shadow effect we need to create a new function roundInsetRect() and to modify progressLayerRect() function in the following way:

function roundInsetRect(ctx, x, y, width, height, radius) {
    ctx.beginPath();

    // draw the outward rectangle in an anti-clockwise direction
    ctx.moveTo(1000, 1000);
    ctx.lineTo(1000, -1000);
    ctx.lineTo(-1000, -1000);
    ctx.lineTo(-1000, 1000);
    ctx.lineTo(1000, 1000);

    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + width - radius, y);
    ctx.arc(x+width-radius, y+radius, radius, -Math.PI/2, Math.PI/2, false);
    ctx.lineTo(x + radius, y + height);
    ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false);
    ctx.closePath();
    ctx.fill();
}
function progressLayerRect(ctx, x, y, width, height, radius) {
    ctx.save();
    // define the shadows
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    ctx.shadowBlur = 5;
    ctx.shadowColor = '#666';

     // first gray layer
    ctx.fillStyle = 'rgba(189,189,189,1)';
    roundRect(ctx, x, y, width, height, radius);

    ctx.fillStyle = 'white';
    roundInsetRect(ctx, x, y, width, height, radius);

    ctx.restore();
}

Here you can see the way it will look: http://pastehtml.com/view/1d80e6t.html