I thought to myself “We’ll just slap that baby into Cufon and be good to go”. Now the unfortunate thing when using Cufon is that it always doesn’t play nice with other kiddies in the playground. We kept running into issues with it and my buddy said “well why not just use @font-face?” I paused for a moment and replied “Use what?”

So I took a look into it and to my amazement it worked beautifully. One thing that i did find out though is that there is a place to get your fonts converted to what you need. It gives you everything, even the style sheet. Check them out here: Font Squirrel and if you need more guidance into implementing @font-face check out this really helpful article from SixRevisions.

Optimizing Images

GIF and JPEG type images are the most widely supported on the web. However, many people are not aware of the difference between the two. This tutorial on Tips-Tricks goes over goes each type of graphic and teaches you how to optimize them.

For starters, it lets us know that:

• GIF should be used when you create graphics on your computer like buttons and animations.
• JPEG should be used for photographs or images that have been scanned onto your computer.

The Differences

GIF files can contain a maximum of 256 colors (8-bit) as opposed to JPEG’s 16.7+ million colors (24-bit). You can customize your files to use as the amount of colors that you prefer – up to what it supports. GIF files have a higher color quality and smaller file size, but JPEG can have a small file size when used for storing photographs and images with a large amount of shading.

Animated GIFs

One of the advantages of GIF files is that they support animation, transparency, and interlacing. There are also numerous free online sources where you can download GIF animations for personal use. The full tutorial gives you links to examples and teaches you how to create transparent GIFs using anti-aliasing.

Transparent GIFs

Transparent GIF files can be created using various methods like with feathers and drop shadows, depending on how soft you want them to appear. You basically have to blend the edges into the background. The tutorial lets use know that we’ll need to create 2 images: one with a white background and one with a black background. You can, however, use any color for the second image – just try to make it as close to the web page background color as possible.

To find out more tricks for transparent GIFs and to learn about other graphic tools that can help you produce them, check out this tutorial on Tips-Tricks.

Check them our and get other html tips and tricks:
10 Great WYSIWYG HTML Editors

HTML5 and CSS3: The Techniques You’ll Soon Be Using

Learn to build a basic blog page using techniques from HTML5 and CSS3

Coding a HTML5 Layout from Scratch

Learn how to use graceful degradation techniques and technologies, progressive enhancement techniques and technologies, HTML5 alongside microformats, and get a clear vision of the new features of HTML5 and CSS3.

Building a Live News Blogging System in PHP, Spiced with HTML5

Learn how to build a live news blogging system using HTML5, CSS3, and jQuery; this is part 1 of a series. When complete you’ll be able to have multiple administrators with the ability to add, edit, and delete news.

Touch the Future: Create an Elegant Website with HTML5 and CSS3

The title says it all: learn how to create an elegant website using the new features found in HTML5 and CSS3.

Hybrid Column Layout – Using HTML & CSS3 Only

Learn how to create a website with a mix of fixed columns and liquid columns. This tutorial will take you through the steps of using fixed width on the side columns, a full middle column, and paddings equal to the other 2 columns.

Design & Code a Cool iPhone App Website in HTML5

Learn how to build a cool iPhone app website using HTML5, sprinkled with a few style effects via CSS3. The tutorial goes through the steps in Photoshop, the HTML, and then the CSS.

Have a Field Day with HTML5 Forms

Learn how to build simple, yet stylish web forms using HTML5 and CSS3 techniques.

Building a Custom HTML5 Video Player with CSS3 and jQuery

Since each browser has its own type of video player and controls, it makes it hard to be consistent across browsers. This tutorial shows you how to control the look of your video controls no matter what browser is being used.

Blowing up HTML5 Video and Mapping it into 3D Space

Learn to how to blow up a video  using HTML5 and then map it into 3D space.

How to Make an HTML5 iPhone Application

Learn how to create an offline HTML5 iPhone application which will look just like a native mobile application. For the purpose of this tutorial, you’ll learn how to create a Tetris game.

This is just the beginning! Check out the full list for the other 12 excellent HTML5 tutorials.

As stated on XHTML-CSS-Code.com, Microsoft released IE7 in 2006 and IE8 in 2009. Even though IE8 has many improvements that affect RSS, CSS, and Ajax-based designs, many still choose to keep using IE6 as their default browser.

Unfortunately, IE6 has so many issues that it’s often a challenge designing for it and testing for compatibility. For one thing, It lacks support for transparency which is required in PNG images. Plus it doesn’t support the new features in CSS3 or HTML5. Web designers therefore have to resort to the use of JavaScript to help fix these issues. Google even decided in 2010 to stop supporting IE6 entirely.

So why do many users still use and prefer IE6? It’s mainly because they are so comfortable with it and it can be extremely tough to adapt to a new browser. While IE6 is great for websites that do not require high levels of interaction or functionality, it is still not the best option – especially with the evolution of the web moving at lightning speeds.

Many designers don’t want to stop using IE6, but there isn’t really much of a choice anymore. They know about the issues, yet they’re willing to cope.

So is it time to leave IE6 behind and move forward? Check out the full tutorial to find out. ]]> http://www.psdtohtmlconversion.com/?feed=rss2&p=705 0 http://www.psdtohtmlconversion.com/?p=694 http://www.psdtohtmlconversion.com/?p=694#comments Wed, 01 Sep 2010 15:07:28 +0000 admin http://psdtohtmlconversion.com/?p=694 HTML5 is the thing to talk about these day. Today, we have a collection of some ridiculously impressive HTML5 canvas-based experiments that will make you say, “Wow!” Let’s take a peek at some of the latest, cutting edge examples out there.

check out the canvas experiments and get other html5 tutorials:
21 Ridiculously Impressive HTML5 Canvas Experiments

Creating a Favicon for Your Website

As easy as it is to create and add a favicon to your website, many people don’t know how to do this or even know what the name of the icon is. The favicon is the icon that shows up to the left of the website name and/or title in your browser tabs (see image below). It also is used in the bookmarks menu when someone bookmarks your website. It’s even used when a user adds a shortcut icon to your website on their desktop.

Since this icon will represent your website on many occasions, it’s important to use something memorable. As you can see from the first tab in the image below there isn’t a favicon, just a blank, empty square. You don’t want that for your website, which is why a favicon is important to have.

Tab view with favicons in Firefox.

The universal format for favicons is ICO, as opposed to GIF, PNG, JPG, BMP; this is due to compatibility issues with various browsers. Unfortunately though, since Photoshop does not support the ICO file format, it is impossible to create a favicon in the program. That’s why HTML Center suggests that you download GIMP for free. It’s available for Windows, Mac, and Linux and it has native support for ICO files.

Image Source: Uber Downloads

HTML Center explains that once you have GIMP installed, you should create a new 64×64 workspace. The first layer will need to have a solid color background. You’ll then need to create another 64×64 layer with a transparent background. From there, simply paste the image that you want to use on the bottom layer. Then you’ll need to create a set of 32×32 layers and finally a set of 16×16 layer. Each set will have a layer with a background color and a transparent layer. The image that you plan to use will also have to be resized and optimized for each layer.

When you’re done, you’ll end up with an image containing six layers. Having these three different sized layers is important because of the different formats that may be used. Browser tab icons are 16×16, Windows uses 32×32 for desktop shortcuts, and 64×64 is sometimes uses for larger icons.

Lastly, you’ll need to save your icon as an ICO file and then upload it to the root directory of your website via FTP. Once that is in place, all that’s left is to add the appropriate meta tag to your website heading so that the favicon will display properly in a browser.

For more details and step-by-step directions, be sure to check out the full tutorial on HTML Center.

Due to CSS3s current popularity, the volume of new tutorials and fresh ideas has jumped skywards. We simply could not highlight all of the articles and tutorials, there were far too many! What we have done is filtered the round-up down to our favorite 50 tutorials, resources and tools from recent months.

Read the rest of the story and get other great css tips and tricks:
50 Refreshing CSS Tutorials, Techniques and Resources

So today we’re going to experiment a little with these new technologies.

Read the rest and get other html5 tutorials:
Coding A HTML 5 Layout From Scratch

To get started, you’ll need to download the 960.gs files and open the uncompressed CSS file 960_24_col.css. We’ll be using the source code from the demo website to view the HTML of this system in more depth.

Let’s get started.

The Three Sections

Top

In the top section, there are two columns: as the left side gets wider, the right side gets more narrow. On each row, the whitespace separates the two columns.

Middle

In the middle section, there is a 30px square moving from the left side to the right side. As you can see, there is whitespace in between each one of the squares.

Bottom

Lastly in the bottom section, the 960px width is divided in half by two sets of different sized rectangles. Each square is also separated by whitespace.

Next we’ll go into each section in more detail.

Top Section: Grid Classes 1 to 24

First you’ll need to open the source code (view source) for the 960 Grid System demo site so that we can take a closer look.

The main div class for the body of the page is container_24. This lets us know how many columns it takes to equally divide the 960px width page.

Sidenote: Just from this we knew that the 12-column system will have a class of container_12 and the 16-column a class of container_16.

Next you’ll see that each row has a set of div classes. Since the first row only has one column, as you can see from the top section image above, it has the class grid_24. Each row after that has two div classes: one for the left column and another for the right column. The grid_number for each row will of course add up to 24. So row 2 has classes grid_1 and grid_23, row 3 has classes grid_2 and grid_22, and so on.

Visually, the classes would look like this:

Of course, the width of the classes are actually defined in the CSS, which you can dig into deeper by viewing the full tutorial on Nettuts+. It gets much move involved here.

Now, let’s move on to the middle section.

Middle Section: Prefix and Suffix Classes

Now you’ll notice in the middle section, there are now more classes: prefix_xx and suffix_xx. Again each row will add up to 24 and to get 24 you’ll have to add the grid, prefix, and suffix classes together.

So for row one, there is a class of grid_1 suffix_23, which adds up to 24. Row two has a class of grid_1 prefix_1 suffix_22, which again adds up to 24. It goes on from here in this manner.

Visually, it would look like this:

I’m sure you’re wondering what the prefix_xx and suffix_xx classes actually do. Well, they add extra padding on the left and right sides and help to increase the size of the grid_xx class. Again, this is done within the CSS and can be seen in more detail on the full tutorial.

Now, let’s move on to the bottom section.

Bottom Section: Pull and Push Classes

For this section it’s best to use Firefox along with the Web Developer add-on, so that you can see how the two groups of rectangles are divided into left and right sides as opposed to top and bottom. You can do this by clicking on the “Information” button from the Web Developer toolbar and then choosing “Display Div Order.”

This is what you should see:

You’ll notice two new classes in this section: pull_xx and push_xx. The names pretty much say it all. The pull class pulls the content within the div to the left, while the push does the opposite; it’s pushes the div content to the right. Basically this will either add negative or positive left padding so that the content can line up according to the appropriate column.

Alpha and Omega Classes

You’ve probably also noticed the the alpha and omega classes in this section. What they do is cancel out the horizontal padding that is set by the grid_xx classes, used mainly inside nested divs.

To view the CSS of this section in more detail, check out the full tutorial.

Clear Classes

You’ll also see clear classes throughout the code. The full tutorial explains it best when it says, “the no-brainer reason for this is that we need to clear floated divs, because once we float them, they no longer take up space, causing the elements to be ‘pulled up,’ which ultimately leads to a broken layout.”

Final Thoughts

So now that you know the breakdown of each section, you can use this grid to convert your 960-based designs into HTML and CSS. It really helps to better understand what’s happening on the backend of the page and why. Better yet, it will help you create very user-friendly websites with content that flows nicely from one section to the next.

If you’re interested in seeing websites that have utilized this system, be sure to check out the 960 Grid System website.