Blockquotes with Image Quotes
Sometimes we like to add an image to the blockquote style.
For this one we
added the quote image named quote.gif to the blockquote
tag and added the unquote image unquote.gif to the paragraph <p> tag.
This is a blockquote with an image, the beginning quotation mark. We can make it with an end quote too by adding another image named unquote.gif.
We only have to add the style sheet code once. Then we can automatically put the quotes in the blockquote by typing in the class name like this.
<blockquote class="withquote">
<p class="withunquote">
The quote goes here
</p>
</blockquote>
CSS Blockquote in Style Sheet
Copy and paste this CSS in your style sheet.
Copy and paste this in your Blog or Web page.
It will look something like this.
This is a blockquote with an image, the beginning quotation mark. We can make it with an end quote too by adding another image named unquote.gif.
Instant CSS Blockquote with Images
This is inline CSS. This gives instant results if you don't want to add the style to your style sheet. Let's see what happens when we make the quote long enough to make sure that the unquote.gif and the words do not overlap.
Copy and paste this in your Blog or Web page.
It will look something like this.
This is inline CSS. This gives instant results if you don't want to add the style to your style sheet. Let's see what happens when we make the quote long enough to make sure that the unquote.gif and the words do not overlap.
CSS Blockquote in Color
Update: Here are a few more colors. Right-click on the image to save it.
If any of you have a good selection of blockquotes or the tools to make a good set please share them with us.
Centered Image Float
We wanted to see how the postcard would look floated in the middle of two columns. We dropped the picture down only 1 pixel from the natural flow. It works in orange and blue flavored browsers.
This is the right side text. Haven't you ever wondered how to center the image in your Blog or Web page and let the text wrap around the image? It's easier than you think. The only calculation is to half the size of your picture, and half the size of the column if you don't want to use the width in the copy and paste code. We are using an image that is 160x239. We see the center float in magazines but not in Blogs. It's easy with the copy and paste code.
We made two columns with two div tags.
This is the left side of the two columns with an image that is floating in the center. The left and right columns are both floating with
half of the image in the left column and half
of the image in the right column. There is only
one image and inserting the image is relatively easy.
It does look best when each column has about the
same amount of text so I am typing a few extra words
here on the left side.
Copy and paste this in your Blog or Web page.
It will look like this.
Centered Image Float
We wanted to see how the postcard would look floated in the middle of two columns. We dropped the picture down only 1 pixel from the natural flow. It works in orange and blue flavored browsers.
This is the right side text. Haven't you ever wondered how to center the image in your Blog or Web page and let the text wrap around the image? It's easier than you think. The only calculation is to half the size of your picture, and half the size of the column if you don't want to use the width in the copy and paste code. We are using an image that is 160x239. We see the center float in magazines but not in Blogs. It's easy with the copy and paste code.
We made two columns with two div tags.
This is the left side of the two columns with an image that is floating in the center. The left and right columns are both floating with
half of the image in the left column and half
of the image in the right column. There is only
one image and inserting the image is relatively easy.
It does look best when each column has about the
same amount of text so I am typing a few extra words
here on the left side.
The copy and paste code will let you see instant results. We are using inline style. The CSS Style for Centered Image Float contains the full CSS.
How to Float Your Boat
In the FAQ page there are a few ways to float your boat. Jeralyn of
TalkLeft ran into an older post that needed to be updated. The good part is that she let us know that the floated image with a border wasn't working quite right. It's new and improved now.
This version Float Left with Less Code works well thanks to some tips from JR and Doc Shazam a long time ago. Hey if you click on JR you can see Mr. Sandhill Trek (fp) in color. In an experiment they are exposing Bloggers to direct sunlight. Don't try this at home.
One of the postcard people, Rob in Louisiana, watched Hush... Hush, Sweet Charlotte last night. An old movie where Charlotte is shunned for the grizzly murder of her love, John. Her guilt was never proven, but the murder is like one of a modern-day Lizzie Borden and Charlotte is taunted with cruel rhymes. The song from the movie went something like this.
...And every night after he shall die. Yes every night when he's gone. The wind will sing to you this lullaby. Sweet Charlotte was loved by John...
Hush Hush, Sweet Charlotte
Hush hush, sweet Charlotte
Charlotte, don't you cry
Hush hush, sweet Charlotte
He'll love you till he dies
Oh, hold him darling
Please hold him tight
And brush the tear from your eye
You weep because you
had a dream last night
You dreamed that he said goodbye
He held two roses within his hand
Two roses he gave to you
The red rose tells you of his passion
The white rose his love so true
And every night after he shall die
Yes every night when he's gone
The wind will sing to you this lullaby
Sweet Charlotte was loved by John
The pullquote (or pullout) is flexible and coded to fit your page. We used font-size:large;. You can change the large to small. Change the font size to any size including small, normal, large, x-large and more. The width here is 130px. To make it more narrow change 130px; to 100px. It's all adjustable.
Copy and paste this in your Blog or Web page.
It will look like this.
...And every night after he shall die. Yes every night when he's gone. The wind will sing to you this lullaby. Sweet Charlotte was loved by John...YOUR TEXT GOES HERE. TYPE AS MUCH AS YOU WANT.
Things you can change
- Background color
#882D00. - Text Color
darkorange - Width
130px - Font Size
font-size:large;
Lay Color Over an Image Using CSS
This is the same image repeated with transparent color put over the image using CSS. There is no change to the image itself. It's all done with CSS and it's easy to do.
We did it here by adding one line of code defining the level of opacity and the color to use in the background.
<td style="background:orangered;
filter:alpha(opacity=30);opacity:.30;"></td>
Use a Table to apply Opacity Overlay
- Make the image the table background.
- Add color and opacity to the
TD.
We defined the table to be 160 X 239, the same size as the image. But,
any width and height will work. The image repeats if there is room, if the defined width and height are smaller than the image then only the defined size will display. We used opacity to lay color the orangered over the image.
Overlay Image with color:orangered
Original Postcard Image
Copy and paste this in your Blog or Web page
It will look like this.
Code you can change.
-
Change the background image name from
postcard1.jpgto the name of your image. - Change the color
orangeredto any named color. - Change the opacity. We used 30%. You can use 10 or 20 or 90.
- Change the border or remove it.
Why We Used a Color Overlay
Why would you want to apply opacity over an image? For us it is simply so that we can save download time. We have paid the price in load time the first time the image is displayed. Now, each time we reuse the image it's in cache and is nearly free in load time. We can repeat the same image a number of times and the page should still load fast. Also, our original scan is not a quality scan and we may be able to hide that with a color overlayed on top of the postcard1.jpg image.
Notice that the table border does not have opacity applied.
The opacity is only applied to the table data TD tag.
Example of Overlay Colors
background:lightseagreen
background:chartreuse
background:crimson
background:orange
background:black
There's more about Opacity and colors in the tutorial CSS Opacity Color Tips and Tricks and in CSS Opacity Applied to Background.
Named Web Colors
We can use the same
postcard1.jpg image as a background to the named color table to take a quick peek at how each color looks overlaid over the image.
|
Overlay Image With
Named Colors
40% Opacity | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Overheard: Stu pointed us to Copyscape where you can see who is copying your page. Cool! All that work to make the darn color chart and people are actually using it. Whew. And did you notice that Stu is not hyperlinked? I think the flattery is in that we know one another well enough that we don't have to hyperlink. That's close friends (or an attempt to annoying Stu).
New postcards in...
