Mandarin Daily

Food Not Bombs

2006-06-16T19:04:00.000-07:00

Make a Non-profit Banner Link

You can use the squares in the Gallery to customize your own link or to make a link to your favorite non-profit organization. Here's one we made today using the image named foodnotbombs1.jpg .

Orlando, Florida
Food Not Bombs
City Commissioner

Copy and paste this in your Blog or Web page.

It will look like this.

Orlando, Florida
Food Not Bombs
City Commissioner

Food Not Bombs
Morgan in Vermont is spreading the word about the Food Not Bombs (FNB) organization. The City of Orlando will vote on Monday, June 19th to stop allowing the weekly sharing of food for the hungry at Lake Eola Park in downtown Orlando, Florida. It's still OK to feed the pigeons in the park, just not the people. Read about it here.

We wrote to Orlando City Commissioner Patty Sheehan who is rumored to have initiated the City Ordindance.

This isn't just about Orlando. There is an ordinance that could spread quickly. Maybe to your town.

House of Mandarin

2006-06-14T10:37:00.000-07:00

House of Mandarin

Overheard: It's not exactly what Gondolier says, it's how he says it.

This is the first time we have seen anyone attempt the copy and paste for the full center float and it's done nicely at ABAFOS and DESABAFOS.

Color Overlay

2006-06-08T17:21:00.000-07:00

This is a black and white version of the US Postal Service Breast Cancer Fundraising Stamp. We pay a little more than standard postage for the stamp and the money goes to Breast Cancer research. We grabbed a black and white version then did a right-click on the image to determine the dimensions. This image is 125px x 188px. The dimensions are important to the browser.

Black and White Color Overlay
When we first started fiddling with opacity the ability to overlay color on images using pure CSS code was a big "wow". Black and white photographs can be overlayed with a light sepia toning for continuity, especially for old black and whites. The color overlay can add visual interest. While we haven't put together a family page with old black and whites we keep this code in mind.

The code is simple. No tricks. Instead of putting the image in the img tag we are using the image as a background in the div.

First we lay down the color using a div defined the same size as our image.
Then we lay a div on top that contains the image as a background.
The blend of the background color blue and the image looks like this.

Change the Color

We can change the background:blue; to any valid HTML color.

Copy and paste in your Blog or Web page.

It will look like this.

Orangered

Copy and paste in your Blog or Web page.

It will look like this.

Deeppink

Copy and paste in your Blog or Web page.

It will look like this.

Darkolivegreen

Copy and paste in your Blog or Web page.

It will look like this.

Gold

Copy and paste in your Blog or Web page.

It will look like this.

Teal

Copy and paste in your Blog or Web page.

It will look like this.

Red

Copy and paste in your Blog or Web page.

It will look like this.

Sunday Somewhere

2006-06-04T08:34:00.000-07:00

It must be
SUNDAYSOMEWHERE

If I take the wings
of the morning
and settle at
the furthest limits of the sea
Even there your hand
shall lead me
and your right hand
shall hold me fast
(Ps. 139:9-10)

...This is my first post in my official capacity as the pastor of the Community Church of Wilmette. I know, I am beating the drum again. And, no, I am not fishing for more kudos, though they are nice...
AngloBaptist

Code Stolen from AngloBaptist
Have a great first day at work dude. We're all resting. That was spelled wrong, it's Bap as in Rap, not Bab as in Blab. Correction noted. Cheat memorized.

Styling the Blockquote
If we use a lot of quotations then using CSS to style the blockquote with images makes sense. And since we already have the blockquote defined in the external style sheet it's easy from here.

...There is no internet signal in the pastor's study. Well, that seems to be the case. I hear tell that the interim used to bring his laptop downstairs to check his mail. Do I put this issue near the top of the "to do" list? ...
AngloBaptist

Join the 40x10 Club to help Kevin Barbieux (The Homeless Guy Blog) get a refurbished laptop. Hey guys, this from Morgan's place and he links here where the details are spelled out.

" If 40 people were to each send Kevin $10.00, he would be able to purchase a refurbished ibook for himself. "

Update: Kevin got enough money for the ibook!

Don't Read

2006-05-26T16:09:00.000-07:00

Please don't read this!

Code Your Own Banner (Easy)

2006-05-23T17:19:00.000-07:00

Your Words Here

Code Your Own Banner (Easy Version)
It's easy to make your own banner without any graphic tools. This one will stretch or shrink to fit in your space. You will need to pick up a spare picture for the background and we have plenty to share in the gallery. The size (width and height) doesn't matter.

Copy and paste in your Blog or Web page.

It will look like this.

Your Words Here

Code Your Own Banner

2006-05-17T16:37:00.000-07:00

Your Words Here

Code Your Own Banner

It's easy to make your own banner without any graphic tools. This banner will stretch or shrink to fit in your space. You will need to pick up a spare picture or two and we have plenty to share in the gallery. Size doesn't matter.

Things you can change

Width:98%
Height:80px
Text Color:white
Font-Size: 42px
Border:8px solid black
Background Image 1: backyard5.jpg
Background Image 2: calla.jpg
Opacity 70
Your Words Here

Banner Size Adjusts Automatically
The banner will automatically adjust to 98% the width of the space where it is placed. We made the height 50 pixels with a font size of 42 pixels, but you can change the code.

Two Images
We used two pictures for the background with white text and a black border. Change the border or text to any named color (red, orange, yellow, blue, pink, and black work well).

The first background uses this image.
The second image --the calla lily -- is is the image we are making transparent and laying over the top of the first background image.

The Transparency Blend
We are using the opacity filter to make the top image (the calla lily) and the text somewhat transparent.

Your Words Here

Copy and paste in your Blog or Web page.

It will look like this.

Your Words Here

Done!
If you make a banner will you let us see it? We spotted a great rendition of the Code Your Own Art that we can't find right now. We like to see the mistakes too.

Breaker breaker 1-9, we got a banner comin' in at Kimnet. Watch out for the red borders and yellow text spill on the too many words for a box...(sorry, been in a trucker mood today). Sis drove the 18-wheeler for twenty years out of Charlotte, NC and on road trips we used the CB. Her handle was "Wideload" but they would call for Buster Brown. OK, there's some trivia. What company did she drive for?

Magnolia did it in the sidebar with the text hyperlinked.

Bayou Quilts, who claims to be a Technodunce, did it on two blogs. We only found one but it's a keeper.

Stu finally did it. He is now somewhat transparent.

Code Your Own Art

2006-05-06T00:00:00.000-07:00

Code Your Own Art

Opacity 70 percent

Coding is an Art

Can we make code look like art?
Coding is an art. Fiddle with it. Replace the backyard.jpg and calla.jpg photographs with your own. Any pictures will work.

Two pictures
We used two photos to make our own art using the opacity filter. The code overlays one picture with another picture and some text. It will work with any two images.

Screen capture of Opera, Mozilla, and IE

Triple the pleasure
That's a screen shot that shows how the Opacity filter (this code) behaves in Opera, Mozilla Firefox, and IE on this PC. Your mileage may vary.

Your Text Here

Coding is an Art

Copy and paste in your Blog or Web page.

It will look like this.

Your Text Here

Coding is an Art

This version will work better with Blog tools.

Spaces and line breaks removed

Sitting Prettty in B&W

2006-05-05T21:00:00.000-07:00

UPDATED MAY 5, 2006

S

I 

T 

T

I

N

G 

PRETTY

And then you can enter text here. Or not. Color the letters, or not. We're just sitting here. Waiting...

Copy and paste in your Blog or Web page.

It will look like this.

S

I

T 

T

I

N

G 

PRETTY

And then you can enter text here. Or not. Color the letters, or not. We're just sitting here. Waiting...

Change the Color
And then Claude posted the code and it wasn't the color black. Our default color here is black for text so it was automatically black. We just now updated the code to include the color black. Now we can see where to change the color:black; to any color.

For example, if we copy the code and then replace the color:black; in the first line with color:teal; it will look like this.

S

I

T 

T

I

N

G 

PRETTY

And then you can enter text here. Or not. Color the letters, or not. We're just sitting here. Waiting...

And then our text returns to our normal color after the code ends.

Sitting Pretty

2006-04-30T11:12:00.000-07:00

  
S
I
T
T
I
N
G

  PRETTY   
  

This is a Magazine style that Mandarin thought was interesting. In the magazine this text is centered. What magazine is it? Blender. "What is Blender!" she shouted.

BY MANDARIN
NO PHOTOGRAPHY OF CONOR OBERST

Copy and paste this in your Blog or Web page.

It will look like this.

  
S
I
T
T
I
N
G

  PRETTY  
  

This is a Magazine style that Mandarin thought was interesting. In the magazine this text is centered. What magazine is it? Blender. "What is Blender!" she shouted.

BY MANDARIN
NO PHOTOGRAPHY OF CONOR OBERST

How Wide?
We need to see if it is too wide to fit in the sidebar. It looks like it is about 250 pixels wide (it adjusts to 90% of the space available).

S
I
T
T
I
N
G
PRETTY  

This is a Magazine style that Mandarin thought was interesting. In the magazine this text is centered. What magazine is it? Blender. "What is Blender!" she shouted.

BY MANDARIN
NO PHOTOGRAPHY OF CONOR OBERST

How wide is it in pixels?

200 pixels?

250 pixels?

We made a minor update to the original code. The size and letters are adjustable. Another example is here.

Sightings
Cindy did it in the color named darkslateblue. Looks great. JR at Noded posted a nice rendition. And I think we missed Kimnet's version.

Google Stuff

2006-04-27T09:31:00.000-07:00

Google
Tips and Tricks

We all know what "google it" means. But there is so much more that Google can do that we have lost track. Our latest toy is Google Earth. It's a Google download (free) but worth the exploration, allowing us to fly from space into our own neighborhood then over to your place. Mindless exploration that can turn into a great time sink. Hours of fun.

Are there some favorites that we don't know about or forgot? Got a Google tip or trick that we can add to the list?
Google Cheat Sheet
Google Zeitgeist
GoogleFight
Google: Add Your Page
Google Page Rank
Google Maps
Google Blog

Using Google Earth, teachers can fly their students around the world to talk to them about issues like climate change and how it has affected places like Glacier National Park, the Chesapeake Bay and Los Angeles. And they can introduce students to community initiatives across the country where volunteers are cleaning up their cities, planting trees and beautifying. Using Google Earth, teachers can show their students placemarks of the towns where outreach projects are taking place and students can get involved in cleaning up their own environment.

GoogleBlog

More Google stuff?
Kim likes Google Page Creator(Beta) where our non-technical friends can create web pages, quickly and easily.

Claude uses the define:word function in Google that returns a number of definitions for your word. She says to try define:blink tag ;-)

Google and ihackstuff.com
A site dedicated to finding interesting stuff at Google. Secrets. Passwords. And more. Yes, they have a top ten. Let us know if you find anything particularly interesting.

Montage-a-Google
Montage-a-Google lets you type in a site name or try your city name. Creates a Montage of related Images.

Google Sketchup
Google unveiled Google Sketchup yesterday. It's a free 3D image-making technology.

Scrolling Opacity Marquee?

2006-04-21T13:40:00.000-07:00

Scrolling Marquee and Opacity

Oh no! Opacity applied to the <marquee> tag works in all browsers...

Ouch! Someone at digg made a comment about the CSS Opacity series we began a year or two ago and continue to document here, here, here, here, and here in the Blog.

He said something about opacity being as useful as the marquee and blink tag.

So what did we do? Immediately went off to see if opacity works on the marquee tag. Ouch! It works in IE, Firefox, and Opera. Don't do it. Please, if you do it don't tell anyone we told you how...

Ready? Here goes...we'll show it just this once and never again. We promise?

Blog Trashed by Mandarin

Copy and paste in your Blog or Web page.

It will look like this.

Blog Trashed by Mandarin

Marquees: Scrolling Text Spottings
Kimnet did it in color, Shirl couldn't resist it, Malaposta put it in the sidebar (brave one), Cindy (loo who) is playing along in violet. Julie did it, and if Blogging in Paris hadn't done it in the sidebar we would never have known to click on the link that goes to Claude's Daily Snap.

Double-dog-dare
Whoa, Stu took the dare with a fast scroll (there's a double-dog-dare in the comments that we were going to change to a triple-dog-dare for Stu, but he already did it). Great fun. Put your secret decoder ring before you visit Stu. He's going to lead you to Wired News Typo Confounds Kryptos Sleuths where we learn more about the sculpture that Dan Brown references in the book jacket for The Da Vinci Code and why Kryptos have not been able to solve the fourth section.

JR at Noded did it sideways. JR? E'tu? Isn't HTML and CSS sacred to anyone?

RoadApples defiantly deviated from the double-dog-dare and the triple-dog-dare. He couldn't do it. Probably worried that one of his students might see it ;-)

Daisy did it. Yes, she did.

Across the continents, even Gondolier got trashed in the sidebar. Cornelia (the better side of Stu) made a nice tulip banner for a birthday. That one is quite nice.

Don't Try This At School
Gee whiz, I just remembered why we keep it clean here. There are school children and adult students who are given Mandarin specific assignments. Students, this is against the rules. Whose rules? Serious developers. The <marquee> is a "no no".

More...

Mount St. Helens Cam

2006-04-18T08:14:00.000-07:00

Mount St. Helens Web Cam

Volcano Cam
Mount St. Helens has been in a constant eruptive state since October 11, 2004. The USDA Forest Service allows and encourages direct linking to the Mount St. Helens VolcanoCam, the closest operating camera to Mount St. Helens. Hover over the image to see the title tag. Now that's a title! The image updates about every five minutes.

Dimensions
The dimensions of the volcano cam image are 640x480. To maintain the aspect ratio the image can be posted with the following dimensions.

300 x 224
250 x 187
200 x 150
150 x 112
100 x 75

The size of the .jpg image file ranges from about 25KB to 30KB so it will add weight to the page even when we post it at width="250" height="187" We can shrink the size of the display but we can't change the weight of the image.

Copy and paste in your Blog or Web page.

It will look like this.

Saddebrown Drop Caps

2006-04-14T11:39:00.000-07:00

Secrets
of SaddleBrown

Web Color Names Chart

For this drop cap we want to force the first big letter to span about four or five lines. The font-size for the big first letter is exactly 100 pixels while the line height is 70 pixels. We tried a line-height of 80 but that leaves a little too much white space. A top padding of 2 pixels allows the first big letter to align with the top of the first line of text. Two pixels is a slight drop. No math, just guestimating.

Copy and paste this in your Blog or Web page.

It will look like this.

For this drop cap we want to force the first big letter to span about four or five lines. Of course we have to type about four or five lines of text to make it work.

The secret of saddlebrown? We just wanted an excuse to use Morgan's new design background color Saddlebrown in a drop cap. The full drop cap tutorial is here. The color chart is here. And that's the secret of saddlebrown.

The April Quilt

2006-04-13T13:52:00.000-07:00

The April Quilt

More Alphabet Blocks

2006-04-12T09:23:00.000-07:00

Alphabet Blocks

MOREALPHABETBLOCKS

Alphabet blocks are a fun way to bring life to text with CSS. We are trying some new colors and letters for the text, background, and the border. The code is simple and the color combinations are experimental. Let's fiddle with some colors while we drink the morning coffee.

Copy and Paste this in your Blog or Web page.

It will look like this.

Your text goes here in this paragraph. Just keep typing.

MOREALPHABETBLOCKS

Your text goes here in this paragraph. Just keep typing.

Copy and Paste this in your Blog or Web page.

It will look like this.

Your text goes here in this paragraph. Just keep typing. We borrowed this boxed cap color combination from Shirl.

Bullets in HTML and CSS

2006-04-07T23:01:00.000-07:00

Bullets in HTML and CSS

...I have a question for you. I'd like to format a list with bullets, how do I do that without having to insert the url of the bullet image everytime? For example, I'd love to have a list of urls here Do you have an idea to make this pretty?

Claude, in HTML there are unordered lists <ul>, ordered lists <ol>, and definition lists <dl>. We can use CSS to style the ordered list for this example.

Unordered List with the Default Bullet

An unordered list in plain HTML looks something like this.

This is one <li> list item
This is one <li> list item
This is one <li> list item

Copy and paste this in your Weblog.

It will look something like this.

This is one list item
This is one list item
This is one list item

Ordered List with a Custom Bullet

We like to use a custom bullet on the Text Tips Index page. We style the ordered list OL to make our custom bullet appear automatically. We are using a simple down-arrow.gif that looks like this.

Add the graphic to your CSS.

It's a one line addition to the CSS style and you never have to type the name of the graphic again. We keep our CSS in an external style sheet If you are using a template the style might be between the HEAD and /HEAD section of your template. We use an image named downarrow.gif

Copy and paste this in your CSS.

The HTML will look something like this.

And the final style will look like this.

This is one list item
This is one list item
This is one list item

Pretty? No. Functional. Yes. Your graphic diamond.gif will look great. Just change bullet.gif to your image name.

Blogging Around...

Overheard: Kimnet has some old black and white photos posted with gems of insight on each one.

"i dunno. my mother had always been, ya know, middle aged. of course she'd mentioned being younger at one time, and other people had supported that. but there'd been no physical documentation...
~Kimnet

Here's a black and white of Stu. He still has that dress ;-)

More?

Opacity Background with Opaque Text

2006-04-03T08:27:00.000-07:00

Faded Opacity Background Image
Flip-flop the thought . . .

How can I make the background image fade using CSS opacity filters? I want the opacity to work in Mozilla, IE, and Opera.

Opacity Background in Mozilla and IE

Flip-flop the thought and put the opacity on top. Put the fade over the background, not on the background.

YOUR TEXT GOES HERE

The full color background image we start with is 200 x 159 pixels.

There is one div to hold the full color background image, and another div to contain the text and apply the opacity to the image. Both divs are defined the same width and height as the image, 200 x 159.

Copy and paste this in your Blog or Web page.

It will look like this (image included).

YOUR TEXT GOES HERE

To make the background image fade code work with your image change the following:

monday.jpg to the name of your image
width:200px; to your image width
height:159; to your image height

Is this code working? The syntax is correct. If you are using Blogger it changes our background so we are just playing along and using what Blogger wants in the copy and paste. Does the code work for you?

Reference Multiple CSS Classes

2006-03-18T18:21:00.000-08:00

Referencing Multiple CSS Classes

class="box left blue"

class="box right orange"

class="box center white"

"Hi. I just tripped on your site ...I was playing with some news boxes here and was wondering if I wanted to see what might be the best way to create a class - say pastel_boxes and then just be able to pick 'blue, green' whatever. In other words I can write a class for blue, one for gray, one for green, one for green with double border etc but most of the code is the same so it seems a waste...
Burt"

We can define the box and then define each background color in a separate class. When we write the HTML we can refer to the class for the background color we want. The color classes are reusable.

CSS

Copy and paste this in your style sheet.

HTML

Copy and paste this in your Blog or Web page.

It will look like this.

Text

Positioning

We defined classes for left, right, and center. Now we can combine the classes to color and position the box.

Copy and paste this in your Blog or Web page.

It will look like this.

Text

W3C

All elements inside the 'BODY' element can be classed, and the class can be addressed in the style sheet:

<HTML> <HEAD> <TITLE>Title</TITLE> <STYLE TYPE="text/css"> H1.pastoral { color: #00FF00 } </STYLE> </HEAD> <BODY> <H1 CLASS=pastoral>Way too green</H1> </BODY> </HTML>

The normal inheritance rules apply to classed elements; they inherit values from their parent in the document structure.

One can address all elements of the same class by omitting the tag name in the selector:

.pastoral { color: green } /* all elements with CLASS pastoral */

W3C

Overheard

Overheard: RoadApples is floating left and right with a nice black and white family photo. Claude posts the old black and whites but today she is Jackie. Shirl does this Monday Madness thing and for this first time ever there was an answer that is surprising. Is Stu colorblind or does the orange box look red? Hey, he's talking about me. He admits that Opera fans are losers but only because he probably figured out that I'm hooked on the latest release of Opera working so fine with Opacity (CSS3 Specs!).

Does anyone know how we can do the topics like Gary Turner's right sidebar topics without faking it? Does it require PHP?

Hardware beats Software at Alexaholic.com.

2006-03-14T09:44:00.000-08:00

E=mc²

E=mc² Stu will be celebrating Einstein's birthday today. I think we are supposed to visit him and read. He probably won't be serving any Pi, even though today (March 14 or 3-14) is Pi Day, the day we celebrate our favorite number 3.14159

Copy and paste this in your blog or web page.

It will look like this.

E=mc² Stu will be celebrating Einstien's birthday with the rest of the world. And more text goes here. And more text goes here. And knowing Stu, the text will be interesting with a whiz bang punch. Or, something like that. I'm just typing for demonstration. Is this what you wanted Stu? We need to type in enough text to demo what it might look like on your page.

Pantone Fashion Color Report

2006-03-13T18:53:00.000-08:00

Pantone Fashion Color Report Spring 2006

Pantone Illustration

Pantone presents us with the fashion color report for spring. The colors alone don't look so exciting but the way the report combines the colors looks great and looks like the colors we are using to update our spring wardrobes. Does this have an impact on Web Color trends? Oh yes. Fashion colors go from our clothes to our walls and are incorporated into our Web designs. As standalone colors they don't do much, but pair them or mix them up and even these colors can strut their stuff.

Spring Fashion Colors in hexadecimal

Color FCF4BD Pantone French Vanilla

Color EDE5DA Pantone Sand Dollar

Color A6DDE8 Pantone Blue Tint

Color EEC1D5 Pantone Cameo Pink

Color D1E0B2 Pantone Lily Green

Color B2D0E8 Pantone Skyway

Color A9A9D5 Pantone Viola

Color F89F6D Pantone Melon

Color 89614C Pantone Clove

Color 005695 Pantone Deep Ultramarine

Pantone Fashion Colors
The colors here may not match PANTONE-identified standards. We sampled the colors in Adobe to get the Web equivalent color.

Alphabet Block Drop Cap

2006-03-11T23:08:00.000-08:00

Secrets of Style

Everything in CSS is a Box

Daisy likes the way the drop cap makes its own little box, which is a good reminder that everything in CSS is a box. And because it is a box we can take our crayons out and color the background and outline the box. The letter "D" for Daisy is in a box, the paragraph is a box, and every piece of text here is in a box.

The code for the dropcap is simple, but we can fancy it up a bit. We use the inline CSS for fiddling with the look. We put our drop cap in a span

We made a few adjustments to the drop cap.

background:khaki; We added a background.
border:1px solid darkkhaki; We added a border around the drop cap.
margin-right:5px; We added a margin to the right of the boxed drop cap.
margin-top:5px; We explicitly set the top margin.

Khaki Drop Cap: 80 Pixels

This is a drop cap with a khaki background, white text, and a darkkhaki border. We used named colors so that we can make changes to the code easy. It might look better with a colored border. And we would likely want to change the color of the drop cap. We used the named color white.

Copy and Paste this in your Blog or Web page.

It will look like this.

This is a drop cap with a khaki background, white text, and a darkkhaki border.

Firebrick Drop Cap: 80 Pixels

Mike Golby might like the background color firebrick better than gold. Golby changes text colors for emphasis but if we don't specify the color for the text it will default to normal text color for that page. By the way, thanks for the Strunk and White Plumerias Mike. I noticed them when visiting your place to find an example of a color to use.

Copy and Paste this in your Blog or Web page.

It will look like this.

Mike Golby might like the background color firebrick better than gold.

Drop Cap Letters

Claude noticed that some letters look better than others. Magazines sometimes change the wording of a sentence for the sole purpose of using a nice "T" or "M" for the first big letter. Notice the differences in the letters.

More named colors are in the Web Color Names Chart

Update: RoadApples has a good rendition of the colored drop caps customized to fit his blog. And Shirl's version will knock your socks off. It really does look like an alphabet block.

Smaller Drop Caps

2006-03-05T10:45:00.000-08:00

Secrets of Style

The code for the dropcap is simple. We always put it in a paragraph and show the entire inline drop cap style so it looks like it takes more code than the drop cap itself requires. We use the inline span style since we don't use it often enough to justify adding weight to our style sheet. But, if we start using it on a regular basis we would add the code to our CSS (Cascading Style Sheet) so that we don't have to type it in again each time we use the dropcap style. The copy and paste CSS is here. Let's try a few more sizes before we define the dropcap style sheet code.

Drop Cap: 80 Pixels

This is a sentence.

Copy and Paste this in your Blog or Web page.

It will look like this.

This is a sentence.

Drop Cap: 60 Pixels

This is a sentence.

Copy and Paste this in your Blog or Web page.

It will look like this.

This is a sentence.

Opacity Works in Opera

2006-02-26T21:09:00.000-08:00

CSS Coded Opacity Borders
Opacity Works in Opera 9.0

Thinking inside of the box...
Borders are usually around the outside of a photograph but we thought it might be interesting to apply the border to the inside of this photograph. This is a white border with 50% opacity applied. Opacity works in IE, Firefox, and Opera.

Copy and paste this in your Blog or Web page.
Note: The line breaks are removed so that the code doesn't interfere with the Blogging tool.

It will look like this (image included).

Curios About the Code?

Outer Div

Opacity Border

End Outer Div

Put it all together and it will still look like this.

We used the image calla.jpg as a background in the first div. In the second div we put a white border with opacity applied.

Coding Details:

The first div that contains the background image is 300 x 200. The second div with the opacity border applied is 280 x 180. To position the border inside of the image we calculate the placement of the border. For example, we are using a 10 pixel border. That's 10 pixels on the left, right, top and bottom.

Image: calla.jpg
Border: 10 pixels
Background: 300 x 200 pixels
Border: 280 x 180

300 - 20 = 280
200 - 20 = 180

Photograph with permission from the notReality Gallery of Punkclown.

This Opacity border works in version 9.0 of Opera that we found at the OPERA DESKTOP TEAM The proprietary -moz-opacity:.50 is no longer needed but is included for possible backward compatibility in Mozilla.

Quote and Image Float

2006-02-23T21:44:00.000-08:00

"Love
does not consist
in gazing at
each other
but in looking
together
in the same
direction."

- Antoine De Saint-Exupéry

Copy and paste in your Blog or Web page.

Float the Quote

Add a Picture

Clear the Float

It will look like this.

"Love
does not consist
in gazing at
each other
but in looking
together
in the same
direction."
- Antoine De Saint-Exupéry

Dedicated to Stu and Cornelia who had the love of Wilma for many years before she passed a year ago.

Mandarin Daily

Food Not Bombs

Make a Non-profit Banner Link

House of Mandarin

House of Mandarin

Color Overlay

Change the Color

Orangered

Deeppink

Darkolivegreen

Gold

Teal

Red

Sunday Somewhere

It must be SUNDAYSOMEWHERE

Don't Read

Please don't read this!

Code Your Own Banner (Easy)

Code Your Own Banner

Code Your Own Banner

Code Your Own Art

Code Your Own Art

Sitting Prettty in B&W

Sitting Pretty

Google Stuff

GoogleTips and Tricks

Scrolling Opacity Marquee?

Scrolling Marquee and Opacity

Mount St. Helens Cam

Mount St. Helens Web Cam

Saddebrown Drop Caps

Web Color Names Chart

The April Quilt

The April Quilt

More Alphabet Blocks

Alphabet Blocks

MOREALPHABETBLOCKS

MOREALPHABETBLOCKS

Bullets in HTML and CSS

Bullets in HTML and CSS

Unordered List with the Default Bullet

Ordered List with a Custom Bullet

Add the graphic to your CSS.

Blogging Around...

Opacity Background with Opaque Text

Faded Opacity Background Image Flip-flop the thought . . .

Opacity Background in Mozilla and IE

Reference Multiple CSS Classes

Referencing Multiple CSS Classes

CSS

HTML

Positioning

W3C

Overheard

E=mc²

Pantone Fashion Color Report

Alphabet Block Drop Cap

Khaki Drop Cap: 80 Pixels

Firebrick Drop Cap: 80 Pixels

Drop Cap Letters

Smaller Drop Caps

Drop Cap: 80 Pixels

Drop Cap: 60 Pixels

Opacity Works in Opera

CSS Coded Opacity BordersOpacity Works in Opera 9.0

Curios About the Code?

Quote and Image Float

It must be
SUNDAYSOMEWHERE

Google
Tips and Tricks

Faded Opacity Background Image
Flip-flop the thought . . .

CSS Coded Opacity Borders
Opacity Works in Opera 9.0