Posts Tagged ‘css3’

Coding Kung-fu: 35 Graphics Built Purely With CSS3

Look at the graphics below, awesome Photoshop works right? Nah, they’re created by CSS3. Yes, they’re completely “drawn” by CSS3! When we have seen enough CSS3 animations we thought those are all CSS3 can do as a potential Flash killer, but we’re wrong. Developers perhaps don’t satisfy with the fun of animation, so again, they push the boundaries of CSS3 to challenge the graphic editor’s realm.

css3 graphics Coding Kung fu: 35 Graphics Built Purely With CSS3

With this post comes 35 carefully crafted CSS3 graphics which even include something you wouldn’t relate with CSS3 like Apple iPhone, cartoon character Doraemon, and more surprises! Heck, some of them even come with detailed tutorial that teach you how to achieve it! So don’t miss the great chance to learn to create graphic using CSS3 and little bit of HTML, let’s get naughty with CSS3!

You are strongly recommended to view these demos using the latest version of Safari or Developer version of Google Chrome. Most demos support the latest version of Firefox and Google Chrome, though.

RSS Feed Icon

RSS Feed Icon built with CSS3, exclusively from Hongkiat! Along with the link comes a tutorial which you can actually learn to “draw” the RSS Feed icon without using even a single image. Create the CSS3 miracle with your own hands!

rss feed icon Coding Kung fu: 35 Graphics Built Purely With CSS3

Apple iMac

Yeah my eyes also can’t believe that, but it’s iMac “assembled” purely with CSS3.

apple imac Coding Kung fu: 35 Graphics Built Purely With CSS3

Apple Keyboard

It’s Apple Keyboard built with CSS3! Heck, the keyboard buttons can even be pressed.

apple keyboard Coding Kung fu: 35 Graphics Built Purely With CSS3

Apple iPhone

Oh, one more thing: iPhoneCSS3.

apple iphone Coding Kung fu: 35 Graphics Built Purely With CSS3

Cherry Blossom

The real awesomeness of CSS3 is that it can be used to build anything including plants and animals!

cherry blossom Coding Kung fu: 35 Graphics Built Purely With CSS3

Coffee Cup

A tiring day? Let’s have a CSS3 coffee, best served with Safari/Google Chrome.

coffee cup Coding Kung fu: 35 Graphics Built Purely With CSS3

Doraemon

This Doraemon is famous for CSS3 compatibility testing. Try it in Internet Explorer 8 or below and have a nice day.

doraemon Coding Kung fu: 35 Graphics Built Purely With CSS3

Meowww!

Now you are looking at a cat built completely with code! Too bad the CSS3 can’t generate sound effects, at least for now.

meowww Coding Kung fu: 35 Graphics Built Purely With CSS3

Mushroom, Triforce, Poké ball, Kirby

“Being a nerd, I’ve made some nerdy creations – a Mario mushroom, the Triforce, a Pokéball, and Kirby. For those that use dinosaur browsers, there’s a screenshot of what it’s supposed to look like.”

musroom triforce pokeball kirby Coding Kung fu: 35 Graphics Built Purely With CSS3

Nyan Cat

“It contains 81 DOM elements, 688 lines of pure CSS and one JavaScript function for
looping audio. My CSS fails CSSLint test and I’m really proud of this.”

nyan cat Coding Kung fu: 35 Graphics Built Purely With CSS3

Patterns

The CSS3 is so great that it can also be used to build fundamental asset for web design, such as these patterns.

patterns Coding Kung fu: 35 Graphics Built Purely With CSS3

BonBon

BonBon are sweet CSS3 buttons created with a goal in mind: sexy looking, really flexible buttons with the most minimalistic markup as possible.

bonbon button Coding Kung fu: 35 Graphics Built Purely With CSS3

iOS Icons

Amazing? Yes. These icons are built by rounded corners, shadows, gradients, rgba, pseudo-elements, and transforms, with the help of certain tools such as westciv’s tools and Border Radius.

ios icons Coding Kung fu: 35 Graphics Built Purely With CSS3

Social Media Icons

That’s impossible for web developer to not build social media icons if they can build iPhone and Doraemon with CSS3. And they built these icons really well.

social media icons Coding Kung fu: 35 Graphics Built Purely With CSS3

Social Media Icons

Another set of social media icons that show the possibilities of the CSS3 in creating usable icons.

social media icons 2 Coding Kung fu: 35 Graphics Built Purely With CSS3

Peculiar

“Peculiar is a free icon package made only in CSS. It was created for sites and web applications that depend on fewer HTTP requests as possible or don’t need to use any image at all.”

peculiar Coding Kung fu: 35 Graphics Built Purely With CSS3

GUI Icons

84 simple GUI icons using just CSS and semantic HTML. This is still considered as “non-production ready” icons, but they look very promising.

gui icons Coding Kung fu: 35 Graphics Built Purely With CSS3

Steve Jobs

Steve Jobs is not only the icon of the digital age, but also the leader who greatly promotes HTML5.

steve jobs Coding Kung fu: 35 Graphics Built Purely With CSS3

Twitter Fail Whale

The Twitter fail whale will not fail to surprise you, except in Internet Explorer 8 or below.

twitter fail whale Coding Kung fu: 35 Graphics Built Purely With CSS3

umbrUI

User Interface elements made possible with CSS3, and it looks really sleek!

umbrui Coding Kung fu: 35 Graphics Built Purely With CSS3

Adobe Photoshop Logo

A tribute to Photoshop without using Photoshop.

adobe photoshop logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Android Logo

The Android is made of fairly simple shapes, but it explains the advantage of CSS3: you can make simple stuff and modify it any way you want by using just code but not Photoshop.

android logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Apple Logo

Retro Apple logo presented using CSS3, still as awesome as the time it was created.

apple logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Atari Logo

Years before, who would have thought the Atari logo will be re-created using CSS3.

atari logo Coding Kung fu: 35 Graphics Built Purely With CSS3

BP Logo

Simple logo can be made easily with CSS3. The best thing with some of these logos showcased here are there are code provided for you to try out!

bp logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Dribbble Logo

Famous user-powered showcase site Dribbble’s logo showcased using CSS3.

dribbble logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Magento Logo

Magento’s logo is not too hard to draw but the outcome looks professional.

magento logo Coding Kung fu: 35 Graphics Built Purely With CSS3

McDonald Logo

I’m lovin’ CSS3!

mcdonald logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Twitter Bird

Perfect proportion, hat tip to the creator.

twitter bird Coding Kung fu: 35 Graphics Built Purely With CSS3

Windows Logo

Windows logo! Looks really awesome, and it’s easy to create!

windows logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Internet Explorer Logo

Really great creation! It works in major browsers except Internet Explorer 8 or below.

internet explorer logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Google Chrome Logo

I’m not sure you love the new logo of Google Chrome or not, but this CSS3 Google Chrome logo looks awesome!

google chrome logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Opera Logo

Now a practice for you: what are the differences between this CSS3 piece and the real deal?

opera logo Coding Kung fu: 35 Graphics Built Purely With CSS3

HTML5 Logo

HTML5 can’t shine without CSS3!

html5 logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Volkswagen Logo

Except the color scheme, this CSS3 clone looks identical to the original one.

volkswagen logo Coding Kung fu: 35 Graphics Built Purely With CSS3

Reflection

With the boom of the logos and graphics made of pure CSS3 come the discussions which greatly debate about the usability of the CSS3-produced graphics in the real world production environment.

Generally the CSS3 graphic is fine, but it might get annoying especially when you need to alter the design or simply resize the graphic, also the biggest pain here is the technology is not yet fully supported by certain browsers like Internet Explorer.

What do you think? Will you use the graphic made with CSS3 in your site? Do you have any solution for its current drawbacks? Let us know your thought, and do share with us if you just baked a CSS3 graphic!

More

Willing to actually do something with CSS3? You’ve come to the right place! Below are guides and tutorials written to aid you greatly on your road to mastering the CSS3.

How to Create Gmail logo with CSS3

Couple of months ago I showed you how to create RSS feed logo with CSS3. I figured it’d be fun creating something a little bit more complex. In today’s post, I’m going to show you how to create not one, but two variations of Gmail logo using just CSS3.

preview How to Create Gmail logo with CSS3

Shortcuts to:

Gmail logo #1

This first logo is simple, and fairly easy to created. Without further ado, here are the steps. Let’s start with firing up your favourite code editor and enter the following HTML codes, and save it as logo-gmail.html.

<html>
	<head>
		<title>Gmail CSS Logo</title>
		<style type='text/css'>

		</style>
	</head>
	<body>
		<span class='gmail-logo'>
			<span class='gmail-box'>&nbsp;</span>
		</span><!-- End .gmail-logo -->
	</body>
</html>

Add the following CSS styles between <style></style> to reset default CSS values.

.gmail-logo,
.gmail-logo *,
.gmail-logo *:before,
.gmail-logo *:after {
	margin:0;
	padding:0;
	background:transparent;
	border:0;
	outline:0;
	display:block;
	font:normal normal 0/0 serif;
	}

The following CSS codes give us the Gmail logo’s red background and a rounded sides.

.gmail-logo {
	margin:110px auto;
	background:rgb(201, 44, 25);
	width:600px;
	height:400px;
	border-top:4px solid rgb(201, 44, 25);
	border-bottom:4px solid rgb(201, 44, 25);
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	}

1.4 gmail wrap How to Create Gmail logo with CSS3

Then, we proceed creating the white box within the red background.

.gmail-logo .gmail-box {
	overflow:hidden;
	float:left;
	width:440px;
	height:400px;
	margin:0 0 0 80px;
	background:white;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	}

1.5 gmail box How to Create Gmail logo with CSS3

In order to create the red "M" effect, we’ll first create a box with red border.

.gmail-logo .gmail-box:before {
	position:relative;
	content:'';
	z-index:1;
	background:white;
	float:left;
	width:320px;
	height:320px;
	border:100px solid rgb(201, 44, 25);
	margin:-310px 0 0 -40px;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	}

1.6 gmail box before How to Create Gmail logo with CSS3

Then we proceed hiding the excessive sides, giving us a complete "M" in red color.

.gmail-logo .gmail-box {
	overflow:hidden;
	}

1.7 hidden How to Create Gmail logo with CSS3

Now, let’s give two thin red border, giving it the envelope look.

.gmail-logo .gmail-box:after {
	content:'';
	float:left;
	width:360px;
	height:360px;
	border:2px solid rgb(201, 44, 25);
	margin:10px 0 0 40px;
	-o-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	}

1.8 gmail box after How to Create Gmail logo with CSS3

We are almost done. Let’s add some gradient to the red envelope.

.gmail-logo:after {
	content:'';
	position:relative;
	z-index:2;
	content:'';
	float:left;
	margin-top:-404px;
	width:600px;
	height:408px;
	display:block;
	background:
		-moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%,
		/* rgba(255, 255, 255, 0.3) 30%, */
		rgba(255, 255, 255, 0.1) 100%);
	background:-o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%,
		/* rgba(255, 255, 255, 0.2) 30%, */
		rgba(255, 255, 255, 0.1) 100%);
	background:-webkit-gradient(
		linear, left top, left bottom, color-stop(0%,
		rgba(255, 255, 255, 0.3)),
		/* color-stop(30%, rgba(255, 255, 255, 0.2)), */
		color-stop(100%, rgba(255, 255, 255, 0.1)));
	}

Last but not least, let’s give it a different color upon hovered. Add the following HTML DOCTYPE before <html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

And the following CSS styles before </style>

.gmail-logo:hover {
	background:#313131;
	border-color:#313131;
	/* cursor:pointer; */
	}
.gmail-logo:hover .gmail-box:before {
	border-color:#313131;
	}
.gmail-logo:hover .gmail-box:after {
	border-color:#313131;
	border-bottom-color:#fff;
	border-right-color:#fff;
	}

1.9 hover How to Create Gmail logo with CSS3

Preview | Download source file

Gmail logo #2

Next, we’ll create Gmail logo from another perspective with a little 3D effect. We’ll start with the basic HTML markup.

<html>
	<head>
		<title>Gmail logo 2 </title>
		<style type="text/css">

		</style>
	</head>
	<body>
		<span id='gmail-logo2'>
			<span class='element1'>&nbsp;</span>
			<span class='element2'>&nbsp;</span>
			<span class='element3'>&nbsp;</span>
			<span class='element4'>&nbsp;</span>
			<span class='element5'>&nbsp;</span>
		</span>
	</body>
</html>

Since the logo has a different perspective, we’ll start by rotating it a little and create the layers needed (which we’ll call them elements) in sequence.

#gmail-logo2 {
	margin:0 auto;
	display:block;
	width:380px;
	height:290px;
	-moz-transform:rotate(6deg);
	-webkit-transform:rotate(6deg);
	-o-transform:rotate(6deg);
	transform:rotate(6deg);
	}
#gmail-logo2 .element1 {
	display:block;
	width:380px;
	height:290px;
	}
#gmail-logo2 .element2,
#gmail-logo2 .element3,
#gmail-logo2 .element4,
#gmail-logo2 .element5  {
	float:left;
	display:block;
	width:380px;
	height:290px;
	margin:-290px 0 0 0;
	}

2.1.elements position How to Create Gmail logo with CSS3

Styling .element1::before

#gmail-logo2 .element1::before {
	content:'';
	position:relative;
	margin:2px 0 0 14px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:30px;
	height:276px;
	-moz-transform:rotate(3deg);
	-webkit-transform:rotate(3deg);
	-o-transform:rotate(3deg);
	transform:rotate(3deg);
	border-radius:22px 0 0 20px;
	-moz-border-radius:22px 0 0 20px;
	-webkit-border-radius:22px 0 0 20px;
	box-shadow:
		-1px 1px 0 rgb(109, 10, 0),
		-2px 2px 0 rgb(109, 10, 0),
		-3px 3px 0 rgb(109, 10, 0),
		-4px 4px 0 rgb(109, 10, 0),
		-5px 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	-webkit-box-shadow:
		-1px 1px 0 rgb(109, 10, 0),
		-2px 2px 0 rgb(109, 10, 0),
		-3px 3px 0 rgb(109, 10, 0),
		-4px 4px 0 rgb(109, 10, 0),
		-5px 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	-moz-box-shadow:
		-1px 1px 0 rgb(109, 10, 0),
		-2px 2px 0 rgb(109, 10, 0),
		-3px 3px 0 rgb(109, 10, 0),
		-4px 4px 0 rgb(109, 10, 0),
		-5px 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	}

2.2.element1 before How to Create Gmail logo with CSS3

Styling .element1::after

#gmail-logo2 .element1::after {
	content:'';
	position:relative;
	margin:40px 5px 0 0;
	float:right;
	display:block;
	background:rgb(201, 44, 25);
	width:30px;
	height:238px;
	-moz-transform:rotate(3deg);
	-webkit-transform:rotate(3deg);
	-o-transform:rotate(3deg);
	transform:rotate(3deg);
	border-radius:0 18px 26px 0;
	-webkit-border-radius:0 18px 26px 0;
	-moz-border-radius:0 18px 26px 0;
	box-shadow:
		-1px 1px 0 rgb(109, 10, 0),
		-2px 2px 0 rgb(109, 10, 0),
		-3px 3px 0 rgb(109, 10, 0),
		-4px 4px 0 rgb(109, 10, 0),
		-5px 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0),
		-6px 7px 0 rgb(109, 10, 0);
	-moz-box-shadow:
		-1px 1px 0 rgb(109, 10, 0),
		-2px 2px 0 rgb(109, 10, 0),
		-3px 3px 0 rgb(109, 10, 0),
		-4px 4px 0 rgb(109, 10, 0),
		-5px 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0),
		-6px 7px 0 rgb(109, 10, 0);
	-webkit-box-shadow:
		-1px 1px 0 rgb(109, 10, 0),
		-2px 2px 0 rgb(109, 10, 0),
		-3px 3px 0 rgb(109, 10, 0),
		-4px 4px 0 rgb(109, 10, 0),
		-5px 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0),
		-6px 7px 0 rgb(109, 10, 0);
	}

2.3.element1 after How to Create Gmail logo with CSS3

Styling .element2::before

#gmail-logo2 .element2::before {
	content:'';
	margin:22px 0 0 48px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:315px;
	height:14px;
	-moz-transform:rotate(6.8deg);
	-webkit-transform:rotate(6.8deg);
	-o-transform:rotate(6.8deg);
	transform:rotate(6.8deg);
	box-shadow:
		0 1px 0 rgb(109, 10, 0),
		0 2px 0 rgb(109, 10, 0),
		0 3px 0 rgb(109, 10, 0),
		0 4px 0 rgb(109, 10, 0),
		0 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	-webkit-box-shadow:
		0 1px 0 rgb(109, 10, 0),
		0 2px 0 rgb(109, 10, 0),
		0 3px 0 rgb(109, 10, 0),
		0 4px 0 rgb(109, 10, 0),
		0 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	-moz-box-shadow:
		0 1px 0 rgb(109, 10, 0),
		0 2px 0 rgb(109, 10, 0),
		0 3px 0 rgb(109, 10, 0),
		0 4px 0 rgb(109, 10, 0),
		0 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	}

2.4.element2 before How to Create Gmail logo with CSS3

Styling .element2::after

#gmail-logo2 .element2::after {
	content:'';
	position:relative;
	margin:230px 0 0 36px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:310px;
	height:12px;
	box-shadow:
		0 1px 0 rgb(109, 10, 0),
		0 2px 0 rgb(109, 10, 0),
		0 3px 0 rgb(109, 10, 0),
		0 4px 0 rgb(109, 10, 0),
		0 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	-webkit-box-shadow:
		0 1px 0 rgb(109, 10, 0),
		0 2px 0 rgb(109, 10, 0),
		0 3px 0 rgb(109, 10, 0),
		0 4px 0 rgb(109, 10, 0),
		0 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	-moz-box-shadow:
		0 1px 0 rgb(109, 10, 0),
		0 2px 0 rgb(109, 10, 0),
		0 3px 0 rgb(109, 10, 0),
		0 4px 0 rgb(109, 10, 0),
		0 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	}

2.5.element2 after How to Create Gmail logo with CSS3

Styling .element3::before

#gmail-logo2 .element3::before {
	content:'';
	position:relative;
	margin:8px 0 0 42px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:42px;
	height:268px;
	-moz-transform:rotate(3deg);
	-webkit-transform:rotate(3deg);
	-o-transform:rotate(3deg);
	transform:rotate(3deg);
	}

2.6.element3 before How to Create Gmail logo with CSS3

Styling .element3::after

#gmail-logo2 .element3::after {
	content:'';
	position:relative;
	margin:40px 32px 0 0;
	float:right;
	display:block;
	background:rgb(201, 44, 25);
	width:22px;
	height:236px;
	-moz-transform:rotate(3.0deg);
	-webkit-transform:rotate(3.0deg);
	-o-transform:rotate(3.0deg);
	transform:rotate(3.0deg);
	box-shadow:
		0 1px 0 rgb(109, 10, 0),
		0 2px 0 rgb(109, 10, 0),
		0 3px 0 rgb(109, 10, 0),
		0 4px 0 rgb(109, 10, 0),
		0 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	-webkit-box-shadow:
		0 1px 0 rgb(109, 10, 0),
		0 2px 0 rgb(109, 10, 0),
		0 3px 0 rgb(109, 10, 0),
		0 4px 0 rgb(109, 10, 0),
		0 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	-moz-box-shadow:
		0 1px 0 rgb(109, 10, 0),
		0 2px 0 rgb(109, 10, 0),
		0 3px 0 rgb(109, 10, 0),
		0 4px 0 rgb(109, 10, 0),
		0 5px 0 rgb(109, 10, 0),
		-6px 6px 0 rgb(109, 10, 0);
	}

2.7.element3 after How to Create Gmail logo with CSS3

Styling .element4::before

#gmail-logo2 .element4::before {
	content:'';
	position:relative;
	margin:-2px 0 0 130px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:54px;
	height:192px;
	-moz-transform:rotate(-49deg);
	-webkit-transform:rotate(-49deg);
	-o-transform:rotate(-49deg);
	transform:rotate(-49deg);
	box-shadow:
		-1px 0 0 rgb(109, 10, 0),
		-2px 0 0 rgb(109, 10, 0),
		-3px 0 0 rgb(109, 10, 0),
		-4px 0 0 rgb(109, 10, 0),
		-5px 0 0 rgb(109, 10, 0),
		-6px 0 0 rgb(109, 10, 0),
		-7px 0 0 rgb(109, 10, 0),
		-8px 0 0 rgb(109, 10, 0);
	-moz-box-shadow:
		-1px 0 0 rgb(109, 10, 0),
		-2px 0 0 rgb(109, 10, 0),
		-3px 0 0 rgb(109, 10, 0),
		-4px 0 0 rgb(109, 10, 0),
		-5px 0 0 rgb(109, 10, 0),
		-6px 0 0 rgb(109, 10, 0),
		-7px 0 0 rgb(109, 10, 0),
		-8px 0 0 rgb(109, 10, 0);
	-webkit-box-shadow:
		-1px 0 0 rgb(109, 10, 0),
		-2px 0 0 rgb(109, 10, 0),
		-3px 0 0 rgb(109, 10, 0),
		-4px 0 0 rgb(109, 10, 0),
		-5px 0 0 rgb(109, 10, 0),
		-6px 0 0 rgb(109, 10, 0),
		-7px 0 0 rgb(109, 10, 0),
		-8px 0 0 rgb(109, 10, 0);
	}

2.8.element4 before How to Create Gmail logo with CSS3

Styling .element4::after

#gmail-logo2 .element4::after {
	content:'';
	position:relative;
	margin:12px 88px 0 0;
	float:right;
	display:block;
	background:rgb(201, 44, 25);
	width:54px;
	height:186px;
	border-radius:30px 0 0 0;
	-webkit-border-radius:30px 0 0 0;
	-moz-border-radius:30px 0 0 0;
	-moz-transform:rotate(53deg);
	-webkit-transform:rotate(53deg);
	-o-transform:rotate(53deg);
	transform:rotate(53deg);
	}

2.9.element4 after How to Create Gmail logo with CSS3

Styling .element5::before

#gmail-logo2 .element5::before {
	content:'';
	position:relative;
	margin:115px 0 0 125px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:2px;
	height:150px;
	-moz-transform:rotate(55deg);
	-o-transform:rotate(55deg);
	-webkit-transform:rotate(55deg);
	transform:rotate(55deg);
	}

2.10.element5 before How to Create Gmail logo with CSS3

Styling .element5::after

#gmail-logo2 .element5::after {
	position:relative;
	content:'';
	margin:115px 0 0 150px;
	float:left;
	display:block;
	background:rgb(201, 44, 25);
	width:2px;
	height:150px;
	-moz-transform:rotate(-50deg);
	-webkit-transform:rotate(-50deg);
	-o-transform:rotate(-50deg);
	transform:rotate(-50deg);
	}

2.11.element5 after How to Create Gmail logo with CSS3

Adjusting the priority of z-index.

#gmail-logo2 .element1::before {z-index:3;}
#gmail-logo2 .element1::after {z-index:1;}
/*#gmail-logo2 .element2::before {}*/
#gmail-logo2 .element2::after {z-index:2;}
#gmail-logo2 .element3::before {z-index:5;}
#gmail-logo2 .element3::after {z-index:1;}
#gmail-logo2 .element4::before {z-index:4;}
#gmail-logo2 .element4::after {z-index:3;}
/*#gmail-logo2 .element5::before {}
#gmail-logo2 .element5::after {}*/

2.12 z index How to Create Gmail logo with CSS3

We are almost done. Your Gmail logo should look something like this:

2.13 gmail How to Create Gmail logo with CSS3

Finally, let’s give it a different color upon hovered.

#gmail-logo2:hover *::after,
#gmail-logo2:hover *::before {
background:rgba(20, 196, 7, 1);
}
#gmail-logo2:hover .element1::before {
	box-shadow:
		-1px 1px 0 rgb(10, 90, 4),
		-2px 2px 0 rgb(10, 90, 4),
		-3px 3px 0 rgb(10, 90, 4),
		-4px 4px 0 rgb(10, 90, 4),
		-5px 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	-webkit-box-shadow:
		-1px 1px 0 rgb(10, 90, 4),
		-2px 2px 0 rgb(10, 90, 4),
		-3px 3px 0 rgb(10, 90, 4),
		-4px 4px 0 rgb(10, 90, 4),
		-5px 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	-moz-box-shadow:
		-1px 1px 0 rgb(10, 90, 4),
		-2px 2px 0 rgb(10, 90, 4),
		-3px 3px 0 rgb(10, 90, 4),
		-4px 4px 0 rgb(10, 90, 4),
		-5px 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	}
#gmail-logo2:hover .element1::after {
	box-shadow:
		-1px 1px 0 rgb(10, 90, 4),
		-2px 2px 0 rgb(10, 90, 4),
		-3px 3px 0 rgb(10, 90, 4),
		-4px 4px 0 rgb(10, 90, 4),
		-5px 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4),
		-6px 7px 0 rgb(10, 90, 4);
	-moz-box-shadow:
		-1px 1px 0 rgb(10, 90, 4),
		-2px 2px 0 rgb(10, 90, 4),
		-3px 3px 0 rgb(10, 90, 4),
		-4px 4px 0 rgb(10, 90, 4),
		-5px 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4),
		-6px 7px 0 rgb(10, 90, 4);
	-webkit-box-shadow:
		-1px 1px 0 rgb(10, 90, 4),
		-2px 2px 0 rgb(10, 90, 4),
		-3px 3px 0 rgb(10, 90, 4),
		-4px 4px 0 rgb(10, 90, 4),
		-5px 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4),
		-6px 7px 0 rgb(10, 90, 4);
	}
#gmail-logo2:hover .element2::before {
	box-shadow:
		0 1px 0 rgb(10, 90, 4),
		0 2px 0 rgb(10, 90, 4),
		0 3px 0 rgb(10, 90, 4),
		0 4px 0 rgb(10, 90, 4),
		0 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	-webkit-box-shadow:
		0 1px 0 rgb(10, 90, 4),
		0 2px 0 rgb(10, 90, 4),
		0 3px 0 rgb(10, 90, 4),
		0 4px 0 rgb(10, 90, 4),
		0 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	-moz-box-shadow:
		0 1px 0 rgb(10, 90, 4),
		0 2px 0 rgb(10, 90, 4),
		0 3px 0 rgb(10, 90, 4),
		0 4px 0 rgb(10, 90, 4),
		0 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	}
#gmail-logo2:hover .element2::after {
	box-shadow:
		0 1px 0 rgb(10, 90, 4),
		0 2px 0 rgb(10, 90, 4),
		0 3px 0 rgb(10, 90, 4),
		0 4px 0 rgb(10, 90, 4),
		0 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	-webkit-box-shadow:
		0 1px 0 rgb(10, 90, 4),
		0 2px 0 rgb(10, 90, 4),
		0 3px 0 rgb(10, 90, 4),
		0 4px 0 rgb(10, 90, 4),
		0 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	-moz-box-shadow:
		0 1px 0 rgb(10, 90, 4),
		0 2px 0 rgb(10, 90, 4),
		0 3px 0 rgb(10, 90, 4),
		0 4px 0 rgb(10, 90, 4),
		0 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	}
#gmail-logo2:hover .element3::after {
	box-shadow:
		0 1px 0 rgb(10, 90, 4),
		0 2px 0 rgb(10, 90, 4),
		0 3px 0 rgb(10, 90, 4),
		0 4px 0 rgb(10, 90, 4),
		0 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	-webkit-box-shadow:
		0 1px 0 rgb(10, 90, 4),
		0 2px 0 rgb(10, 90, 4),
		0 3px 0 rgb(10, 90, 4),
		0 4px 0 rgb(10, 90, 4),
		0 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	-moz-box-shadow:
		0 1px 0 rgb(10, 90, 4),
		0 2px 0 rgb(10, 90, 4),
		0 3px 0 rgb(10, 90, 4),
		0 4px 0 rgb(10, 90, 4),
		0 5px 0 rgb(10, 90, 4),
		-6px 6px 0 rgb(10, 90, 4);
	}
#gmail-logo2:hover .element4::before {
	box-shadow:
		-1px 0 0 rgb(10, 90, 4),
		-2px 0 0 rgb(10, 90, 4),
		-3px 0 0 rgb(10, 90, 4),
		-4px 0 0 rgb(10, 90, 4),
		-5px 0 0 rgb(10, 90, 4),
		-6px 0 0 rgb(10, 90, 4),
		-7px 0 0 rgb(10, 90, 4),
		-8px 0 0 rgb(10, 90, 4);
	-moz-box-shadow:
		-1px 0 0 rgb(10, 90, 4),
		-2px 0 0 rgb(10, 90, 4),
		-3px 0 0 rgb(10, 90, 4),
		-4px 0 0 rgb(10, 90, 4),
		-5px 0 0 rgb(10, 90, 4),
		-6px 0 0 rgb(10, 90, 4),
		-7px 0 0 rgb(10, 90, 4),
		-8px 0 0 rgb(10, 90, 4);
	-webkit-box-shadow:
		-1px 0 0 rgb(10, 90, 4),
		-2px 0 0 rgb(10, 90, 4),
		-3px 0 0 rgb(10, 90, 4),
		-4px 0 0 rgb(10, 90, 4),
		-5px 0 0 rgb(10, 90, 4),
		-6px 0 0 rgb(10, 90, 4),
		-7px 0 0 rgb(10, 90, 4),
		-8px 0 0 rgb(10, 90, 4);
	}

2.14 hover How to Create Gmail logo with CSS3

Preview | Download source file

15 Web Design Trends to Watch Out For in 2012

So far the year 2011 has brought upon some amazing changes in design and Internet technology. Web development has become a much smoother subject to jump into learning, not to mention the countless open source libraries useful in streamlining the process. And yet it seems the global design community is far from throwing in the towel.

web design trend 2012 15 Web Design Trends to Watch Out For in 2012

I want to introduce 15 ideas which have grown very rapidly over the past year. These trends encompass web and graphics design techniques which will likely play a big role moving into 2012. You have probably seen a few of these represented throughout many of your favorite sites online.

Thankfully the methods to implement these features are becoming easier to understand and much slimmer in code.

1. Responsive Interface Design

The average user’s experience is possibly the most important aspect to consider when designing a website. You want page elements to respond quickly to keyboard/mouse input and behave as expected. Some examples may include side fly-out menus, drop-down boxes, and popup windows.

Including famous JavaScript libraries such as MooTools and jQuery, it has become much easier to animate these features and even more. Most modern-day browsers support this code and even gracefully degrade when the scripts aren’t available. Ultimately you want to make the user feel comfortable when interacting with anywhere in the design.

bill gates foundation flyout menu 15 Web Design Trends to Watch Out For in 2012

Similarly you should take form input and data checking into consideration. On many registration pages you’ll receive small responses as you work through each input area. You can automate checking for valid e-mail addresses, duplicate usernames, and even double-check password inputs. This will save time on the user’s end and provides a handy guide throughout the signup process.

2. Touchscreen Mobile Devices

In the past couple of years it has become evident that smartphones are gaining support among even non-tech enthusiasts. But only since 2011 have we seen an explosion of mobile sites and mobile-specific templates.

touch gesture 15 Web Design Trends to Watch Out For in 2012

The popularity of iPhone and iPad devices along with Android-powered phones means you will have visitors fully interacting with your pages through touch commands. This has to become a realistic consideration with every design mockup. Trends in mobile web design have shown that building an entirely separate mobile theme often provides the best results. In this way you can keep all the dynamic content in place on your main layout while serving up a slimmed version of the site to mobile users.

3. Tons of Freebies!

Who can say they honestly don’t enjoy free downloads? Web designers have been sharing their content online for years, but only recently has this become a very popular trend among digital artists. There have been a few communities built specifically around offering free downloads for web and graphic designers.

Two of my personal favorites are Download PSD and Designmoo, both of which get updated frequently by top-quality members. Additionally the Hongkiat Freebies archive has plenty of sweet goodies to check out. In any era before it has literally never been this easy to download free web interfaces, layouts, logos, banners, and practically any other type of PSD/AI file!

Some Neat Downloads

Below are just a few cool freebies to check out from earlier in 2011. And if you think this list has some great files, just wait until 2012 rolls around!

Mini Web UI Set

01 uikit freebie 15 Web Design Trends to Watch Out For in 2012

Dark Mini Music Player

02 dark music player 15 Web Design Trends to Watch Out For in 2012

Sliding Tags

03 sliding tags psd 15 Web Design Trends to Watch Out For in 2012

Dark Photo Slider

04 dark photo slider 15 Web Design Trends to Watch Out For in 2012

Search Boxes

05 search boxes fancy 15 Web Design Trends to Watch Out For in 2012

Login in/Signin Form

06 login form 15 Web Design Trends to Watch Out For in 2012

Login Modal Box

07 login modal box 15 Web Design Trends to Watch Out For in 2012

Clean Login Form

08 clean login form 15 Web Design Trends to Watch Out For in 2012

Pricing Tables

09 pricing tables 15 Web Design Trends to Watch Out For in 2012

Minimal Loading Bars

10 minimal loading bars 15 Web Design Trends to Watch Out For in 2012

Attachment Pop-up

11 attachment popup 15 Web Design Trends to Watch Out For in 2012

4. HTML5 & CSS3 Standards

Both of these new design archetypes have accumulated an ever-growing following throughout 2011. Semantic web designers have been waiting years to churn out CSS-only designs rendering rounded corners and drop shadows. Additionally the W3C has made a lot of headway in garnering support from the most popular browsers.

I can only see good things for the future of HTML5/CSS3 web development. Front-end designers are often overlooked in today’s field, yet they serve such a great importance to the entire composition process. Try not to squeeze yourself into any set ‘label’ based on the techniques you know and practice daily. We offer a beginner’s how-to guide for HTML5/CSS3 coding if you feel the need to catch up.

html5 css3 for web designers 15 Web Design Trends to Watch Out For in 2012

Sticking with these new standards will also make developing in JavaScript and jQuery just that much easier. Developers have already been publishing and sharing their HTML5/CSS3 project code online, and if things continue we’ll surely notice a whole lot more of this going into next year.

5. Ribbons and Banners

Although this design technique isn’t exactly “new” it never truly broke through mainstream until just recently. You have probably seen examples of corner ribbons, banner navigation bars, and small ribbon badges. These trends have likely exploded because of the massive accumulation of detailed tutorials which can be found all through Google.

ruby robots banner 15 Web Design Trends to Watch Out For in 2012

Web designers are more competent these days in launching their own blogs to share information. Now simple techniques can easily be passed around between designers to duplicate the most popular effects. There are even free PSDs you can download to save yourself the effort.

6. Premium WordPress Themes

The final release of WordPress 3.0 included a host of long-awaited features such as custom post types and unique article images. Yet the most profound changes I have seen are coming from WordPress development shops which specialize in premium WP themes.

woothemes membership home page 15 Web Design Trends to Watch Out For in 2012

After you purchase such a theme the installation process is similar to any other. Yet it’s now possible to include custom plug-in functionality, child themes, new admin menus, and a whole bunch of other features right from within the theme! WooThemes, ElegantThemes and Rocket Themes are few brands which stand out to me above all the rest. Their quality is impeccable and I feel their developers go above-and-beyond to create the best templates and most intuitive admin menus.

Going into 2012 I can only imagine WordPress will become even easier to use. This means more high-quality themes to be released, and more amazing blogs to be launched.

7. Online Magazines

Speaking about WordPress themes we should also bring up the quickly-adopted success of online magazines. These websites are not so different from any generic WordPress blog aside from the general structure and page layout. You can spot these larger mags by the sheer presentation of their home page, and collection of authors writing for the site.

mashable online magazine layout 15 Web Design Trends to Watch Out For in 2012

As magazines begin moving online they will become a source of income for many writers. Granted a topic such as ‘web design’ targets a smaller niche than, say, gaming or economics. But the fact that we’re seeing more design magazines online than print goes to show where the world may be heading in the years to come.

8. Easy Drop Shadows

As a facet of CSS3 it’s now easier than ever for designers to implement a drop shadow anywhere on the page. Box text and box-style elements have been given respective properties to render clear-cut shadow effects.

The text-shadow syntax is very easy to memorize and follows along as box-shadow. With images now unnecessary in rendering these effects, web developers can focus on expanding these basic ideas further. I personally love Matt Hamm’s page curls which were developed entirely with CSS3. You can find all the code on his website to duplicate the effect and implement a similar style onto your own pages.

9. Dynamic Typography

Fonts are a big part of the sphere encompassing web design tradition. The most notable fonts including Arial, Helvetica, Georgia, and Trebuchet MS have been around for years now. Although they continue to serve a deep purpose in web standards, there are plenty of alternate options for advanced webpage typography.

Typekit for example only requires a couple lines of code to be included in your document head. After this you can specify which font names to include and append them into your CSS. The best part about this technique is that it relies mostly on JavaScript, so the end user isn’t required to have the fonts installed.

google web fonts display 15 Web Design Trends to Watch Out For in 2012

Another alternative is Google Web Fonts which behaves in a similar manner to Typekit. I recommend interested designers to check out CSS3′s @font-face media query, as you are given much more creativity. This code can be used to import a .ttf or .otf font file from your web server and include it as a usable stylesheet font! With so many alternate systems used for building dynamic fonts I’m expecting 2012 to hold a surge of innovation and design talent in this area.

10. Image Gallery Slideshows

With the subsequent popularity of jQuery I have spotted more and more image slideshows being dropped into web layouts. Galleries are perfect for demonstrating a quick glimpse of inner-page content. This could be a set of portfolio entries, photographs, blog posts with featured images, demo screenshots, etc.

hello themes magneto slideshow 15 Web Design Trends to Watch Out For in 2012

When you consider the many unique sliding and fading animations it has never been easier to construct a quick slideshow for your home page. I’m confident that 2012 will see an uptick in these trends, and not just between designers. Online web applications and software companies have been using slideshows as guided tutorials to display screenshots and unique features.

11. Modal Popup Boxes

I feel that modal boxes are still fairly new to the Internet considering they’ve been appearing in desktop software and mobile apps for years. The purpose of a modal window is to offer box content(such as user registration or login) on top of the current page without loading onto a new one.

digg login form modal 15 Web Design Trends to Watch Out For in 2012

Many of the open-source image gallery scripts use a type of lightbox effect where the background fades darker than the popup box. I really enjoy this feature whenever I see it, although it has yet to be adopted by many. And although modal boxes are sexy and sleek, they can also be very difficult to code and get working properly.

googleplus modal popup box 15 Web Design Trends to Watch Out For in 2012

To get ideas for your own websites check out some of the more popular social news sharing communities. Reddit and Digg are the first two which come to mind as they both feature register/login modal boxes with a typical layout. Additionally the UI effects for Google+ boast a considerable amount of modal functionality.

12. Inspirational Lists

Collections of list items have appeared since the very early days of web design. As we moved into the new century designers began using HTML ordered and unordered lists to house navigation menus. But nowadays lists can and are being used for much more.

flowapp lists todo format 15 Web Design Trends to Watch Out For in 2012

In most of the blog themes I find the entire sidebar is loaded with lists! Not to mention designers who have crafted awesome CSS styles for lists in their article entries. We covered inspiring list styles in another post earlier this year which may give you some more insight to the matter. Looking forward into 2012 I’m expecting some really creative examples, possibly on par with Flowapp’s custom layout for tasks & to-dos.

13. Generated Image Thumbnails

In the web universe we can agree that content is king. But most designers will also agree that a page of blank text becomes boring real quickly. Images can add that extra spice if you know how to sprinkle them in gently. One such method is using dynamic thumbnails to provide previews for each page or article.

Blogs today are continuing to adopt the featured image trend, so why not apply generated thumbnails into your theme as well? These often draw my attention towards the article headline and help to break up a page full of text links.

dribbble screenshot thumbnails 15 Web Design Trends to Watch Out For in 2012

As another example Dribbble provides a whole gallery listing of thumbnails for each design shot. In such a table row-style layout it’s super easy to catch a glimpse of each thumbnail and scroll through to find what you’re looking for. This tactic has proven to grab the attention of the whole design community! Er, at least the members of Dribbble at best. I can only expect that 2012 will see further exertion of these ideas building upon such examples from the past.

14. Oversized Icons

This unique trend semi-originates from the popularity of Mac OS X icon designs. As programmers began to launch websites for their Mac applications we all too frequently have seen the enormous sizes represented in branding. Accordingly this trend has also been picked up through iOS developers and now comfortably rests within modern design culture.

panic transmit app icon 15 Web Design Trends to Watch Out For in 2012

It’s difficult to predict how these trends will fair as we move into 2012. On the one hand these icons can be clunky and take up more space than necessary. Yet we’re not even close to hitting a shortage of iOS/OSX apps and designers are still churning out pixel-perfect icon specs. Not to mention that web designers are now including oversized icons within just about any page branding! It’s a good way to nab your visitor’s direct attention and build a name for your company.

15. Exaggerated Hyperlinks

Anchor links are certainly within the top five most important elements of any website. These have obviously come a long way since the 1990s and popular design trends have only been growing exponentially. It appears we are moving into an era where exaggerated design takes precedence.

simplebits studio links 15 Web Design Trends to Watch Out For in 2012

Check out a few of the link examples from Patterntap to see if any jump out and catch your eye. There are so many incredible ideas for hyperlink design, both in standard and hover effects. CSS3 rounded corners, text shadows, and custom font families add even more great ideas into the mix! One of my favorite examples is from SimpleBits which uses a short dynamic animation on each of their blog entry permalinks.

Conclusion

These ideas are only some of the more popular trends I have noticed gaining precedence throughout 2011. Great web design is always about focus and keeping user intentions as top priority. It’s unlikely these philosophies will differ moving into 2012, but how we build layouts and present data is always in change. Let us know your thoughts or questions in the comments discussion area.

Beginner’s Guide To: Building HTML5/CSS3 Webpages

HTML5 and CSS3 have swept the web by storm in only 2 years. Before them there have been many altered semantics in the way web designers are expected to create web pages, and with their arrival come a slew of awesome supports such as alternative media, XML-style tags, and progressive input attributes for web designers to achieve dreamy features like animation.

html5 css3 Beginners Guide To: Building HTML5/CSS3 Webpages
(Image Source: SARBARTHA DAS, HeskinRadiophonic)

Though most developers seem to showcase potential yet complicated demos, HTML5/CSS3 are not really rocket science, and I’ll be walking you through the relaxing process to build a standard HTML5/CSS3 web page with comprehensive yet in-depth explanation and tada! Bonuses like learning resources and free HTML5 templates are available for you, so take this chance to kick-start your HTML5 journey!

Changes between HTML4 and HTML5

You may be wondering why it’s even important to switch into HTML5. There are a myriad of reasons, but mostly because you’ll be working with the global Internet standards like every other designer. In this way you’ll find more support online and your websites will render properly in modern browsers which are constantly improved.

html5 semantics Beginners Guide To: Building HTML5/CSS3 Webpages
(Image Source: W3C)

Comparison between HTML4 and HTML5 is difficult to spot at surface level. From viewing the new HTML5 draft you can see featured elements and corrected error handling procedures. Browser developers have specifically enjoyed the new specifications for rendering default web pages.

What’s more from HTML5 is the conversion of our modern web browser. With these new specifications the web as a whole is now viewed as an application platform for HTML (especially HTML5), CSS, and JavaScript to be built upon. Also, this system elegantly creates harmony between web designers and developers by setting common standards which all browsers should follow.

Additionally many elements have been created to represent new-age digital media. These include <video> and <audio> which are huge for multimedia support. In some browsers you may complete form validation directly in HTML. Granted there is still a heavy need for jQuery, since there are many software developers who have yet to recognize the features. If you’d like a list of tags check this W3Schools table to learn more about them.

Bare HTML5 Skeleton

I find the easiest way to understand any topic is to dive right into it. So I’ll be constructing a very basic HTML5 skeleton template for a web page. I included a few of the newer elements, which I hope to categorize a bit later.

<!doctype html>
<head>
  <meta charset="utf-8">
  <title>Our First HTML5 Page</title>
  <meta name="description" content="Welcome to my basic template.">
  <link rel="stylesheet" href="css/style.css?v=1">
</head>

<body>
    <div id="wrapper">
    	<header>
            <h1>Welcome, one and all!</h1>

            <nav>
            	<ul>
                    <li><a rel="external" href="#">Home</a></li>
                    <li><a rel="external" href="#">About us</a></li>
                    <li><a rel="external" href="#">Contacts</a></li>
                </ul>
            </nav>
        </header>

        <div id="core" class="clearfix">
            <section id="left">
            	<p>some content here.</p>
            </section>

            <section id="right">
                <p>but some here as well!</p>
            </section>
        </div>

        <footer>
            <p>Some copyright and legal notices here. Maybe use the © symbol a bit.</p>
        </footer>
    </div>

</body>
</html>

Right away this isn’t very different from a standard HTML4 web page. What you may notice is that we do not need to include any more self-closing tags. This is truly wonderful news as it will save lots of time off your development projects.

For those who don’t know, in XHTML drafts there were many elements labelled self-closing. These would end with a forward slash before the ‘greater than’ operator to signify you wouldn’t need to include another closing tag elsewhere. As an example, to create a meta keywords tag you would use <meta name="keywords" content="HTML5,CSS3,JavaScript" /> without the need for a closing </meta> elsewhere.

This rule still applies in HTML5. But now you don’t even need the extra forward slash! <meta name="keywords" content="HTML5,CSS3,JavaScript"> is completely valid, although you are allowed to continue using the XHTML/XML standard. For all standards-compliant browsers both elements will render the same way.

Defining our Page Areas

The majority of our new code shouldn’t be too shocking. Our doctype is hilariously simpler than ever, no need for excessive body attributes, and information in our heading is clearly labelled. Moving on I’d like to focus your attention on the content inside our <body> tag. This includes all of the main page’s structure. I’ve purposefully used a few nice HTML5 tags to signify how you may include them in your own work.

First you’ll see the entire page is encapsulated within a div tag. I’ve labelled this with an ID of wrapper, meaning it wraps around our entire website content. This is useful to set a maximum width or position content around on the screen. Next I’ve fractured the page into 3 core elements – one <header>, a core <div>, and a short <footer>. Inside my custom header area I have added a simplistic display of the page’s title, and navigation items using the <nav> tag as a wrapper.

Now for the <div> with an ID of core I have applied a secondary clearfix. This feature makes it so we can freely float 2 columns inside and we won’t experience any dropped content or strange phenomena. And rightfully so, as inside I have placed two <section> tags which will include our main content area and sidebar, respectively. We’ll be using CSS styles to float them apart.

Similarly the quiet footer tag works well to differentiate this content among the page. Inside I have placed a solemn paragraph which may contain some copyright and ownership information. But chances are good you’ll want to include a bit more content, such as secondary links to your pages.

Creative CSS3 Wizardry

To finish off this basic stencil layout we can use a few CSS styles. In the basic HTML5 template I added an external CSS stylesheet so we can keep our code areas separated. This will clear up a lot of confusion in the long run when your pages and styles begin to run on for different pages.

html5 css3 styling Beginners Guide To: Building HTML5/CSS3 Webpages
(Image Source: W3C)

So I haven’t spent a great deal of time with CSS, but enough to showcase a couple of neat effects. First off I’ve used some of the border-radius settings to build very cool navigation link hover effects. You can target this same effect in the template code, just add the following lines into the CSS document.

nav {
	display: block;
	margin-bottom: 10px;
}
nav ul {
	list-style: none;
	font-size: 14px;
}
nav ul li {
	display: inline;
}
nav ul li a {
	display: block;
	float: left;
	padding: 3px 6px;
	color: #575c7d;
	text-decoration: none;
	font-weight: bold;
}
nav ul li a:hover {
	background: #deff90;
	color: #485e0f;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 3px 6px;
	margin: 0;
	text-decoration: none;
}

Another neat effect is the clearfix styles. This isn’t an entirely new concept with CSS3, but it is important for building standards-compliant web pages. Often when you’re looking to float content next to each other you’ll experience buggy positioning glitches. This is caused by offset margins and errors in setting absolute widths for your floated content.

This concept can seem a bit confusing, and I’ve added a small bit of code below to help. Basically we’re targeting two <section> elements, #left and #right to correspond to their side of the page. I’ve set each with a definite width and floating left, so they’ll stack right up next to each other. Since our container div#core contains the clearfix class, this means all internal content can be move around freely and automatically clears extra space afterwards.

/* page core */
div#core {
	display: block;
	clear: both;
	margin-bottom: 20px;
}
section#left {
	width: 550px;
	float: left;
	margin: 0 15px;
}
section#right {
	float: left;
	width: 300px;
}

/* clearfix */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display: inline-block;
}

html[xmlns] .clearfix {
	display: block;
}
* html .clearfix {
	height: 1%;
}

These bits of code are simple for getting started. They also pertain to our HTML5 template code constructed earlier, so this is simple practice. But when it comes to real web junkies you’ll be looking into more CSS3 functionality.

Lesser Known CSS3 Syntax

To construct full HTML5/CSS3 web pages you’ll begin to use some much more complex stylesheets. Many designers know of shorthand code (such as the font: property), since these have been standards even before CSS2.

But there are a few new properties in CSS3 which many designers aren’t thinking about. Many of these aren’t just for aesthetics, but also include animation effects. Below is a short list explaining a few of the properties you may consider playing with. Try googling for syntax examples if you feel lost.

  • box-shadow: adds a neat shadow effect to your page elements. You are given 4 parameters which set the position left/right, up/down, shadow blur and color. Note that box shadows are not considered additional space to the original width/height.
  • text-shadow: creates beautiful shadows behind your page text. With the right effects your letters could appear to pop right off the page. Read a bit more about text shadows at this post.
  • border-radius: Rounded corners have taken a long time to become accepted standards. Few years ago many web 2.0 designers were crafting background images just to fit rounded corners in with CSS. But using CSS3 border-radius you can manipulate the curve of each border on any element.
  • opacity: Seems like a simple property which many designers don’t consider. Opacity expects a single numerical input ranging from 0 to 1.0 (0% – 100%). This effect works great as a hover animation.
  • @font-face: Another beautiful example of some complex CSS styles and typography. Web designers are now able to work with their own custom fonts by defining them as variables inside your CSS documents. The process is a bit confusing, but Zen Elements has outlined the process in a very simplistic manner.
  • box-sizing: by default box-sizing will set all of your elements as content-box. This means width, padding, and borders are all included into the max width. But set to border-box you can define a max width (say 20px) and added padding/borders will include themselves into this, thus removing space inside the object. It’s a fantastic property once you master its resourcefulness.

These properties all have their upsides and downfalls. I wouldn’t recommend trying to cram them all into your web pages. But practice will give you a clear mindset to enter into developing further websites with ease.

One more core piece of added syntax worth mentioning is attribute selectors. With CSS3 you can now define styles based on HTML attributes (such as type, href, title) and even provide specific values. So for example we could target links with a defined title attribute and give them a set of background icon.

ul li[title^="ico"] {
	background: url('my-icon.gif');
}

If you notice I’ve included a caret symbol before the equals sign. This is an operator which defines all list items holding the prefix, ico. Alternatively you can replace the caret(^) with a dollar sign($) to target the suffix area of your title. In this way CSS3 knows to add background images where you could set the titles as ‘first ico’ or ‘book ico’. Read up a bit more about attribute selectors if you’re interested.

Putting it All Together

At the core of HTML5 and CSS3 web pages is simplicity. Web developers are trying to build highly creative websites in less time and with less stress. The new features in HTML5 allow this with plenty of wiggle room. And using some of the new CSS3 selectors and properties will give you advantages in the long run.

html5 performance and integration Beginners Guide To: Building HTML5/CSS3 Webpages
(Image Source: W3C)

But as well you should be considering the end user. The process of building a web page ultimately ends after launching the website public. Your goal is to please audience with easy-to-access information, and not just human readers, but search engine crawlers and indexing bots. Semantics have greatly evolved to include new HTML5 layout elements, splitting up page layouts consistently. It’s never been easier to construct a small navigation and footer section in line with all modern web browsers.

Once you have become comfortable building HTML5 web pages you’ll likely start looking into page animations. Even minor effects with JavaScript and AJAX can majorly improve user experience and site performance. Although this isn’t part of the article scope, I recommend toying around with jQuery if you have any time. The open source library is astounding and allows for rapid prototyping on top of HTML5 page elements.

Additional Resources

Bloggers all around the world have been discussing the new trends in HTML5 and CSS3 and sharing resources to the public. The time is changing and the web community is changing with them. You should consider a few niche areas to study into and build a small interest.

Below are some additional lists, articles and tutorials you may enjoy. I’ve taken the liberty of splitting the lists into HTML5 and CSS3 resources. Based on what you’re looking into there should be a few topics here for everybody. Also enjoy the brief gallery of free HTML themes available for download online!

HTML5

CSS3

Bonus: HTML5 Templates & Themes

Design Company

Ready to step into the wonderful world of HTML5? Here’s a completely free HTML5 template, with jQuery scripts and custom fonts armed for you to test freely!

design company Beginners Guide To: Building HTML5/CSS3 Webpages

A HTML5/CSS3 Theme

This HTML5/CSS3 powered theme has common blog’s layout design for you to either build your own HTML5 blog with extensive features, or simply dig into the code and learn something about it.

a html5 css3 theme Beginners Guide To: Building HTML5/CSS3 Webpages

Spectacular

The spectacular WordPress theme comes in 2 flavors: HTML4.01 and HTML5, making it a very good resource to learn the coding difference between the HTML brothers.

spectacular Beginners Guide To: Building HTML5/CSS3 Webpages

Yoko

Yoko is a modern WordPress theme talking about flexibility with its responsive layout based on CSS3 media queries, which is the ability to adjust to different screen sizes, get to know about it!

yoko Beginners Guide To: Building HTML5/CSS3 Webpages

Grey

If you prefer the classic WordPress blog’s style, Grey is probably for you with its built-in CSS3 features like border-radius, multiple backgrounds, text-shadow, etc.

grey Beginners Guide To: Building HTML5/CSS3 Webpages

How to Create An Ajax-Based HTML5/CSS3 Contact Form

Contact form is deadly essential for any website, as it acts as a messenger which passes the opinion or enquiries of visitors to webmaster. There have been countless contact forms on the web but unfortunately most of them do not explain to you the inner working parts, so here comes a detailed tutorial to teach you to build an advanced contact form from scratch based on the pop technology, HTML5 and CSS3.

html5 contact form article How to Create An Ajax Based HTML5/CSS3 Contact Form

Considering the nature of a web-based e-mail contact form we are also required to dive into two separate application fields, which is the PHP backend code for sending email and jQuery functions for rich user interface. By the end we will be left with a fully dynamic and functional contact form written with later customization in mind.

Get started now to build your own advanced contact form!

Shortcut to:

  • Demo – Get a preview of what you are building
  • Download – Download all files (php + css)

Structuring the Application

To get started you’ll need some type of web server to work over. If you’re running a Windows machine WAMP is probably your best option. Mac users have a similar program named MAMP which is just as easy to install.

wampserver How to Create An Ajax Based HTML5/CSS3 Contact Form

These packages will set up a local server on your machine with full access to PHP. Alternatively if you own server space or have full server access into a remote location you may use that instead. We are not going to need any MySQL databases, which should simplify things a bit.

Once your server is set up create a new folder to house the application. You can name this whatever you’d like as it isn’t detrimental or even related to the final product. The folder structure will be used when you access your files in a web browser. A simple example would be http://localhost/ajaxcontact/contact.php

Let’s Build our Files!

We will only be working within 2 core files. We’ll first need a core .php file to house not only our application logic, but also frontend HTML markup. Below is sample code taken from our starting file.

<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en">
<head>
<title>HTML5/CSS Ajax Contact Form with jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

To begin we have written a simple heading section to our document. This includes a general Doctype declaration for HTML5 and some HTML/XML document elements. These aren’t exactly required, but will ease the rendering process in older (and newer) browsers. Also it never hurts to offer more information.

A bit further down we can see 2 lines right before our closing heading tag. The first includes our jQuery script from the online Google Code Repository. This is required for our dynamic page errors to work. Directly below this we have the inclusion of a basic CSS document containing all of our page styles.

Inside our document body we have a few containing divisions withholding a main contact form. This houses 3 input elements for the user’s name, e-mail address, and personal message. The HTML markup is fairly standard and shouldn’t boggle the mind of any intermediate developer.

<!-- @begin contact -->
<div id="contact" class="section">
	<div class="container content">

	 <?php if(isset($emailSent) && $emailSent == true) { ?>
     	<p class="info">Your email was sent. Huzzah!</p>
     <?php } else { ?>

Here we have a basic PHP conditional code nested within a few page containers. This checks for the set value of a variable named $emailSent and if equal to true, it will display a success message.

Inside our Form HTML

The else statement is what will run on first page load since there won’t be any content to send initially. Inside here we will include a brief collection of form elements and a submit button.

<div id="contact-form">
	<?php if(isset($hasError) || isset($captchaError) ) { ?>
    	<p class="alert">Error submitting the form</p>
    <?php } ?>

	<form id="contact-us" action="contact.php" method="post">
		<div class="formblock">
		<label class="screen-reader-text">Name</label>
		<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="txt requiredField" placeholder="Name:" />

		<?php if($nameError != '') { ?>
			<br /><span class="error"><?php echo $nameError;?></span>
		<?php } ?>

		</div>

		<div class="formblock">
		<label class="screen-reader-text">Email</label>
		<input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="txt requiredField email" placeholder="Email:" />

		<?php if($emailError != '') { ?>
			<br /><span class="error"><?php echo $emailError;?></span>
		<?php } ?>

		</div>

		<div class="formblock">
			<label class="screen-reader-text">Message</label>
			<textarea name="comments" id="commentsText" class="txtarea requiredField" placeholder="Message:"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>

		<?php if($commentError != '') { ?>
			<br /><span class="error"><?php echo $commentError;?></span>
		<?php } ?>
		</div>

		<button name="submit" type="submit" class="subbutton">Send us Mail!</button>
		<input type="hidden" name="submitted" id="submitted" value="true" />
	</form>
</div>

<?php } ?>
</div>
</div><!-- End #contact -->

You may have noticed there is another conditional block directly after the starting form. This checks for a variable named $hasError and will display an error message upon confirmation. This fallback method is only used if JavaScript is disabled in the browser and thus can’t generate dynamic errors.

All the way down we can find individual PHP variables being checked. The statements are regulating if the form has already been submitted with only partial amounts of data filled in. This is another fallback system which displays the contents of fields already filled out – a nice trick for proper user experience!

Directly after our form completion is the few jQuery functions we’ve written. We will talk over these first since they are the default implementation on pageload. However if the browser doesn’t accept JavaScript then by default we can rely on our PHP code.

Opening to jQuery

The easiest way to get started talking on this topic would be to dive right in. I’ll break down individual blocks line-by-line so you can see what the script is actually checking for.

However if you get lost just review the project code files. All of the full blocks are pre-written and well documented in the jQuery website. To get started we open our code similar to any other:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
$(document).ready(function() {
	$('form#contact-us').submit(function() {

The first few lines are checking for specific event occurrences. After our CDATA comments to hide the code from older, buggy browsers we get started checking for ready events.

The first bit checks if the document has fully loaded and is ready for manipulation. This is a classic technique and the easiest way to start coding a jQuery project.

Once inside we are checking for a form element under the ID "contact-us", and we want to know when it is submitted. Upon doing so we call another function to display our error messages or slideUp() upon success.

$('form#contact-us .error').remove();
var hasError = false;
$('.requiredField').each(function() {
    if($.trim($(this).val()) == '') {
        var labelText = $(this).prev('label').text();
        $(this).parent().append('<span class="error">Your forgot to enter your '+labelText+'.</span>');
        $(this).addClass('inputError');
        hasError = true;
    } else if($(this).hasClass('email')) {
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        if(!emailReg.test($.trim($(this).val()))) {
            var labelText = $(this).prev('label').text();
            $(this).parent().append('<span class="error">Sorry! You\'ve entered an invalid '+labelText+'.</span>');
            $(this).addClass('inputError');
            hasError = true;
        }
    }
});

First we remove any pre-existing errors so we don’t hold any previous messages from before. A few lines down we can see a selector for all elements under the class “requiredField“. These are all of our required field elements – name, e-mail, and message.

jQuery will take the value of each field and remove all spaces from the value. If the content is equal to nothing, then we display an error message next to that field warning our user to fill in some value. Right before the end of our logic there is a bit of Regex code validating the e-mail value.

Lastly we can see if no error is set and check for full input content. If this is the case we call a jQuery method named post(). This will submit our form and check within the PHP code for any errors. Assuming none are found the slideUp() animation is called to hide our contact form and display a “success!” message.

if(!hasError) {
	var formInput = $(this).serialize();
	$.post($(this).attr('action'),formInput, function(data){
	$('form#contact-us').slideUp("fast", function() {
		$(this).before('<p class="tick"><strong>Thanks!</strong> Your email has been delivered. Huzzah!</p>');
		});
	});
	}

	return false;
});
});
//-->!]]>
</script>

If you are familiar with callbacks you may notice the post() function has a built-in set of parameters. Callbacks are smaller functions which are called upon the response of data from another function.

So for example, when our jQuery.post() function successfully shoots an e-mail it will call its own internal function to display the sliding animation. All of this code could be written in its own block and moved elsewhere. However for the sake of this tutorial it’s much easier writing the callback as an inline function.

Breaking past our PHP

The final hurdle to mention is the logic behind our PHP processor. This is the backend system which will actually call a mail function and send out the message. All of the code used in the examples below can be found directly at the top of our main .php file, before any HTML output.

There are also a few internal styles which freshen up the page. There isn’t anything specifically new here so we won’t be going into any of the details. However the styles.css document is included within the project code and contains rudimentary CSS3 techniques.

<?php
//If the form is submitted
if(isset($_POST['submitted'])) {

To start we open our PHP clause and check if the form was even submitted. The POST variable “submitted” was actually a hidden input field added at the very end of our form. It’s a useful way to check if the user has submitted anything yet so we don’t waste server resources.

After this we have 3 separate if/else statement checking to see if each input field has been filled out. I won’t include each bit of logic here since they are all very repetitive in nature. However, to give you a brief example I’ve included the e-mail verification clause below:

// need valid email
if(trim($_POST['email']) === '')  {
	$emailError = 'Forgot to enter in your e-mail address.';
	$hasError = true;
} else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
	$emailError = 'You entered an invalid email address.';
	$hasError = true;
} else {
	$email = trim($_POST['email']);
}

PHP will trim all whitespace from the value and check to see if anything is left over. If so we have a detailed Regular Expression (Regex) to see if our user’s input string matches up with an e-mail pattern.

You certainly don’t need to understand how preg_match() works to build this script. It is a useful function to determine rules and requirements for a successful type of data, but commands advanced programming knowledge to really grasp. In this scenario we are ensuring the user only inputs a select few characters, includes an @ symbol followed by 2-4 characters representing a Top-Level Domain.

After all of our logic passes and we return no errors it’s time to send our message! This bit of code will set individual variables to customize our e-mail message and setup some mail headers for the process.

// upon no failure errors let's email now!
	if(!isset($hasError)) {
		$emailTo = 'youremailhere@googlemail.com';
		$subject = 'Submitted message from '.$name;
		$sendCopy = trim($_POST['sendCopy']);
		$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
		$headers = 'From: ' .' <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

		mail($emailTo, $subject, $body, $headers);

        // set our boolean completion value to TRUE
		$emailSent = true;
	}

If you were wondering how the code was going to figure out your e-mail address, this is the part to fill in. The first variable in our set is titled $emailTo and should contain whichever e-mail address, which is going to receive the message.

Inside our $body variable we take advantage of the \n delimiter to add new lines into the message. This adds small placements for the sender’s name, e-mail address, followed by a break for their message content. Of course you could spend time prettying up the display, but this structure works just fine.

Conclusion

This closes our tutorial for an advanced contact form. If you’d like to style your elements in relation to mine you can check out my example styles.css within the project code. However, the page is structured well enough that you could design your own look & feel very easily.

Feel free to download the source code and examine what I’ve done a bit closer. It’s good to follow a tutorial but having direct access to the project source can be invaluable. I’ve also included a brief stylesheet to make customizations a breeze, thanks for your view!