Resources:

1. Smashing Magazine – Push Your Web Design Into The Future With CSS3

Into The Future With CSS3

A good intro to CSS3 by Smashing Magazine

2. CSS3.Info – Introducing the Flexible Box Layout Module

Introducing the Flexible Box Layout Module

Know more about the one aspect of CSS3, that hasn’t received a lot of attention so far, i.e., Flexible Box Layout module in action.

3. W3C – Introduction to CSS3

W3C - Introduction to CSS3

Let the Big Guys show you the road map of CSS3 and how it works.

4. Desizn Tech – 20 Must Know Recent CSS and CSS3 Resources and Tools

Desizn Tech - 20 Must Know Recent CSS and CSS3 Resources and Tools

Presenting 20 recent CSS & CSS3 tools and resources you need to be aware of as a web designer/developer.

5. Smashing Magazine – CSS 3 Cheat Sheet (PDF)

Smashing Magazine - CSS3 Cheat Sheet

Get the main features of CSS3 in a handy, printable reference card with this download-able Free PDF.

6. Design Shack -Introduction to CSS3

Design Shack -Introduction to CSS3

Start from the very beginning – from not having even heard of CSS3, to feeling ready to hit it running as various features start to become more widely adopted.

7. Smashing Magazine – Stronger, Better, Faster Design with CSS3

Smashing Magazine - Stronger, Better, Faster Design with CSS3

Use CSS3 techniques like gradients, border-radius and drop-shadows to create compelling, flexible and buttons (and a little JavaScript) to create some practical elements and layouts.

8. CSS.Info – CSS3 Resource: Preview Custom Web Fonts with Font Dragr

CSS.Info - CSS3 Resource: Preview Custom Web Fonts with Font Dragr

Font Dragr is a HTML5/CSS3 powered web app for testing custom web fonts. This useful app allows web designers to preview how embeddable fonts will render in their target browsers without having to code a single line of html/css and without having to upload any files via ftp.

9. Smashing Magazine – 50 Brilliant CSS3/JavaScript Coding Techniques

Smashing Magazine - 50 Brilliant CSS3/JavaScript Coding Techniques

50 useful and powerful CSS3/jQuery-techniques that can strongly improve user experience, improve designer’s workflow and replace dirty old workarounds used in Internet Explorer 6 & Co.

10. CSS.Info – CSS3 Demos

CSS.Info - CSS3 Demos

CSS3 . Info is an enormously comprehensive site about all things CSS3-related. They share news, interviews, and resources from around the web regarding CSS3.

11. Six Revisions – 20 Useful Resources for Learning about CSS3

Six Revisions - 20 Useful Resources for Learning about CSS3

As a web developer, it’s crucial to be well-informed about modern and future web standards. To help you stay ahead of the curve Six Revisions brings you 20 excellent resources on the topic of CSS3.

12. A List Apart – CSS @ Ten: The Next Big Thing

A List Apart - CSS @ Ten: The Next Big Thing

Revisit the past and chart the future of CSS.

13. Smashing Magazine – Mastering CSS, Part 2: Advanced Techniques and Tools

Smashing Magazine - Mastering CSS, Part 2: Advanced Techniques and Tools

Mastering CSS is one of the most important things a web designer can do, and has really become an essential criterion for being a successful designer.

14. Inspect Element – A Look at Some of the New Selectors Introduced in CSS3

Inspect Element - A Look at Some of the New Selectors Introduced in CSS3

Everyone who has been using CSS is immediately familiar with selectors as they are what is used to target elements on a page and style them. CSS3 brings even more options as far as selecting elements goes. Here is a run-down of just some of the things that is possible with CSS3 selectors.

15. W3Avenue – CSS3 Unleashed: Tips, Tricks and Techniques

W3Avenue - CSS3 Unleashed: Tips, Tricks and Techniques

A quick look at the numerous new features incorporated in CSS3 that will get you up to speed and bring you closer to the cutting edge of CSS development.

Tutorials:

1. Net Tuts – 5 Techniques to Acquaint You With CSS 3

Net Tuts - 5 Techniques to Acquaint You With CSS 3

CSS is a well-known, widely used language to style websites. With version three in the works, many time-saving features will be implemented. Although only the most modern browsers currently support these effects, it’s still fun to see what’s around the corner! In this tutorial I’ll show you five techniques.

2. CSS3.Info – CSS3 Opacity

CSS3.Info - CSS3 Opacity

The most widely implemented feature of CSS3 up till now is opacity. It’s probably also the one people have been waiting for the most.

3. Dev Opera – CSS Text Shadows and Background Sizing

Dev Opera – CSS Text Shadows And Background Sizing

Learn how CSS properties: text-shadow and background-size can add unique twists to everyday Web design with minimal effort.

4. Net Tuts – CSS Fundamentals: CSS 3 Transitions

Net Tuts - CSS Fundamentals: CSS 3 Transitions

As CSS3 rolls out around the web, it is bringing some interesting new presentational techniques along with it. Today, we’ll review the basics of using CSS3 transitions and animations to add an extra layer of polish.

5. 24 Ways – Rounded Corner Boxes the CSS3 Way

24 Ways - Rounded Corner Boxes the CSS3 Way

Learn to add not one, not four, but eight background images to a single element with CSS3.

6. A List Apart – Introducing the CSS3 Multi-Column Module

A List Apart - Introducing the CSS3 Multi-Column Module

While most computer screens are wider than tall, most websites are the exact opposite: longer than wide.

7. Net Tuts – Design a Prettier Web Form with CSS

Net Tuts - Design a Prettier Web Form with CSS

Thanks to advanced CSS properties, such as gradients and shadows, it’s now quite easy to turn a dull web form into something beautiful – with minimal effort. Learn how in this interesting tutorial!

8. Smashing Magazine – 50 Brilliant CSS3/JavaScript Coding Techniques

Smashing Magazine - 50 Brilliant CSS3/JavaScript Coding Techniques

50 useful and powerful CSS3/jQuery-techniques that can strongly improve user experience, improve designer’s workflow and replace dirty old workarounds used in Internet Explorer 6 & Co.

9. Desizn Shack – Introduction to CSS3 User Interface

Desizn Shack - Introduction to CSS3 User Interface

CSS3 brings some great new properties relating to resizing elements, cursors, outlining, box layout and more. This tutorial focuses on three of the most significant user interface enhancements.

10. Max Design – CSS Centering: Fun for all!

Max Design - CSS Centering: Fun for all!

How do you center a containing block on a page using CSS? There are two main methods and the choice should be made based on whether your page layout is liquid (will move in and out depending on the size of the browser window) or fixed width.

11. Apples to Oranges – CSS For Bar Graphs

The Wojo Group - CSS Stacked Bar Graphs

Learn to create flexible, inexpensive and interesting visualizations, coded in xHTML and CSS.

12. The Wojo Group – CSS Stacked Bar Graphs

The Wojo Group - CSS Stacked Bar Graphs

Learn to create a stacked bar graph in a one of its type tutorial.

13. Arc90 – Link Thumbnail

Arc90 - Link Thumbnail

A picture’s worth a thousand words, right? So, spice up those plain old text links with Link Thumbnail, this great tool from the arc90 lab.

14. 3point7designs – Advanced Typography techniques using CSS

3point7designs - Advanced Typography techniques using CSS

This is an example of what you can do by combining and tweaking type using CSS.

15. A List Apart – Mountaintop Corners

A List Apart - Mountaintop Corners

Learn to create the widely loved rounded corners with a new look.

So, here I did my bit to share the best of resources and tutorials on the web. If you know better resources or tutorials for any of the above features or more than the above, be kind & share your best knowledge!

1. Photoshop Tutorial: How to Make a Web 2.0-Style Logo -ALLEBA

Photoshop Tutorial: How to Make a Web 2.0-Style Logo

Learn to make simple, glossed, gradient, bright-colored logos with this 6-minute video tutorial.

2. Creating a logo from start to finish – Sitecritic

Creating a logo from start to finish

A showcase of designing process from the good ol’days. The author portrays one of his creations for a big brand starting from scratch.

3. How to Design the Firefox Logo in Photoshop – Henry Hoffman

How to Design the Firefox Logo in Photoshop

Learn to create the widely loved FireFox logo in a scalable Photoshop format.

4. EURO 2008 Logo design – Eyes on Tutorials

EURO 2008 Logo design

Create the EURO 2008 championship logo with Jeka.

5. How to Design a Logotype from Conception to Completion – Blog Spoon Graphics

How to Design a Logotype from Conception to Completion

Learn to create logos from concepts to finalize.

6. Planet Logo – Mopacity

Create Planet Shaped Logo

Learn to create a planet shaped ribbons logo.

7. Creating a Crazy Cool Logo – Abduzeedo

Creating a Crazy Cool Logo

Creating a unique and modern logo with a bunch of circles.

8. Making of Metallic Transformers Logo – 10 Steps.SG

Making of Metallic Transformers Logo

Create a cool looking mettalic transformers logo using brushes and textures.

9. Papercraft Text Effect – Photoshop Roadmap

Papercraft Text Effect

Creating a simple and beautiful typeface logos with Photoshop effects.

10. Create an Origami Logo – Zen Elements

Create an Origami Logo

Create an Origami Logo in Photoshop with this tutorial.

11. Create a Cool Music Logo on a Grunge Background – PSD Tuts

Create a Cool Music Logo on a Grunge Background

Create a cool grunge-style Web site logo

12. Creating a Retro Logo – Aviva Directory

Creating a Retro Logo

Learn to make logos with retro look.

13. Dew In Photoshop Tutorial – Voidix

Dew In Photoshop Tutorial

This simple tutorial shows you how to make a cool dew drop in Photoshop.

14. Tutorial: Web 2.0 Logo Reflection in Vector format with Illustrator – Bitt Box

Tutorial: Web 2.0 Logo Reflection in Vector format with Illustrator

Make a scalable vector graphics with reflection in Illustrator.

15. Photoshop Star Logo – Logo Tutorials

Photoshop Star Logo

Basic and simple tutorial for starters.

16. Quick Logos with Live Trace in Adobe Illustrator – Layers Magazine

Quick Logos with Live Trace in Adobe Illustrator

Learn and create logos with the most underutilized feature in Illustrator – Live Trace.

17. Create a 3D Glossy Box Logo in Photoshop – Tutorial 9

Create a 3D Glossy Box Logo in Photoshop

Learn to make a 3D glossy logo in Photoshop.

18. Designing a Cake Shop Logo – Invano

Designing a Cake Shop Logo

Create cheesy logo with this cool tutorial.

19. Fitness Logo Photoshop Tutorial – Photoshop Tutorials Blog

Fitness Logo Photoshop Tutorial

This tutorial explains a simple way of creating a fitness related logo using mostly shapes.

20.  Tutorial: Transform, Style, Blend – Free Transform

Tutorial: Transform, Style, Blend

Create logo with a bit of randomness and an element of surprise.

21. How to make an awesome logo – Gary Simon

How to make an awesome logo

Make an awesome logo in simple and easy to follow steps.

22. Logo Design – Planet Photoshop

Logo Design

Create amazing logos with Corey Barker, Executive Producer of PlanetPhotoshop.com

23. Mac – Colorful Design – Adobe Tutorials

Mac - Colorful Design

Create a colorful mac logo.

24. Design a Logo in Illustrator – how.todesignyour

Design a Logo in Illustrator

Learn just how easy it is to design a great looking logo in Adobe Illustrator, as with any other software package.

25. Not as easy as it looks: A beveled star – Free Transform

Create a beveled star in 7 simple steps.

Create a beveled star in 7 simple steps.

A Favicon is a small square icon associated with a website or a web page. In a browser, it is typically displayed before a web page’s address in the address bar and also before the name of the web page in the list of bookmarks, if you add it your Favorites. So “Favorites Icon” is where the name Favicon comes from. Browsers that have tabbed document interface show a page’s favicon next to the page’s title on the tab as well.

How to create a favicon and Why should you use one

By a small square icon, I mean that a favicon is a really small icon measuring 16×16 pixels. You can also create a 32×32 pixels or 64×64 pixels icon. Creating a larger favicon is only useful if user opens up a folder that is set to display large icons. In all other cases, your Favicon will be scaled down to 16×16 pixels to be displayed in the tabs, favorites menu or the address bar.

Why Should You Use a Favicon?

At CSSJockey, making your web presence outstanding is a key point that is always on our mind. One of the ways to make your website stand out from other pages on the WWW is to use a Favicon that represents your website if it’s opened in a browser or saved in someone’s list of bookmarks. You probably know how cluttered can a person’s list of bookmarks or favorites can be. Having a graphic identity in the form of a Favicon is a great way to catch attention.

In this post, we’ll see how to create a Favicon.ICO file in 2 easy ways:

Create a Favicon.ICO using Photoshop

You can create your Favicon offline using Photoshop. This requires that you add a plugin to your Photoshop that allows it to open and save .ICO files. You can download the .ICO Format plugin for Photoshop from Telegraphics. Extract the contents of the .ZIP file and place the “ICOFormat.8BI” file into \Plug-ins\File Formats directory inside the Adobe Photoshop folder where it is installed.

The plugin reads and writes ICO files in 1, 4 and 8-bit Indexed and 24-bit RGB modes, and also reads and writes 32-bit “XP” icons (with 8-bit alpha channel).

Now we can start with a new 16 x 16 pixels canvas but since its  a very small area it can be a little hard to work with. Instead, we can start with a 64 x 64 canvas (because if you plan to re-size an image later, it’s always good to use even multiples of the original dimensions.)

If you already have a logo, try scaling it down to this canvas size. It’s well and good if it holds.. and you can use it. But if it doesn’t look good and crisp, try creating a simple design that uses colors from your website’s design.

When you’re ready with your Favicon design, Select Image>Image Size menu and enter 16 x 16. NOTE: CS versions of Photoshop will have an option called “resample image” – If you’re using a CS version of Photoshop – Check the Resample Image option and choose “Bicubic Sharper” from the drop-down menu. This technique is for optimizing reduction transformation.

Save your image from the File > Save menu, enter a suitable name and select ICO (Windows Icon) .ico from the Format drop down menu.

Create a Favicon.ico from images in other formats using Online Favicon Generators

If you have your website’s logo or an image that you’d want to use as your Favicon in formats other than .ICO such as PNG, GIF, JPEG, etc. you can still Create a Favicon from those using Free Favicon Generators available online.  Here are a few nifty Favicon generators that I have seen around the internet:

1. Dynamic Drive FavIcon Generator

This FavIcon generator supports GIF, JPG, PNG, and BMP formats and you can even use a gif or png with transparency if you require it. However, the maximum image size that you can upload is 150 KB.

2. HTMLKit FavIcon Generator

With this FavIcon generator you simply select a picture, logo or other graphic (of any size/resolution) for the “Source Image”.

3. Favicon.cc

This is my personal favorite! When you open this website, you’re presented with a grid where you can paint each pixel of the grid using any colors from the palette provided alongside and also preview the result of your creativity LIVE just below the workarea. Besides sketching a FavIcon, you can also import an image in various formats and convert them into a favicon.ico file.  You have an additional option to keep the dimensions of the image you choose, or to shrink the uploaded image to a square icon. There are also user generated favicons in two sections – “Latest Favicons” and “Top Rated Favicons” that you can view or download.

How to use your Favicon

After you’ve created your favicon, it’s time to add it to your website. You can do so by following these steps:

1. Upload the favicon.ico file to the root directory of your website. Visit http://your-website.com/favicon.ico to make sure it is present.

2. If your website is a static website with different HTML pages, insert the below code in the HEAD section of your pages:

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

If your website is based on WordPress and you’re using a theme, you’ll need to modify the above code as follows:

<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('wpurl'); ?>/favicon.ico">

and place it in HEAD section in the header.php file of the theme.

Some people suggest that the following is actually more correct:

You can use both if you want! Clear your browser’s cache, restart the browser and visit your web page. Ideally, you should be able to see your Favicon. However, it must be noted that sometimes the Favicon doesn’t show up immediately. You should try putting a ‘?’ at the end of the URL, which will trick a browser into thinking the page is new and not cached. In some cases the favicon might not show up in Internet Explorer 7. You’d want to add

in the HEAD section to display your Favicon correctly in IE7.

Some Good Looking Favicons and Favicon Galleries

For your viewing pleasure …

1. List of 50 Remarkable Inspirational Favicons – Smashing Magazine
2. 88 Outstanding Favicons
3. Favicon Gallery at FineIcons
4. Favicons at Delta Tango Bravo
5. Fresh Favicon – Inspirational Favicon Gallery

I hope you enjoyed this walk through and if you have something nice to share, please feel free to use the comments form below.

This quote by Alexander Fleming explains all what I am going to share with you today. I am pretty sure that you are aware of Google Search Suggest and Yahoo Search Assist feature. This feature helps you effortlessly find exactly what you’re looking for. No doubt, it lists a few suggestions to keep the user looking for more and more.

As you type something in the search box, it automatically offers search terms and phrases in real time. How nice will it be to have the same feature on your website or blog. In this post, I am going to explain an easy way to add search suggestion feature on your WordPress blog or website.

Things You’ll Need

jQuery: You can download the lates version from jQuery.com
Autocomplete Plugin: Download this plug-in by Jörn Zaefferer from http://bassistance.de

Now let’s play with some code

Include this code within <head>..</head> tag.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.pack.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.autocomplete.css" media="screen" />

Here I am assuming you are using “js” folder to keep all your java scripts and supported files. You may need to update the location of these files based on your folder setup.

Here’s the actual jQuery code to enable this feature on an input box:

<script type="text/javascript">
var data = "Search Terms Separated With Spaces".split(" ");
$("#myInputBox").autocomplete(data);
</script>

Variable “data” hold the terms that you would like the user to see in the search suggestion list and $(“#myInputBox”) is the id of the search input box.

Let’s check out how we can automatically call WordPress tags in our search suggestions, using WordPress wpdb class:

<?php
global $wpdb;
$search_tags = $wpdb->get_results('SELECT name FROM $wpdb->terms');
foreach ($search_tags as $mytag){
echo $mytag->name. ' ';
}
?>

Here I am using WordPress wpdb class to fetch all tags assigned to the posts.

Here’s the complete code to enable this feature on your WordPress blog. Just replace the folder name with actual folder and the jQuery selector $(“#myInputBox”) with the actual id of search input box.

<script type="text/javascript" src="<?PHP bloginfo('template_url'); ?>/REPLACE_THIS_WITH_THE_ACTUAL_FOLDER/jquery.autocomplete.pack.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/REPLACE_THIS_WITH_THE_ACTUAL_FOLDER/jquery.autocomplete.css" media="screen" />

<script type="text/javascript">
$(document).ready(function(){
var data = '<?php global $wpdb; $search_tags = $wpdb->get_results("SELECT name FROM $wpdb->terms"); foreach ($search_tags as $mytag){ echo $mytag->name. " "; } ?>'.split(" ");
$("#ID_OF_SEARCH_INPUT_BOX").autocomplete(data);
})
</script>

Download this file which contains the above mentioned code.

If you face any issues or need help implementing this code on your blog, feel free to post your queries in our forum. Don’t forget to add your inputs in the comments section below.

How to create a loading bar

Recently, while browsing I landed on a page on StackOverflow.com where people were discussing about how I implemented this loading bar on CSSJockey.com. I could sense a lot of confusion in the discussion so thought I would take the mystery out as I love to share best practices. Here’s how you can create a loading bar in few steps..

Things You’ll Need

1. A nice loading image: If you are good in creating animated GIF images that’s nice, otherwise you can create a loading image with this cool Ajax Loading Gif Generator.
2. jQuery: We are creating this loading bar using jQuery so download jQuery latest version here.

jQuery Code within <head>..</head> tags

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(window).load(function(){
      $("#loading").hide();
})
</script>

HTML Code within <body>..</body>tags

<div id="loading">
Loading content, please wait..
<img src="loading.gif" alt="loading.." />
</div>

Make sure you add this code just below the starting <body> tag so it should be downloaded first.

CSS Code for loading DIV

#loading {
    position:absolute;
    width:300px;
    top:0px;
    left:50%;
    margin-left:-150px;
    text-align:center;
    padding:7px 0 0 0;
    font:bold 11px Arial, Helvetica, sans-serif;
}

Use your imagination and create something nice & unique.

View Demo | Download Source Code

Your comment, suggestion and feedback is highly appreciated.

There’s more to come to stay tuned…

And god says, “Ask me the question, son” and you go, “How come these big guys create awesome wallpapers, cool designs and other awesome stuff. And I can’t? What is it they do?”

Well, If you have. You’re not alone. Cuz years back, even I asked ‘God’ the same question. Though he dint seem to answer and a friend of mine introduced me to a magic world of tutorials. And since then life’s been awesome! I bookmarked trillions of sites. And read them one by one. And believe it or not I still do.

Today, my fellow designers, um gonna share with you some of my own favorite websites for tutorials and stuff. And I hope you don’t ask God the same question again and again, cuz I figure out that he’s probably tired or busy designing the real world.

But anyway, here they are… Websites that you MUST take a look at…

Lynda.com

PSDTuts.com

PSDFan.com

LayersMagazine.com

PSLover.com

abduzeedo.com

gomediazine.com

PhotoshopRoadmap.com

DeviantArt.com

SmashingMagazine.com

ComputerArts.co.uk

PlanetPhotoshop.com

PhotoshopTutorials.ws

Tutorial9.net

PSHero.com

Voidix.com

TeamPhotoshop.com

Luxa.org

I hope you like the collection!! Share It, Digg It, Stumble It.