If you are a big Apple nerd like me yesterday was a pretty exciting day for you. I know I was anxiously awaiting a roll out of the new iPhone and boy did Apple deliver. Here are highlights of some of the new features.

The Hardware

1. Complete Redesign
2. Retina Display
3. Front facing Camera
4. 5 Megapixel Camera

Apple completely re-designed the iPhone 4 to have extra strong glass on both sides and a aluminum band around the entire phone which doubles as the antenna. Here are a few pictures to see how pretty this thing is.

The Software

1. FaceTime – Video Calling
2. HD Video Recording
3. Multitasking
4. iBooks
5. iMovie

All of these features are extremely appealing to the average iPhone user and even more appealing to non-iPhone users. I want to briefly talk about a few of the features but I am not going to touch on all of them.

FaceTime – Video Calling

This is the new feature I think will change the way we communicate dramatically. Think about it… We knew this day would come where we can see the person we are talking to on the other end, but did we think it would be this soon?

FaceTime is what Apple is calling it’s new “Video Calling” feature. It allows two iPhone 4 users to call each other and see each other by using the front facing camera. There is a catch though… currently it only works over WiFi. Could you imagine how much bandwidth would be taken up by every iPhone user video calling every day. I really don’t think AT&T is ready for that. FaceTime also allows you to flip the camera feed to the back camera with a single touch of the screen.

“People have been dreaming about video calling for decades. iPhone 4 makes it a reality. With the tap of a button, you can wave hello to your kids, share a smile from across the globe, or watch your best friend laugh at your stories — iPhone 4 to iPhone 4 over Wi-Fi. No other phone makes staying in touch this much fun.”

This is a revolutionary new feature that Apple is bringing to the Smartphone playing field. Another interesting fact is that Apple is leaving FaceTime open so developers can implement it into their applications.

It’s really awesome when you get to video chat with someone way across the country and now we’ll be able to do it on our phones… crazy. Get ready for this to change the way we communicate.

View FaceTime in action here

HD Video Recording

The iPhone 4 will allow you to record 720p HD video on your camera phone. That is an outstanding feat. and I believe a first in the smartphone market (I could be wrong). It’s not enough just to be able to shoot HD Video but for $4.99 you can purchase Apple’s iMovie app for your iPhone 4 which allows you to edit your HD video right on your phone.

“No need to wait until you’re back at your computer to edit video. You can perform basic editing right in the Camera app. Just drag to select start and end points on a filmstrip.”

The iMovie app allows you to combine and trim video clips right on your new iPhone. This is another feature I can’t wait to get my hands on. I recently bought my fiance a new Nikon point-and-shoot that shoots 720p and we’ve been having a blast with it.

View HD Recording in action here

Multitasking

This feature has been a long time coming. I have a friend that is constantly in the Mac vs. PC battle and now currently owns an Android phone that always said that his blackberry had multitasking so why should he switch. Well now Apple has done it and done it right.

View Multitasking in action here

Release date is June 24th, 2010

You can bet that I will be one of the first one’s in line for this amazing product. I cannot wait to get my hands on the new hardware and software. See you at the Apple store.

Be sure to vote in the sidebar for your favorite new feature.

As designers and developers we should always be looking to increase our skills and creativity. A great way to keep motivated and push yourself as a designer is to look at outstanding work by others. I don’t know about you, but when I see an awesome site I want to inspect it and figure out what they did or study it visually to see exactly why it’s effective. This helps me become a more well rounded designer and constantly keeps me on my toes.

Smashing Magazine issued a challenge for 2010 called Design Something Every Day. Could you imagine how much your design skills would improve if you designed something every day? Another way I find inspiration is through looking at other peoples work. Enter the CSS Gallery. Here are my top 10 galleries that I visit most often. These sites are listed in NO particular order.

1. CSS Awards

The CSS Awards site is very busy, but I love the rating scale they use for the sites. Some of the other galleries don’t get voted on by a panel of designers which is why I love this one!

2. Site Inspire

siteInspire is the exact opposite of #1. It doesn’t have a public panel, or a real busy site, but it continually brings high quality inspiration to many designers around the world.

3. Designshack

Design Shack not only has a great CSS Gallery but they put together some awesome blog posts from various authors. It also has a cool feature that allows you to search their gallery by color.

4. CSS Mania

CSS Mania has been around for a while and it went through a branding change not to long ago. I like CSS Mania because of the high quality work and it shows the color scheme of each selection.

5. CSS Drive

CSS Drive also went through a re-branding process and completely revamped their website. They did a good job on adding new features and keeping the overall experience of browsing the website pleasant.

6. Bestwebgallery

Technically BestWebGallery isn’t just a gallery for CSS, but it’s still one I frequent because of the inspiration it offers. It also gives you the ability to sort by tags such as CSS and Flash to narrow it down further.

7. CSS Remix

CSS Remix is about as simple as you an get. It’s a great site to bookmark if you need quick uninterrupted inspiration.

8. CSS Beauty

CSS Beauty is another site that has great resources regarding CSS not just a gallery. I recommend you spend some time on this one.

9. CSS Nature

CSS Nature was actually a new one to me, but I was inspired by it’s layout and ease of use.

10. CSS Line

Looking at this logo alone inspires me to be a better designer. Not to mention the high quality work they output. This is also a new one to me but I’m glad I found it.

Get Inspired

Now you have 10 sites you can visit frequently so there is no excuse for a lack of inspiration. It’s out there, now do your part and go seek it. If galleries aren’t the way to go for you find something that is. Take a walk around your neighborhood or local park. Do something to get yourself inspired.

“I write when I’m inspired, and I see to it that I’m inspired at nine o’clock every morning”Peter De Vries

The goal of this post is to harness some new functionality provided by CSS3 and move away from images. We are going to create a CSS3 login form without images yet still have a visually pleasing result.

DEMO

Writing the HTML

First lets begin with creating the HTML markup that makes up the login form. Start with the basic HTML page as I will not include that portion in the code.

<form>
		<label>Username:</label>
			<input type="text" name="username" />
		<label>Password:</label>
			<input type="password" name="password"  />
			<input type="submit" value="Submit" name="submit" class="submit" />
</form>	

This is the basic markup with a few labels and Input elements. Now there are many different ways to markup the HTML you see above, but I tried to make it as simple as possible. Make sure you add the Class SUBMIT to your button because it will require different styling.

HTML Only Demo

As you can see above we really need the power of CSS in order to give this login form some visual appeal. Enter CSS3!

Writing the CSS

It is now time to give this login form some life. CSS3 has some really powerful new features and we will be covering only a few of them. First lets get some of the basic layout styles down nothing having to do with CSS3

Styling the Form Element

We will begin writing our CSS targeting the form element as some of the other elements on the page will rely on the parent element. I’m going to go through the properties in logical order not in alphabetical order. We want to set the width to 250px with 20px of padding on all sides and a 1px border also.

form {
    width: 250px;
    padding: 20px;
    border: 1px solid #270644;
}

Adding CSS3 to the Form Element

Now lets add in the CSS3 magic to bring this form to life.

form {
    width: 250px;
    padding: 20px;
    border: 1px solid #270644;
    
    /*** Adding in CSS3 ***/

    /*** Rounded Corners ***/
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;

    /*** Background Gradient - 2 declarations one for Firefox and one for Webkit ***/
    background:  -moz-linear-gradient(19% 75% 90deg,#4E0085, #963AD6);
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#4E0085));

    /*** Shadow behind the box ***/
    -moz-box-shadow:0px -5px 300px #270644;
    -webkit-box-shadow:0px -5px 300px #270644;
}

Styling the Input Elements

Styling the input elements is pretty easy but it does have some complications that can frustrate. We will apply a background color, a top border, some padding, and a width.

input {
    width: 230px;
    background: #8a33c6;
    padding: 6px;
    margin-bottom: 10px;
    border-top: 1px solid #ad64e0;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;
}

Adding CSS3 to the Input Element

For the input element we will implement the new features of CSS3 called transitions. Unfortunately this only works in Webkit browsers such as Safari and Chrome.

input {
    width: 230px;
    background: #8a33c6;
    padding: 6px;
    margin-bottom: 10px;
    border-top: 1px solid #ad64e0;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;

    /*** Adding CSS3 ***/

    /*** Transition Selectors - What properties to animate and how long ***/
    -webkit-transition-property: -webkit-box-shadow, background;
    -webkit-transition-duration: 0.25s;

    /*** Adding a small shadow ***/
    -moz-box-shadow: 0px 0px 2px #000;
    -webkit-box-shadow: 0px 0px 2px #000;
}

Now that we have the styles for the inputs in place lets style the hover events for those same inputs.

input:hover {
    -webkit-box-shadow: 0px 0px 4px #000;
    background: #9d39e1;
}

Some of you may not have caught it but I increased the radius of the shadow on hover from 2px to 4px. That is why we used the transition effects on the inputs because it triggers that change on hover.

Styling the Button

Ok we’re almost done, on to the button! Since we gave our button the class SUBMIT we can use that selector in our CSS.

input.submit {
    width: 100px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: #000 1px 1px;
    border-top: 1px solid #ad64e0;
    margin-top: 10px;
}

Adding CSS3 to the Submit Button

input.submit {
    width: 100px;
    color: #fff;
    text-transform: uppercase;
    text-shadow: #000 1px 1px;
    border-top: 1px solid #ad64e0;
    margin-top: 10px;

    /*** Adding CSS3 Gradients ***/
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));	
    background:  -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);   
}

That’s it! Now you have an awesome login form styled strictly with CSS3 and no images. Of course it only works in webkit browsers currently which are Safari and Chrome, but CSS3 support will be coming to a browser near you soon. If you liked this post please promote it below!

FINAL DEMO

Who says you need Cinema 4D, 3DSMax or even Illustrator to create a simple 3D icon? In this tutorial, you’re going to learn how to do it in Photoshop with the help of layer masks.

The main point of this tutorial is to demonstrate how we are able to apply semi-realistic lighting and shadows in Photoshop [omitting the need for 3D manipulation tools]. Note that we used the term "semi-realistic", we wanted to give the illusion of a 3D object, at the same time keeping the illustration effect.

In addition, the variety of perspective we are capable of achieving solely in Photoshop is of course meer. Do take advantage of the Bevel & Extrude feature in Adobe Illustrator. Nevertheless, aside being able to give reasonable lighting to the icon in Photoshop, we were also able to complete impression of a faux 3D object — only with the use of Photoshop.

Preview

1. Create a new Photoshop document.

Create a new 512 pixels by 512 pixels Photoshop document, the standard maximum size for application icons.

2. Facebook Logo Outline

To facilitate the creation process i.e., so you wouldn’t have to draw your own Facebook logo, download the Facebook Logo Vector Outline in .AI format here: http://j.mp/facebookLogoVectorOutline

Copy the vector into your clipboard, CTRL or CMD + C.

3. Paste the Facebook Logo Vector Outline into Photoshop as a Smart Object.

Paste the vector into the newly made Photoshop document, CTRL or CMD + V.

Select Smart Object in the dialog, press OK then press enter [to get rid of the resize tool].

4. Set up the Gradient Overlay – First gradient.

The main difference of this screenshot from the previous screenshots is the background that has been pasted in. Don’t worry, that’s not part of the tutorial, it’s there just to make things look better.

Right click on the layer with the logo outline and select Blending Options.

On the left side of the panel, tick the box Gradient Overlay.

Set the first gradient slider to the color #00225b.

4. Set up the Gradient Overlay – Second gradient.

Set the second gradient slider to the color #006ed5.

5. Set up the Stroke color.

Tick the Stroke box below Gradient Overlay.

Size: 1px.
Position: Outside.
Blend Mode: Normal.
Opacity: 100%.
Color: #00103e.

6. Set up the Inner Glow.

Tick the Inner Glow box.

Blend Mode: Overlay.
Opacity: 100%.
Noise: 0.
Color: #ffffff.
Technique: Softer.
Source: Edge.
Choke: 0.
Size: 2px.

7. Set up the Inner Shadow.

Tick the Inner Shadow box.

Blend Mode: Overlay.
Color: #ffffff.
Opacity: 100%.
Angle: 120 degrees.
Untick the Use Global Light box.
Distance: 1px.
Choke: 0%.
Size: 0px.

8. Create the Perspective.

To create the bevel of the icon, duplicate the layer with the logo outline [that now has the styles shown above implemented].

(1) Move this newly duplicated layer to the right to create the 3D illusion.

(2) Move this newly duplicated layer below the original layer.

(3) On the duplicated layer, click the eye icons on Inner Shadow, Inner Glow and Stroke to uncheck them. We only want the Gradient Overlay showing on the duplicated layer.

Let’s call this layer the "bevel layer".

9. Paint the Shadows – 1.

(1) Duplicate the "bevel layer" we’ve made in Step 8.

Let’s call this newly duplicated layer the "shadows layer".

(2) This time, uncheck the Gradient Overlay on it by clicking the eye icon next to it.

Or we can simply right click on the "shadows layer" and choose Clear Layer Style (we will lose the layer style). It’s personal preference.

(3) The color of the icon on the "shadows layer" should be black.

(4) Make sure have this layer selected and click on the Set Vector Mask icon below, its icon is a rectangle with a circle inside.

(5) Then make sure you have the layer mask of the "shadows layer" selected, not the layer itself.

10. Paint the Shadows – 2.

Again, make sure you have the layer mask selected of the "shadows layer" selected.

Choose the Brush Tool.

Make your foreground color #000000.

With the Brush Tool [or the Color Fill Tool], paint all over the "shadows layer" to hide all the black so that all that is revealed is the blue gradient of the "bevel layer". You will know why we do this in a second.

11. Paint the Shadows – 3.

Select the Brush Tool.

Make your foreground #ffffff.

Ensure you select the layer mask on the "shadows layer" created in Step 9.

With the Brush Tool, paint the corners of the icon on the "shadows layer" with #ffffff to reveal shadows.

The reason why we cleared all the black color in Step 10 was so that we would have a more natural approach of painting shadows.

We could easily use the Brush Tool loaded with the color #000000 to hide the shadows and start there but it would rather seem as if we were painting highlights not shadows.

If we do it this the other way around, it would seem as if we were painting shadows [which is what we're aiming for], instead.

To achieve best results, it’s best you study how lighting and shadows fall onto your household objects.

12. Paint the Shadows – 4.

13. Paint the Shadows – 5.

14. Paint the Highlights – 1.

With the same technique used above regarding layer masks from Step 9 to Step 13, let’s paint some highlights on the front of the icon.

The process is similar to that used in Step 10.

Duplicate the first layer we made in Step 3. This newly duplicated layer will provide the highlights on the [front] face of the icon. Let’s call it the "front highlights layer".

Right click on this "front highlights layer" and choose Clear Layer Style. The color would only be #000000 or black.

Right click on it again and choose Blending Options.

Tick the Color Overlay box and choose the color #ffffff or white.

The color of the icon should now be white.

With the "front highlights layer" selected, click the Set Vector Mask icon below to set a layer mask on this layer, its icon is a rectangle with a circle inside.

15. Paint the Highlights – 2.

Make sure you have the layer mask selected of the "front highlights layer" selected.

Choose the Brush Tool.

Make your foreground color #000000.

With the Brush Tool [or the Color Fill Tool], paint all over the "front highlights layer" to hide all the white so that all that is revealed is the blue gradient of the front face.

Select the Brush Tool.

Make your foreground #ffffff.

Ensure you select the layer mask on the "front highlights layer".

With the Brush Tool, paint the front face of the icon on the "front highlights layer" with #ffffff to reveal highlights.

Final Product

And that’s all there is to it.

I hope you enjoy it, and if you have any questions please leave a comment below.

Drupal is a (CMS) any web developer should get to know. It is in my opinion the best open source CMS available at the moment, and it has a huge community of contributors. If you have not looked into drupal check it out at drupal.org.

Just like WordPress, Drupal is powerful “out of the box” but has thousands of modules that have been contributed to the community to extend upon that functionality. A few of the most popular modules are Views, CCK, Panels, XML Site map and Google Analytics.

The Modules

1. String Overrides

The String Overrides module allows you to override text on a drupal site such as the default text on a contact form page. Some text that Drupal auto generates is difficult to change, but using String overrides allows you to change those text strings with a fairly easy user interface.

2. Date Module

The Date Module is very powerful because it can tie so many modules together using something simple such as the date. It allows you to assign a date to an event or a custom content type and distribute that value to other modules.

The date module is a flexible date/time field type for the cck content module which requires the CCK content.module and the Date API module.

This module does need CCK in order to work but most if not all drupalheads use CCK so thats not a big issue.

3. Calendar Module

The Calendar Module is intentionally listed after the Date Module because they work so flawlessly together. It pulls in dates of events or custom content types and generates them all in a calendar that is ready to be styled with CSS.

This module will display any Views date field in calendar formats, including CCK date fields, node created or updated dates, etc. Switch between year, month, and day views. Back and next navigation is provided for all views.

I have used this calendar module on multiple sites and it really makes it easy to get a clean looking dynamic calendar up fairly quickly. I highly recommend.

4. Location Module

The Location Module is similar to the Date Module in the sense that is is adding specificity to a piece of content. As you probably guessed by it’s name it allows you to add a location to individual nodes.

The Location module allows real-world geographic locations to be associated with Drupal nodes, including people, places, and other content.

The actual functionality of adding a location to a node or person isn’t all that exciting, It’s what you can do with paired modules that truly brings this module to life.

5. GMAP Module

I was just talking about how other modules bring the Location Module to life. Enter the GMAP Module. This takes the location module and gets all kinds of crazy with it, allowing you to now map all or some of your locations or people. You could build a medium sized social network site just based off of Drupal.

The GMap module provides an interface to the Google Maps API within Drupal. It integrates with the Location module to provide users a clickable map for entering latitude and longitude, as well as to display maps of Drupal nodes and users.

The possibilities are endless and these modules are only in the beginning stages. I can’t wait to see what Drupal 7 holds.

6. UBERCART Module

Ubercart in my opinion is the best e-commerce solution to-date for Drupal. It is a seamless integration that leverages the strengths of Drupals backend to deliver a great shopping experience.

Ubercart is an e-commerce suite developed for Drupal. It has been designed with the end user in mind, focusing on usability in three key areas: store configuration, product and catalog creation, and order administration.

Not only does Ubercart easily integrate with drupal it has built-in modules for shipping calculation, payments, taxes, and much more.

7. Signup Module

The Signup allows a user of the site to “Sign Up” for specific events/nodes and it will email them the day before the event happens just to serve as a reminder. It is a wonderful tool to use if you can get your audience to use it.

Signup allows users to sign up (or register, as in register for a class) for nodes of any type. Includes options for sending a notification email to a selected email address upon a new user signup (good for notifying event coordinators, etc.) and a confirmation email to users who sign up.

I used this on a site I just finished developing, and it hasn’t caught on with in the community yet. I guess we’ll see with time, either way I still like it :p

8. Content Access Module

I use this module to set permissions to different roles per node, so if I have one page I only want important people to see I can go in and set permissions for that specific node. This module is very powerful.

This module allows you to manage permissions for content types by role and author. It allows you to specifiy custom view, edit and delete permissions for each content type. Optionally you can enable per content access settings, so you can customize the access for each content node.

Drupal gives you so much control over the permissions of your site, but the Content Access Module is an awesome add-on to increase Drupals functionality.

9. Webform Module

The Webform Module adds a webform as a nodetype which allows you to offer register forms, surveys, polls and much more. It’s also a good alternative to Drupal’s site-wide contact form.

This module adds a webform nodetype to your Drupal site. Typical uses for Webform are questionnaires, contact or request/register forms, surveys, polls or a front end to issues tracking systems.

I mainly use the Webform Module in place of Drupal’s site-wide contact form. It gives you more flexibility and it’s easier to style.

10. Nodewords Module

Nodewords is great for SEO because it allows you to set meta tags for each drupal page or node. This gives you awesome control over what keywords and descriptions are used on each page of your site, and if used correctly can really help your rankings.

This project allows you to set some meta tags for each Drupal page.

I user the Nodewords Modules for the reasons stated above. It helps out with SEO and keeps google’s attention by constantly updating content with new keywords.

11. Nice Menus Module

Nice Menus enables drop down menus for your navigation items in drupal. It uses completely CSS and even has a small bit of Javascript for IE6.

Nice Menus enables drop-down/right/left expandable menus. It uses only CSS for most browsers, with minimal Javascript for IE6. (Version 2 uses the Superfish jQuery plugin for all browsers, with an option to disable JS, and falls back to CSS-only for browsers that can handle it.)

It’s a quick easy way to get a drop down menu going and can easily be changed to drop to the left, right or down.

12. Mollom

Mollom is a great spam catcher for contact forms, web forms, comments, blogs, messages and more and was developed by Dries Buytaert the creator of Drupal.

Mollom is a web service that analyzes the quality of content posted to websites. This includes comments, contact-form messages, blogs, forum posts, etc. Mollom specifically tries to determine whether this content is unwanted – i.e. “spam” – or desirable – i.e. “ham.”

It significantly cuts down on the amount of spam you get on your Drupal site. It will provide CAPTCHA’s for you to further reduce spam.

13. Scheduler Module

The Scheduler Module allows you to create a piece of content and choose a day for it to become public, instead of having to go back in yourself and set it to public on the day it needs to go live.

This module allows nodes to be published and unpublished on specified dates.

I’m am horrible at remembering things people tell me unless I write it down. So the ability to go in and create the content and then schedule it for the day I actually want it to go live is an awesome feature.

14. Menu Block Module

Menu Block simply enables a block for each of the menus you have so you can place them in a block somewhere else on the site.

It provides configurable blocks of menu trees starting with any level of any menu.

I use this module on almost every site I do. Mainly because I can grab my secondary navigation and throw it in the sidebar, it really gives you a lot of flexibility.

15. Admin Module

This Admin module has some serious promise. They have integrated a very nice administrative theme that makes it super easy to update content within a great looking admin theme.

The admin module provides UI improvements to the standard Drupal admin interface.

I am not currently using this on any sites, but I am looking forward to what this module could become.

Drupal 7 Here we come

All of these modules combined together can add liveliness to any site by way of dynamic content, semantic markup, and easy ways for your clients to update their site. I am truly excited about what Drupal has to offer and what it will offer in the future. I know one thing, I’m officially a Drupal supporter!

Need a Drupal website? Check out this awesome Drupal development firm 3 Waves Media

Dont Like Drupal? Leave the CMS of your choice in the comments.

So you just purchased a new hosting account and you some great ideas for your next project. Instead of just having the host default page up for your domain name why not create a coming soon page that is simple and effective.

There are many reasons to create these coming soon pages. The first reason is to make your product or service look more professional instead of having the “This is a website” page that your hosting company provides you. Secondly, it can help promote your site before it is even launched. Be sure to include your twitter account or an email subscription so people can follow the progress of the site. It allows them to get more excited about something they haven’t even seen yet.

Example Screenshot

Designing the page

When you start the design keep in the back of your head that this does not need to be a complex page on the contrary actually. This page needs to be simple yet effective. It must also convey a message of what the site will offer to get people interested. Don’t spend too much time on this page as you need that time to complete your other ideas. Let’s go ahead an open up photoshop and get started.

1. Open up a photoshop document 900px by 700px with a transparent background and the settings below.

2. Now lets fill in the background by going up to Edit > Fill.. chooser color from the drop down and put in the hex code #333333 and hit OK.

3. Now select the rectangular marquee tool and in the drop down box at the top choose Fixed size. Enter 900px for the width and 300px for the height.

4. Before you click anywhere go up to Layer > New > Layer… and name it Top. Now you can click anywhere in the document and make sure you drag the selection to the top.

5. Make sure you are selected on the newly created layer not the dark layer and go up to Edit > Fill… choose color from the drop down and enter #ececec for the hex code.

6. Now we have our top section put together all we have to do is bring in the logo. Open up your logo and drag it into your document. This is an important one because you want the brand to really stand out so make sure your logo is prevalent.

7. Next we need to add in the COMING SOON portion so they know that the site is not just a broken site. You don’t have to necessarily use COMING SOON, just something that lets the customer know that it’s not available yet. First create another new layer by going to Layer > New > Layer… name it Shadow. Grab your rectangular marquee tool and set a fixed size to be 400px wide and 30px high. Click and make the selection directly underneath the logo.

8. Grab your gradient tool and in the Gradient Picker (which is in the top left) choose your second option which should be foreground to transparent. Also set your foreground color to black by pressing D on your keyboard. Click approx. 5px above the selection that you have and while dragging down hold the shift key and let go when you get to about the middle of your selection. Once that is done drop your opacity for this layer in your layers palette to 10%.

9. Next we will use a layer mask to fade the corners out diagonally. Go up to Layer > Layer Mask > Reveal All. This allows us to see the complete layer and then fade it out by using the color black. You should still have your gradient tool selected and Foreground to Transparent selected and black as your foreground color if not make sure you do. Next drag the gradients below each of the corners in an upward diagonal direction like the screen shot below.

10. Once that is finished go ahead and add the coming soon text in.

Coding the page with CSS3

I just recently did a post on The basics of HTML5 but today we are going to stick with XHTML and use the XHTML Strict DOCTYPE.

The Basics

11. This is the bare bones of what an HTML page must consist of in order to display properly. Add the code below to a blank HTML file and save it as index.html.

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Alive Again Apparel</title>
</head>
<body>


</body>
</html>

12. Next create a CSS file and name it style.css. Now lets link our CSS file to our index.html file so we don’t forget. Add the piece of code below directly above the closing head tag. Oh and to save you some trouble make sure the index file and the CSS file are in the same directory.

<link href="style.css" rel="stylesheet" type="text/css" />

The HTML Structure

13. Now let’s choose exactly how the page is going to be laid out. We will be using a 100% width layout in this tutorial so we will need two divs for the top section. One to fill the color 100% across and the other to center the content. In the example below I took out all of the other tags except the body tags and what’s between them, but that was only to make it easier to see. You still need the other tags in order for the page to work.

<body>
     <div id="top">
          <div id="topcon">
               <img src="logo.png" id="logo" />
          <div><!-- This div will be centered and contain the logo -->
     </div><!-- 100% color all the way across -->
     <p>Alive Again Apparel is a Christian T-Shirt business that is getting ready to launch. We will be delivering spirit filled T-Shirt designs for a unique way to spread the gospel.  
		
     <p>If you would like more information please feel free to email us at <a href="#">test@test.com</a> or follow us on <a href="#" target="_blank" id="twitter">Twitter</a> to get news about the upcoming launch.</p> 
</body>

14. Now we have our content and you guys should now have an html page that looks pretty boring with no styling at. Enter CSS3! Open up your CSS file and start with the code below. I know how dare I say use this. I recommend that you use some type of CSS reset instead of using this * method, but I used this for the sake of simplicity.

/*** Resets all elements ***/

* {
   margin: 0px;
   padding: 0px;
}

/*** Gives the body the dark gray background we used in PS ***/

body { background: #333; }

/*** Styles the links ***/

a { color: #999; }

/*** Sets paragraph styles ***/

p {
   color: #ececec;
   font-family: verdana, arial;
   font-size: 12px;
   line-height: 18px;
   margin: 0px auto 20px auto;
   text-shadow: 1px 1px 1px #111; /*** New CSS3 Property that adds the shadow ***/
   width: 450px; /*** Allows paragraphs to be centered ***/
}

I used the Text-Shadow property right here which is brand new in CSS3. It gives our text a nice shadow behind it in most modern browsers.

15. Now that we’ve styled some of our HTML elements lets move on to the layout.

/*** Top section 100% color ***/

#top {
   background: #ececec;
   border-bottom: 1px solid #fff;
   margin-bottom: 30px;
   width: 100%;
}

/*** Topcon centers the page at 900px ***/

#topcon {
   margin: 0px auto; /*** Centers the page ***/
   width: 900px; /*** A width is required in order for it to center ***/
}

16. Notice in the HTML above I added ID’s to the twitter text and the logo. We will use these specific ID’s to style them

/*** Styling the Logo ***/

#logo {
   width:445px;
   height: 125px;
   display: block;
   margin: 0px auto; /*** Centers the logo in the 900px box ***/
   padding: 100px 0px;
}

/*** Styles the twitter link ***/

a#twitter { color: #4ce6fd; }

LIVE DEMO

The Final Product and Plug

If you hadn’t guessed already Alive Again Apparel is a Christian T-Shirt Business I am starting and I wanted to walk you through my process of creating a coming soon page that can be seen here.

Please keep a look out for the launch of our Christian T-Shirt Business and be sure to follow us on twitter to keep up to date with the progress @AliveAgainApprl

HTML5 and CSS3 are now able to be used in most modern browsers. You might be thinking to yourself why should I use such new technologies that don’t have complete cross browser compatibility? The answer to that is simple.

As with any job pushing your technical skills in your field will always help you to become a more well-rounded person. Sure HTML5 isn’t widely supported and is vastly changing, but taking the time to learn it and follow it’s changes will surely help you to be more prepared when the technology is finally ready.

HTML5 New Tags

1. DOCTYPE
2. Charset
3. Header
4. Nav
5. Aside
6. Article
7. Figure
8. Hgroup
9. Section
10. Address
11. Footer

DOCTYPE

The beautiful part about the new way to declare a DOCTYPE is that it’s so simple. It takes one line of code and 15 characters, no more long DOCTYPE s that are hard to remember.

<!DOCTYPE html>

CHARSET

This is a simplified version of the charset property which also helps you to memorize this bit of code.

<meta charset="utf-8">

HEADER

The new header element was created to contain the introductory information of your site.

A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.

The header element will usually contain the primary navigation of your website. Here is an example below of a semantic header section.

<header>
      <nav>
            <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Portfolio</a></li>
                  <li><a href="#">About Us</a></li>
                  <li><a href="#">Contact</a></li>
            </ul>
      </nav>
</header>

NAV

Normally when creating a site in XHTML I either use a div that has the class of NAV or I give the UL the ID of nav. The new NAV element allows you to section off your navigation.

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

As you saw in the above example the NAV element is being used in the HEADER section which is not necessary but semantic.

 
 <nav>
     <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">About Us</a></li>
         <li><a href="#">Contact</a></li>
     </ul>
</nav>

ASIDE

The new ASIDE element is a bit confusing. It should only be used when it is related to the content around it, but is considered different from it. The official definition from W3C is below.

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography

In the example below I used the new ASIDE element as a featured section of the website. It is still related to the content on the page but is “Featured” so the ASIDE element works.

<aside>
         <p>This is some featured content that works well with the new ASIDE element</p>
</aside>

ARTICLE

The ARTICLE element is used for content that is intended to be distributed or reusable.

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

The documentation also addresses when to nest the ARTICLE element in your HTML.

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

Inside of the ARTICLE element you can use HEADER and FOOTER elements to separate the content in your article.

<article>
   <header>
      <h2>Article Title</h2>
      <p><time pubdate datetime="2010-3-09T14:28-08:00"></time></p>
   </header>
   <p>This is the main content of the article that is not in the header or the footer of the article.</p>
   <footer>
      <a href="#">Show Comments</a>
   </footer>
</article>

FIGURE

The FIGURE element allows you to have an element that is separate from the content its in and has an optional caption.

The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.

<figure>
   <img src="figure.jpg" alt="figure image" />
   <figcaption>This is a figure</figcaption>
</figure>

HGROUP

The HGROUP element allows you to group heading tags together in essence giving the section more weight.

The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

<hgroup>
   <h1>Main Title</h1>
   <h2>Subtitle</h2>
</hgroup>

SECTION

The SECTION element allows you to section off content that is nested within content. This is a complicated one because you need to know when to use ARTICLE or the regular DIV tag.

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.

<article>
   <hgroup>
   <h1>Main Title</h1>
   <h2>Subtitle</h2>
   <hgroup>
   <p>This is a description of this main section</p>
   <section>
   <h1>Category 1</h1>
   <p>Description of category 1</p>
   </section>
   <section>
   <h1>Category 2</h1>
   <p>Description of category 2</p>
   </section>
</article>

ADDRESS

The ADDRESS element is used specifically for contact information. Not just site wide contact information but could be per page or per node. This tag is NOT ONLY for a Physical Address it can hold other information.

The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.

<address>
 <a href="#">Joe Bob</a>,
 <a href="#">Matt Smith</a>,
 <a href="#">Contact Info Related to this page</a>
</address>

FOOTER

The FOOTER element is used specifically for sectioning content at the end of a specific section of content. This tag could be used at the end of an article not just as the main footer for your site.

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

<article>
 <header>
    <h1>Post Title</h1>,
 </header>
    <p>This is the post content</p>
 <footer>
   <p>Comments: 8</p>
 </footer>
</article>

Enabling HTML5 Elements

In order to use these new tags currently you will need to display them block in your CSS, because the browsers don’t really know how to handle them.

header, nav, article, section, footer, figure, aside {
    display: block;
}

Well that’s it for this tutorial on HTML5 if you enjoyed it please promote it to all the social networks you can at the bottom of this page. Start coding for HTML5 now and you will be ready when the switch is finally made.

For more information on HTML visit the W3C documentation here

The Winner is…

How the winner was chosen

Each entry was given a number and put into a random number generator that spit out the number 32.

Thanks Everyone

Thanks again to all the participants! We had a total of 34 entries which is very exciting. Stay tuned for the year giveaway it will be much bigger. Thanks again for your continued support.

Apple has become so popular and their branding is so strong that manufacturing Apple Knock-off products is a Million dollar industry. If you travel around the world you will see all kinds of Apple knock-offs from iPods to iPhones, Macbooks, and even Shuffles. Here are a few Apple knock-offs for your viewing pleasure.

The Knock-offs

This is pretty close to the iPhone but has an extended bottom portion near the home button.

This is a crazy looking Macbook knock off. You better take a second glance at this one.

This iPhone knock off got almost everything right, but the home button is completely different.

This nano was done well except for the big on/off button at the top. The print and logo on the back of it are pretty close.

I actually think this is a cool shuffle concept.

This is obviously way off, but I’m sure it would fool my grandmother.

This nano knock-off looks very mysterious… not even sure how you would navigate its UI.

Looks like a bad version of the iPod Mini…

Pretty close to the original iPod nano except the button graphics are a little off.

Now where did they get this design idea from?

This one is called the iFone, and iPhone with buttons and a stylus.

Another knock-off of the gen 1 iPod nano.

This manufacturer took a little more time to even include nice packaging.

This is an actual computer made by HP which is a horrible knock-off of the new unibodies.

Awesome! Gotta love the fat nano.

Shuffle rip off with a screen!

Seriously? What a great looking UI…

The long awaited iPhone Nano!!!!

The Challenge

Make sure you leave a link to great Apple Knock-offs in the comments. I would love to see more of these fantastic products. Don’t forget to enter in our Grafpedia giveaway. We are giving away a Grafpedia account worth $199 for free enter here.

The Giveaway

One lucky winner will receive a GRAFPEDIA vip account for one year with Commercial license. This will give you access to Photoshop Gradients, Vector Patters, Layer Styles, Stock Images and much more. The winner will be announced on March 2nd.

The total value of this account is $199

How to Enter

1. First and foremost you must Follow Grafpedia on Twitter or be a fan on Facebook
2. Secondly you must comment on this post saying what you would use it for.
3. Third (This one is optional) subscribe to Three Styles RSS Feed or Follow us on Twitter. Remember this is optional, the first two ARE NOT OPTIONAL.

A Big Thanks Too

I want to send out a huge thank you to Grafpedia for making this giveaway possible!

Blogger Friends

This is a list of bloggers that have really helped Three Styles make it to where it is today. I can’t thank you all enough.

• Callum Chapman – Circleboxblog
• Jacob Gube – Six Revisions
• Mat Carpenter – Add To Design
• Jean-Baptiste Jung – Cats Who Code
• Chris Thurman – Visual Swirl

There are many more, but I can’t list everyone. Thank you so much for all of your votes and bumps and I look forward to doing even greater things in the future. Good luck with the giveaway the winner will be announced on March 1st.