Faded Background Image
Flip-flop the thought . . .
How can I make the background image fade using CSS opacity filters?
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.jpgto the name of your imagewidth:200px;to your image widthheight:159;to your image height
Happy Birthday Mandarin Rob...
Now that we have a spare image we can explore opacity filters with a background image. There are two divs in action here. The first div contains a background image that is 200 x 159. It is a simple div, used as a container for the rest of the code. The second div is inside of the first div. For simplicity it is the same width as the image.
DIV 400px Wide
The first div, where we put the image as a background, is defined as 400 pixels wide. Why? We just doubled the width of the image to make it simple. The width and the height both are required for Mozilla.
Background Image:200 x 159
The image is200pixels wide.
The right side text is200pixels wide.200 + 200 = 400
The image is automatically repeated with the repeat-x. We could use no-repeat.
The second div is the workhorse. It's applying the opacity and floating the text. To force the appearance that I want I'm defining the height on the right side opacity filtered text as 275px.
Copy and paste this in your Blog or Web page.
It will look like this.
Now that we have a spare image we can explore opacity filters with a background image. There are two divs in action here. The first div contains a background image that is 200 x 159. It is a simple div, used as a container for the rest of the code. The second div is inside of the first div. For simplicity it is the same width as the image.
Or like this if you change repeat-x to no-repeat.
Now that we have a spare image we can explore opacity filters with a background image. There are two divs in action here. The first div contains a background image that is 200 x 159. It is a simple div, used as a container for the rest of the code. The second div is inside of the first div. For simplicity it is the same width as the image.
The dotted borders are there so that we can see what the code is doing. Changing the color pink to transparent creates yet another effect. Opacity and transparency are fun to play with.
Copy and paste this in your Blog or Web page.
It will look like this.
Now that we have a spare image we can explore opacity filters with a background image. There are two divs in action here. The first div contains a background image that is 200 x 159. It is a simple div, used as a container for the rest of the code. The second div is inside of the first div. For simplicity it is the same width as the image.
For some reason Mozilla is demanding that this have a border. Otherwise, it misplaces
the paragraph text and lays it over the left side image. A cool effect, but not what I want. The border on this one is 1px solid white.
Sightings: SusanJayne used smaller images while Shirl did it in the sand.
Sunday: We made a code correction here. There was a.50c opacity that should be .50
Monday
Monday without a border
Add a triple border with inline CSS style.
A right-click on the image to view the properties tells us that this image is 200 x 159. To make the triple border, the width and height of the image is included in both the img tag and the div. The div surrounds the image to make the matted frame look.
Copy and paste this in your Blog or Web page.
It will look like this.
Add a triple border using named colors.
It's easier to see how the triple border works when we use color names instead of the hex color code. The color gold is a border that works well for a variety of pictures.
Copy and paste this in your Blog or Web page.
It will look like this.
We made this image with TypoGenerator. For a Monday I think she looks good without a border. More border options are here.
Sunday
This Land is Your Land
Campaign Update
It's the Bush-Kerry singing parody that that got 5 million hits in the first week and is still making national and international news.
Lyrics to JibJab Political Music
Deaf Translation
the best I can do right now...
To the tune of the song
THIS LAND IS YOUR LAND
Bush:
This land is your land
This land is my land
I'm a Texas Tiger
You're a Liberal wiener,
I'm a great crusader,
You're a Herman Munster
This land will surely vote for me
Kerry:
This land is your land (pointing to the trailer trash)
This land is my land (pointing to the green grass)
I'm an intellectual
You're a stupid dumbass
I'm a PURPLE HEART WINNER.
And yes, it's true I won it thrice (blows up waving people)
This land will surely vote for me
Bush:
You have more waffles than a House of Pancakes (pointing to a Waffle house)
You offer flip flops, I offer tax breaks.
You're a UN pussy (where pussy means wimp, baby, sissy, ???)
And yes, it's true that I KICK ASS! HA!
This land will surely vote for me.
Kerry:
You can't say NUCLEAR,
That really scares me (for the deaf, Bush pronounces it incorrectly as nuCUlar)
Sometimes a brain can
Come in quite handy
But it's not going to help you
BECAUSE
I WON THREE PURPLE HEARTS
This land will surely vote for me
Bush: You're a liberal sissy
Kerry:you're a right-wing nut job
Bush: You're a pinko commie
Kerry:You're as dumb as a door knob.
Bush: You got that Botox.
Kerry:But I still won three purple hearts
TogetherThis land will surely vote for me
Kerry:You're dumb as a door knob.
BUT I STILL WON THREE PURPLE HEARTS
Indian (speaks, not sings): This was my land (in serious Indian tone)
Crowd sings:But now it's our land!
Arnie: From CAL-e-for-n-ee-a
Clinton:
To the New York...
slap!
hey, what'd I do?
This land belongs to you and me
END
Bush: Oh, and Dick Cheney too (in a hushed tone out of the round hole as if he forgot to include Dick Cheney).
corrections and additions appreciated
Made with Typo Generator
EBC Susan found the typogenerator where you enter some text then let the typoGenerator search images.google to create a background from the found images. It uses random effects for your text and the images.
Right-click to Save
It's easy to save your image. Right-click to save the large image you make
or save it in the Gallery then copy the small version. The generator is slow but it's worth the surprise.
The link is good, just slow today.
How to Post Multiple Free Images
For multiple images repeat the IMG tag. We put our squares inside of a DIV with a width of 165 pixels to get the squares to display 3 x 3.
Copy and paste this in your Blog or Web page.
It will look like this.
Tag Board Spyware and Popups?
We Don't Want Precision Time
Fake Message by Precision Time
I think we nearly got hit by the Gator. The Google Bar that eliminates pop-ups is in place and works so well we nearly forgot that there were popups. But working locally we were getting popups. Where? On our Tag Board instruction page (no link intentional). To get rid of the adware I followed the instructions at Maintaining Your Own PC and then went to Get Rid of the Gator.
The popups wouldn't stop. The next step was to delete all offline content and all cookies. Didn't work.
It appears that the spyware, adware, and popups were in the Tag Board itself; not on this PC. Someone left a buggy message? I typed my own messages, enough to clear the board and it is fixed for now.
Did everyone else already know that a Tag Board could be used to serve popups from your page?
Dragonfly Squares
Those Little Squares
We cut Rob's dragonfly into little squares. Why? Images add visual interest and you can never have too many squares. We like the way some writers include a thumbnail sized image with every post. If you need an image we have plenty to share in the Gallery. Instructions are included for grouping multiple squares, bordering the squares, and applying the shadow filter.
Copy and Paste Instant Square
YOUR TEXT GOES HERE
Just keep typing after the image code is inserted.
The text will automatically wrap around the image.
Change the image name to any image here or from the Gallery. Hover over the square to see the name of the image. No link, no strings, just a bunch of free squares.
Copy and paste this in your Blog or Web page.
It will look like this.
YOUR TEXT GOES HERE
Just keep typing after the image code is inserted.
The text will automatically wrap around the image.
Change the image name to any image from the Gallery. No link, no strings, just a bunch of free squares.
Change the image name to any image here or from the Gallery. Hover over the square to see the name of the image. No link, no strings, just a bunch of free squares.
What does that code do?
1. Inserts an image named d1.gif2. Aligns the image to the left.
3. Makes your text wrap around the image.
4. Puts space between the text and the image.
The horizontal space hspace is 10. The horizontal space keeps the text from bumping up next to the image.
Overhead
Stu got struck by lightning. Quit laughing. It's true.
Sunday in the Garden
Rob took the picture in the garden just a few minutes ago. His vision is good, eh? And he found that little bitty square that tells people (who can see) how to upload an image. He thought kimnet might like this dragonfly picture.
Steal This Code!
Things You Can Do With Coke
1. Put it in a CSS Bordered Box:Dashed Border
Copy and paste this in your Blog or Web page.
It will look like this.
testing blogger.com using manual post from Friday
When Blogger Goes Ouch!
This post was manually entered and the post below was manually corrected. The Blogger tool is not working today.
There's a new look in Blogger today. It must be a test version in the very early stages. If you have it you will know it.
It inserts stray code, removes code (remember that trick from the last time, how it tried to correct your code?), spits out runtime errors, and the Blogger style sheet doesn't load if you use Mozilla so it's a wacky screen that spills all over itself.
Comment on the Blogger WYSIWYG
Blogger is hurting big time today. Even in IE it trashed our last post. When we retype it, the Blogger tool
will just rearrange the code the way the Blogger programmers think it should be. Not a good thing.
Leave the coding up to us Blogger.
Blogger Problems? The Blogger Status mentions only the Firefox problems. They either aren't recognizing the problems with Blogger inserting code and removing code or are ignoring the problem for those who hand code or customize the HTML and CSS.
If you are having problems let Blogger know. We can only report the problems we had with one single post and can't name all of them in one feedback form. It used to be so simple and easy to use. The complexities are commensurate with the errors it throws. Why wasn't simple good enough?
More?
The comments for this post are down one post - the glow filter post
Stupid Web Tricks
The Shadow Filter
You can shadow your text in Internet Explorer. The shadow filter looks a lot like the glow filter. And, it's just as easy to code.
| YOUR TEXT GOES HERE |
Copy and paste this in your Blog or Web page.
It will look like this.
| YOUR TEXT GOES HERE |
What does this code say?
Here are the details about this Table that you don't have to know.
- <TABLE> says we are using a table for our layout.
- COLOR="gold" says use the color gold for the shadow.
- <TR> and <TD> say that we are starting a new row and a new column.
- <BIG> says make the text that follows big.
- </BIG>says close the big text.
- </TD> and </TR> say to end the table column and the row.
- The </TABLE> says end our table
Frequently Asked Questions
Check out the new visual Frequently Asked Questions index.
Magazine Pullquote
with Opacity .75
Fixing for ie...
Fixing for ie in progress...a little spill was noticed in IE.I'm leaving the test fix code in so that you can see what is going on behind the curtain. The solution for IE was to explicity tell it the width (for this left column).
To fit it neatly about 400px would work but for the copy and paste the <div style="350px;"> was added. Nearly everyone has at least that width in the post area. Increase or decrease as needed. Right now both browsers are happy.
We are using the color named black with an opacity of 75%. Copy and paste the code and replace Black with any named color. It only looks like a rigid inflexible grid, but you can break out of the grid. Say what you want the way you want to say it.
Change the color, change the words.
You can type as much as you want here. We are defining the line-height, what we called Leading (prounounced like a "lead" pipe) as in Col. Mustard in the kitchen with a lead pipe, or maybe that was Col. Mustard in the Library with a Hammer.
Anyway, when we used -1em the lines were too tight, and using -0.9em the letters were still too tight. So we tried not specifying a line height it just all runs together.
So right now we are using font-size: 28px;line-height:26px;. You may notice that the word grid has no bottom to the g. There's a name for that in typography, it's called you fill in the ____. We cheated and changed the size of the last line. It has a bottom now. In our browser.
Copy and paste this in your Blog or Web page.
It might look like this.
This example uses the color named Black. Copy and paste the code and replace Black with another color. It only looks like a rigid inflexible grid, but you can break out of the grid. Say what you want the way you want to say it.
or brown . . .
Copy and paste this in your Blog or Web page.
It might look like this.
This example uses the color named brown. Copy and paste the code and replace Brown with another color. It only looks like a rigid inflexible grid, but you can break out of the grid. Say what you want the way you want to say it.
Some colors you might want to try...
Web Color Names Chart | |||
| aliceblue #F0F8FF | antiquewhite #FAEBD7 | aqua #00FFFF | aquamarine #7FFFD4 |
| azure #F0FFFF | beige #F5F5DC | bisque #FFE4C4 |
black #000000 |
| blanchedalmond #FFEBCD | blue #0000FF | blueviolet #8A2BE2 | brown #A52A2A |
| burlywood #DEB887 | cadetblue #5F9EA0 | chartreuse #7FFF00 | chocolate #D2691E |
| coral #FF7F50 |
cornflowerblue #6495ED | cornsilk #FFF8DC | crimson #DC143C |
| cyan #00FFFF |
darkblue #00008B |
darkcyan #008B8B | darkgoldenrod #B8860B |
| darkgray #A9A9A9 | darkgreen #006400 | darkkhaki #BDB76B | darkmagenta #8B008B |
| darkolivegreen #556B2F | darkorange #FF8C00 | darkorchid #9932CC |
darkred #8B0000 |
| darksalmon #E9967A | darkseagreen #8FBC8B |
darkslateblue #483D8B | darkslategray #2F4F4F |
| darkturquoise #00CED1 | darkviolet #9400D3 | deeppink #FF1493 | deepskyblue #00BFFF |
| dimgray #696969 | dodgerblue #1E90FF | firebrick #B22222 | floralwhite #FFFAF0 |
| forestgreen #228B22 |
fuchsia #FF00FF | gainsboro #DCDCDC | ghostwhite #F8F8FF |
| gold #FFD700 | goldenrod #DAA520 | gray #808080 | green #008000 |
| greenyellow #ADFF2F | honeydew #F0FFF0 | hotpink #FF69B4 | indianred #CD5C5C |
| indigo #4B0082 | ivory #FFFFF0 | khaki #F0E68C | lavender #E6E6FA |
| lavenderblush #FFF0F5 | lawngreen #7CFC00 | lemonchiffon #FFFACD | lightblue #ADD8E6 |
| lightcoral #F08080 | lightcyan #E0FFFF | lightgoldenrodyellow #FAFAD2 | lightgreen #90EE90 |
| lightgrey #D3D3D3 | lightpink #FFB6C1 | lightsalmon #FFA07A | lightseagreen #20B2AA |
| lightskyblue #87CEFA | lightslategray #778899 | lightsteelblue #B0C4DE | lightyellow #FFFFE0 |
| lime #00FF00 | limegreen #32CD32 | linen #FAF0E6 | magenta #FF00FF |
| maroon #800000 | mediumaquamarine #66CDAA | mediumblue #0000CD | mediumorchid #BA55D3 |
| mediumpurple #9370DB | mediumseagreen #3CB371 | mediumslateblue #7B68EE | mediumspringgreen #00FA9A |
| mediumturquoise #48D1CC | mediumvioletred #C71585 |
midnightblue #191970 | mintcream #F5FFFA |
| mistyrose #FFE4E1 | moccasin #FFE4B5 | navajowhite #FFDEAD | navy #000080 |
| oldlace #FDF5E6 | olive #808000 | olivedrab #6B8E23 | orange #FFA500 |
| orangered #FF4500 | orchid #DA70D6 | palegoldenrod #EEE8AA | palegreen #98FB98 |
| paleturquoise #AFEEEE | palevioletred #DB7093 | papayawhip #FFEFD5 | peachpuff #FFDAB9 |
| peru #CD853F | pink #FFC0CB | plum #DDA0DD | powderblue #B0E0E6 |
| purple #800080 | red #FF0000 | rosybrown #BC8F8F | royalblue #4169E1 |
| saddlebrown #8B4513 | salmon #FA8072 | sandybrown #F4A460 | seagreen #2E8B57 |
| seashell #FFF5EE | sienna #A0522D | silver #C0C0C0 | skyblue #87CEEB |
| slateblue #6A5ACD | slategray #708090 | snow #FFFAFA | springgreen #00FF7F |
| steelblue #4682B4 | tan #D2B48C | teal #008080 | thistle #D8BFD8 |
| tomato #FF6347 | turquoise #40E0D0 | violet #EE82EE | wheat #F5DEB3 |
| white #FFFFFF | whitesmoke #F5F5F5 | yellow #FFFF00 | yellowgreen #9ACD32 |
|
Color names are recognized by browsers but not all colors are recognized by all browsers. Serious developers may want to use the hex code for cross-browser compatibility. The color names in this chart were tested in current versions of Internet Explorer, Mozilla, and Netscape. | |||
Typographic Control
Leading and Kerning
CSS allows you to control Kerning and Leading by adjusting the line-height and the letter-spacing.
Leading
Leading is the spacing between lines. If you want to make your font more readable you can adjust the CSS default spacing between lines. The default is 120% of the type size. Let's see this in action.
Leading Example 1: Line-height: 120%
This is a small font with the line-height set to 120%. The default is 120% of the type size. So, the line height here will be the same as the default. This text is easy to read for those with perfect vision.
Leading Example 2: Line-height: 140%
This is a small font with the line-height set to 140%. The default is 120% of the type size. So, the line height here will be a little more than the default and in many cases will be a little easier to read.
Leading Example 3: Line-height: 150%
This is a small font with the line-height set to 150%. The default is 120% of the type size. So, the line height here will be a little more than the default and in many cases will be a little easier to read.
Copy and paste Example 2: Line-height: 140%
Copy and paste (or type) this in your blog or Web page.
It will look like this.
This is a small font with the line-height set to 140%. The default is 120% of the type size. So, the line height here will be a little more than the default and in many cases will be a little easier to read.
Kerning
Kerning is the spacing between letters. Adjust the kern for headlines, subheadings, or other special effects. If you want your letters spaced tighter than normal you can adjust the CSS spacing between letters using a negative number. Let's see this in action.
Kerning Example 1: Letter-spacing -1px
You can decrease the kern by specifying a negative number like letter-spacing:-1px;.
This is a line of large text with the letter-spacing defined as -1px.
This is a line of large text without the letter-spacing.
Copy and paste (or type) this in your Blog or Web page.
It will look like this.
Your Text Goes Here. The text will be tighter than usual.Kerning Example 2: Letter-spacing 4px
The letter-spacing here is 4px
Copy and paste (or type) this in your Blog or Web page.
It will look like this.
YOUR TEXT GOES HERECSS
The line-height and letter-spacing can be specified in your external style sheet, internal style, or inline.
Mr PicassoHead
Make your own graphics. You can make your own Mr. Picassohead at Mr PicassoHead. It's an easy drag and drop that comes with a gradient blue to green background.
Print the screen to your clipboard (press Print Screen) to save the image then paste it in your favorite graphic tool. We used the magic wand in Adobe to remove the background from this Mr. Picassohead.
Make your own logo or banner. Labelmaker doesn't look fancy at first glance but you can create some wild banners. It's quick and easy. Make your free banner text online then right-click to save it.
Copy and paste this in your Blog or Web page.
It will look like this.
Make your own graphics. You can make your own Mr. Picassohead at Mr PicassoHead. It's an easy drag and drop that comes with a gradient blue to green background.
A Few Good Blogs . . .
BLAST FROM THE PAST
Women and Tech Blog Prom
BLAST FROM THE PAST
Deaf Blogger Signin
Grapes of Wrath
Rob just came in with this backyard photo of the grapes and caught me sucking the life out of it in Adobe®.
"You're stepping on my grapes..."
"The men were silent and they did not move often. And the women came out of the houses to stand beside their men to feel whether this time the men would break."