With custom post types you have the possibility to create more interesting and unusual user experience in your blog by expressing more creativity using them. Custom post types allow users to easily create and manage such things as portfolios, projects, real estate listings, event calendar, quotes, ticket system, and whatever you can imagine.

In this list I would like to share 15 useful WordPress tutorials for creating custom post types for any kind of your projects.

Create a WordPress custom post type

How To Create Custom Post Meta Boxes In WordPress

How to Use Custom Sidebars on Posts and Pages

Add a Custom Column in Posts and Custom Post Types Admin Screen

Build a Short URL Service with WordPress Custom Post Types

How to Convert Plugins to Use Custom Post Types

Custom Post Type Helper Class

How to Create Advanced Search Form in WordPress for Custom Post Types

Creating a Tabbed Widget for Custom Post Types

Custom post types in WordPress

Using Custom Post Types to Create a Killer Portfolio

Rock-Solid WordPress 3.0 Themes using Custom Post Types

Extending Custom Post Types in WordPress 3.0

Quick Tip: 3 Tools for Making “Instant” Custom Post Types

Event Posts in WordPress

In this compilation you will find only newest CSS3 tutorials on creating amazing transition effects, slideshows, navigation menus and much more.

Orman Clark’s Vertical Navigation Menu: The CSS3 Version

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

Page Transitions with CSS3

Skin Orman Clark’s Video Interface Using jPlayer and CSS

Get more out of your CSS transitions with jQuery

How to Create an Image Slider using jQuery and CSS3 [Tutorial]

Tutorial For A CSS3 Animated Hover Effect

Item Blur Effect with CSS3 and jQuery

HTML5 & CSS3 Toggle slideup and slidedown without JavaScript

How to Create Login Form with CSS3 and jQuery

Fullscreen Background Image Slideshow with CSS3

CSS3 Image Styles – Part 2

Apple-like Login Form with CSS 3D Transforms

Animated Web Banners with CSS3

CSS3 breadcrumbs

Today I would like to present you some nice CSS3 techniques for improving your web typography. Unfortunately these experiments won’t work on all browsers because of weak CSS3 support but it is always interesting and fun to give a try on upcoming stuff.

Here are 15 unusual and beautiful CSS3 typography effect examples and explanations how to do them.

Arctext.js – Curving Text with CSS3 and jQuery

3D Text Tower

Using CSS Text-Shadow to Create Cool Text Effects

Subtle CSS3 Typography that you’d Swear was Made in Photoshop

I love blur

3D Text

How to Create a Cool Anaglyphic Text Effect with CSS

Create a Letterpress Effect with CSS Text-Shadow

Create Beautiful CSS3 Typography

CSS3 Background-Clip & @Font-Face

CSS3D

Fun With CSS Text-Shadow

Adding Stroke to Web Text

Quick Tip: Pure CSS Text Gradients

Create Attractive Web Typography with CSS3 and Lettering.js

Take a look at a collection of tutorials that will help to get you started, I have also included some prebuilt WordPress theme option panels you can include and customize into your WordPress theme.

How to Create a Better WordPress Options Panel

Tutorial: Creating Custom Write Panels in WordPress

How to Integrate an Options Page into your WordPress Theme

Quick Tip: Create A WordPress Global Options Page

Create An Advanced Theme Options Panel in WordPress

How To Create An Options Page For Your WordPress Theme

Ohad Raz – My Options Panel

Creating a custom WordPress theme options page

Building A Theme Options Panel – Part One of Four

Create an Options Page For Your WordPress Theme

Using The Settings API: Part 1 – Create A Theme Options Page

SitePoint Tutorial: Creating Custom Options Pages in WordPress

Pre-Built Option Panels:

ProPanel – WordPress Theme Options Panel

WordPress AdminPage Class

Acera Options Framework

WordPress Theme Framework (WTF)

WordPress Studios With Comprehensive Options Panels:

WooThemes

Elegant Themes

Theme Trust

Theme Shift

Themify

The idea of responsive web design, started by Ethan Marcotte, is that our websites should respond to the device that our page is shown on by adapting their layout and design to fit any device resolution. In his book “Responsive Web Design” he outlines the three parts to a responsive website: a fluid grid, fluid images and media queries.

In this post I would like to share 15 useful responsive design tutorials to help you get started with responsive designing including fluid grids, fluid images and media queries.

Beginner’s Guide to Responsive Web Design

Beginner’s introduction to responsive design. You will learn about the spectrum of screen sizes and resolutions that are widening every day, and creating a different version of a website that targets each individual device is not a practical way forward. This is the problem that responsive web design addresses head on.

Responsive Design in 3 Steps

If you have the basic CSS knowledge you can quickly get started with responsive design by following this quick tutorial by Nick La on Web Designer Wall. Nick will show you how you can learn about the basic logic of responsive design and media queries in just 3 steps.

Techniques For Gracefully Degrading Media Queries

Media queries are the third pillar in Ethan Marcotte’s implementation of responsive design. Without media queries, fluid layouts would struggle to adapt to the array of screen sizes on the hundreds of devices out there. Media queries enable us to adapt typography to the size and resolution of the user’s device, making it a powerful tool for crafting the perfect reading experience.

Responsive Web Design with HTML5 and the Less Framework 3

In this short tutorial, Louis Simoneau will walk you through taking a fairly simple page design and making it responsive with the help of the Less Framework 3 by Joni Korpi.

Adaptive layouts with media queries

In this tutorial you will learn how to use adaptive layouts with media queries which affects browser dimensions (width, height and aspect-ratio), device dimensions (device-width, device-height and device-aspect-ratio), browser orientation, colour information (color, color-index and monochrome) and much more.

Responsive Web Design: What It Is and How To Use It

Responsive web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. In this tutorial you will find how to use custom layout structure, fluid images and media queries.

Responsive Web Design

In this article you will find out what actually responsive web design is and why it is the next must-have website feature. Also you will find how to make your website to adapt, respond, and overcome.

Convert a Menu to a Dropdown for Small Screens

Chris Coyier will show you how to convert a menu to a dropdown for small devices. When the browser window is narrow, the horizontal menu converts from a regular row of links into a dropdown menu.

Fluid Grids

In this article by Ethan Marcotte you will find a lot of useful information on fluid grids subject. Also you will see some practical examples of fluid grids in action.

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

In this article Rachel Andrew will explain you how, with a few CSS rules, you can create an iPhone version of your site using CSS3, that will work now. You’ll have a look at a very simple example and she will also discuss the process of adding a small screen device stylesheet to your own site to show how easily you can add stylesheets for mobile devices to existing websites.

Designing for a Responsive Web

In this article Max Luzuriaga talks about the design process of the responsive web design. By reading this post you will find out about grid systems, images and proportions in designing a responsive website.

Techniques in responsive web design

CSS3 media queries allow us to dynamically alter the design and layout of a web page in order to deliver an optimal user experience from a single set of HTML and CSS markup. The techniques in this article explain how we can leverage this powerful capability of CSS to also change imagery, alter the navigation on hand-held devices, and set up default CSS for compatibility older browsers.

How to use CSS3 Orientation Media Queries

In this article Ryan Seddon will focus on the orientation media query and will make a demonstration showing how to use it.

CSS Media Queries & Using Available Space

In this tutorial Chris Coyier talks about using CSS media queries to assign different stylesheets depending on browser window size and the syntax for using media queries within a single stylesheet and more examples of that.

Optimizing your email for mobile devices with the @media query

By creating a separate set of styles to be used by devices that recognize the @mediaquery, you can optimize your emails in a similar fashion to how web pages are being optimized for the mobile today. Devices that don’t recognize @media will degrade gracefully by simply reverting to your default styles.

The Design

Resources Used

Titillium Text – Using @font-face for heading typography.

Form Producer – Used for basic form demo.

Apple iOS Linen Texture – Used for the background texture.

Jribbble – A jQuery plugin to pull in some dribbble shots.

HTML5 Boilerplate – A HTML5 framework to build our design on.

960 Grid System – A CSS framework to provide pixel perfect from design to code.

Basic HTML5 Layout

Our basic layout section starts with the HTML5 doctype and the usual stuff such as the title/meta tags and the CSS links to two stylesheets. One is the 960 grid frame work which will allow me to quickly and easily code up the site from my previous design, the other stylesheet is where I place the styles for the page. I have kept these separate for demonstration purposes. I lastly use the HTML5 Autocorrect form attribute in the message text area, this is again useful for mobile users who may have fat or clumsy fingers ;).

<!doctype html>
<head>
  <meta charset="utf-8">
  <title>David Martin - A Web Designer &amp; Developer - Tunbridge Wells, Kent.</title>
	  <meta name="description" content="David Martin - Web Design Tunbridge Wells">
	  <meta name="author" content="David Martin @webadelic">
	  <meta name="viewport" content="width=device-width,initial-scale=1">
	  <link rel="stylesheet" href="css/grid/960_12_col.css">
	  <link rel="stylesheet" href="css/style.css">
</head>
<body>

Header

The page concept is pretty simply so semantically dividing the sections up is easy. I use HTML5 elements such as <header> to markup the intro block as this is the introduction to the section and <hrgroup> to markup the intro text for the current section.

  <div id="header-line"></div>

  <div class="container_12">

  	<header>

		<div class="grid_3 push_1">

			<img src="img/webadelic-logo.png" alt="Webadelic - Web Design Tunbridge Wells" border="0" width="140" height="94" />

		</div>

		<hgroup class="grid_7 push_1 intro">

			<h1>Hello! My name is David!</h1>

			<h2>A web developer &amp; designer from Tunbridge Wells, UK.</h2>

		<hgroup>

    </header>

    <div class="clear"></div>

Body

I group the body contents of the page using the HTML5 elements <section> and <article>. I use the <section> element to group the small ‘About’ left column and the right side ‘Contact’ form.

Notice I also nest both the left and right columns using the <article> element. I used the <article> element to markup the left and right content areas as two separate pieces of content inside the main <section> element.

When constructing the form you can see I was able to use some new HTML5 form elements to improve the form functionality. Notice for the text inputs I use the Placeholder attribute, this displays text in the field until the field is focused.

A useful HTML5 form attribute is Auto capitalization, this is useful for mobile users who may not want their phones to add capital letters to their email fields.

I lastly used the HTML5 form attribute Autocorrect on the message textarea to help mobile users who may have clumsy fingers ;).

There are more HTML5 form elements you could add to this form, but for now this is simply a demo.  I would recommend also using the Required attribute to improve your form validation. Have a play around and enjoy!

The Dribbble shot feed is pulled in using the jQuery plugin, for now I simply add <ul id=”feed”></ul> to the page, this is where the feed will be pulled in. There are some configuration options you will need to amend in the plugin, you can read up on this here or simply view the demo.

   <div id="horizontal-line-full"  class="push_1"></div>

		<div id="main" role="main" class="grid_10 push_1">
			<section>

				<article class="grid_4 about">

					<header>

						<h3>About</h3>

					</header>

					<p>Maurizzle tellivizzle nibh bling bling for sure. Ghetto izzle sheezy. Pellentesque yo mamma rhoncus owned. Gangster hac nizzle platea dictumst.</p>

					<p>Maurizzle tellivizzle nibh bling bling for sure. Ghetto izzle sheezy. Pellentesque yo mamma rhoncus owned. Gangster hac nizzle platea dictumst.</p>

					<p>Maurizzle tellivizzle nibh bling bling for sure. Ghetto izzle sheezy. Pellentesque yo mamma rhoncus owned. Gangster hac nizzle platea dictumst.</p>

				</article>

			</section>

				<div class="grid_2 column"></div>

			<section>

				<article class="grid_4 contact">

					<header>

						<h3>Contact</h3>

					</header>

							<section class="contact-me">

								<label for="name">Name</label>
								<input type="text" name="name" id="name" placeholder="Your name" autocapitalize="on" autocorrect="on" />

								<label for="email">Email</label>
								<input type="email" name="email" id="email" placeholder="Your email" autocapitalize="off" autocorrect="on" />

								<label for="website">Message</label>
								<textarea name="message" id="message" placeholder="Your message" autocorrect="on"></textarea>

								<button class="button" name="submit" id="submit">Send</button>

							</section>

						</form>

				</article>

			</section>

			<section>

				<article class="grid_10 projects">

						<header>

							<h3>Projects</h3>

						</header>

						<p>You can check out some of the designs I am working on which are being fed from my <a href="http://dribbble.com/webadelic" rel="nofollow">Dribbble feed</a>, one day when I have some spare time I’ll develop this site a little further to actually show some full project details...<em>I promise</em>.</p>

						<ul id="feed"></ul>

				</article>

			</section>

Footer

I can once again use more HTML5 elements to semantically divide the footer section up,  I first wrap the entire footer with the <footer> attribute.

The <footer> attribute can be used at the end of documents and sections and typically are used to provide the author information or other miscellaneous text.

Inside the <footer> attribute I divide the left and right links into two separate sections using <section>, this allows me to separate the grouping of content in more semantic way.

    <footer class="grid_10 footer">

    	<section id="social-procrastination" class="grid_6">

    		<ul>
    			<li id="twitter">
    				<a href="http://twitter.com/#!webadelic" rel="nofollow" title="David Martin (@webadelic) on Twitter">
						<span>David Martin (@webadelic) on Twitter</span>
					</a>
    			</li>
    			<li id="gplus">
	    			<a href="https://plus.google.com/108725634593324907312/posts" rel="nofollow">
	    				<span>David Martin (@webadelic) on Google Plus</span>
	    			</a>
    			</li>
 				<li id="dribbble">
 					<a href="http://dribbble.com/webadelic" rel="nofollow">
 						<span>David Martin (@webadelic) on Dribbble</span>
 					</a>
 				</li>
    		</ul>

    	</section>

    	<section id="footer-email" class="grid_2 push_2">

    		<p><a href="mailto:david@webadelic.co.uk" rel="nofollow">david@webadelic.co.uk</a></p>

    	</section>

    </footer>

  </div> <!-- end of #container -->

</body>
</html>

Using CSS

Now we have created the basic HTML5 layout, we are ready to add the CSS. Here I will walk you through a few basics of the CSS I used to code up the design. To see the full CSS I used to achieve the exact layout view the demo and have a snoop around.

I use the 960.gs grid with some custom styles in order to match the site with the design, if you take a look at the source code you will see my references to the grid columns in the code, a good write up on using the 960 grid is available from Six Revisions. If you would like to explore the CSS code better, its all available in the demo.

Before I add the CSS:

Header

First off I am setting the background texture to the downloaded and modified Apple iOS Linen Texture. Next I am setting the body fonts, I want the fonts to show as Helvetica Neue if possible but if this font is not available I will roll back to either Helvetica or Arial respectively.

body {
margin: 0;
background-image: url(../img/bg.png);
font: 11px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 1.231;
}

Heading Fonts

As stated I wanted to use Titillium text on the heading fonts, as the font is available in various different formats and is font-face compatible I can use @font-face. I download the fonts and place them in a folder in the site directory and call them using the below @font-face code:

</pre>
<pre id="line1">h1 {font: 35px/15px 'TitilliumText22LXBold', Arial, sans-serif;letter-spacing: 2px;}
h2 {font: 20px/15px 'TitilliumText22LThin', Arial, sans-serif;letter-spacing: 1px; 	color:#8a8989;}
h3 {font: 28px/15px 'TitilliumText22LThin', Arial, sans-serif;letter-spacing: 1px;}
p{color:#8a8989;}

@font-face {
    font-family: 'TitilliumText22LThin';
    src: url('../fonts/TitilliumText22L001-webfont.eot');
    src: url('../fonts/TitilliumText22L001-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TitilliumText22L001-webfont.woff') format('woff'),
         url('../fonts/TitilliumText22L001-webfont.ttf') format('truetype'),
         url('../fonts/TitilliumText22L001-webfont.svg#TitilliumText22LThin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TitilliumText22LRegular';
    src: url('../fonts/TitilliumText22L003-webfont.eot');
    src: url('../fonts/TitilliumText22L003-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TitilliumText22L003-webfont.woff') format('woff'),
         url('../fonts/TitilliumText22L003-webfont.ttf') format('truetype'),
         url('../fonts/TitilliumText22L003-webfont.svg#TitilliumText22LRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TitilliumText22LBold';
    src: url('../fonts/TitilliumText22L005-webfont.eot');
    src: url('../fonts/TitilliumText22L005-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TitilliumText22L005-webfont.woff') format('woff'),
         url('../fonts/TitilliumText22L005-webfont.ttf') format('truetype'),
         url('../fonts/TitilliumText22L005-webfont.svg#TitilliumText22LBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TitilliumText22LXBold';
    src: url('../fonts/TitilliumText22L006-webfont.eot');
    src: url('../fonts/TitilliumText22L006-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TitilliumText22L006-webfont.woff') format('woff'),
         url('../fonts/TitilliumText22L006-webfont.ttf') format('truetype'),
         url('../fonts/TitilliumText22L006-webfont.svg#TitilliumText22LXBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

Form

Styling the form allows me to use some nice CSS3 effects to match up with the design without having to use images.

I use the following CSS3 to achieve an indented effect on the form inputs, I think this is a pleasant and simple way of making the form inputs. I achieve the indented textfield using the CSS box shadow technique and using a -1px black line:  0 -1px 0 0px which has its opacity set to 0.1: rgba(0,0,0,0.1). See below:

   -moz-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
   -webkit-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
   box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);

The Complete Form CSS

</pre>
<pre id="line1">/* Contact Form */

 label {
 	margin: 0 0 10px 0;
 	display: block;
 	font-weight: normal;
 }

 .error{color:red;}

 #form_producer input[type="text"], .contact-me input[type="email"] {
	float:left;
	clear:both;
	margin:0 0 15px 0;
	padding:3px 6px;
	width:300px;
	height:24px;
	border:none;
	color:#8a8989;
	background:#f9f9f9;
		-moz-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
		-webkit-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
		box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
 }

 #form_producer textarea{
 	float:left;
 	clear:both;
 	margin:0 0 15px 0;
 	padding:3px;
 	width:305px;
 	height:90px;
 	border:none;
 	color:#8a8989;
	background:#f9f9f9;
		-moz-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
		-webkit-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
		box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
 }

 .button{
 	float:left;
	clear:both;
	background-color:#ebe9e9;
	border:solid 1px #ebe9e9;
	width:140px;
	height:30px;
	text-transform:uppercase;
	font-size: 0.9em;
	letter-spacing:1px;
		background-image: linear-gradient(top, rgb(241,241,241) 50%, rgb(235,233,233) 50%);
		background-image: -o-linear-gradient(top, rgb(241,241,241) 50%, rgb(235,233,233) 50%);
		background-image: -moz-linear-gradient(top, rgb(241,241,241) 50%, rgb(235,233,233) 50%);
		background-image: -webkit-linear-gradient(top, rgb(241,241,241) 50%, rgb(235,233,233) 50%);
		background-image: -ms-linear-gradient(top, rgb(241,241,241) 50%, rgb(235,233,233) 50%);

		background-image: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0.5, rgb(241,241,241)),
			color-stop(0.5, rgb(235,233,233))
		);
 }

 	.button:hover{
 		opacity: 0.8;
 	}

 		.button:active{
 			opacity: 0.4;
 		}

The Dribbble Feed

The dribbble shot feed is styled using some simple CSS to remove the list bullets and to get each image to sit next to the next correctly. See below:

ul#feed{
list-style-type: none;
margin: 60px 0;
padding: 0;
}

#feed li{
float: left;
margin: 0 45px 45px 0;
padding:5px;
width: 200px;
height: 150px;
border: solid 1px #dedbdb;
background: #fff;
}

Footer

To give the social icons a little hover effect, we can use the CSS3 opacity attribute. When a user hovers over, the opacity is changed to o.8.

#twitter a:hover, #gplus a:hover, #dribbble a:hover{
opacity:0.8;
}

Demo: View the demo – Single Page HTML5 Portfolio