Web Fashion Colors

Coraly Orange and Aqua

Paint stores say that a coraly orange is the color of the year for 2005, while aqua or turqoise blue is the latest fashion runway color. We don't have a prediction for Web colors but it would probably include the color pink. Pink is hot. Daisy is pink.

Glidden Paints and Pantone.com has detailed color resources.

Tack-o-Rama

Tack-o-Rama is back with a new collection of free clip art. We found this one in the gals section.

Reality Check Please...

We have a serious question here. How many hours do you work each week?

The new job... Rob is in a new job that keeps him on the road most of the time. He averages 90 hours a week and that includes yesterday and yesternight for presentations in Las Vegas, this morning a 7:30 AM start for two presentations and that will run into the evening. We'll hook up in Palm Springs on Wednesday where I'll join him at his convention through the weekend (otherwise, I wouldn't get to see him). And after that we would both have to check the calendar to see what state he will be in next.

We live in an office. He works out of the house so we live in an office now. The phones ring all day, the fax is going while UPS, DHL, and FedEx are knocking on the door. The calls go well into the evening and if those lines are tied up they call our home phone.

Sunday Travel This a the company that said there would be no Sunday travel but the travel is as much on Sunday as it is on Tuesday. But neither of us know if this is the "real world". Have we just been lucky to have jobs that are 40-50 hours per week? He always travels, that is expected but how much is too much? Was he lucky just to find a job?

Your feedback is greatly appreciated.

Web Color Table with Opacity Applied

000000	330000	660000	990000	CC0000	FF0000
003300	333300	663300	993300	CC3300	FF3300
006600	336600	666600	996600	CC6600	FF6600
009900	339900	669900	999900	CC9900	FF9900
00CC00	33CC00	66CC00	99CC00	CCCC00	FFCC00
00FF00	33FF00	66FF00	99FF00	CCFF00	FFFF00
00FF33	33FF33	66FF33	99FF33	CCFF33	FFFF33
00FF66	33FF66	66FF66	99FF66	CCFF66	FFFF66
00FF99	33FF99	66FF99	99FF99	CCFF99	FFFF99
00FFCC	33FFCC	66FFCC	99FFCC	CCFFCC	FFFFCC
00FFFF	33FFFF	66FFFF	99FFFF	CCFFFF	FFFFFF
000000	003300	006600	009900	00CC00	00FF00
000033	003333	006633	009933	00CC33	00FF33
000066	003366	006666	009966	00CC66	00FF66
000099	003399	006699	009999	00CC99	00FF99
0000CC	0033CC	0066CC	0099CC	00CCCC	00FFCC
0000FF	0033FF	0066FF	0099FF	00CCFF	00FFFF
3300FF	3333FF	3366FF	3399FF	33CCFF	33FFFF
6600FF	6633FF	6666FF	6699FF	66CCFF	66FFFF
9900FF	9933FF	9966FF	9999FF	99CCFF	99FFFF
CC00FF	CC33FF	CC66FF	CC99FF	CCCCFF	CCFFFF
FF00FF	FF33FF	FF66FF	FF99FF	FFCCFF	FFFFFF
000000	000033	000066	000099	0000CC	0000FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
330000	330033	330066	330099	3300CC	3300FF
660000	660033	660066	660099	6600CC	6600FF
990000	990033	990066	990099	9900CC	9900FF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
333300	333333	333366	333399	3333CC	3333FF
666600	666633	666666	666699	6666CC	6666FF
999900	999933	999966	999999	9999CC	9999FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
FF0000	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF
000000	333333	666666	999999	CCCCCC	FFFFFF

Our style sheet looks like this.

How can we use this style code? For an image where we want to apply color or for text. Or for an entire page. Anything that can be put in a table can use this opacity style.

The code to type in your page looks like this.

It will look like this.

The cellpadding="0" and cellspacing="0" was changed to cellpadding="1" and cellspacing="0" so that the opacity works in Mozilla Firefox. This is not a deficiency in Mozilla, just an example that stopped working when the cellpadding and cellspacing were both set to "0".

We made a simple table with a background image. The table dimensions are the same as our black and white image.We used the background color #FF0000 with opacity applied to the <td> tag. The color table helps us see what the color will look like with opacity applied.

Transparent Box

Can you show me how to make a transparent box?
We need a background first. We'll use the lily. This should work like any other box with some opacity applied. Let's use a background color of white and a maroon border for testing.

Copy and paste this in your Blog or Web page.

It will look like this.

There's more about CSS Opacity in
Opacity Part 1: CSS Opacity in Mozilla and IE and
Opacity Part2:CSS Opacity Blending Effects.

Opacity Spottings Bryn posted the Imagine trick, Shirl has a transparent box, and Claude used the code to post a transparent image. Check 'em out. And here's another transparent box coming in from Diaphaneity.

Good News Day! Dave Fulmer, a recent graduate of RIT, landed a full-time job at Mellon Financial. Today is also Dave's birthday. Happy Day to you Dave!

Copy and paste this in your Blog or Web page.

It will look like this (image included).

We put the Opacity text Imagine over a black and white image. Any image will work. Any size.

Imagine

Rewriting Ovid has an excellent implementation of the Easy Image Rollover. Maybe it's the black background combined with the 75% opacity. It works the way it should, highlighting the image on the hover without removing all of the clarity from the original image.

Copy and paste it and it should look like this.

Punkclown built a Viewer for the Skyline Project that Stu started here and is continuing here. If you haven't posted your Skyline it's never too late.

Rieke's Blog layout is working now after getting technical help from Diane and others. Thanks to all who contributed.

Jen Martinez quotes Cassandra who says it well.

"Choosing leaders in a time like this as a matter of self-expression may be the biggest, and perhaps last, self-indulgence in a self-indulgent age. We are not choosing politicians for style or rhetoric. We are deciding who has what it takes to confront our enemies and deter nations who would give aid and sanctuary to those enemies."

Diaphaneity has added some new Blogger Templates. The Hawaii Lanikai Beach Template is still a favorite.

2flower has spectacular image created with a little help from the TypoGenerator and an excellent photograph in the left sidebar.

No-sword posted a passage about the Dragon Gate, and an entertaining and humorous exchange about the perception of the "Dragon Gate" in Japan.

And while it's now 1:24AM I'm still seeking more treasures to share...

Live Mount St. Helens Cam

Volcano Cam
The USDA Forest Service allows and encourages direct linking to the Mount St. Helens VolcanoCam, the closest operating camera to Mount St. Helens. The volcano woke up a week ago after sleeping for 18 years. We've been watching spewing steam and anticipating an eruption.

The dimensions of the volcano cam image are 640x480. To maintain the aspect ratio the image can be posted at 300x271, 200x181, or 100x90. The size of the .jpg image file ranges from about 25KB to 30KB so it will add weight to the page even when you post it at 100x90.

Want a live volcano?

Copy and paste this in your Blog or Web page.

It will look like this.

Hover over the image to see the title tag. Now that's a title!

Text Transparency and Opacity

Opacity .25 .50 .75

color:black;width:100%;background:white; filter:alpha(opacity=25); -moz-opacity:.25; opacity:.25; -khtml-opacity: 0.5;

Opacity 25

<h4 style="color:black;width:100%;background:white;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;-khtml-opacity: 0.25;">Opacity 25: This is the color black.</h4>

Opacity 25: This is the color black.

Opacity 50

<h4 style="color:black;width:100%;background:white;filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;-khtml-opacity: 0.5;">Opacity 50: This is the color black.</h4>

Opacity 50: This is the color black.

Opacity 75

<h4 style="color:black;width:100%;background:white;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;-khtml-opacity: 0.75;">Opacity 75: This is the color black.</h4>

Opacity 75: This is the color black.

No Opacity

<h4 style="color:black;width:100%;background:white;">No Opacity: This is the color black.</h4>

No Opacity: This is the color black.

The opacity style can be applied to any tag. Notice that the background color is defined. If the background color isn't defined some browsers will display the text with a jagged edge. The opacity filter needs a background color or a background image to blend with. The background color transparent doesn't always work.

More...

Part 1: CSS Opacity in Mozilla and IE

Kathryn or other Safari bloggers, does this one work in Safari?

Change the Border Around a Picture

Some of the templates are styled to automatically put a border around an image or picture. CSS style code is between the <STYLE> and </STYLE> in the <HEAD> section of the template or in your external style sheet.

The CSS style to automatically border images looks something like this.

.post img {
  padding:4px;
  border:1px solid #ddd;
  }

Or like this.

.img {
  padding:4px;
  border:1px solid #ddd;
  }

Everytime you insert an image it will have a border that looks like this.

You can remove the code if you don't want the automatic border. Or you can style the border to suit your taste.

What does that style sheet code do?

.img {
padding:4px;
border:1px solid #ddd;
}

• img refers to any image on the page.
• padding:4px; is the amount of space you want between the image and the border.
• border:1px solid #ddd is a 1 pixel solid border colored #ddd.

You can change the padding and the border like this.

Solid Black Border

.img {
padding:0px;
border:1px solid black;
}

Now your images will all have no padding between the image and the border and the border will be solid black.

No Border

Change the padding and the border to 0. That will let you leave the code in for future use.

.img {
padding:0px;
border:0px solid black;
}

Gold Colored Border

.img {
padding:5px;
border:1px solid gold;
}

Orange Dotted Border

.img {
padding:5px;
border:2px dotted orange;
}

Matted Border Gold

.img {
padding:5px;
background:gold;
border:1px solid black;
}

Matted Border Silver

.img {
padding:5px;
background:silver;
border:1px solid black;
}

Change the Border with Inline Style

If you don't want to change your CSS style sheet you can change the border around any image with Inline Style.

Change the image name to your image name, or use it as it is (image included). More named colors are in the Color Chart.