The growth and popularity of Wordpress continues to spiral to a seemingly endless end. It continually proves itself time time and again that it has very few limitations, and is rapidly pushing itself to being, if not the best, but certainly the most versatile CMS available. Out of the box it is certainly not perfect, but in the hands of the huge WP community, it might just be.

In this article we have collected 45 fresh Wordpress tutorials and techniques, with some hacks, guides and best practices thrown in for good measure. Everyone, not just developers, should take something from this round-up.

Complete Theme Design Tutorials

How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial

In detailed 11 individual lessons this tutorial will show you how to build a powerful, up-to-date, SEO friendly WordPress theme from scratch. At the end of the tutorial, with code in hand, you’ll be able to do almost anything you want. You can even think of the finished Theme as your own personal website development framework for WordPress.
How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial »

Custom WordPress Homepage with Customizable Widgets

In this Tutorial, you’ll learn how to build a Custom homepage for your WordPress Theme using Page Templates: Complete with a featured content slider, and customizable Widgets.
Custom WordPress Homepage with Customizable Widgets »

How to Build a Custom Wordpress Theme from Scratch

This tut shows the process of how to build a custom Wordpress theme, from design concept through to completed theme. You will see how the static design is split up into the various Wordpress theme files, and discover how the simple PHP snippets can add that dynamic functionality of a blog.
How to Build a Custom Wordpress Theme from Scratch »

WordPress Theme from Scratch

The tutorial series “WordPress Theme from Scratch” teaches you how to build a WordPress theme, starting with the initial design in Photoshop, converting it to HTML and finally splitting everything into the various WP theme files.
WordPress Theme from Scratch »

How to Create a Theme Development Environment for a Live WordPress Site

Any good website owner knows that they need to be constantly looking at ways to improve their site even through small little tweaks. If you’re using Wordpress you’ll notice that it isn’t easy to create a development version without creating a separate installation. Of course, you can make changes directly on a live WordPress site but that isn’t recommended for anything other than minor tweaks.
With the help of an excellent plugin for WordPress called Theme switch and preview, this tutorial will allow you to easily switch between the live site and development versions using two different themes on the same installation of WordPress.
How to Create a Theme Development Environment for a Live WordPress Site »

How To Design A Clean and Minimal Portfolio Website

Creating a clean and minimal design can be a difficult thing to master – if you make things too minimal you can end up with a very bare looking design that lacks substance. However, if you can get the balance right you’ll have a design that looks both classy and professional.
This tutorial demonstrates that you don’t need to use lots of fancy effects and fonts to create a clean design – it can still look professional without overdoing things.
How To Design A Clean and Minimal Portfolio Website »

Begginer Wordpress Tutorials

Your New Wordpress Website Step By Step. Beginner’s Guide

First of all and when starting on a website, you should understand that WordPress is not just some place where you can post just any kind of updates. This is an amazing content management system that can be used to create any type of website of any complexity. What you usually see online is the 10% usage of the WordPress functionality and capabilities while most possibly you’ll be using only 5% if you just plan to post news from time to time.
Your New Wordpress Website Step By Step. Beginner’s Guide »

WordPress Template Hierarchy and Conditional Comments

WordPress’s popularity and usefulness as a multi-purpose content management system, continues to grow, and the more people flock to using this CMS the more an understanding of some of the basics of how it operates becomes necessary.
Technically you only need two files for a WordPress theme to work, index.php and style.css.
However, if you would like to make your theme a bit more unique and have some variance in the way different content is presented, you will want to use some other template pages. Now this is where the hierarchy comes into play, because WordPress runs off a Template Hierarchy.
WordPress Template Hierarchy and Conditional Comments »

The Essential Elements of your First Wordpress Design Site

In this article they discuss the key points you need to cross off, if you wish to setup your own design site. They discuss finding your design sites niche, which plug-ins are the best to use and how to setup your brand image.
The Essential Elements of your First Wordpress Design Site »

General Wordpress Tutorials

Declare Multiple Widgetized Areas

Do you have a bunch of different areas you wish to declare as a widgetized area? Save repetative code by creating a quick array of their names, then loop through that array calling the register_sidebar() function on each one.
Declare Multiple Widgetized Areas »

Creating Helpful and Effective Wordpress Archives

It seems that once a post has served its initial use for us, that we carelessly discard it to the forgotten areas for the post to die, rather than institute an accessible archive that will allow those past posts to continue to deliver the punch you packed within.
In this post, they offer some great pointers on creating a quality archive section for your blog that will serve as an inspired homage to the awesome content that it contains.
Creating Helpful and Effective Wordpress Archives »

How to Create an Author Info Section in Wordpress

It’s common to find an author’s credit and bio at the end of a blog post, especially on blogs that post content from multiple writers. Using a cocktail of Wordpress template tags, an info section can be easily put together to showcase the author’s Gravatar profile image, their name, link to their website and short bio.
How to Create an Author Info Section in Wordpress »

How To Make a WordPress Events List

An events list is just what you would expect; a list of upcoming events, ordered by the date they are taking place on (Not the date they were written on!).
In this post, you are going to create our own events list that will let us add events simply by writing posts and assigning them to an “Events” category.
How To Make a WordPress Events List »

WordPress query_posts Tips

The query_posts command is one of the most useful in all of WordPress. It is this command that allows all the content to be queried (extracted from the database) and then displayed by the loop. It’s powerful because it gives an incredibly flexible method for retrieving and filtering the posts and pages in pretty much any way you can imagine.
At its most basic you can use query_posts to grab just the single latest post, or to get the latest 100 posts. At its most complex you could select a random collection of the posts that a specific blog author has posted in a collection of site categories with a specific tag
WordPress query_posts Tips »

Advanced Wordpress Comment Styles and Tricks

What you will do first is create a custom comment callback that allows you to specify the way the comments are output, then lay out the structure for the comment list and reply form, add extra functionality such as author-only styles, implement comment subscription options and spam protection, and, finally, we’ll add nice CSS styling to everything we’ve done.
Advanced Wordpress Comment Styles and Tricks »

Display Google Docs spreadsheets in Wordpress

The first part of this tutorial shows a unique method for displaying tabular data, by cooking up a simple CMS using a little PHP, jQuery, HTML and Google Spreadsheets. The second part explains how it can be integrated into Wordpress.
Display Google Docs spreadsheets in Wordpress »

Showing Random Posts In WordPress

There are a lot of plugins you could use to show random posts, but why use plugins when it’s so simple to do it with just a little bit of coding. Here is how to do it.
Showing Random Posts In WordPress »

Show Your Top Contributors Without a Plugin

Do you ever wished to be able to list your top contributors without using a plugin? Simply paste this code where you want your top contributors to be displayed.
Show Your Top Contributors Without a Plugin »

Highlight Wordpress Category when on a Single Post

By adding a small piece of code to a plug-in, and by following these basic steps you should be able to get your categories highlighted when on a single post.
Highlight Wordpress Category when on a Single Post »

How to Split WordPress Content Into Two or More Columns

WordPress is a great CMS, but implementing some features within your theme can require a little lateral thinking. The content for your page or post is usually output by the theme code using a single function call: the_content(args);
But what if you need to split the content into two or more blocks? That might be necessary if your theme requires multiple columns or sections on the page.
How to Split WordPress Content Into Two or More Columns »

Make Shortcodes User-Friendly

Since WordPress 2.5, Shortcodes has proven to be a powerful features that allows for flexibility and customization. However, as with anything that has the word “code” in it, shortcodes are not very user friendly. For people who are used to using WYSIWYG, shortcode usage can be confusing sometimes. This article shows you how to make shortcodes in your themes and plugins more accessible and user friendly.
Make Shortcodes User-Friendly »

Advanced Power Tips for WordPress Template Developers

This article covers the WP topics: multiple column content techniques and associating pages with post content; discusses how to use the “More”-tag, hide standalone categories from the category list and retain the page layout for post views within a category page.
Advanced Power Tips for WordPress Template Developers »

WordPress functions.php Template with 15 Essential Custom Functions

When designing WordPress themes, it can be helpful to add some custom functions to the theme’s functions.php file. This speeds up development time because you won’t have to hunt for and individually copy the same slew of functions for every theme. Just drop in a copy of this functions.php template and build up from there. This takes care of all those little things that always need to be done.
WordPress functions.php Template with 15 Essential Custom Functions »

Control your own WordPress Custom Fields

Custom fields are really flexible. However, they’re not perfectly user-friendly. For instance, if no post or page is currently using a custom field that you’ve built functionality on, the user has to enter the name as well as the value of the field the first time it’s used. The drop-down of field names is dynamically gathered from the fields currently in use. Also, sometimes you want to make things easier for clients by having inline tips, and inputs that suit the field (e.g. a checkbox or select drop-down instead of just a plain text entry).
Control your own WordPress Custom Fields »

Ajax, Javascript and Wordpress

How to implement Ajax in WordPress Themes

AJAX(Asynchronous JavaScript And XML) as we all knows is a very democratic technology in web development that allows a web page to update the content without page reload or refresh.
And this tutorial you will be shown how you can implement Ajax in your WordPress themes.
How to implement Ajax in WordPress Themes »

5 Tips for using AJAX in WordPress

AJAX is used in many WordPress themes and plugins. However, not all of those themes and plugins implement AJAX properly. This article reveals 5 best practices in developing AJAX for WordPress.
5 Tips for using AJAX in WordPress »

Dynamic jQuery Feature Post Slider For Wordpress

What this slider does is dynamically display posts from the ‘Featured’ category, using the easySlider jQuery plugin. It’s fairly easy to do, and adds a nice animated and dynamic feature to your site.
Dynamic jQuery Feature Post Slider For Wordpress »

Images and Thumbnail Tutorials

Automatic Wordpress Thumbnail Without Custom Field

Let’s say you want to show thumbnails in your blog’s front page. A lot of blogs do that now and it’s a good way of making the page look more alive.
The only problem though is that using custom fields can be complicated and time-wasting. This post will show you how to make your theme generate thumbnails automatically, based on your post’s first image.
Automatic Wordpress Thumbnail Without Custom Field »

Add Thumbnails to Wordpress with Custom Fields

In this tutorial, you will be shown how you can easily add thumbnails, lead image, and other extras to individual posts in Wordpress. These images can be shown on the front page, archives, search pages, etc – but appear outside of the content, giving you full control of their placement and style.
Add Thumbnails to Wordpress with Custom Fields »

Post image the easy peasy way

One of the best ways to liven up a blog, and something that most of the premium themes look to do by default, is adding images to your posts. The usual method of doing this is by adding the image URL via a custom field. But there is a better and more flexible way.
When you upload images in your post they are all added to the database. This makes it very easy to get a list of all the images attached to the post. In addition, WordPress has a built in function to retrieve the appropriate image size as well, meaning you can use a thumbnail on archive pages and a medium image on post pages without messing around with resizing images and adding multiple custom fields.

How to Automatically Use Resized Images Instead of Originals

This script will replace the uploaded image (if bigger than the larger size defined in your settings) by the large image generated by WordPress to save space in your server, and save bandwidth if you link a thumbnail to the original image, like when a lightbox plugin is used.
How to Automatically Use Resized Images Instead of Originals »

Custom Post Layout and Styling Tutorials

Custom CSS Per Post

This article features two functionial solutions to apply unique CSS styling to an individual page of content
Custom CSS Per Post’/>

Styling Different Posts in Different Ways With Post_Class

With WordPress 2.7 came the post_class function. While this is a fantastic function for changing a post’s display, the classes that it outputs are actually quite limited. Luckily, we can add our own, and we can also add our own dynamic classes.
Styling Different Posts in Different Ways With Post_Class »

How to: Embed CSS in your posts with a custom field

Sometimes, a specific post needs to be styled with some custom css styles. Sure, you can directly embed CSS in your post, but that not very clean. In this tutorial, you are going to be shown you how to embed CSS in a clean way, by using a custom field.
How to: Embed CSS in your posts with a custom field »

Using HTML5 Elements in Wordpress Post Content

Here are two ways to include HTML5 elements in your Wordpress post content without Wordpress’ wpautop function wrapping them in p tags or littering your code with line breaks.
Using HTML5 Elements in Wordpress Post Content »

Custom Post Types in WordPress 3.0

In version 3.0 the developers of WordPress introduce the custom post types. I’m not sure whether it’ll be solely built into the API or also displayed as a GUI somewhere in the settings, but it doesn’t require too much coding skills to add a couple via your functions.php.
Custom Post Types in WordPress 3.0 »

Wordpress Navigation Tutorials

jQuery Dropdown Navigation in WordPress

In this tutorial you will learn how to enhance you WordPress in a whole new way. Multi-Level or Multi-Dimensional navigation menus can offer your theme and users 2 new things. One, add a nice new type of effect to enhance your theme. Two, allow the users to find things more easily. You will start off by making a HTML version, then making it compatible with WordPress.
jQuery Dropdown Navigation in WordPress »

The Easy Way To Make WordPress Ajax Pagination Using jQuery

Making your paginated content in WordPress load using AJAX is extremely easy using a bit of jQuery. Here is how.
The Easy Way To Make WordPress Ajax Pagination Using jQuery »

Wordpress Breadcrumbs Without a Plugin

Yes, there are many plugins for breadcrumbs, but if you would prefer to use short code snippets, have a look at this tutorial.
Wordpress Breadcrumbs Without a Plugin »

Wordpress Custom Fonts Tutorials

Incorporate Cufón in WordPress

In this tutorial you will find the simple steps required to integrate Cufón in your WordPress site.

How to Customize Fonts in a Wordpress Blog with CSS3

The fonts type that can be used for Safari, Chrome and Firefox3.1+ are .ttf(True Type Font) and .otf(open type font). Both support the @font-face rule that allows stylesheet to point to a .ttf or .otf on server. After declaring the @font-face rule, reference the required font-family property in your stylesheet as outlined here.

Wordpress Admin Tutorials

How to Create a Wordpress Options Panel

In this tutorial you’ll go through the entire process of creating an admin options panel for a WordPress theme, using the excellent WooFramework as an example. You’ll then take things a step further, as you implement jQuery to improve some of the functionality.
How to Create a Wordpress Options Panel »

Remove/Replace Content from the WordPress Database

Hopefully, you have some experience working directly with the database, but even if you’re new to it, the simple recipes presented in this DiW article will help you find, replace, and delete specific text content using a few simple SQL commands. This gives you incredible power to make sitewide changes to your posts, comments, or any other database table with a few simple clicks.
Remove/Replace Content from the WordPress Database »

Customize WordPress Login Logo without a Plugin

WordPress login logo looks nice, but sometimes you may want to change it, for example when building a site for a client. In that case, you can use a plugin, or simply take advantage of this cool hack.
Customize WordPress Login Logo without a Plugin »

Wordpress 3.0 New Features

10 Features to Look Forward to in WordPress 3.0

WordPress 3.0 is scheduled to be released within the nextcouple of monthss. There are some great new features coming, including custom post types, a new default theme, and a menu manager. Read this article to find out what to expect in version three.
10 Features to Look Forward to in WordPress 3.0 »

Wordpress 3.0 Features Walk Through

Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

We are using PHP, CSS and jQuery with the jQuery Flip plug-in, to do just that. The resulting code can be used to showcase your sponsors, clients or portfolio projects as well.

Step 1 – XHTML

Most of the markup is generated by PHP for each of the sponsors after looping the main $sponsor array. Below you can see the code that would be generated and outputted for Google:

demo.php

<div title="Click to flip" class="sponsor">
	<div class="sponsorFlip">
		<img alt="More about google" src="img/sponsors/google.png">
	</div>

	<div class="sponsorData">
		<div class="sponsorDescription">
			The company that redefined web search.
		</div>
		<div class="sponsorURL">
			<a href="http://www.google.com/">http://www.google.com/ </a>
		</div>
	</div>
</div>

The outermost .sponsor div contains two additional div elements. The first – sponsorFlip – contains the company logo. Every click on this element causes the Flip effect to be initiated, as you will see in the jQuery part of the tutorial.

Maybe more interesting is the sponsorData div. It is hidden from view with a display:none CSS rule, but is accessible to jQuery. This way we can pass the description and the URL of the sponsoring company to the front end. After the flipping animation is complete, the contents of this div is dynamically inserted into sponsorFlip.

Sponsor Flip Wall

Step 2 – CSS

We can start laying down the styling of the wall, as without it there is no much use of the page. The code is divided in two parts. Some classes are omitted for clarity. You can see all the styles used by the demo in styles.css in the download archive.

styles.css – Part 1

body{
	/* Setting default text color, background and a font stack */
	font-size:0.825em;
	color:#666;
	background-color:#fff;
	font-family:Arial, Helvetica, sans-serif;
}

.sponsorListHolder{
	margin-bottom:30px;
}

.sponsor{
	width:180px;
	height:180px;
	float:left;
	margin:4px;

	/* Giving the sponsor div a relative positioning: */
	position:relative;
	cursor:pointer;
}

.sponsorFlip{
	/*  The sponsor div will be positioned absolutely with respect
		to its parent .sponsor div and fill it in entirely */

	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border:1px solid #ddd;
	background:url("img/background.jpg") no-repeat center center #f9f9f9;
}

.sponsorFlip:hover{
	border:1px solid #999;

	/* CSS3 inset shadow: */
	-moz-box-shadow:0 0 30px #999 inset;
	-webkit-box-shadow:0 0 30px #999 inset;
	box-shadow:0 0 30px #999 inset;
}

After styling the sponsor and sponsorFlip divs, we add a :hover state for the latter. We are using CSS3 inset box-shadow to mimic the inner shadow effect you may be familiar with from Photoshop. At the moment of writing inset shadows only work in the latest versions of Firefox, Opera and Chrome, but being primarily a visual enhancement, without it the page is still perfectly usable in all browsers.

styles.css – Part 2

.sponsorFlip img{
	/* Centering the logo image in the middle of the .sponsorFlip div */

	position:absolute;
	top:50%;
	left:50%;
	margin:-70px 0 0 -70px;
}

.sponsorData{
	/* Hiding the .sponsorData div */
	display:none;
}

.sponsorDescription{
	font-size:11px;
	padding:50px 10px 20px 20px;
	font-style:italic;
}

.sponsorURL{
	font-size:10px;
	font-weight:bold;
	padding-left:20px;
}

.clear{
	/* This class clears the floats */
	clear:both;
}

As mentioned earlier, the sponsorData div is not meant for viewing, so it is hidden with display:none. Its purpose is to only store the data which is later extracted by jQuery and displayed at the end of the flipping animation.

Flipping Animation

Step 3 – PHP

You have many options in storing your sponsors data – in a MySQL database, XML document or even a plain text file. These all have their benefits and we’ve used all of them in the previous tutorials (except XML storage, note to self).

However, the sponsor data is not something that changes often. This is why a different approach is needed. For the purposes of the task at hand, we are using a multidimensional array with all the sponsor information inside it. It is easy to update and even easier to implement:

demo.php – Part 1

// Each sponsor is an element of the $sponsors array:

$sponsors = array(
	array('facebook','The biggest social..','http://www.facebook.com/'),
	array('adobe','The leading software de..','http://www.adobe.com/'),
	array('microsoft','One of the top software c..','http://www.microsoft.com/'),
	array('sony','A global multibillion electronics..','http://www.sony.com/'),
	array('dell','One of the biggest computer develo..','http://www.dell.com/'),
	array('ebay','The biggest online auction and..','http://www.ebay.com/'),
	array('digg','One of the most popular web 2.0..','http://www.digg.com/'),
	array('google','The company that redefined w..','http://www.google.com/'),
	array('ea','The biggest computer game manufacturer.','http://www.ea.com/'),
	array('mysql','The most popular open source dat..','http://www.mysql.com/'),
	array('hp','One of the biggest computer manufacturers.','http://www.hp.com/'),
	array('yahoo','The most popular network of so..','http://www.yahoo.com/'),
	array('cisco','The biggest networking and co..','http://www.cisco.com/'),
	array('vimeo','A popular video-centric social n..','http://www.vimeo.com/'),
	array('canon','Imaging and optical technology ma..','http://www.canon.com/')
);

// Randomizing the order of sponsors:

shuffle($sponsors);

The sponsors are grouped into the main $sponsors array. Each sponsor entry is organized as a separate regular array. The first element of that array is the unique key of the sponsor, which corresponds to the file name of the logo. The second element is a description of the sponsor and the last is a link to the sponsor’s website.

After defining the array, we use the in-build shuffle() PHP function to randomize the order in which the sponsors are displayed.

demo.php – Part 2

// Looping through the array:

foreach($sponsors as $company)
{
	echo'
		<div class="sponsor" title="Click to flip">
			<div class="sponsorFlip">
				<img src="img/sponsors/'.$company[0].'.png" alt="More about '.$company[0].'" />
			</div>

			<div class="sponsorData">
				<div class="sponsorDescription">
					'.$company[1].'
				</div>
				<div class="sponsorURL">
					<a href="'.$company[2].'">'.$company[2].'</a>
				</div>
			</div>
		</div>

	';
}

The code above can be found halfway down demo.php. It basically loops through the shuffled $sponsors array and outputs the markup we discussed in step one. Notice how the different elements of the array are inserted into the template.

Step 4 – jQuery

The jQuery Flip plugin requires both the jQuery library and jQuery UI. So, after including those in the page, we can move on with writing the code that will bring our sponsor wall to life.

script.js

$(document).ready(function(){
	/* The following code is executed once the DOM is loaded */

	$('.sponsorFlip').bind("click",function(){

		// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

		var elem = $(this);

		// data('flipped') is a flag we set when we flip the element:

		if(elem.data('flipped'))
		{
			// If the element has already been flipped, use the revertFlip method
			// defined by the plug-in to revert to the default state automatically:

			elem.revertFlip();

			// Unsetting the flag:
			elem.data('flipped',false)
		}
		else
		{
			// Using the flip method defined by the plugin:

			elem.flip({
				direction:'lr',
				speed: 350,
				onBefore: function(){
					// Insert the contents of the .sponsorData div (hidden
					// from view with display:none) into the clicked
					// .sponsorFlip div before the flipping animation starts:

					elem.html(elem.siblings('.sponsorData').html());
				}
			});

			// Setting the flag:
			elem.data('flipped',true);
		}
	});

});

First we bind a function as a listener for the click event on the .sponsorFlip divs. After a click event occurs, we check whether the flipped flag is set via the jquery data() method. This flag is set individually for each sponsorFlip div and helps us determine whether the div has already been flipped. If this is so, we use the revertFlip() method which is defined by the Flip plugin. It returns the div to its previous state.

If the flag is not present, however, we initiate a flip on the element. As mentioned earlier, the .sponsorData div, which is contained in every sponsor div, contains the description and the URL of the sponsor, and is hidden from view with CSS. Before the flipping starts, the plug-in executes the onBefore function we define in the configuration object that is passed as a parameter (line 29). In it we change the content of the sponsorFlip div to the one of sponsorData div, which replaces the logo image with information about the sponsor.

With this our sponsor flip wall is complete!

Conclusion

Today we used the jQuery Flip plug-in to build a sponsor wall for your site. You can use this example to bring interactivity to your site’s pages. And as the data for the wall is read from an array, you can easily modify it to work with any kind of database or storage.

Original article from http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css

Fonts type that can be used for Safari, Chrome and Firefox3.1+ are .ttf(True Type Font) and.otf(open type font). Both support the @font-face rule that allows stylesheet to point to a .ttf  or .otf on server.  IE has little problem with .otf.  After declaring the @font-face rule give reference to your required font-family property in your stylesheet as following:

  @font-face {
   font-family: MEgalopolis Extra; src: url(‘MEgalopolis-Extra.otf');
   }
  h3 { font-family: MEgalopolis Extra, sans-serif; }

Reference:
@font-face {
 font-family: MEgalopolis Extra;
 src: url('MEgalopolis-Extra.otf');
}

Example:

MEgalopolis Extra

The drawback of embedding fonts in stylesheet is again licensing and infringement issues which you can handle with the sIFR (Scalable Inman Flash Replacement) method. There is a well explained article on sIFR implementing the core method, you can find it at Mike Industries’s Blog “sIFR 2.0: Rich Accessible Typography for the Masses“.
There are lots of websites where you can find Free and useful resources.

1. For @Font-face friendly fonts: Font Squirrel

2. Fonts available for @font-face embedding: Web Fonts

3. OpenType for your desktop and webfonts: Font Spring

Font resource Compilation:

1. 75+ Excellent Free Fonts For Professional Design

In this article tripwire magazine presents an overview of more than 75 excellent free fonts you should consider using for your designs. Not all free Fonts are worth using but the Fonts listed in this article have all been picked out because they are better than the rest.

2. 20 High Quality Free Fonts for Designers

Here are 20 high quality free fonts for you to use in your designs. In this selection, you will find a variety of styles.

3. 40+ Excellent Freefonts For Professional Design

4. 50 Amazing Free Fonts For Designers

They have rounded up some of the top favorites of designers around the world. These fonts can fall in all categories when put to creativity by users with your wildest imagination.

5. 104 Free Fonts for Web Designers and Logo Artists

You’ll find Over 100 Free Downloadable Fonts for Web Designers and Logo Artists by which you can save money and focus on making great applications.

6. Top 20 Sites To Download Free Fonts

A list of most recommended and visited sites to download free fonts.

Customize Fonts through WordPress Plugin:

1. 10 WordPress Plugins For Enhancing Typography

2. AutoTTF WordPress Plugin for Rendering True Type Fonts

3. Custom Fonts WordPress Plugin (v 5)

Original article from wparena.

phpSysInfo is a PHP script that displays information about the host being accessed. It will displays things like Uptime, CPU, Memory, SCSI, IDE, PCI, Ethernet, Floppy, and Video Information.

The script works on every PHP-enabled website & can display static information, generate XML outputs (which is nice for automated checks) or dynamically update itself.

It is multilingual & includes various ready-to-use themes for customization.

Grid-based layout is probably the more preferred way to style up a webpage to give it more magazine-like look and feel. This tutorial is about how to use CSS and Javascript to create a fluid grid-based layout (See demo here). The algorithm/procedure used in this tutorial is very simple and straightforward. There are more advanced algorithms out there which can handle multiple scenarios. But the purpose is to understand the basic logic on how to create such layout. You go to this site for details.

Making a Google Wave History Slider
Here is shown how to create a Google Wave-like history slider. Using it will enable visitors to go back and forth in time to view the changes that take place on a comment thread.

Fancy Radio Buttons With jQuery
Creation of 2 mandatory option sets that a user could choose, while hiding off the radio button inputs and using an anchor links to make it a bit more usable.

Creative Button Animations with Sprites and JQuery
Fading hover effect for which the transition is smoothed with JavaScript, using jQuery library.

Password (un)Masking
JavaScript jQuery that toggles the masking and unmasking of the password field.

jQuery MagicLine Navigation
These “sliding” style navigation bars have been around a while, and turns out it’s really pretty darn easy. Here are put two examples together.

Fixed Fade Out Menu: A CSS and jQuery Tutorial
The aim is to have a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again. Inside of the navigation we will have some links, a search input and a top and bottom button that let the user navigate to the top or the bottom of the page.

jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields
The best way to explain what this plugin does is to mention Twitter. Twitter posts are limited to 140 characters. While typing the Twitter post there is this always present information about how many characters the users have before reaching the limit. The information is not only provided merely by displaying a number, there are different colors applied to certain stages to notify the user about the status.

Sliding Labels v2
Form label keeping the label inline, but sliding it off to the left rather than going away on click.

Ketchup Plugin
Ketchup is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance and functionality.

Original article from smashing magazine.

jDigiClock – Digital Clock (HTC Hero inspired)

jDigiClock is a jQuery plugin inspired from HTC Hero Clock Widget.

jQuery Sliding Clock v1.1
jQuery transpearant Slider clock with CSS sprites.

Date / Time Picker
Note that this control is not designed to work in IE6; although it will function correctly in most cases, the positioning of the calendar may be way off depending on how your page is styled.

Original article from smashing magazine.

This great collection of CSS3 is from SmashingMagazine. Actually some articles already showed many times before, but here is just a roundup. I myself kept them here for later read or use.

CSS3 is coming. Although the browser support of CSS 3 is still very limited, many designers across the globe experiment with new powerful features of the language, using graceful degradation for users with older browsers and using the new possibilites of CSS3 for users with modern browsers. That’s a reasonable solution — after all it doesn’t make sense to avoid learning CSS3 (that will be heavily used in the future) only because these features are not supported yet. The point of this article is to give you a glimpse of what will be possible soon and what you will be using soon and provide you with an opportunity to learn about new CSS3 techniques and features.

Visual Effects and Layout Techniques With CSS3

CSS3 Analogue Clock
Analogue clock created using webkit transition and transform CSS. JavaScript is only used to pull in the current time.

Use CSS3 to Create a Dynamic Stack of Index Cards
We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).

dynamic PNG shadow position & opacity
When the light is turned on, the position and opacity of the logo shadow will change dynamically, depending on the position and distance of the light bulb. Don’t forget to drag the logo and/or the light bulb around!

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens? While thinking of alternatives to the usual horizontal panels, I thought it would be nice to create something that works in a similar way, but that is a bit more flexible.

Awesome Overlays with CSS3
The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS.

CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile
What if we could replace almost all of the graphical UI elements within Fennec with CSS created equivalents? As a designer, am I comfortable bypassing Photoshop and letting CSS run the pixel rodeo? After a few initial tests, the answer to both of those questions was a very solid “yes”. A solid “friggin’ right” if in Cape Breton.

How To Create Depth And Nice 3D Ribbons Only Using CSS3
We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds. RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.

Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3
This custom dialog box is one of the scripts in that website and I think it will be quite useful for all of us. The reason I have this custom dialog box is to overcome the inconsistencies across different browsers. And, of course, it uses CSS3 to style everything.

Drop-In Modals with CSS3
For those using WebKit based browsers (Safari and Chrome), CSS3 effects and properties can help you create fast, simple modals by using transforms, animation, and some subtle design cues.

Newspaper Layouts with Columns and Image Masks
The faux-newspaper look goes in and out of style online pretty frequently, but these tricks can be used for quite a few cool applications. What we’ll talk about here is using -webkit-mask-image and -webkit-column-count.

Navigation Menus With CSS 3

Sweet AJAX Tabs With jQuery 1.4 & CSS3
This post is a tutorial of making an AJAX-powered tab page with CSS3 and the newly released jQuery 1.4.

Sweet tabbed navigation bar 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.

Halftone Navigation Menu With jQuery & CSS3
Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

Building Coverflow With CSS Transforms
I was able to create a coverflow effect that actually flows and animates in real-time, without using canvas or prerendered graphics.

CSS3 Hover Tabs without JavaScript
With the new techniques in CSS3 and clever applications of existing CSS it is increasingly stepping on the toes of JavaScript. Which to be honest isn’t necessarily a bad thing. I thought I’d try my hand at something so here is a basic CSS tabbed content section that changes on hover.

CSS 3 Transitions and Animations

Going Nuts with CSS Transitions
I’m going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.

Sliding Vinyl with CSS3
We take a standard album cover, a little HTML, and some CSS3 transitions and transforms to create a sliding vinyl effect for showing off the music you love.

Fun with CSS3 and Mootols
These examples came about when experimenting with the extend property in MooTools. By extending the styles class I could add CSS3 properties into the Core MooTools framework and do CSS3 animations.

Star Wars HTML and CSS: A NEW HOPE
There are a lot of CSS transitions experiments going on right now. Yesterday I discovered another HTML and CSS experiment which went “far far away”, compared with my simple CSS gallery.
Guillermo Esteves presented a piece of history translated for tomorrows browsers: the Star Wars Episode IV opening crawl in HTML and CSS.

Fun with 3D CSS and video
Zach Johnson has been having fun with 3D effects via CSS such as his isocube above, which is brought to you with simple HTML (including a video tag for a playing video on the surface!) and some CSS.

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.

CSS Animations
No matter how fast internet tubes or servers are, we’ll always need spinners to indicate something’s happening behind the scenes.

Snowy CSS3 Animation
It’s cold and snowy down here in Brighton, so to celebrate the falling white stuff (and of course the various festivities at this time of year) Clearleft’s very own Natbat has made a snowy CSS3 animation surprise for all you Safari and Chrome users out there.

What You Need To Know About Behavioral CSS
In this article, we will take those properties a step further and explore transformations, transitions, and animations. We’ll go over the code itself, available support and some examples to show exactly how these new properties improve not only your designs but the overall user experience.

3D Cube using new CSS transformations
The impression of a three dimensional cube can be created using modern CSS techniques, without the need for JavaScript, imagery, canvas or SVG. Using the proprietary transform property to skew and rotate shaded rectangles, individual cube faces can combine to form a 3D object.

Playing around with WebKit Animations
I’ve been playing around doing a KeyNote like animation done with CSS and some JS to hook up the necessary events. The animation is kind of like a deck of cards. When you go to the next one the current one zooms in and fades out, symbolizing getting closer to the viewer. The next card then zooms and fades in from the back and to give a fancy effect-

More on 3D CSS Transforms
Various 3D CSS Transforms in an overview.

Gradients, RGBA and HSL with CSS 3

Working With RGBA Colour
CSS3 introduces a couple of new ways to specify colours, and one of those is RGBA. The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency. This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through. Like with layers in Photoshop.

CSS3 Gradients: No Image Aqua Button
I played around with WebKit CSS3 gradient and created a useless but fun stuff – an Aqua button with no images! Back in the time when Mac OS X was first announced, there’re a plenty of web tutorials that describe how to create the sexy aqua button with Photoshop, and now I can show how to create one with CSS!

CSS3 HSL & HSLA
A tutorial on using the HSL & HSLA declarations along with the quick + / – guide to which browsers currently support the herein effect.

Super Awesome Buttons with CSS3 and RGBA
One of our favorite things about CSS3 is the addition of RGBA, a color mode that adds alpha-blending to your favorite CSS properties. We’ve kicked the tires on it a bit with our own projects and have found that it helps streamline our CSS and makes scaling things like buttons very easy. To show you how, we’ve cooked up an example with some super awesome, scalable buttons.

Using the Shadow-Property in CSS3

Create a Letterpress Effect with CSS Text-Shadow
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!

Shadows and CSS3
I’m currently working on a design that uses text-shadow and box-shadow, with RGBA in place to create the shadow color. I wanted to tweet about this technique because it’s simple and awesome, but to my surprise I couldn’t find a good, quick tutorial that covered the use of both text and box-shadow, along with RGBA. So I decided to create one.
I learned this technique from Dan Cederholm’s Handcrafted CSS book, so if you’re able I’d recommend just going out and grabbing that, as he explains it much more elegantly and thoroughly than I ever could.

Learning New CSS3 Selectors

CSS3 + Progressive Enhancement = Smart Design
Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before.

A Look at Some of the New Selectors Introduced in CSS3
Here is a run-down of just some of the things that is possible with CSS3 selectors. Of course CSS3 isn’t supported at all by any IE browsers including IE8 but all latest versions of Safari, Firefox and Opera support most, if not all of them.

Cleaner Code with CSS3 Selectors
In this article I’m going to take a look at some of the ways our front and back-end code will be simplified by CSS3, by looking at the ways we achieve certain visual effects now in comparison to how we will achieve them in a glorious, CSS3-supported future. I’m also going to demonstrate how we can use these selectors now with a little help from JavaScript – which can work out very useful if you find yourself in a situation where you can’t change markup that is being output by some server-side code.

The CSS3 :target Pseudo-class And CSS Animations
It’s no secret that I’m always looking for an easy way out using CSS instead of trying to replicate things with convoluted code — there are so many underused techniques that we could be applying to our designs as an enhancement layer! In this experience, I take a brief look into the :target pseudo-class and a very simple CSS animation.

The CSS3 :not() selector
There isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do!

IE CSS3 pseudo selectors
ie-css3.js allows Internet Explorer to identify CSS3 pseudo-class selectors and render any style rules defined with them. Simply include the script in your pages and start using these selectors in your style sheets — they’ll work in IE… Honest…!

CSS3 Galleries

How To Create a Pure CSS Polaroid Photo Gallery
Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling.

An Awesome CSS3 Lightbox Gallery With jQuery
In this tutorial we are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it.

If That Is An Awesome CSS3 Gallery, How Would You Call Mine?

Editable CSS3 Image Gallery
We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime. Quick reminder, the demo is awesome-est in a WebKit browser (Safari or Chrome).

Replacing CSS Hacks with CSS 3

Rounded corner HTML elements using CSS3 in all browsers
This is a behavior htc file for Internet explorer to make CSS property ” border-radius ” work on all browsers. At present, all major browsers other than IE shows curved corner by adding 4 lines of css.

Using Rounded Corners with CSS3
As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. This means less headache and time spent working out alternatives for each browser.

Better Image Preloading with CSS3
Using CSS3’s new support for multiple background images, we can use a single, existing element to preload all of the required images.

Saying Goodbye to the overflow: hidden Clearing Hack
I’m now saying goodbye to overflow: hidden and the deciding factor for me is CSS3. Specifically box-shadow. At least in the sense that box-shadow was the first property I noticed being negatively impacted by the use of overflow: hidden. Like the positioned child elements mentioned above, box-shadow can get clipped when the parent (or other ancestor) element has overflow applied. And there are several other things to consider as we move forward using more CSS3. Text-shadow and transform can also potentially be clipped by overflow: hidden.

General articles about CSS 3

How to bring CSS3 features into your design
Top web browser (such as Firefox 3.5 and Safari 4) have introduce some cool features you can already use. Now, with just a few lines of css you can do things you used to do with images and javascript.

Practical Uses of CSS3
In this article I’ll show you some practical uses for CSS3.

11 Classic CSS Techniques Made Simple with CSS3
We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there’s a new age coming. This new age includes the use of CSS3. In today’s tutorial, I’ll show you eleven different time-consuming effects that can be achieved quite easily with CSS3.

Mobile optimised websites using CSS3 Media Queries
A while ago I wrote about using CSS3 Media Queries on my website redesign to provide mobile visitors with an optimised view designed for smaller screens. I thought it might be useful if I went into a bit more detail on how I’m doing this.

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3
HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural. This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers. Before we start, make note of the answer to this question. Do websites need to look exactly the same in every browser?

Get the best out of CSS3
Craig Grannell turns into a cross between Jeffrey Zeldman and Russell Grant, taking a peek at what the future of CSS has to offer – with a little help from Opera, Safari and Firefox

Practical Uses of CSS3
“One big item for me is how much we use CSS3. Yes I know, it is not fully supported across all browsers. If you still want everything to look exactly the same across all browsers, you should probably just close this article and not read about CSS for another 10 years. A user is not going to pull up your site in two different browsers to compare the experience, so they won’t even know what they are missing. Just because something is not fully supported, that does not mean that we can’t use it to an extent. In this article I’ll show you some practical uses for CSS3.”

A Crash-Course in Advanced CSS3 Effects
This video tutorial reviews a bunch of different neat effects that can be used in Safari 4, Chrome, and for all iPhone development.

33 Must Read CSS3 Tips, Tricks, Tutorial Sites and Articles
An extensive overview of CSS3-techniques, tools, articles and resources.

Original article is from smashing magazine.

创建那些完美的小圆角图片，用做适当的CSS背景，是非常费时的工作。现在，使用CSS3，我们可以用它的border-radius属性，通过几行代码来方便地创建圆角。不过这些CSS代码是基于CSS3的，这就意味着只在Firefox，Chrome，Opera等浏览器有效，IE内核的浏览器，包括IE8都不支持。

前缀：

-moz (例如 -moz-border-radius) 用于Firefox
-webkit (例如：-webkit-border-radius) 用于Safari和Chrome

CSS3圆角（所有的）

这是一个5px普通边框和15px边框半径的设置：

#roundCorderC{
font-family: Arial;
border: 5px solid #dedede;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
padding: 15px 25px;
height: inherit;
width: 590px;
}

CSS3圆角(个别的)

当然，一个DIV的四个角不需要全部都是圆角，你可以个别的实现圆角。

#roundCornerI{
font-family: Arial;
border: 5px solid #dedede;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 15px;
padding: 15x 25px;
height: inherit;
width: 590px;
}

Creating your own products used to mean a significant up-front investment — purchasing a minimum amount of the product as dictated by the manufacturer, paying for warehousing, packaging, point-of-sale systems, and other overhead costs. And that was all before you even took a single order! Thankfully, for many types of products, print-on-demand technologies have made it possible for anyone to create and sell goods over the Internet with little or no up-front costs.

Below is a roundup of 15 great print-on-demand sites that will help you create and sell everything from t-shirts to clocks, from books to skateboards, from board games to fabric.

1. CafePress

CafePress is one of the oldest print-on-demand services online and they offer one of the largest catalogs of products on which you can print your logo or designs. From apparel, like t-shirts, sweatshirts, and hats, to calendars, posters, mugs, water bottles, stickers, stuffed animals, buttons, messenger bags, and even clocks, CafePress offers hundreds of different products to sell and its thriving community of users creates over 45,000 new items each day on the site.

2. Zazzle

Like CafePress, Zazzle offers a huge number of customizable products including t-shirts, sweatshirts, bags, ties, and even aprons, jackets, postage stamps, and shoes. They offer both custom on-demand printing and embroidery on many of their clothing products, and also offer a range of non-apparel items, such as skateboard decks, calendars, magnets, and post cards. Zazzle users have created a mind blowing 19.5 billion items.

3. Spreadshirt

While the focus on Spreadshirt is on t-shirts and sweatshirts, they also offer a range of accessory items that can be printed with your designs, including bags, aprons, buttons, and neckties. One of Spreadshirt’s strengths is the ease of use of its online product designer, making is really easy for anyone to make or customize products that can then be sold to the public.

4. Pikistore

Pikistore does t-shirts and a few other customizable items, such as mugs and mousepads, and does it with a flair that other print-on-demand publishers would be hard pressed to match. For those who want a really great looking storefront from which to sell their t-shirts, perhaps one that matches the look and feel of an existing web site, then Pikistore might be a good option to check out.

5. Lulu

For authors and photographers (and musicians and filmmakers), Lulu offers an amazing service. Lulu is a great way for anyone to publish a printed book (in either hard or softcover, perfect bound, spiral bound, or saddle stitched), CDs, or DVDs. One of the best things about Lulu is that they can help you get your products listed for sale on Amazon, Barnes & Noble, and in bookstores, as well as tools to help you sell and promote your work through social networks like Facebook.

6. CreateSpace

CreateSpace, which is owned by Amazon, lets authors, musicians, and filmmakers create print-on-demand books, CDs, and DVDs. The main advantage to using CreateSpace is that because it is owned by Amazon, your products’ inclusion in the Amazon catalog is guaranteed. That means you can also sell on the Kindle, via the Amazon MP3 store, and offer movie downloads (which means availability on the Xbox 360 and certain TiVo players). Being guaranteed a spot in Amazon’s marketplace can mean a huge boost to your potential sales.

7. Blurb

Blurb just does books, but they do books beautifully. Blurb specializes in creating printed books that definitely don’t have a print-on-demand feel, and because they create such great photobooks, the site has attracted many artists and photographers. As a result, many of the books they create are right up there in terms of design with those coming out of the major publishing houses. Blurb also makes it easy to automatically create books with your content from Flickr, SmugMug, Picasa, and TypePad.

8. TasteBook

If you’re creating a cookbook, then TasteBook might be for you. TasteBooks are stunning hardcover, spiral bound cookbook binders that hold up to 100 recipes. But what really sets TasteBook apart from other print-on-demand publishers is that users can upload their own recipes or choose recipes from a large number of third-party providers, including Food & Wine, Cooking Light, Food Network, Better Homes and Gardens, Epicurious, Recipezaar, and more.

For more ways to publish a book, check out Mashable’s 6 Ways to Publish Your Own Book

9. CDBaby

Over 200,000 indie artists already sell their music through CDBaby. It’s not exactly a print-on-demand publisher, since they really just handle warehousing, selling, and distribution of your CDs (though they do offer disc duplication services as well), but it is so amazingly popular among indie musicians that it would be hard not to mention it here.

10. The Game Crafter

The Game Crafter is an awesome new service for making and selling your own board games and collectible card games. Just upload your artwork and game rules, and pick out which pieces (dice, pawns, etc.) need to be included and go! The Game Crafter will print, package up, and mail out your game every time it’s ordered. It won’t be quite as polished as a traditionally published game (game boards are printed on heavy clay-coated card stock rather than the even heavier chip core that game companies usually use, for example), but the results are still very playable and The Game Crafter’s service is bound to get better over time.

11. Spoonflower

Anyone who watches Project Runway knows that the right print can make or break a good design. Wouldn’t it be great if there was an easy way to have your own designs turned into printed fabric? Spoonflower, a print-on-demand fabric seller, does just that, letting designers create and sell printed fabrics on either quilting or upholstery weight cotton or organic cotton sateen, with prices ranging from $18 – $32 per yard.

12. Ponoko

Ponoko takes your 3D designs and turns them into actual products using a variety of materials, such as MDF, bamboo, cardboard, leather, acrylic, and felt. The result is that you can make toys, housewares, furniture, jewelry, and even electronics and put them up for sale in your own storefront.

13. Shapeways

Like Ponoko, Shapeways lets you upload 3D designs and turn them into real products using 3D printing technology. The site then lets you sell your products via a custom storefront. People are using Shapeways to sell art, toys, jewelry and other gadgets, and some people are using the site for rapid prototyping of products.

14. ImageKind

Any artists out there? Want to easily sell prints of your work? Then check out ImageKind. This site, which is owned by CafePress, specializes in prints and cards with a variety of different material, size, and framing options. For photographers who use Flickr, you can easily import your work to ImageKind and offer it for sale with custom framing.

15. deviantART

deviantART is one of the largest art sites on the web, with over 81 million submissions. Every member of the site is also eligible to sell their art through the site’s store on mugs, mousepads, coasters, magnets, puzzles, prints and other items. Prints can be offered in a variety of sizes and with a handful of different frame types.

Original article comes from Mashable.com.