CSS and Web Design Articles
5 Essential Tools For Web Designers
Posted by admin, 2 Years, 4 Months, 2 Weeks, 1 Day, 16 Hours, 2 Minutes ago
There's plenty of 'Top 50 Web Tools' and 'Top 100 Web Tools' around, but who in their right mind wants 50 tools to remember when your trying to do your work!?
So, here is a list of the 5 (yes... 5) tools which I think are essential for web design.
1. Firefox Web Developer Toolbar Extension
The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock, Mozilla and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.
The functions I use the most are:
* View CSS/Javascript > quick way of viewing the CSS and Javascript for a webpage (for inspirational purposes only ofcourse...!)
* Validated CSS?HTML > quick link to validate your page in the w3c validator pages.
* View Speed Report > evaluates your page to determine how slow it is.. can be a bit depressing sometimes.
* Resize to 800x600 and 1024x768 > resizes your browser to smaller resolutions to see if your design works in lower resolution environments.
2. Firefox ColorZilla Extension
With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page.
This is great if you see a really nice colour combo during your Internet travels that you would like to use for inspiration.
3. CSS Design Galleries
If I am feeling a bit short on inspiration, I will always spend an hour or so looking through the many CSS design galleries. These sites showcase the latest well designed sites on the web and can be a great source of emerging trends and techniques. If you would like a list of some of the better gallery sites, look at our Resources page.
4. BrowserShots
Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server.
This is very useful and you should use this periodically during your design progress. There's nothing worse than finishing a website only to realize you have 2 days worth of CSS hacks ahead of you to fix the design in IE6.
5. Get DaFont's
DaFont.com is my personal favourite font site, although there are many many out there. Typography can truly make or break a site. It can also help convey the message or theme you are trying to achieve. My personal tip - don't be stingy, if you like a font purchase it (your not the only one who knows how to find almost any font for free using google!). US$20 is not going to burn a whole in your pocket so do the right thing.
Gallery of 25 Stylish Login Bars
Posted by admin, 2 Years, 4 Months, 2 Weeks, 5 Days, 21 Hours, 23 Minutes ago
Today we will be looking at 25 of the most stylish login bars. To qualify for this list, the login bar must be visible on the homepage of a website. Why? Because it is much harder to style a login bar to fit into the homepage design!
As you can imagine, login bars tend to be either horizontally laid out, or vertically. And the common elements are 2 input fields, a search button and sometimes a 'remember me' function.
So lets get to it, here is the list.
Horizontal
Mint
MeetMoi
Virb
ColourLovers
Fuser
DropSend
ZooKoda
Nook
Boompa
Vertical/Box
Jobster
Browzmi
Rememble
Genoom
TripUp
WannaGo
iLike
Traineo
Wisdm
RetroLand
Lypp
ZapLife
City Therapy
ActionThis
Pownce
Moonk
Phew, thats a long list. I hope this helps provide some inspiration for your next web project.
Have you got a suggestion for a stylish login bar? Leave a comment!
35 website footer designs, trends and styles
Posted by admin, 2 Years, 4 Months, 2 Weeks, 6 Days, 15 Hours, 36 Minutes ago
Thuiven has blogged about 35 of the latest web trends for... footers! This is a great read if you are looking for some inspiration for your next web project.
Footers certainly have come a long way!
Click here for the full article
Who's Ya (AJAX) Daddy?
Posted by admin, 2 Years, 4 Months, 2 Weeks, 6 Days, 15 Hours, 46 Minutes ago
AjaxDaddy is a large collection of nifty web 2.0 demos.
The showcase a heap of links to ajax techniques from around the web. Some of the categories are:
- AutoComplete
- Accordian
- Calendar
- Charts
- Chat
- Ratings
- Edit-in-place
- Menus
- Tabs
- Tooltips
- Slideshows
Definitely worth a visit if you plan to ajaxify your latest website.
Generate Your Own Web 2.0 Badges
Posted by admin, 2 Years, 4 Months, 2 Weeks, 6 Days, 16 Hours, 3 Minutes ago
Web20Badges is a site which lets you generate your very own web 2.0 badge - easily and quickly. There are several styles to choose from, and you are able to customize the colour and text.
They are probably one of the most popular trend in Web 2.0 time. It's most over-used trendy little design technique in our days, they immediately attract visitor's attention. Web badges have various round or square corners and eye-catchy colours.
Badges can be used to display a big 'Beta' message on your website or emphasize a price or a promotion. No web 2.0 site is complete without one.
So, what are you waiting for? Start making your own badges now!
