WM Weblog » Web Design

Use Any Font Online on Web Sites

admin — Wed, 26 May 2010 23:27:58 +0000

It can be really annoying knowing that all fonts you apply on a web site with css has to be on the local computer of every visitor for them not to see another font instead of the one you prefer.

Some fonts are even so rare that you are certain that most visitors will not have that font on their computer. (Please note that some fonts does not allow embedding on web sites . You can read more about this topic on the generator’s site)

I know this has bothered me before and luckily I’ve found a great way to do this without problems. With the cufon generator you can work-around this problem and add mostly any font as embedded to any web site.

CSS Drop Shadow for Text

admin — Mon, 30 Nov 2009 07:10:30 +0000

Drop shadow is a pretty cool feature you can add to any text with CSS. It is supported by Opera, Firefox, Chrome and Safari but unfortunately not Internet Explorer (can’t say I got surprised) Since IE does not support it yet and a rough 50% of internet surfers are using the browser you should be careful and not use alot of drop shadow effects for your website. Simply adding some shadow effects as a finishing touch for headings and not much more is a good way to go with it. At least do not make any functionality dependant on the effect.

Here’s how to add the Drop Shadow Effect to Text with CSS:

p.text-shadow {text-shadow:red 2px 2px 0px}

This is how the text inside a paragraph with the class text-shadow looks like…

Explanation:

The property has 4 options. First you must specify what color you want the shadow to be, then how far right it should be aligned, then how far down it should be aligned and finally how much of a blur effect you want it to display.

Find Matching Color Schemes

admin — Mon, 30 Nov 2009 02:01:44 +0000

Finding the right combination of colors is always a big task. Luckily Adobe has released a solution to this problem with a website which has a huge community and great software for creating color combinations. With the Adobe kuler application you can select a base color that you want to work with and Kuler will automatically find matching colors based on your requirements. If you are in a hurry and don’t got the time to create anything anyhow you can browse palettes that other users have created and shared. Palettes can be commented and rated by users. Check it out here.

Free Icons – Top 5 places to get them!

admin — Wed, 09 Sep 2009 18:55:30 +0000

Looking for high quality free icons to use for your web design? Look no further!

Top 5 places to get Free Icons

DryIcons Free Icon Section
Updated about once a week with new free icons.

FamFamFam Icon Section
3 smooth icon sets for most uses. I’ve used these for the ZenPro wordpress theme.

Smashing Magazine’s Collection
35 free icon sets. Mostly consisting of neat big and glossy icons.

IconsPedia Collection
Many free icon sets totaling 2379 free icons!

WebToolKit4me Icon Section
Regularly updated with icons of which most a free.

4 Great Free Web Design Tools

admin — Fri, 14 Aug 2009 16:55:09 +0000

I was looking around for some web design tools to help me create some nice backgrounds for our free WordPress Theme, EasyTheme, when I stumbled across a great free and very easy to use collection of web design tools. These tools will enable you to easily design high quality web 2.0 striped backgrounds, image reflections, glossy navigation tabs and tartan patterns online without having to know anyhting about CSS.

Striped Repeating Background Generator

With this tool you can very easily create nice web 2.0 striped backgrounds, share them online or download premade backgrounds. It’s all free.

Stripe Generator

Image Reflections Generator

Easily create fancy image reflections online with this tool. You can even upload images directly to use for this tool without having to register! (max 200kb per image)

Reflection Maker

CSS Navigation Tabs Generator

Create CSS navigation tabs easy and fast without having to know any CSS. Lots of options.

Tabs Generator

Tartan Repeating Background Generator

Easily create tartan repeating tartan design online with this tool. Of course free also!

Tartan Maker

I hope these online web design tools will provide as useful to you as to me!