2004: The Year of the Blog
Happy New Year! Do you have any New Year resolutions? Predictions? We're having a party here in the Blog. Join us. Tell us a little about yourself, where you live, where you've been, where you are going.
Mozilla, IE, or Opera?
YOUR SUBTITLE
MORE...
Want to make the cover of Time? We inserted an image that is 100 x 100 pixels in our Time Magazine cover template. The rest is CSS.
The December edition of Time includes the article Ten Things We Learned About Blogs.
Copy and paste this in your Blog or Web page.
It will look like this.
YOUR SUBTITLE
MORE...
News: Stu alerted us to the earthquake in Sumatra. The death toll is in the thousands. Stu is waiting for word from blogger friends vaja and gumz. We are waiting for word from Reike and son Dipta in Indonesia. CNN reports the death toll at over 10,000.
Tsunami Update 12/31/2004
Blogs from around the world are offering instant witness reports from the region affected by the Indian Ocean earthquake and tsunami that the traditional media cannot match, as well as links to relief groups for readers seeking to provide immediate help.
from: Bloggers offer witness accounts...
source: Agence France Presse English, December 30, 2004.
via: 
HighBeam Research
More Tsunami Links
U.S. tsunami aid skyrockets to $350MSlammed by a Tidal Wave, but I'm OK
The South-East Asia Earthquake and Tsunami
Tsunami First Hand Accounts
Some of the Tsunami First Hand Accounts via WorldChanging.com
- insomnia
- http://www.kiruba.com/
- http://www.sumankumar.com/
- http://radio.weblogs.com/0128043/
- http://www.command-post.org/nk/
- themoderatevoice.typepad.com
- http://www.boingboing.net/
- http://www.boingboing.net
- http://www.clarkefoundation.org/
- http://www.haaretz.com
Colorizing images is easy when you use the step-by-step instructions in the short tutorial Colorizing Images in Adobe by Lynn Rockwell. The best part is that you don't have to use Adobe to follow along. The technique Lynn uses to add color to a black and white photograph is easy with any graphic tool. Michelle at 2flower said "I used PSP 7 instead of Photoshop, but the tutorial still made sense to me". Megumi used Lynn's colorizing tutorial to create this image.
of Magazine Style
Drop Caps in CSS
Mozilla Firefox and IE look the same
For this one we want to force the first big letter to span about five lines.
The font-size is adjusted to exactly 100 pixels font-size:100px; while the line height is 70 pixels line-height:70px;.
We tried a line-height of 80 but that leaves a little too much white space.
To make the top of the first big letter align with the text a padding of 2 pixels padding-top:2px; was added to make the initial letter
drop down ever so slightly.
No math, just guessing.
Magazine or novel style drop caps can add interest to a page if there is enough text to make the
adornment work well. We need more text to get the look we want here.
Actually for this example we need a lot more text since the drop cap is big.
Copy and paste this in your Blog or Web page.
It will look like this.
For this one we want to force the first big letter to span about five lines.
The font-size is adjusted to exactly 100 pixels font-size:100px; while the line height is 70 pixels line-height:70px;.
We tried a line-height of 80 but that leaves a little too much white space.
To make the top of the first big letter align with the text a padding of 2 pixels padding-top:2px; was added to make the initial letter
drop down ever so slightly.
Overlay an Image on an Image
Method 2
So what's with that duck and the guitar kid? It's two images, the kid on top of the duck. Someone wanted to
know how to use a div to overlay an image on top of an image.
And so we did. It's a two div ditty that goes something like this.
We used transparent images just because we have a couple handy and it worked on the first try.
ducksmall.gif samtrans1.gif
We have two transparent images we copied from the Mandarin Free Gallery. It isn't necessary to use transparent images if the background image is bigger than the foreground image. The code is the same.
-
First we use a
divto put an image in the background using the optionno-repeatso that it only displays once. The duck background image is only 50 x 50 pixels but we made thedivwidth and height big enough to hold the guitar image which is 100 x 100 pixels. -
The second div (a nested div) contains the guitar image we want to overlay on top of the duck background image.
Copy and paste this in your Blog or Web page.
It will look like this.
And since we floated the two images we need to type in enough here to align the text to the right of the images or properly clear the bottom which is not what I want to do right now. What are the advantages of overlaying an image on an image? Or text over an image? First you don't need fancy graphic software. The images are small and download faster than if we combined the two images into one. The same is true with text on top of an image. The download time for text is fast compared with an image. The clarity is usually good on the text, it depends on the font, the size and the background you use.
Overheard: Gary noticed that Mandarin is on the list for Best Tech Blog, so of course I already voted. The link is here 2004 Weblog Awards. We don't have many votes but there might be a few new blogs to check out.
Overlay an Image on an Image
Method 1
- Display the background image with a
div - Define the desired width and height.
- Insert the smaller image
Copy and paste this in your Blog or Web page.
It will look like this.
We used a small transparent image for the overlay.
You can use any image type and as many images as you want to overlay.
The background image can be any size.
We used an image that is about 300 x 225.
Notice that the background is defined smaller than the actual image, 175 x 225 pixels. Any width and height will work.
