Pure CSS Animated Progress Bar

Here's a simple demonstration of how you can create animated
progress bar using pure css. The trick is very simple. We need 3
elements, one container and 2 nested elements.

Take a look at the demo
| Download zip file

The Concept

We'll put a cool background image in the container and define fixed
width and height. First child (SPAN) will act as a progress bar. We'll
absolutely position second child (EM) above the progress bar and shift
it to the left to a desired value. EM has the same background as the
container so it gives an effect of progress bar stopping at certain
percentage.

Markup

To keep it as meaningful as possible I used definition list (DL) to
list for several values. For single progress bar you can use any
element you want. I love paragraphs so I used P in my example.

<dd><br />	<span><em style="left:100px">50%</em></span><br /></dd>

I decided to use inline styles for left EM placement. It is more convenient to write both values at the same place at once.

Animation

How is it done? Using animated gif of course. Remember those? SPAN
has a 200px wide background gif that animates from "zero" to 200px. No
matter what percentage we use it goes all the way and stops. Effect of
stopping at certain percentage is done with EM as I mentioned earlier.

EM placement

In my example I use 200 pixels wide progress bar. EM element is also
200px wide. So each percentage is 2px wide. If we want to accurately
shift the EM we need to multiply percentages with 2.

i.e. 50% will mean 100px left offset, 24% will mean 48px offset, 75% - 150px etc. You get the picture. :)

by: Alen Grakalic

Learn Icon Designing: The best of tutorials and articles

Maybe you think that designing an Icon is very difficult and just some professionals can do it.

But those professionals are here to teach you how to design your own
simple icons just by reading some of the best tutorials have been
collected here.

I’ve placed these tutorials into 3 categories; Articles, Photoshop, and illustrator Tutorials.

Articles

1- 10 Mistakes in Icon Design - Denis Kortunov explains the mosty commonly observed mistakes in icon design

2- 7 Principles of Effective Icon Design - Some guidelines and principles before approaching icon design

3- Icon Design: Bitmap vs Vector - a good article about differences between bitmap and vector file formats

4- Drawing an Icon: Sketches and Metaphors - Process of sketching of an icon

5- Icon Design Explained (Quickly) - quick slides for teaching some fundamentals

6- How to Design Mini Icons - the technique of using Photoshop pens tool for creating mini pixel icons.

7- The Making of an Icon - a great article on process of designing an icon

Photoshop Tutorials

8- Create a Shiny Lock Icon Design

9- Creating a Cool Yellow Helmet Icon

10- Handy Web 2.0 Icons In Photoshop

11- Illustrate a Traffic Cone Icon in Photoshop

12- Making digital watch icon

13- Pyramid Icon Design

14- Create a Jaguar Style Folder Icon

15- Creating an XP Style Monitor Icon

16- Create a High-Gloss Graduation Hat Icon Design

17- Computer icon

18- Draw magnifying glass

19- Clock Icon

20- Creating a marker with Windows XP look

21- Make an Icon for Contacts

22- Stylish Search Icon

23- Vista firewall Icon

24- Vista Folder Icon

Illustrator Tutorials

25- How to Create a Vector iMac Graphic in Illustrator

26- Illustrate a Fun Magnify Zoom Icon

27- How to Create a Vector Safari Compass in Illustrator

29- Create a Detailed Camera with Photo Icon

30- Creating an icon “about company” in Illustrator

Creating CSS Layouts: The Best Tutorials on Converting PSD to XHTML

First of all, I should thank delicious, StumbleUpon, Dzone, Design
float and other major social bookmarking websites’ users for featuring
my previous posts. I received a lot of traffic after a few days after
starting this blog.

In this post, I’m going to show you the most practical tutorials on
coding a template using CSS and XHTML. Making a template has two steps.
The first step is Designing the template components and the second step
is Coding them into a valid XHTML page.

For learning designing a template from scratch in Photoshop, I suggest checking this post by dzineblog. But how to convert the designed PSD file to an XHTML document is the reason I wrote this post.

The best Tutorials on Converting PSD to XHTML

1- CSS Template Tutorials - Setting Up
- This is the part one of the complete tutorials. These series of
tutorials will teach you how to design a template in Photoshop, slice
it and convert it to a CSS layout.

Other Parts:

1-1- Step 2- Coding the basics

1-2- Step 3- Slicing and Coding the Header

1-3- Step 4- CSS Horizontal Navigation

1-4- Step 5- Floating the columns

1-5- Step 6- Coding the content

1-6- Step 7- Right Column Navigation

1-7- Step 8- Finishing Off

2- From PSD to CSS/HTML in Easy Steps - Part 1
- a 4 part series tutorial on how to take a PSD file and convert it
into a fully CSS based html file. The part 2 is available at the moment.

2-1- From PSD to CSS/HTML in Easy Steps - Part 2

2-2- From PSD to CSS/HTML in Easy Steps - Part 3 [NEW!]

3- Site in an hour - Making Simple Work of Complex CSS Layouts: In this tutorial, you will be creating:

• A flexible layout, one which is happy to contort to the requirements of its contents and surroundings
• Decent browser support (…or support for decent browsers, at least!)
• Graceful degradation in legacy browsers
• Something that will make the bosses and marketing types happy while
  still allowing even access to all customers — current and potential

4- Slice and code a layout tutorial
- “In this css / xhtml tutorial I’ll show you how to slice a design in
Photoshop, and how to code it from scratch in CSS and xHTML.”

5- Advanced CSS Layouts: Step by Step - a step by step tutorial on Creating

a 3 column CSS layout.

6- Slice a Template and Code it Using CSS - A very well written tutorial on slicing a PSD file and converting it into a CSS layout

7- Converting Photoshop Web Template File To HTML/XHTML/CSS Web Page File Video Tutorial

“In these videos tutorial, you will learn how to convert photoshop web template file in .PSD to HTML file and Css file”

8- CSS Template Layout - part 1 of 3 - A three-part article on creating a pure CSS web page

8-1- CSS Template Layout - part 2 of 3

8-2- CSS Template Layout - part 3 of 3

9- Designing a CSS based template

“This is the start of a step-by-step based tutorial about how to create
a CSS based template page. This will be a tutorial consisting of
several parts: part 1 covers the creation of the navigation buttons in
Photoshop CS*, the 2nd part will be the creation of the background,
next on the list is the header and layout of the page and finally the
implementation in CSS and XHTML.”

9-1- Designing a CSS based template - part II

9-2- Designing a CSS based template - part III

10- Creating CSS Layouts In Dreamweaver, Part 1 - 3-part video series tutorial

10-1- Creating CSS Layouts In Dreamweaver, Part 2

10-3- Creating CSS Layouts In Dreamweaver, Part 3

11- From PSD to HTML, Building a Set of Website Designs Step by Step

“Today I’m going to take you through my entire process of getting
from Photoshop to completed HTML. We’re going to build out a set of 4
PSD mockups of a website that eventually will become a WordPress theme.
It’s a massive tutorial, so if you’re going to follow through to the
end, make sure you have a few hours to spare!”

12- Creating a CSS layout from scratch - This guide will attempt to take you step by step, through the process of creating a fully functioning CSS layout

13- Coding Your 1st PSD Tutorial - Learn how to code a car sales web layout into a working website

14- Breaking Out of the Box With CSS Layouts - A grate article by sitepoint on creating beautiful grid based CSS layouts

15- Page Layout from HtmlDog - a beginner guide to float and absolute positioning CSS Layouts

16- 3 Column All CSS Layout With Fluid Center and Two Columns - This tutorial teaches you how to create a 3 column layout with a fluid center and two fixed width sidebars.

17- Liquid CSS Layouts - Design Alternative to Table Based Websites - How to transform fixed table layouts to liquid CSS based layouts

18- Rock-solid CSS Layouts
- This chapter is excerpted from SitePoint’s HTML Utopia: Designing
Without Tables Using CSS, Second Edition, which provides a complete
introduction to CSS and shows you how to build rock-solid CSS-based web
sites from scratch

19- Building a page template in CSS - A quick step-by-step demonstration of how the Web Essentials template was built using CSS

20- Two column layout using CSS and divider image
- This tutorial explains how to design two column CSS layout with a
line dividing left column from the right going through the whole length
of the page, regardless of the length of the columns.

Corners Vector Set

Title : Corners Vector Set
File : 56 AI | 6.41 MB

Download : Corners Vector Set

Shutterstock Banners Vector

Title : Shutterstock Banners Vector
File : EPS | 923 KB

Download : Shutterstock Banners Vector

16 Sites for Web Design Inspiration

This is a list of places that readers have recommended. Some I
haven’t heard of, and several I’ve added to my own favorites list.

Without further ado – I present 16 sites that you visit for design inspiration.

1. The Best Designs

Suggested by: chandan (Digg profile)

I’ve written about The Best Designs before,
so I didn’t list it down this time around. For those unfamiliar with
the site, The Best Designs is a wonderful spot to view high-quality
XHTML and Flash designs. They tag each design with relevant keywords
(i.e. - Bold, Colorful, CSS) so you can narrow down your search to the
particular look you’re attracted in.

2. CSS Remix

Suggested by: chandan (Digg profile)

CSS Remix is (according to their tag line): "A Fresh Blend
of the Best-Designed Web 2.0 Sites", though there are some non-Web 2.0
themed sites included as well. With over 14,000 RSS readers, CSS Remix
is definitely a prime destination for designers looking to check out
the work of other designers.

3. CSS Mania

Suggested by: Pat of Atrick Design

CSS Mania is a regularly updated CSS-based web design
gallery that includes many design genres. At present, it has over
10,000+ websites in its collection. Though the reader who suggested CSS
Mania frequents this site, he warns (and I agree): "They aren’t as particular about the quality of the designs they present, but there are definitely some gems in there."

4. screenfluent

Suggested by: Damien

screenfluent is a site that features some very nice
designs. What’s great about screenfluent is that it gives you a preview
of the site by opening a modal window (more commonly known as a
"lightbox"). There are over 7,000 featured designs so there’s not a
lack of content to view.

5. Screenalicio.us

Suggested by: Sachleen Sandhu of tehkubix blog

Screenalicio.us has over 9,800 designs for you to see. The
users have the capability of rating each design based on a 5-star
rating system and the ability to give feedback for each entry. You can
sort the designs based on ratings and time submitted.

6. Open Source Web Design

Suggested by: Sachleen Sandhu of tehkubix blog

Open Source Web Design is a community where users upload
designs to share to the public. Downloading an OSWD design is free of
charge. You can either browse their gallery of designs or download them
to study.

7. One Page Love

Suggested by: adelle of Fuel Your Creativity

One Page Love is a niche web design showcase gallery that
features beautiful, creative one page websites and applications. Some
categories include products, portfolios, temp pages, and events.

8. FullSingle

Suggested by: adelle of Fuel Your Creativity

FullSingle is another site that displays single-page
websites. The latest gallery entries are featured at the top of each
page with a brief description of what the page is about.

9. One Page Folios

Suggested by: adelle of Fuel Your Creativity

If the above two weren’t niched enough for you, here’s one with even
greater specificity. It’s an aggregate of single page portfolio
websites of designers and developers. There’s over 800 portfolios
currently listed on One Page Folios, and each entry is reviewed before being published.

10. We Love WP

Suggested by: adelle of Fuel Your Creativity

We Love WP shares top-notch WordPress powered sites. They also showcase free themes that designers have modified into something unique.

11. CSS Divine

Suggested by: Jess

CSS Divine is a CSS-based design aggregate website. You can
do a color search by clicking on the color palette at the side bar, and
it’ll narrow down the gallery to themes tagged by that particular
color. There are plenty of categories including Art, Business, Clean,
and Portfolio.

12. Design Snack

Suggested by: Justin Scheetz of Design Snack

Design Snack, according to their tagline, is "The
designer’s showcase that you control". Design Snack features XHTML and
Flash designs. You can customize the way the designs are displayed,
vote on individual entries, and browse by color.

13. SF art & design portal

Suggested by: cindyf

SF art & design portal is the work of the Amsterdam-based web design agency, Strangefruit.nl webdesign.
SF art & design portal features hand-picked, innovative, creative
art and design sites. You can browse by category, style, color, and
even country.

14. Design Shack

Suggested by: stefan alexandru of Stefan Alexandru

Design Shack is an exclusive repository of first-class
CSS-based web designs. They look for designs that "stand out from the
crowd". They also have a Tutorials section that features web design lessons.

15. CSSloaf

Suggested by: CSS Loaf of CSSloaf

CSSloaf brings together designs from 35 other showcases so
that you don’t have to go all over the place to see the latest designs.
They feature large screenshots so that each design is visible; no need
to strain your eyes on tiny thumbnails.

16. eduStyle

Suggested by: Luke Robinson (Twitter profile)

eduStyle is dedicated to the design of higher education
websites for higher education professionals. It’s intended to showcase
the best works of higher education designers to their peers.

Thank you for your contributions and suggestions,
as well as giving me a few links to add to my collection. If your
favorite sites aren’t on here, make sure to discuss it in the comments
section and maybe we’ll have a follow up to this one.

Source: sixrevisions