The best source for photographs of Pensacola and Hurricane Ivan is the
Pensacola News Journal Gallery. New photographs are added daily. There are photos of Five Flags Inn (at least one) and the Flora Bama. This Photo of FloraBama is more recognizable. Flora~Bama is difficult to search for because of the alternate spellings including: Flora-Bama, Flora~Bama, FloraBama, and the Bama.
Don't miss the Dramatic Aerial Photos: Hurricane Ivan.
Pensacola News Journal's Mark O'Brien is using Blogger to report on Hurricane and other news. For those who came here for code, we used the CSS Opacity Applied to Background copy-and-paste opacity background code to apply opacity to the background image of Five Flags Inn.
Diane at Arcadian-expressions posted a unique link section using the Easy Image Rollover with Opacity copy-and-paste code. Hover over the candy yummy treats. While out and about we noticed another opacity rollover at Punkclown and spotted some new pullquotes this morning at Third Daughter.
Centered Box
How do you center a bordered box? Let the browser automatically calculate the left margin and the right margin with margin:0px auto;
Copy and paste this in your Blog or Web page.
It will look like this.
The 0px says we want 0 pixels on the top and the bottom. The auto tells the browser to automatically calculate the left and the right margins. We used the color gainsboro. More color names are here.
Some of the named colors look good but are not easy to spell or remember. Do you have a favorite background color? Named color? Hex Color?
Opacity Blending Effects
The Blend
...then float again to let it inherit the opacity of the parent. The code says says 50%. But it is actually 50% of our original 70% in IE and Mozilla. And now back to where we were... The End
- Page Background
background: whitesmoke - Pullquote Text
color:maroon - Pullquote Background
background:white
-
Why use a white pullquote background? If our page is whitesmoke then this pullquote area will be blended with a 70% white background and 70% maroon colored text.
-
Opacity 70% We are using an opacity of 70%. The opacity is applied to the entire pullquote
div. -
Inherited Opacity When we specify the opacity again, opacity that we want to be inherited, we give a tag layout.
We used
<strong style="float:right; filter:alpha(opacity=50); -moz-opacity:.5; opacity:.5;">.We used the <strong> tag. The contents of the <strong> will inherit the opacity of the parent. The code says says to use an opacity of 50%. But it is actually 50% of our original 70% in both IE and Mozilla with strong applied just to cause more confusion. Actually, it's just the first non-container tag that came to mind.
Since the opacity pullquote div is floated to the right, we maintain the opacity by giving the <strong> tag layout. The
float:rightis enough layout to help the browser maintain the opacity of the parent container. - DOCTYPE Opacity rendering varies depending on the DOCTYPE.
Simple Opacity Pullquote
In this example we insert the pullquote code first. Then anything we type after the pullquote automatically aligns to the left.
The code for this pullquote includes a suggestion to the brower to apply an opacity of 70%, make the background color white, and make the text maroon. Most browsers will apply the opacity. Even if they don't the effect is still good. It's a white background with maroon text.
-
Margin We used margin:1px in this example. The margin can be increased or decreased.
-
Color We used color:maroon. The color can be changed to any color.
Copy and paste this in your Blog or Web page.
It will look something like this.
In this example we insert the pullquote code first. Then anything we type after the pullquote automatically aligns to the left.
We can put text here or an image, but we do need something. Otherwise, the pullquote might spill. We could use the <div style="clear:both;"></div> but it's more fun to type.
Note: The colors white and maroon will blend with the background color or background image on your page. The copy-and-paste opacity pullquote code works on any color background, including black.Part 1: CSS Opacity in Mozilla and IE
Skyline Project
Port of Sacramento
West Sacramento, California
Friday, September 24, 2004
The Port is the view on the way home from work (photo taken out of the car window) nearly a mile from home but viewable from the end of our street.
Overheard Mike (an ER Tech) combined three different copy-and-paste techniques that work well together. He found Mandarin through Punkclown, an ER nurse.
Pensacola News Five Flags Inn
Five Flags Inn We've talked about our favorite place to stay in Pensacola, Florida. A little family owned motel on the beach where Baker makes warm coffee in the morning and you make new friends. We meet people who have been vacationing every year for the last twenty years or more.
Five Flags Inn took in evacuees and allowed pets for the duration of the last hurricane. And today we find people searching Mandarin for Five Flags Inn. They are wondering whether it survived Hurricane Ivan.
We wondered too and found a photo in the Pensacola News Journal
Hurrican Ivan Photo Gallery. Today I called to see if there was a recording
but the phone lines are still down in the area so you get only one ring, the same as when I call my sister's home. Then the call just stops. No recording. And so, for those who wonder if Five Flags Inn survived Hurricane Ivan I would say it did. It's the blue structure in the foreground.
Opacity for Pullquote
This is a good opportunity to show an example of Opacity for pullquotes. This is an easy copy and paste method where you only need to plug in one color. We used the color #033 but a named color works as well.
Copy and paste this in your Blog or Web page.
It will look like this.
Update: There's a new site Save Five Flags Inn that has comments from the family and more photographs of Five Flags Inn.
Easy Image Rollover with Opacity
With CSS all you need to do is put a piece of code in your style sheet to automagically make image or text rollovers.
You don't need a second image or scripting.
Put the code in the head section of your page between the <HEAD> and the </HEAD>. You only have to do this once.
Then add <a class="linkopacity" to the link when you
want to make the rollover. It works with hyperlinked text and images.
It will look like this.
Opacity Compatibility:The Opacity Rollover works in IE and Mozilla. We think it works in Safari 1.2, but it doesn't work in Opera yet. The code should be forward compatible (this is CSS3). Any Safari users out there? Does the Opacity work in Safari?
Update on Safari Kathryn let us know that the opacity does work in Safari 1.2.3
Overheard:This just in from Chez Goodman
Today CBS News and teleprompter reader Dan Rather have finally admitted that the documents they used recently to smear the president were fake, and that they had been fooled by Kerry sympathizer Bill Burkett, who manufactured the documents...
CBS: Bush Memo Story A 'Mistake'
Bloggers knew right away and once the The Washington Post visual comparison was released there was little doubt left even among those who pay no attention to typography or politics. But it was a Blogger who first posted doubts about the fonts and spacing of the memos shortly after airing of CBS's 60 Minutes.
Mandarin Blogger Quilt
CSS Opacity Background
BY MANDARIN
OPACITY FILTERS IN MOZILLA AND IE
CSS FLOAT LEFT: HOW TO FLOAT A BOAT
Secrets
of Style
30
FATE OF PERDIDO UNCLEAR
SEPTEMBER 2004
12
HURRICANE PHOTO GALLERIES
UPDATE:
Pensacola Blog Created for
IVAN
Hurricanes
Opacity Heading
We made the image at TypoGenerator then put the opacity heading Hurricanes on top with one line of code.
Hurricanes
Background Image
It's easy to make an image a background. We put this image in a div and defined the div with the exact dimensions of the image created with
TypoGenerator width:400px and height:300px;.
Copy and paste this in your Blog or Web page (background only).
It will look like this.
That is the raw image as a background. No title on top.
Opacity Heading
To put the heading on top of the image we used the H1 heading tag and specified the color brown. The H1 tag has opacity applied so when it stands alone it doesn't look brown.
Hurricanes
When we lay the heading on top of the image the color brown will blend with the image. Notice that the background on the H1 heading is the name of the image.
Copy and paste this in your Blog or Web page (background and heading text).
It will look like this.
Hurricanes
Name:http://www.mandarindesign.com/images/ivan.jpg
Dimensions: 400 x 300
So where's the cool part?
Maybe your post space is only 225 pixels wide. What happens if we define the div with width:225 and height:300?
Hurricanes
Copy and paste this in your Blog or Web page.
It will look like this.
Hurricanes
Since it is a background image it doesn't resize or distort the image, it just fits in the div. You can specify any height and width and it will work.
Sandy, my dear sister, would you please call me. You are in the path of Ivan in the Florida Panhandle and you don't answer your phone. Stay out of the water. Call your sister. I'm watching the Pensacola Beach Web Cam 2 from Five Flags Inn. Everyone is sunbathing and playing in the water. Do I believe the news or the live Web Cam? Hmm...
Aaron Hawkins of Uppity Negro passed away.
For if I ever saw you
I didn't catch your name
But it never really mattered
I will always feel the same...
Fame
An article by Tish at Fatshadow titled Let Me Show You How To See My Body was published recently by Emerging Women Writers.
Has anyone else had their 15 minutes of fame lately? Ever?
CSS Opacity Hover
Method 1: Opacity Using Onmouseover
You can change the image link without a second image. This is one image with opacity applied when the mouse is hovered over it. Opacity works in Mozilla and IE. The w3.org CSS3 specification for opacity opacity:.50; is included in the CSS style along with filter: alpha(opacity=50); for IE
and -moz-opacity: 0.5; for Mozilla. We would like to verify that the syntax for Safari is -khtml-opacity: 0.5; .
Hover over the hyperlinked image.
The CSS style looks like this.
Copy and paste this in your Blog or Web page.
It will look like this.
Text Link
A text link using the transON and transOFF classes might look something like this.
The text link example was a mistake, but a mistake with potential. I'm leaving it in for now. The gold is our standard link hover color code colliding with this style.
Method 2: Opacity without Scripting
The Simple Method
This is the easy way and the preferred method for altering the look of an image link. The onmouseover scripting isn't needed and you only need one image. This is one image with opacity applied. Opacity works in Mozilla and IE. Once the style is defined you can apply opacity to any link by adding class=linkopacity to the <a> tag.
The CSS Style looks like this.
Copy and paste this in your Blog or Web page.
It will look like this.
Opacity 75%
We used an opacity of 50%. Here's how it looks at 75%.
The CSS Style for 75% opacity looks like this.
Copy and paste this in your Blog or Web page.
It will look like this.
Tip: If the code doesn't work using your tool, especially Blogger, it's usually because the tool is inserting line breaks <br>. You can't always see the line breaks. Use the Delete to delete any empty spaces. That will delete the line breaks.
The default in Blogger is to insert the line breaks <br> for you. If you want to change your settings for a post you can go to
SETTINGS
FORMATTING (scroll down)
Set Change Convert line breaks to No.
If Yes is selected here, hard-returns entered into your blog posting form will be replaced with <BR> tags in your blog and blank lines will be replaced with <P> tags. For most posts you will want to change the settings back to
Convert line breaks to Yes.
The Dove
CSS Inline Style
Big First Letter
We used a font size of 56px for the first letter. If there is enough text an even bigger first-letter size looks good. The slight overlap is intentional and can be adjusted. The color name chocolate tastes good today. There are more edible color names here.
Sometimes all we need is a big first letter for a paragraph. No drop cap, just a big cap. It looks best when followed by way too much text.
Copy and paste this in your Blog or Web page.
It will look like this.
Sometimes all we need is a big first letter for a paragraph. No drop cap, just a big cap. It looks best when followed by way too much text.
letter-spacing:-10px to
letter-spacing:-6px to change the spacing between the big S and the o.
Copy and paste this in your Blog or Web page.
It will look like this.
Sometimes all we need is a big first letter for a paragraph. No drop cap, just a big cap. It looks best when followed by way too much text. Thanks Gary for the suggestion. It does look better now. You might take a look at Susan's version at EBC. That's the effect we were going for. It looks better on her.
So what does that code do?
The line-height is included so that the large type and small type don't overlap. The letter-spacing is adjusted and there is a border around the S. Why the border? The border helps IE in the placement of the text. We used a white border so that it doesn't display. Transparent should work, but it doesn't.
Could you explain what the border [dotted and white] serves for, please? It doesn't make sense to me.
Here's what it looks like without a border around the S.
So what does that code do?Here it is with the border around the S.
So what does that code do?In some browsers it will look fine. In IE there is too much space between the big "S" and the following "o". The letter-spacing:-6px; reduces the amount of space between the letters (and the border). The border is there to give the "S" something to align with. If this doesn't make sense it's because it doesn't make sense.
