Those Web Fashion Colors . . .
S ometimes we post code without the full copy and paste, leaving out our header and extraneous code. You are always welcome to view the source code with a right-click and just grab it.
When you are in Mozilla Firefox you will see a lot of code that we don't actually type in. It's added by the browser.
To copy and paste only a portion of the code highlight the code in Firefox and then right-click to view the source. You will only see the HTML for the piece of code that you highlighted.
The code for this entire post looks like this.
Float 1960's Colors with CSS
It's easier to work with the float one section at a time. This code first floats to the right and then floats the color chart on the left. The code works in IE, Firefox, and Opera.
Copy and paste this in your Blog or Web page.
It will look like this.
Blogging Around
Found the link to I Was Trying to Shoot and Dial 911 At the Same Time at A Bama Blog, then went to the other side where there was another potential target (for a camera Shirl, not a gun).
The ChiefBloggingOfficer turned us on to Highbeam where we researched Medieval Law Books after an email from Stu this morning. The CSS Style is in progress Stu (spell checker asked if I wanted to change "Stu" to "Stud").
years
- A Zen poem
Have you noticed Mik en Druk sneaking in? It's Farrago reincarnated.
The Oklahoma Wine News is reporting that a local B&B has announced a massage service in the Oklahoma Wine Country. In Hawaii, Kane is taking pictures of people and koi while somewhere else in the world JMG photographs flowers. It's more than flowers. He captured the perfect Morning Glory which reminded me of the Zen poem.
Blogs that are not in English are like watching a subtitled foreign film without glasses. We get to imagine what they are saying. Here's a few that we noticed today.
Letras Com Garfos
My Daily Journey
dokhtar-iran
kabootarbaz.persianblog.com
stationsvakt
covonline
Theophany reported that his daughter attended the inaugural ball. There's some bragging rights to that one. My daughter stole a ball once. On the subject of stealing, I like the top navigation at design: talkboard. Do you think they would mind if we duplicated it using the opacity rollover without an image swap? There, now I can quit thinking about it, already blew my cover.
"The second time my Mom faked cancer..."
~ A Gag Reflex
Top 25 Sacramento Blogs
Have you ever signed up for one of those top site lists where you
click to vote for yourself each day? Of course you haven't. Shh, we did. For grins we signed up and found some interesting local Sacramento Blogs.
One in particular, A Gag Reflex,
made the trip worth it. Any Blog that starts a post with "The second time my Mom faked cancer..." has
to be a good read. Just go there. It's
not your usual "my mother...go tell Oprah" blog.
And if you
click this link she gets a vote. Cool, eh? I wonder
how many of you will
click here to go to A Gag Reflex? Just curious about who clicks what. This is a test. Have a great weekend.
Want that pullquote style poem code?
It will look like this.
years
- A Zen poem
Spare Squares
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.
Copy and paste this in your Blog or Web page.
It will look like this.
S
I
T
T
I
N
G
PRETTY
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
NO PHOTOGRAPHY OF CONOR OBERST
The code is adjustable. Change the 28px to 56px to make it bigger or to a lower number to make it smaller. The rest of the code will adjust.
Transparency and Opacity Box
This is a paragraph with 50% opacity applied.
To make a transparent box we need a background first. We'll use the threebottles.jpg photo. Again.
The transparent box is a paragraph with opacity applied. The background color is white and the border is black.
This is a paragraph with 50% opacity applied.
Copy and paste this in your Blog or Web page.
It will look like this.
This is a paragraph with 50% opacity applied.
What size is your image?
This code will work with any image that is 300 or more wide, and 200 or more pixels high. The background image is 300 x 225. Notice that we are putting the image in a div that is defined as width:300px;height:200px.
Why -180px?
We are starting the opacity filtered paragraph inside of the box at the relative position -180 pixels. That is, we are moving the paragraph defined with opacity up 180 pixels. Why -180? We are specifying where we want the 50% opacity paragraph to be positioned. We want it to start about 180px up from where the browser is positioned after displaying the background.
This opacity code works in Mozilla Firefox and in Internet Explorer. Notice that the text also has opacity applied.
Triple BorderCenterImage
Add a triple border with inline CSS style.
For the triple border to work the width and height of the image is included in both the img tag and the div that surrounds the image. The result is a matted frame look.
A right-click on the image to view the properties tells us that this image is 300 x 225.The margin:0px auto; tells the browser center the image in the space available.
Copy and paste this in your Blog or Web page.
It will look like this.
We added the triple border using named colors.
It's easier to see how the triple border works when we use browser recognized named names instead of the hex color code. Here we used gold, black, and white. More named colors are here.
Random Live Webcams
The Power of Google
Click to view a page of full of live Webcams found by Google. You you can select live Webcams by country and by newest, random, and most popular.
"These webcams were found by Google. Their owners might or might not have intended for them to be public. But they obviously are. Many of them are security cameras in companies or semi-public places."
Do you know of a good live Webcam? I like the Maui Live Web Cam.
Here's how to type Google in color. If you want to display a live Webcam on your Blog or Web page try the copy and paste code for the Live Mount St. Helens Cam.
Thick Opacity Borders
Red Opacity Border: 25 Pixels
The red border is exaggerated here for effect. The width, color, and opacity can all be changed.
Borders are usually around the outside of a photograph but this red border with 40% opacity applied is placed on the inside of the photograph. The color red blends with the background image.
Copy and paste this in your Blog or Web page.
It will look like this.
We used the image threebottles.jpg as a background in the first div.
In the second div we put a red border with opacity applied. This opacity border example works in IE, Firefox, and Safari.
Opacity doesn't work yet in Opera. Opacity is one of the modules for the upcoming CSS3 specification. The opacity code is forward compatible.
Tips to fit your Image:
To position the border inside of the image we calculate the placement of the border. For example, we are using a 50 pixel border. That's 50 pixels on the left, right, top and bottom.
The first div that contains the background image is 300 x 225.
The second div with the border is 200 x 125.
- Image: threebottles.jpg
- Border: 25 pixels
- Background: 300 x 225 pixels
- Border: 250 x 175 pixels
- 300 - 50 = 250
- 225 - 50 = 175
Some blogging tools insert stray <br> breaks or <p> paragraph tags where you think there are only blank lines. If the copy and paste code doesn't work try removing extra whitespace using the delete key.
Opacity Borders
Red Opacity Border: 10 Pixels
Borders are usually around the outside of a photograph but this red border with 50% opacity applied is placed on the inside of the photograph. The color red blends with the background image and looks nearly orange from here.
Copy and paste this in your Blog or Web page.
It will look like this.
We used the image threebottles.jpg as a background in the first div.
In the second div we put a red border with opacity applied. This opacity
border example works in IE, Firefox, and Safari.
Tips to fit your Image:
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.
The first div that contains the background image is 300 x 225.
The second div with the border is 280 x 205.
- Image: threebottles.jpg
- Border: 10 pixels
- Background: 300 x 225 pixels
- Border: 280 x 205
- 300 - 20 = 280
- 200 - 20 = 205
Some blogging tools insert stray <br> breaks or <p> paragraph tags where you think there are only blank lines. If the copy and paste code doesn't work try removing extra whitespace using the delete key.
Polaroid Picture Borders
We ventured out into the garden yesterday to shoot some birds but the only thing that would stay still were these three bottles. Noded posts photographs with a Polaroid style border.
Method 1: CSS Inline Style
Copy and paste in your Blog or Web page.
It will look like this.
The code above was tested in IE 5.5, IE 6.0, and Mozilla Firefox. It should work in all browsers, if you don't see a Polaroid looking border in your browser please leave a message in the comments.
Method 2: CSS Style Sheet
CSS Style for Polaroid Border
For one-time or occasional use CSS Inline Style works fine.
If you want to reuse the Polaroid effect you can add a style
to your external style sheet or in the HEAD section
of your page.
Where do you put the style code?
If you are using a template look for the <style type="text/css"> and put the code below it. Noded added a class named polaroid to the style sheet for easy reference. The style looks something like this.
To reference polaroid and polaroidtext type this in your Blog or Web page.
Copy and paste in your Blog or Web page
It will look like this.
Combining Borders and Text Overlay
We used the threebottles.jpg image that is 300 x 225, but the CSS style
should work with any image size. The trick is the use negative spacing to move the text caption up inside the border in the polaroidtext rule.
More Picture Border Styles
- White Mattes
- Triple Matte and Border
- CSS White Borders
- Matted Style Border Gold: Float Left
- CSS Coded Opacity Borders
- CSS Filmstrip Frame Border
Sacramento Postcards
Image by Montage-a-Google
Let Montage-a-Google create a custom image for you. We entered the search term "Sacramento Postcard" to create this one, then framed it using the instructions for a CSS styled triple framed border.
Have you posted your montage? We spotted montages at TFS Reluctant, Brykmantra, (where we found it), Stu's place hidden here, atTheHeartOfIt (where Sallie tells you how to print the screen and paste the image in your graphic tool), and in Paris where Claude typed in "winter".
Shirl must have typed in "lighthouse". We spotted another at CrabAppleLane who then lead us to Kim's Place. More ...?
Big First Letter in CSS
? Why would we want to increase size of the first big letter? We saw a post that inspired us to try a bigger text float for the question mark. Asparagus does it quite nice with a question mark image.
But we want to use text instead of an image. We're hoping for a faster page load time and flexibility in colors.
Here we increased the font-size to a whopping font-size:150px; for the question mark and increased the line-height to 125 pixels line-height:125px;.
Using CSS styled text instead of graphics images gives us the ability to change the colors and the size of the text.
Copy and paste this in your Blog or Web page.
It will look like this.
? YOUR TEXT GOES HERE. Just continue typing after the first big letter or symbol. This text will be on the right side.
Two degrees of blog:
DocShazam lead us to
Brykmantra where we found
the Montage-a-Google. Montage-a-Google lets you type in your search terms then makes a montage from the images it finds. Try it. You'll get hooked.
of Magazine Style
PullQuotes in CSS
Mozilla Firefox and IE look the same
Pullquotes highlight a piece of text and add visual interest, and since we are all quoting someone or something lately it seems like a good time to go through a few styles. This one is subtle, not shouting. The pullquote text is defined as 150 pixels wide and it floats to the right. It will look like some of the pullquotes we see in a magazine. We used the color #D4D4C7. More color codes are here.
Sometimes the words don't flow quite the way we want them to so we added ellipses to the pullquote to change the flow. Also, this particular piece looks better when this left side of the text has text-align:justify; added to the paragraph tag. Your mileage may vary, ours did. This might look a little too tight with the paragraph text justified.
We didn't really want to look like a magazine anyway. This is a Blog. According to the current issue of Time Magazine "Most Bloggers Are Women". But ABC News one-upped them today saying that "Blog creators tend to be male, affluent, well-educated and young".
Most Bloggers are Women
Men may have taken the lead in the early (read: geeky) days of blogging, but that's not the case now. According to a survey of more than 4 million blogs by Perseus Development, 56% were created by women.
Time Magazine
December 2004
Blog creators tend to be male, affluent, well-educated and young; 70 percent of them have high-speed connections at home, and 82 percent have been online at least six years.
ABC News
Blog Creation, Readership Rises in 2004
NEW YORK Jan 2, 2005
Am I missing something here guys? When Time Magazine used the word "most" for 56% that in itself seemed misleading. I thought "over half" might be a better statement. Now we have the "blog creators tend to be male". We really should start giving up the right answer on the polls. We have them so confused.
Copy and paste this in your Blog or Web page.
It will look like this.
YOUR TEXT GOES HERE after the pullquote text. The pullquote text is defined as 150 pixels wide and it floats to the right. It will look like some of the pullquotes we see in a magazine. We used the color #D4D4C7.
