Posted on June 26, 2009 by Atif
Filed Under Web Design
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.
| PageRank |
|
7 |
| Alexa Rank |
|
11845 |
| PageRank |
|
6 |
| Alexa Rank |
|
18923 |
| PageRank |
|
5 |
| Alexa Rank |
|
22268 |
| PageRank |
|
7 |
| Alexa Rank |
|
33579 |
| PageRank |
|
5 |
| Alexa Rank |
|
32845 |
| PageRank |
|
7 |
| Alexa Rank |
|
25573 |
| PageRank |
|
5 |
| Alexa Rank |
|
34132 |
| PageRank |
|
5 |
| Alexa Rank |
|
53911 |
| PageRank |
|
5 |
| Alexa Rank |
|
76039 |
| PageRank |
|
- |
| Alexa Rank |
|
50560 |
| PageRank |
|
2 |
| Alexa Rank |
|
25575 |
| PageRank |
|
5 |
| Alexa Rank |
|
64802 |
| PageRank |
|
6 |
| Alexa Rank |
|
47505 |
| PageRank |
|
6 |
| Alexa Rank |
|
35066 |
| PageRank |
|
0 |
| Alexa Rank |
|
39172 |
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
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
Posted on April 28, 2009 by Atif
Filed Under Web Design
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
Posted on April 14, 2009 by Atif
Filed Under Web Design
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 <HEAD></HEAD> 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
Posted on March 11, 2009 by Atif
Filed Under Web Design
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
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
IconDrawer