Step 1

To speed up the process, we will begin by putting together some basic graphics in Illustrator. Make a 3.5in by 1.9in rounded rectangle, then fill the object with a color or gradient of your choice.

Draw some curvy lines as shown using the Pen Tool. Then go to Object > Blend > Blend > Blend Options > Specific Steps, enter 30 and click OK. Make two different lines with different colors.

Select the line art that you just created and apply a clipping mask using the shape of the credit card. Make sure that the credit card shape is placed on top of your line art and that you’ve duplicated your credit card background as well.

Note: if you are using Illustrator CS5, select the credit card and click the Draw Inside option to Paste (Cmd/Ctrl + V) inside the objects.

Use the Pen Tool to draw the ribbon as shown.

Step 2

We are now finished with Illustrator. Let’s get started by opening Photoshop, creating a new canvas that’s a bit larger than your Illustrator document and then by copying and pasting each element that you created in Illustrator individually. At this stage, you should already have some logos and graphics that you would like to place on the card. If not, go ahead and create some. Add your graphics to the card, as shown. Feel free to use the following fonts in your card as well. Download them here and here.

Step 3

Now it’s time to add your text. Choose the Oval Typeface using #f1efed. Type out some random numbers and a name. Then apply the following layer styles.

Step 4

Now it’s starting to look more like a credit card, let’s add some shadows to make it look more realistic. Duplicate each layer, change the font’s color to black and turn off the Layer Styles, this will give us the base shadow. Now move the shadow numbers about 3-5 pixels to the right and 3 pixels down (do the same with the name as well), now go to Filter > Blur > Motion Blur, then type in Angle: -34 and Distance: 10px; set the Layer Blend to Multiply and 50% Opacity. For final touches of the front side, go ahead and look at your reference credit card and add an expiration date wherever you want it placed and you will be done with the front side, make a new folder and drop all the layers inside and name it FRONT.

Step 5

Now, let’s work on the backside of the credit card. Duplicate the credit card base, move the layer to the FRONT folder, then Right Click on the layer and rasterize, make a selection of it and fill it up with a color you used on the front side (I used the bright red on the top left of the credit card’s front side). Note: don’t use gradients for the back.

Go to the FRONT folder, duplicate the text layers that you used Layer Styles (credit card numbers, name and expiration date in my case) on and drag them to the BACK folder, then flip them Horizontally and change the color of the text to the same as the credit card’s back.

Now we need to change the Layer Styles of the text layers to make them look as if they were stamped and look as the reference credit card, Double Click on the layer and change the values as shown below, do the same for the other layers.

Step 6

Now the credit card looks like your reference, go ahead and arrange the rest of the elements you made for the back side of the credit card.

Some elements like the signature rectangle can be done in Photoshop, if you have a logo of your own you can rotate it 45 degrees and duplicate several times and make a pattern, then select each one and change the color of it with Hue and Saturation (Cmd/Ctrl + U), then Merge them all together, in another layer make a rectangle the size you want for the signature and fill it with white, make a selection of rectangle > select the pattern layer and click (Cmd/Ctrl + Shift + I) to inverse the selection and Erase, then merge both layers.

To make the signature make another layer, select a hard black brush and make a random signature. Finally, add the security codes.

Step 7

If you like, you could end the tutorial here but now we are going to add some perspective to the card. Duplicate each folder, then Right Click on the group folder and select Merge Group, do the same for each folder. Now we have 2 layers, one of the front and one for the back of the credit card, select both layers and Click Cmd/Ctrl + T to transform and make them smaller, then rotate a little and Right Click to select Perspective and transform as desired.

Step 8

Select a layer of the credit card (no matter if it’s front or back) and duplicate, make a selection of it and fill it with a light grey, then move it about 2px to the right. To make the shadow of the card, Duplicate the credit card and make a selection of it and fill it with black, then Click Cmd/Ctrl + T to transform > Right click and select Distort and transform as desired; Go to Filter > Blur > Gaussian Blur > 10 px radius; set the Layer Blend to Multiply at 30% Opacity.

To make the Reflection, Duplicate both credit card layers, select both layers and flip them vertically (Cmd + T > Right Click > Flip Vertical) and arrange them on the tip of the credit card; select a Soft Eraser Brush with 30% Opacity and erase each layer to make the reflection.

Step 9

Let’s make some lights and shadows, make a selection of the credit card, then make a new layer, select a white soft brush, Normal Mode at 20% Opacity and on the top left corner add some light, then change color to black and add some shadows on the lower right corner.

Final Image

Make a background and you are done! To make images of each side of the credit card just turn off the front side layer, remember to turn on or off the corresponding reflection layer as well; you can use this tutorial to make a credit card icon; remember that you can make different color credit cards by playing with Hue and Saturation.

Related posts:

1. Manipulating the Color of an Automobile in Photoshop
2. How to Create Glass Transparency in a Cute Photo Manipulation
3. Create a Professional Web 2.0 Layout

• 50 Captivating Out of Bounds Creations
• Tutorials on Out of Bounds Effect
• Further Resources

50 Captivating Out of Bounds Creations

The Train

Lizard Popping Out

Get Me Out

Get Me Out is an amazing surreal styled Out of Bounds effect. The old antique photo frame, the expression of the subject and the clever use of lighting and shadow gives the entire image an extra dimension and adds a surreal effect. You can easily create a photo effect like this with a great original image, some stock resources, if necessary and with the effective use of Photoshop . Some of the tutorials featured at the bottom of this article can also guide you to create a surreal Out of Bounds illustration.

Bridge

Napoleon

Wildlife Book

You would not want to read a wildlife book where animals come out of the book! The concept of creating an Out of Bounds effect with the book is brilliant. The idea is beautifully executed.

VROOOOOM!

You might have seen many Out of Bounds effects with a car jumping out of photo frame, but this one is fantastic. The dust, the tire tracks and the whole execution of the concept adds action and depth which makes the outcome realistic.

Dress Lady

Fish – Out of Bounds

Snake Book

Snake Book is another very unique and original idea where the subject, a snake in this case, is shown coming out of magazine’s page. It is amazing to see how 2 different images (a book and a snake image) are put together and how the whole composition is given an Out of Bounds effect.

Holding Hands

Holding Hands is a clever example of what you can do with Photoshop. The concept is brilliantly executed with five different images of hands pulled together to create a simple yet incredible piece.

Bridge To Somewhere

Hungry Snail

A cool Out of Bounds effect of a snail coming out of a photo for food. In this meticulously executed idea, four different source images are used and they work really great together.

Hang On

Taking Off

The Escape

The idea of television sinking in the sea and the cute joyous fishes jumping out of its screen makes The Escape a visually appealing piece of Out of Bounds photo effect.

Sports Gallery

Escape in Time

Cave Nymphs

Out of Boundry

Possible with Photoshop

Slides

Slides is an amazing and unique style of Out of Bounds effect with the creatures coming out of slides. The little details like water drops and dirt really add to the over all image and keeps the viewers attention.

Interactive

That is one smart monkey who can jump out of photograph for food, a very interactive piece indeed.

Waterfall

Humm, Pizza

It wouldn’t be wrong to say that Humm, pizza is a drooling and mouth watering Out of Bounds effect. If you ever wished you could eat your favorite food directly from an advertisement or photo, you can do that with Photoshop.

The Lady Loves Chocolates

And if you think pizza isn’t enough, here are some chocolates.

Zodiac

Honeymoon

Honeymoon is a cool romantic example of Out of Bounds effect. The expression on the face of subject, the way he is jumping out of frame, the colors of the image and the background scene makes it an awesome piece of work.

OOB Guy

Battle

Out of Bounds – OOB Art

Loves Me

Surfing

Pulling Crackers

In Pulling Crackers, subjects are coming out of hinged picture frame. The soft pastel colors of the images in frame and all the decoration around it makes it a beautiful piece.

Internet Kiss

Riding China Style

Living Art

The Easy Way

Photoshop Solutions

A creative way to solve water shortage problems.

Comming Out Clean

Spiderman

Reaching Out of Bounds

Catch of the Day

Bubbles

Sticking Out

Snail

Beer

Hold Yourself Together

This actually is not an out and out photo manipulation but a drawing done with a graphite pencil from a reference. The style of this portrait is really very creative, all the pieces of polaroids with the hands holding them makes the concept an interesting Out of Bounds artwork.

Little Artist

Bridge

It is impossible to not get inspired and fascinated. Well, I also created one Out of Bounds effect.

Tutorials on Out of Bounds Effect

Create an Out of Bounds Fantasy Illustration

This fantastic tutorial from Psdtuts+ shows you how to create an Out of Bounds fantasy illustration where you create a painting on a wall which is a real world. It guides you through the process of creating a fantasy scene, making water pour out of a painting. You can create this surreal illustration with the use of absorption effect, colors and a variety of stock resources. You can also watch a video tutorial complimenting this text and image tutorial. If you have never experimented with surreal concepts in your artworks and want to incorporate it, we have an excellent Creative Sessions’ article, Incorporating Surrealism Concepts into Your Digital Artwork to guide you.

Out-of-Bounds

A simple and easy tutorial that can get you started with Out of Bounds photo effects. This tutorial shows you how after carefully analyzing the image you should decide where the best perspective is for the frame (the part that will set it out of bounds), how to hide the part of image with Layer Mask and how to add the shadows to add the extra dimension to the image.

Create an Out of Bound Photo in Photoshop

This easy to follow tutorial shows you how to create Out of Bounds photo effects in Photoshop using the Polygon Lasso Tool, Warp Effect and how you can tweak the colors using color saturation levels.

3D Border Breakout

A detailed step-by-step tutorial on how to create an Out of Bounds effect. This tutorial also shows you how to give the illusion that the subjects are jumping out of the picture by adding depth through perspective, shadows and some imagination.

Photos Out of Bounds

Here is a fun Photoshop tutorial that shows you how to make a picture jump out of the frame into another photo. You’ll use two images for this tutorial, Pen Tool to extract the part of image, Transform Tool to set up perspective and Layer Styles for more effects.

Using Photoshop To Make an Image Jump Out of Frame

The following tutorial teaches you how to create an Out of Bounds photo using basic Photoshop skills to isolate the target, giving it a realistic look with proper perspective and other effects. It highlights the importance of choosing the right photo to get a true 3D effect.

Create an Out of Bounds Surreal Photo Manipulation in Photoshop

This tutorial is a detailed walkthrough of an artwork, which shows you how to create a surreal out of bounds effect in Photoshop. The tutorial uses variety of stock images and highlights the advantages of adjustment layers and how important they are to create a intense photo manipulation. In this detailed step by step walk through it is interesting to see how the subject, a shark in this case is shown coming out of antique photo frame and how the photo manipulation is given a realistic look using various Photoshop tools and effects.

Midnight Magic Scene Creation in Photoshop

This again is a very interesting tutorial if you want to show a subject coming in or going out of TV screen and a big photo frame. This tutorial demonstrates how you can give a dramatic effect to the scene by using Blending Modes, Layer Styles and Photoshop Filters.

Photo Cutout

This tutorial demonstrates a very simple technique where the subject is extracted from the image using Extract tool and a clever use of Layer Mask to hide the part of image to create a effect that makes the subject look like it’s coming in or out of a photo. In this tutorial you will learn how to use Photoshop’s Extract tool, Layer Masks and Layer Styles to create a cutout from a photo.

Out of Bounds Photoshop Action

And finally, a bonus! This actually is not a tutorial but a Photoshop Action which simplifies the steps needed to create the impressive Out of Bounds photo effect. The Action allows you to define the border size, the perspective of the image, the out-of-bounds areas and you can also add the shadow effects. The action is very flexible and makes use of layer masks, which allows you to fine tune the effect at a later stage. There is also a video that guides you through the process of using this Photoshop Action to create an amazing OOB photo effect. At Panosfx you will also find some more great Photoshop Actions.

Further Resources

As you work through above tutorials to create an OOB effect (or any photo manipulation) it is essential to know some of the basic Photoshop techniques like working with Layers, Layer Masks, Selection and Transform techniques. Below we have listed the links to some of those tutorials.

• Working with Layers in Photoshop
• Unveiling Photoshop Masks
• A Basic Guide to Photoshop CS4 Adjustment Layers
• A Comprehensive Introduction to Photoshop Selection Techniques
• Using Transform in Photoshop
• Photoshop 101: How To Use The Free Transform Tool
• 10 Steps to Improving Your Photoshop Skills
• 30+ Useful Resources for Improving Your Photoshop Efficiency

Related posts:

1. How to Create Glass Transparency in a Cute Photo Manipulation
2. Fantastic Tips for Shooting Bravely in the Sun(copy from photo.tutsplus.com)
3. High Dynamic Range Photography Merge in cs4

No related posts.

There seems to be an age-old struggle between clients and freelancers: You need work in a pinch but don’t want to compromise on quality. Yes, I’m talking about rush jobs.

For many freelancers, this raises red flags. They’re concerned about being frazzled and not compensated for turning around top-notch work in a short span. You’re worried about meeting a deadline that just came up and saving your skin, too. If you can at all include more time for a project to be completed, do so. It’ll help you avoid rushing around—and probably save you a few bucks as well. But if that inevitable rush job comes into play, you’ll need to work with a freelancer that can swiftly get the job done.

Here are some tips on working with freelancers to complete rush projects.

Ask if Your Freelancer is Rush-Ready

From the beginning of the relationship, it’s important to ask the freelancer if they accept rush jobs. If they do, you know that you may be able to count on them when things get tight. If not, secure a back-up contractor that can take things in a pinch.

Give Notice

If your freelancer has indicated in the past that he or she is open to rush jobs, give him or her as much notice as possible about your project. That usually works by way of a phone call in addition to an email. Talk about the exact parameters of the project and give a clear deadline including everything that is expected of him or her. A freelancer should never take a rush project if they “think” they can do it—they need to be sure. You may want to reiterate that because many people nowadays are trying to snag any project they can to keep money coming in, but it’s only fair if they can deliver the goods on time.

Process the Red Tape Quickly

The contractor will likely want to have a written agreement signed and a deposit sent, so work quickly to expedite the requests you agree to. If you offer a project to the freelancer on Monday morning and it is due Wednesday afternoon, you want to make sure you get everything ready so he or she can get started on it right away. If you delay things a day, the freelancer will likely not start the work until Tuesday, which only gives him or her less than two working days—and that can mean your project won’t get the full attention it deserves. To avoid even more of a rush, make sure you get all the red tape items out of the way promptly.

Expect a Rush Fee

To compensate for scrapping other projects with less-pressing deadlines (and probably pulling all-nighters), many freelancers will include a rush fee. If you have a solid working relationship with your freelancer, he or she can probably get your project done without the extra charge, but in some cases, it is only fair to pay a little extra. Be sure to ask the freelancer if there will be a rush fee if you are tight on budget so you can determine from the get-go if you can afford him or her. If the freelancer is working on an hourly rate, it’s good to see if you can get a cap on hours to keep any project budget in check. If the freelancer is working with a lump sum, they sometimes toss an extra fee in there. It is perfectly okay to question hours or charges, just keep in mind that rush fees are an industry norm and you’ll probably be paying them if you put your contractor on the spot.

Give Yourself Extra Time

Never put your deadline so close to the time you need the project done that you don’t have time to look it over. You want to make sure everything is completed, and if possible, to give it a quick proofread. Remember, even freelancers make mistakes from time to time, so it is a smart idea to review everything before it goes out.

Be nice. A polite note will go a long way to thank your freelancer for helping out with a rush job. Take the time to thank him or her—because you never know when you may need help in a hurry.

Related posts:

1. 40 Quality Photoshop UI Design Tutorials
2. The Power of a (Work)Day Off
3. fight club of freelancing

This industry moves fast — really fast! If you’re not careful, you’ll be left in its dust. So, if you’re feeling a bit overwhelmed with the coming changes/updates in HTML5, use this as a primer of the things you must know.

1. New Doctype

Still using that pesky, impossible-to-memorize XHTML doctype?

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

If so, why? Switch to the new HTML5 doctype. You’ll live longer — as Douglas Quaid might say.

<!DOCTYPE html>

In fact, did you know that it truthfully isn’t even really necessary for HTML5? However, it’s used for current, and older browsers that require a specified doctype. Browsers that do not understand this doctype will simply render the contained markup in standards mode. So, without worry, feel free to throw caution to the wind, and embrace the new HTML5 doctype.

2. The Figure Element

Consider the following mark-up for an image:

<img src="path/to/image" alt="About image" />
<p>Image of Mars. </p>

There unfortunately isn’t any easy or semantic way to associate the caption, wrapped in a paragraph tag, with the image element itself. HTML5 rectifies this, with the introduction of the <figure> element. When combined with the <figcaption> element, we can now semantically associate captions with their image counterparts.

<figure>
	<img src="path/to/image" alt="About image" />
	<figcaption>
		<p>This is an image of something interesting. </p>
	</figcaption>
</figure>

3. <small> Redefined

Not long ago, I utilized the <small> element to create subheadings that are closely related to the logo. It’s a useful presentational element; however, now, that would be an incorrect usage. The small element has been redefined, more appropriately, to refer to small print. Imagine a copyright statement in the footer of your site; according to the new HTML5 definition of this element; the <small> would be the correct wrapper for this information.

The small element now refers to “small print.”

4. No More Types for Scripts and Links

You possibly still add the type attribute to your link and script tags.

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

This is no longer necessary. It’s implied that both of these tags refer to stylesheets and scripts, respectively. As such, we can remove the type attribute all together.

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

5. To Quote or Not to Quote.

…That is the question. Remember, HTML5 is not XHTML. You don’t have to wrap your attributes in quotation marks if you don’t want to you. You don’t have to close your elements. With that said, there’s nothing wrong with doing so, if it makes you feel more comfortable. I find that this is true for myself.

<p id=someId> Start the reactor.

Make up your own mind on this one. If you prefer a more structured document, by all means, stick with the quotes.

6. Make your Content Editable

The new browsers have a nifty new attribute that can be applied to elements, called contenteditable. As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage.

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>untitled</title>
</head>
<body>
	<h2> To-Do List </h2>
     <ul contenteditable="true">
		<li> Break mechanical cab driver. </li>
		<li> Drive to abandoned factory
		<li> Watch video of self </li>
	 </ul>
</body>
</html>

Or, as we learned in the previous tip, we could write it as:

<ul contenteditable=true>

7. Email Inputs

If we apply a type of “email” to form inputs, we can instruct the browser to only allow strings that conform to a valid email address structure. That’s right; built-in form validation will soon be here! We can’t 100% rely on this just yet, for obvious reasons. In older browsers that do not understand this “email” type, they’ll simply fall back to a regular textbox.

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>untitled</title>
</head>
<body>
	<form action="" method="get">
		<label for="email">Email:</label>
		<input id="email" name="email" type="email" />

		<button type="submit"> Submit Form </button>
	</form>
</body>
</html>

At this time, we cannot depend on browser validation. A server/client side solution must still be implemented.

It should also be noted that all the current browsers are a bit wonky when it comes to what elements and attributes they do and don’t support. For example, Opera seems to support email validation, just as long as the name attribute is specified. However, it does not support the placeholder attribute, which we’ll learn about in the next tip. Bottom line, don’t depend on this form of validation just yet…but you can still use it!

8. Placeholders

Before, we had to utilize a bit of JavaScript to create placeholders for textboxes. Sure, you can initially set the value attribute how you see fit, but, as soon as the user deletes that text and clicks away, the input will be left blank again. The placeholder attribute remedies this.

<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />

Again, support is shady at best across browsers, however, this will continue to improve with every new release. Besides, if the browser, like Firefox and Opera, don’t currently support the placeholder attribute, no harm done.

9. Local Storage

Thanks to local storage (not officially HTML5, but grouped in for convenience’s sake), we can make advanced browsers “remember” what we type, even after the browser is closed or is refreshed.

“localStorage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site, it remembers all fields in localStorage.”
-QuirksBlog

While obviously not supported across all browsers, we can expect this method to work, most notably, in Internet Explorer 8, Safari 4, and Firefox 3.5. Note that, to compensate for older browsers that won’t recognize local storage, you should first test to determine whether window.localStorage exists.

via http://www.findmebyip.com/litmus/

10. The Semantic Header and Footer

Gone are the days of:

<div id="header">
	...
</div>

<div id="footer">
	...
</div>

Divs, by nature, have no semantic structure — even after an id is applied. Now, with HTML5, we have access to the <header> and <footer> elements. The mark-up above can now be replaced with:

<header>
	...
</header>

<footer>
	...
</footer>

It’s fully appropriate to have multiple headers and footers in your projects.

Try not to confuse these elements with the “header” and “footer” of your website. They simply refer to their container. As such, it makes sense to place, for example, meta information at the bottom of a blog post within the footer element. The same holds true for the header.

11. More HTML5 Form Features

Learn about more helpful HTML5 form features in this quick video tip.

12. Internet Explorer and HTML5

Unfortunately, that dang Internet Explorer requires a bit of wrangling in order to understand the new HTML5 elements.

All elements, by default, have a display of inline.

In order to ensure that the new HTML5 elements render correctly as block level elements, it’s necessary at this time to style them as such.

header, footer, article, section, nav, menu, hgroup {
   display: block;
}

Unfortunately, Internet Explorer will still ignore these stylings, because it has no clue what, as an example, the header element even is. Luckily, there is an easy fix:

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");

Strangely enough, this code seems to trigger Internet Explorer. To simply this process for each new application, Remy Sharp created a script, commonly referred to as the HTML5 shiv. This script also fixes some printing issues as well.

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

13. hgroup

Imagine that, in my site’s header, I had the name of my site, immediately followed by a subheading. While we can use an <h1> and <h2> tag, respectively, to create the mark-up, there still wasn’t, as of HTML4, an easy way to semantically illustrate the relationship between the two. Additionally, the use of an h2 tag presents more problems, in terms of hierarchy, when it comes to displaying other headings on the page. By using the hgroup element, we can group these headings together, without affecting the flow of the document’s outline.

<header>
	<hgroup>
		<h1> Recall Fan Page </h1>
		<h2> Only for people who want the memory of a lifetime. </h2>
	</hgroup>
</header>

14. Required Attribute

Forms allow for a new required attribute, which specifies, naturally, whether a particular input is required. Dependent upon your coding preference, you can declare this attribute in one of two ways:

<input type="text" name="someInput" required>

Or, with a more structured approach.

<input type="text" name="someInput" required="required">

Either method will do. With this code, and within browsers that support this attribute, a form cannot be submitted if that “someInput” input is blank. Here’s a quick example; we’ll also add the placeholder attribute as well, as there’s no reason not to.

<form method="post" action="">
	<label for="someInput"> Your Name: </label>
	<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
	<button type="submit">Go</button>
</form>

If the input is left blank, and the form is submitted, the textbox will be highlighted.

15. Autofocus Attribute

Again, HTML5 removes the need for JavaScript solutions. If a particular input should be “selected,” or focused, by default, we can now utilize the autofocus attribute.

<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

Interestingly enough, while I personally tend to prefer a more XHTML approach (using quotation marks, etc.), writing "autofocus=autofocus" feels odd. As such, we’ll stick with the single keyword approach.

16. Audio Support

No longer do we have to rely upon third party plugins in order to render audio. HTML5 now offers the <audio> element. Well, at least, ultimately, we won’t have to worry about these plugins. For the time being, only the most recent of browsers offer support for HTML5 audio. At this time, it’s still a good practice to offer some form of backward compatibility.

<audio autoplay="autoplay" controls="controls">
	<source src="file.ogg" />
	<source src="file.mp3" />
	Download this file.
</audio>

Mozilla and Webkit don’t fully get along just yet, when it comes to the audio format. Firefox will want to see an .ogg file, while Webkit browsers will work just fine with the common .mp3 extension. This means that, at least for now, you should create two versions of the audio.

When Safari loads the page, it won’t recognize that .ogg format, and will skip it and move on to the mp3 version, accordingly. Please note that IE, per usual, doesn’t support this, and Opera 10 and lower can only work with .wav files.

17. Video Support

Much like the <audio> element, we also, of course, have HTML5 video as well in the new browsers! In fact, just recently, YouTube announced a new HTML5 video embed for their videos, for browsers which support it. Unfortunately, again, because the HTML5 spec doesn’t specify a specific codec for video, it’s left to the browsers to decide. While Safari, and Internet Explorer 9 can be expected to support video in the H.264 format (which Flash players can play), Firefox and Opera are sticking with the open source Theora and Vorbis formats. As such, when displaying HTML5 video, you must offer both formats.

<video controls preload>
	<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
	<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
	<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>

Chrome can correctly display video that is encoded in both the “ogg” and “mp4″ formats.

There are a few things worth noting here.

1. We aren’t technically required to set the type attribute; however, if we don’t, the browser has to figure out the type itself. Save some bandwidth, and declare it yourself.
2. Not all browsers understand HTML5 video. Below the source elements, we can either offer a download link, or embed a Flash version of the video instead. It’s up to you.
3. The controls and preload attributes will be discussed in the next two tips.

18. Preload Videos

The preload attribute does exactly what you’d guess. Though, with that said, you should first decide whether or not you want the browser to preload the video. Is it necessary? Perhaps, if the visitor accesses a page, which is specifically made to display a video, you should definitely preload the video, and save the visitor a bit of waiting time. Videos can be preloaded by setting preload="preload", or by simply adding preload. I prefer the latter solution; it’s a bit less redundant.

<video preload>

19. Display Controls

If you’re working along with each of these tips and techniques, you might have noticed that, with the code above, the video above appears to be only an image, without any controls. To render these play controls, we must specify the controls attribute within the video element.

<video preload controls>

Please note that each browser renders its player differently from one another.

20. Regular Expressions

How often have you found yourself writing some quickie regular expression to verify a particular textbox. Thanks to the new pattern attribute, we can insert a regular expression directly into our markup.

<form action="" method="post">
	<label for="username">Create a Username: </label>
   	<input type="text"
	   name="username"
	   id="username"
	   placeholder="4 <> 10"
	   pattern="[A-Za-z]{4,10}"
	   autofocus
	   required>
	<button type="submit">Go </button>
</form>

If you’re moderately familiar with regular expressions, you’ll be aware that this pattern: [A-Za-z]{4,10} accepts only upper and lowercase letters. This string must also have a minimum of four characters, and a maximum of ten.

Notice that we’re beginning to combine all of these new awesome attributes!

If regular expressions are foreign to you, refer here.

21. Detect Support for Attributes

What good are these attributes if we have no way of determining whether the browser recognizes them? Well, good point; but there are several ways to figure this out. We’ll discuss two. The first option is to utilize the excellent Modernizr library. Alternatively, we can create and dissect these elements to determine what the browsers are capable of. For instance, in our previous example, if we want to determine if the browser can implement the pattern attribute, we could add a bit of JavaScript to our page:

alert( 'pattern' in document.createElement('input') ) // boolean;

In fact, this is a popular method of determining browser compatibility. The jQuery library utilizes this trick. Above, we’re creating a new input element, and determining whether the pattern attribute is recognized within. If it is, the browser supports this functionality. Otherwise, it of course does not.

<script>
if (!'pattern' in document.createElement('input') ) {
	// do client/server side validation
}
</script>

Keep in mind that this relies on JavaScript!

22. Mark Element

Think of the <mark> element as a highlighter. A string wrapped within this tag should be relevant to the current actions of the user. For example, if I searched for “Open your Mind” on some blog, I could then utilize some JavaScript to wrap each occurrence of this string within <mark> tags.

<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>

23. When to Use a <div>

Some of us initially questioned when we should use plain-ole divs. Now that we have access to headers, articles, sections, and footers, is there ever a time to use a…div? Absolutely.

Divs should be utilized when there’s no better element for the job.

For example, if you find that you need to wrap a block of code within a wrapper element specifically for the purpose of positioning the content, a <div> makes perfect sense. However, if you’re instead wrapping a new blog post, or, perhaps, a list of links in your footer, consider using the <article> and <nav> elements, respectively. They’re more semantic.

24. What to Immediately Begin Using

With all this talk about HTML5 not being complete until 2022, many people disregard it entirely – which is a big mistake. In fact, there are a handful of HTML5 features that we can use in all our projects right now! Simpler, cleaner code is always a good thing. In today’s video quick tip, I’ll show you a handful of options.

25. What is Not HTML5

People can be forgiven for assuming that awesome JavaScript-less transitions are grouped into the all-encompassing HTML5. Hey — even Apple has inadvertently promoted this idea. For non-developers, who cares; it’s an easy way to refer to modern web standards. However, for us, though it may just be semantics, it’s important to understand exactly what is not HTML5.

1. SVG: Not HTML5. It’s at least five years old.
2. CSS3: Not HTML5. It’s…CSS.
3. Client Storage: Not HTML5. It was at one point, but was removed from the spec, due to the fact that many worried that it, as a whole, was becoming too complicated. It now has its own specification.
4. Web Sockets: Not HTML5. Again, was exported to its own specification.

Regardless of how much distinction you require, all of these technologies can be grouped into the modern web stack. In fact, many of these branched specifications are still managed by the same people.

Related posts:

1. 120 Tips, Tricks, and Tuts from 2009 Worth your Time
2. Fantastic Tips for Shooting Bravely in the Sun(copy from photo.tutsplus.com)
3. 9 Tips for a Perfect Portrait Background