MyGeekPal » Web Design

15 CSS Galleries to look for Inspiration

Atif — Fri, 26 Jun 2009 10:27:03 +0000

When it comes to designing websites, some works for inpiration is what everyone searches for. Though generally we dont steal the designs but still asÂ a web designer everyone needs some websites for inspiration. If inspiration is not one needs then there is another bonus. Wouldn’t you like to get your website shown off on these galleries and also get a cool link back from there home page? Either may be the case I have listed out 15 cool CSS Galleries with great traffic and decorous Pagerank.

CSS Mania

PageRank		7
Alexa Rank		11845

CSS Drive

PageRank		6
Alexa Rank		18923

Creattica

PageRank		5
Alexa Rank		22268

CSS Vault

PageRank		7
Alexa Rank		33579

CSS Beauty

PageRank		5
Alexa Rank		32845

CSS Remix

PageRank		7
Alexa Rank		25573

Web Creme

PageRank		5
Alexa Rank		34132

CSS Heaven

PageRank		5
Alexa Rank		53911

Screenalicious

PageRank		5
Alexa Rank		76039

CSS Leak

PageRank		-
Alexa Rank		50560

Crazy Leaf Design

PageRank		2
Alexa Rank		25575

CSS Website

PageRank		5
Alexa Rank		64802

Divine CSS

PageRank		6
Alexa Rank		47505

CSS Based

PageRank		6
Alexa Rank		35066

Unmatched Style

PageRank		0
Alexa Rank		39172

Ultimate List of 75+ Free Icons Resources

Atif — Fri, 29 May 2009 17:17:39 +0000

Whether you design an interface for your desktop application or you create a website layout, icons play one of the the most essential part of design. So I sat down the past hour to collect some resources for free icons. If I had sat down collected for one more hour I would have doubled this list, but I think its enough for today to bring you 75+ websites that includes galleries, icon packs and other collections of icons. I mean FREE ICONS !!

Galleries

Icon Archive
Iconarchive is one of the most popular icon directory and probably the oldest one indexing over 23000 icons from various designers and that fit into various categories. The sizes can vary from 32 pixels and up to 256 pixels.
Iconspedia
Iconspedia is a great alternative to iconarchive. If I can’t find anythng over iconarchive I head straight to iconspedia
Iconstick
Freeiconsweb
Icon buffet
Freeiconspedia
Iconpot
Deviant Art
Freeicons.dk
Best free icons
Vistaicons
IconsFree
IconDock
Free Icons Web
Free Icons.co.uk
Entity.cc
DryIcons
http://www.nesoft.org/free_icon_gallery.htm
Pixel Girl
Icon Bulk
http://www.iheartny.com/icons.html
http://www.freeiconsweb.com/stock_icons.html
Web Icon Gallery

Search Engines

If you are in a haste looking for some icon quickly then I bet these exlusive icon search engines may help you get search for any icon quickly over the web

Icon Sets

Resources from other websites/blogs

10 Lovely Headers to See and Get Inspired

Atif — Tue, 28 Apr 2009 18:45:54 +0000

When it comes to design a new website header, much creativity is needed. A good website header can decrease bouncing rate of a website at a great extent. Here are a few website headers that I have collected. Each header design is good in its own way and has its quality and visual appeal, all rights are reserved with their respective author, the images shown here are just for inspirational purpose. There are

header #1

header #2

header #3

header #4

header #5

header #6

header #7

header #8

header #9

header #10

The Simplest Way to Create a Cross Browser Compatiable Website

Atif — Tue, 14 Apr 2009 07:39:39 +0000

Making your website cross browser compatible is not easy isn’t it ? Of course all the hard work can make it possible but many designers give up half way the cross browser compatibility for a Valid Markup. (Sometimes I used to do it too until I found this thing)

There exists some layouts where you have to either compromise either with the cross browser compatibility or with the Valid Markup, like using CSS or HTML hacks can no doubt make your layout cross browser compatible but you will lose the Green Valid XHTML badge. But in this scenario we are going to achieve both the goals.

One way of doing this will be creating different stylesheets for each browser and selecting the one required for the browser dynamically by finding out User Agent using Javascript. This is a good one if your layout renders very different in each browser. But if you just need to render some element differently in each browser then this thing is for you.

Thanks to Rafael Lima there is a small javascript snippet called CSS Browser Selector, which empowers CSS Selectors, if you know CSS you already know selectors. This script gives you the ability to write browser specific CSS Code. Now you don’t need to attach a different stylesheet for each browser. Just use the proper selector for each browser and you get what you need. This is very simple to use. You need to attach a javascript to your web page. You can download the script from here Just save it on your hard disk and attach it to your HTML page in between the tags.

Not just the browsers but this scripts support CSS Selectors based on Operating System and also based on if the javascript is enabled or not.

Styling the elements is very simple, all you need to do is add a browser specific css selector to style it as the way you want. See the example below

.ie7 .example {
  background-color: orange
}
.ff .example {
  background-color: gray
}
.win.ff .example {
  background-color: red
}
.linux.ff .example {
  background-color: pink
}
.opera .example {
  background-color: green
}
.chrome .example {
  background-color: blue
}
.webkit .example {
  background-color: black
}
.example {
  width: 100px;
  height: 100px;
}

The element with class example will have different color in each browser. For a whole list of tags supported you can see here

Thanks to Christian Felder for the image

CSS Quick Tip: Using Faux Column

Atif — Wed, 11 Mar 2009 14:51:52 +0000

The one of the most common questions that arises to web designers is how to extend the background color of a column to extend all the way down.

The concept is very simple. But first of all let me explain you the situation here. Consider the image below.

You want both the columns to stretch down till the end equally unlike the above examples. The bad part in CSS is that the elements stretch only up to the size they require. For example a 600px image wrapped inside a div will make the div stretch only up to 600px

The Tip : Using Faux Columns

Well the secret of making those 2 columbns stretch down is simply mere. What we do is create a container wrapping both the divs with a backrgound image and repeating it vertically. Simple yet effective, isn’t it ?

Here is our image that we will be using in the background

The image, though some pixels tall, but when placed as a background and tiled vertically will create 2 columns. The above image will be the background on the main wrapper and the CSS for the element will be

background: #ccc url(../images/faux-column.gif) repeat-y 50% 0;

The 50% 0 refers to positioning of the background image, which in our case 50% means centering the image horizontally.

Conclusion

The concept is simple but many people wont be knowing it. If you liked it please do comment.

You might considerÂ viewing the example here

5 Useful CheatSheets for Web Designers

Atif — Sun, 08 Mar 2009 17:07:25 +0000

Cheatsheet – A cheat sheet or crib sheet is a concise set of notes used for quick reference.

Cheatsheets are great to save you time. These are 5 awesome ones that I have got.

1. Adobe Photoshop CS2 Keyboard ShortCuts

2. Adobe Photoshop CS3 Keyboard Shortcuts

3. CSS 2.0 Cheatsheet for Web Designers

4. XHTML elements and attributes

5. Jquery 1.3 Cheatsheet