Please don't read this!
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.
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.
Copy and paste in your Blog or Web page.
It will look like this.
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
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.
Copy and paste in your Blog or Web page.
It will look like this.
This version will work better with Blog tools.
S
I
T
T
I
N
G
PRETTY
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 our text returns to our normal color after the code ends.
