Making the most of CSS

December 9, 2004 on 6:06 pm | In CSS, General, Random Feature Sites, Web Design | 1 Comment

I’m always on the lookout for new ways to tweak CSS for design purposes. The more you can rely on CSS to drive layout, versus images, tables, etc. the faster your site is going to load and the more you’ll distinguish your site from others.

Mandarin Design is one such site that is pushing the CSS envelope. An exploration of their site reveals a whole shebang of excellent tips, tricks, design ideas and style guidelines. I haven’t come close to checking everything out, but here are a couple of notable articles:

Continue reading Making the most of CSS…

XHTML/CSS layout generation

October 21, 2004 on 2:23 am | In CSS, General | No Comments

CSS on the fly at this site. You can try various layouts via drop down and radio buttons and the css is generated for you.

css Zen Garden: a comic twist

April 30, 2004 on 1:12 am | In CSS | No Comments

css Zen Garden: A Comic Twist is to date one of the coolest implementations of the Zen Garden project. The project is simple: take one html page and separate the design from the content. There are thus hundreds and hundreds of designs for this one web page, all enacted simply by switching up the stylesheet.

Nice Color Change via clicks

April 25, 2004 on 7:03 pm | In CSS, JavaScript, Random Feature Sites | No Comments

See the Color Change in the top right corner. I really like the simplicity of this.

It is just lines like this:
<span style=”background: #eeeeee; border: 2px solid #006699″>
<a href=”#” onclick=”setActiveStyleSheet(‘default’)” title=”default” style=”text-decoration: none;”>&nbsp;&nbsp;&nbsp;</a>
</span>

and then this javascript kicks in to manage the change: http://www.deanesmay.com/styleswitcher.js

CSS 101: Cascading Style Sheet Beginner’s Course

April 12, 2004 on 5:36 am | In CSS | No Comments

Excellent introductory css course called: CSS 101: Cascading Style Sheet Beginner’s Course. Ever notice that out of the millions of pages on the web you wind up at a handful over and over? This is one worth some time.

some sites just look good

April 12, 2004 on 5:32 am | In CSS | No Comments

We sometimes lament the fact that we just don’t seem to have that “magic” that makes a site look good and clean. We often wonder is it an inate talent? Is it something that can be learned? How do you get better at it? This site explains a redesign: Maki. I wonder what I can learn from studying her thought process? Colors inspired by nature, the look simple and clean …

Opaque or Transparent Backgrounds via CSS

March 22, 2004 on 10:23 am | In CSS | No Comments

Some of the cooler looking sites sometimes use transparent layers/div’s to achieve the look. One method to get a transparent background is to use a png image with partial tranparency (see a discussion of that here). Unfortunately, Internet Explorer doesn’t much like png’s unless you go a bit to make them work.

You can also make Semi-Transparent Backgrounds with CSS and they are supported on FireBird/FireFox/Mozilla/Netscape, Internet Explorer, and Konquerer/Safari. I don’t currently run Opera, but I understand they are not currently permitting it.

Color Shorthand RGB in CSS

March 20, 2004 on 3:31 pm | In CSS | No Comments

I have been working on understanding CSS (Cascading Style Sheets) better as they appear to be where it is at for good web design. I really enjoy looking around the Zen Garden Project and the Word Press CSS Contest. These are awesome examples of style separated from content.

One of the things that tended to confuse me was the use of three character colors in Cascading Style Sheets. What did #fff mean? Well it took a bit of digging, but I think I have it now. The math majors tell me that if you use a six character red, green, blue (or RGB as commonly referred to) color scheme, you need six characters to form 16,000,000 colors. Conversely if you limit yourself to a 256 color web-safe palette, you need only use three characters. So the CSS wizards decided you could avoid needless repetition by simply using the shortcut method.

In case there is any confusion, you simply give the first letter of each color pair (example f in a three character RGB color would become ff) is simply repeated. So it is #RRGGBB. Hex numbers are represented by the characters 0-9 and letters A-F, for a total of 16 characters. So long as you are satisfied with staying within the color cube, using the three character color codes in CSS will make for smaller file sizes and less typing.

New Tute!: The IE5 Box Model Hack and other solutions for fixing IE5/CSS layout problems

March 14, 2004 on 6:20 am | In CSS, News | No Comments

I have posted a new “tutorial” although it is really just an accumulations of findings I had in trying to solve the broken box model in Internet Explorer 5. This results in problems for css layout sites when viewed in IE5 unless some adjustment is made. In this article, The Box Model Hack and other solutions to fixing the IE5 problem with CSS layout: HTML FIX IT . COM, I attempt to cover the very basic of five ways I found to get around the problem. I hope it is helpful to you.

Simple CSS Mouseover Text Buttons

March 11, 2004 on 4:13 am | In CSS | No Comments

No JavaScript, no images, no tables! Simple clean Cascading Style Sheet solution to rollover text buttons. The idea and much of the coding for this one came from the notetab.com yahoo html group. It has been tested in current Internet Explorer/FireFox/Mozilla browsers with success.


Demonstration page showing simple text buttons with highlight on rollover.

The demo page validates as xhtml 1.0 strict and css valid.

Powered by WordPress with Pool theme design by Borja Fernandez.
Entries and comments feeds. Valid XHTML and CSS. ^Top^

Bad Behavior has blocked 510 access attempts in the last 7 days.