CSS – LGR

Fade Out Bottom

I was browsing around today and came across this neat effect that makes the bottom look like it fades out to the background colour. I don’t know if I would ever use something like this but I like the effect. It uses a PNG image with an alpha layer positioned in a DIV tag at the bottom of the screen with a high Z index. You would have to do some trickery to make Internet Explorer 6 play nice with it since Internet Explorer 6 does not render alpha layers in PNG images properly.

Check out the demo here. You can also download the files to play with yourself.

Spiffy Corners

It seems like I am always looking for a new way of creating rounded corners for designs. I usually just take the easy way out and use images. In my search this time around I came across a website called Spiffy Corners. Spiffy Corners is a generator that will create the html and css needed to create anti-aliased corners. The best thing is it does it without using images or javascript.

The generator is easy to use, and it offers the ability to create 3 5 or 9 pixel corners. I was using it with Firefox and I could not select the 3 or 9 pixel corner options. It appears that the other options are not available yet. The 5 pixel corner is nice and the html and css appear to work well. I did not test it extensively, only in Internet Explorer 7 and Firefox, so don’t quote me that it works in all browsers.

The license for Spiffy Corners states:

May be used for personal and business use, but may never be sold or used in a product that is not free without my consent.

You should be fine if you want to use the code in your own website. If you charged for access to your website you might have a problem, but I could be wrong about that.

Overall Spiffy Corners is a nice html/css generator for corners. It would be nice if the options for different sized corners worked, but perhaps that will come in the future. As for the project I was working on that needed rounded corners, I ended up using images in the end. Perhaps on my next project.

CSS List Menu Resources

I like to make my CSS menus from scratch, but if you want to save yourself some time here are a couple of resources you should know about.

First, is the classic Listamatic and Listamatic 2. Those two resources alone will give you enough to start building all types of menus. There is sample code for simple vertical and horizontal menus, nested list menus, nested popup list menus and the list is endless. With so many choices it can be hard to decide which CSS list menu you should choose to tweak for your website.

If you want to do as little tweaking as possible, I recently came across CSS Menu Maker. While there are not a ton of choices for menus, with a couple of clicks you can have everything you need, including images, to add to your website. Fill in the form and you will be presented with a download link to download the CSS, HTML and images to use on your website. It does not get much easier than that.

Now you have no excuse not to use CSS and lists for your menus.

Webmaster Time Savers – External Style Sheet

Creating and maintaining a website or blog can be made easier by using a few simple time savers. An external style sheet is one of the easiest time savers that all websites and blogs should take advantage of.

Without going into a long history of style sheets, it is enough to know that style sheets give webmasters a way of controlling layout and presentation across all the pages in a website with only one file. This is incredibly useful when you have hundreds, thousands, millions of pages to manage. Even small websites of only five to ten pages can take advantage of the benefits of an external style sheet.

The benefits of using an external style sheet include:

Content and Design are Separated
By separating the content and design your markup can by clean. No more font tags, and other unnecessary tags. This also means using proper markup to describe your content. Using proper headings, paragraphs, lists and other elements.
Simplify Maintenance
Want to make a small change to the headings on your website. Edit your external style sheet and all your pages will reflect the change.
Better Search Engine Ranking
It has been my experience that search engines like websites that use styles sheets more than websites that are still using old table based layout. Switching to a style sheet layout might not rocket you to the top of the search engine results pages but it can help to improve your overall rankings. A website using an external style sheet has less code for the search engine spider to go through so it is more likely to index your content faster.
Bandwidth
By moving style and layout information into an external style sheet you save on overall bandwidth for your site. Web browsers will cache the style sheet and use it on all subsequent requests to your website. Your web pages will also be smaller to download from a table based layout saving you even move bandwidth. A great example can be found at A List Apart where they discuss the bandwidth savings of Slashdot moving to a css based layout. They estimated a 14gb of bandwidth savings a day!
Website Speed
Overall your website will be faster by using style sheets.

It is amazing how many sites don’t take advantage of external style sheets. Just looking at some notable websites today I discovered that Amazon.com uses an inline style sheet. Google.com with their minimal design, uses an inline style sheet along with font tags and a table layout! Even Yahoo.com, the number one website on the Internet according to Alexa uses an inline style sheet. Imagine how much these companies could save by moving the inline style sheet to an external style sheet that can be cached.

How To Link an External Style Sheet

You can link to an external style sheet in two ways. Both codes belong in the head section of your web page.

Using a link statement: <link rel=stylesheet href="style.css" type="text/css" media=screen>
Notice the media element in the tag. If you are just worried about how the page will be display on a computer monitor use screen. If you don’t want to specify different style sheets for other medium such as print or tv, you can use all.

You can also import a style sheet using a command similar to the following:
<STYLE TYPE="text/css" MEDIA="screen">
<!–
@import url(http://www.yourwebsite.com/style.css);
–>
</STYLE>

or without using the complete url:

Overall using an external style sheet can save you an enormous amount of time with your website or blog and the benefits far out number any downsides that you might encounter. If your website or blog is not using and external style sheet consider switching to one.