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
How Wide?
We need to see if it is too wide to fit in the sidebar. It looks like it is about 250 pixels wide (it adjusts to 90% of the space available).
S
I
T
T
I
N
G
PRETTY
NO PHOTOGRAPHY OF CONOR OBERST
How wide is it in pixels?
200 pixels?
250 pixels?
We made a minor update to the original code. The size and letters are adjustable. Another example is here.
Sightings
Cindy did it in the color named darkslateblue. Looks great.
JR at Noded posted a nice rendition. And I think we missed
Kimnet's
version.
Google
Tips and Tricks
We all know what "google it" means. But there is so much more that Google can do that we have lost track. Our latest toy is Google Earth. It's a Google download (free) but worth the exploration, allowing us to fly from space into our own neighborhood then over to your place. Mindless exploration that can turn into a great time sink. Hours of fun.
Are there some favorites that we don't know about or forgot? Got a Google tip or trick that we can add to the list?
Google Cheat Sheet
Google Zeitgeist
GoogleFight
Google: Add Your Page
Google Page Rank
Google Maps
Google Blog
Using Google Earth, teachers can fly their students around the world to talk to them about issues like climate change and how it has affected places like Glacier National Park, the Chesapeake Bay and Los Angeles. And they can introduce students to community initiatives across the country where volunteers are cleaning up their cities, planting trees and beautifying. Using Google Earth, teachers can show their students placemarks of the towns where outreach projects are taking place and students can get involved in cleaning up their own environment.
GoogleBlog
More
Google stuff?
Kim likes Google Page Creator(Beta) where our non-technical friends can create web pages, quickly and easily.
Claude uses the define:word function in
Google
that returns a number of definitions for your word. She says to try
define:blink tag ;-)
Google and
ihackstuff.com
A site dedicated to finding interesting stuff at Google. Secrets. Passwords. And more. Yes, they have a top ten. Let us know if you find anything particularly interesting.
Montage-a-Google
Montage-a-Google lets you type in a site name or try your city name. Creates a Montage of related Images.
Google Sketchup
Google unveiled Google Sketchup yesterday.
It's a free 3D image-making technology.
Scrolling Marquee and Opacity
Ouch! Someone at digg made a comment about the CSS Opacity series we began a year or two ago and continue to document here, here, here, here, and here in the Blog.
He said something about opacity being as useful as the marquee and blink tag.
So what did we do? Immediately went off to see if opacity works on the marquee tag. Ouch! It works in IE, Firefox, and Opera. Don't do it. Please, if you do it don't tell anyone we told you how...
Ready? Here goes...we'll show it just this once and never again. We promise?
Copy and paste in your Blog or Web page.
It will look like this.
Marquees: Scrolling Text Spottings
Kimnet did it in color,
Shirl couldn't resist it,
Malaposta put it in the sidebar (brave one), Cindy (loo who) is playing along in violet. Julie did it, and if
Blogging in Paris hadn't done it in the sidebar we would never have known to click on the link that goes to Claude's Daily Snap.
Double-dog-dare
Whoa, Stu took the dare with a fast scroll (there's a double-dog-dare in the comments that we were going to change to a triple-dog-dare for Stu, but he already did it). Great fun. Put your secret decoder ring before you visit Stu. He's going to lead you to Wired News Typo Confounds Kryptos Sleuths where we learn more about
the sculpture that Dan Brown references in the book jacket for The Da Vinci Code and why Kryptos have not been able to solve the fourth section.
JR at Noded did it sideways. JR? E'tu? Isn't HTML and CSS sacred to anyone?
RoadApples defiantly deviated from the double-dog-dare and the triple-dog-dare. He couldn't do it. Probably worried that one of his students might see it ;-)
Daisy did it. Yes, she did.
Across the continents, even Gondolier got trashed in the sidebar. Cornelia (the better side of Stu) made a nice tulip banner for a birthday. That one is quite nice.
Don't Try This At School
Gee whiz, I just remembered why we keep it clean here. There are school children and adult students who are given Mandarin specific assignments. Students, this is against the rules. Whose rules? Serious developers. The <marquee> is a "no no".
More...
Mount St. Helens Web Cam
Volcano Cam
Mount St. Helens has been in a constant eruptive state since October 11, 2004.
The USDA Forest Service allows and encourages
direct linking to the Mount St. Helens VolcanoCam, the closest
operating camera to Mount St. Helens. Hover over the image to see the title tag. Now that's a title! The image updates about every five minutes.
Dimensions
The dimensions of the
volcano cam image are 640x480.
To maintain the aspect ratio the image can be
posted with the following dimensions.
- 300 x 224
- 250 x 187
- 200 x 150
- 150 x 112
- 100 x 75
The size of the .jpg image file ranges from about 25KB
to 30KB
so it will add weight to the page even when we post it at
width="250" height="187"
We can shrink the size of the display but
we can't change the weight of
the image.
Copy and paste in your Blog or Web page.
It will look like this.
of SaddleBrown
Web Color Names Chart
For this drop cap we want to force the first big letter to span about four or five lines. The font-size for the big first letter is exactly 100 pixels while the line height is 70 pixels. We tried a line-height of 80 but that leaves a little too much white space. A top padding of 2 pixels allows the first big letter to align with the top of the first line of text. Two pixels is a slight drop. No math, just guestimating.
Copy and paste this in your Blog or Web page.
It will look like this.
For this drop cap we want to force the first big letter to span about four or five lines. Of course we have to type about four or five lines of text to make it work.
The secret of saddlebrown? We just wanted an excuse to use Morgan's new design background color Saddlebrown in a drop cap. The full drop cap tutorial is here. The color chart is here. And that's the secret of saddlebrown.
The April Quilt
Alphabet Blocks
MOREALPHABETBLOCKS
Alphabet blocks are a fun way to bring life to text with CSS. We are trying some new colors and letters for the text, background, and the border. The code is simple and the color combinations are experimental. Let's fiddle with some colors while we drink the morning coffee.
Copy and Paste this in your Blog or Web page.
It will look like this.
Your text goes here in this paragraph. Just keep typing.
MOREALPHABETBLOCKS
Your text goes here in this paragraph. Just keep typing.
Copy and Paste this in your Blog or Web page.
It will look like this.
Your text goes here in this paragraph. Just keep typing. We borrowed this boxed cap color combination from Shirl.
Bullets in HTML and CSS
...I have a question for you. I'd like to format a list with bullets, how do I do that without having to insert the url of the bullet image everytime? For example, I'd love to have a list of urls here Do you have an idea to make this pretty?
Claude, in HTML there are unordered lists <ul>, ordered lists <ol>, and definition lists <dl>. We can use CSS to style the ordered list for this example.
Unordered List with the Default Bullet
An unordered list in plain HTML looks something like this.- This is one <li> list item
- This is one <li> list item
- This is one <li> list item
Copy and paste this in your Weblog.
It will look something like this.
- This is one list item
- This is one list item
- This is one list item
Ordered List with a Custom Bullet
We like to use a custom bullet on the Text Tips Index page. We style the ordered list OL to make our custom bullet appear automatically. We are using a simple down-arrow.gif that looks like this.
Add the graphic to your CSS.
It's a one line addition to the CSS style and you never have to type the name of the graphic again. We keep our CSS in an external style sheet If you are using a template the style might be between the HEAD and /HEAD section of your template. We use an image named downarrow.gif 
Copy and paste this in your CSS.
The HTML will look something like this.
And the final style will look like this.
- This is one list item
- This is one list item
- This is one list item
Pretty? No. Functional. Yes. Your graphic diamond.gif will look great. Just change bullet.gif to your image name.
Blogging Around...
Overheard: Kimnet has some old black and white photos posted with gems of insight on each one.
"i dunno. my mother had always been, ya know, middle aged. of course she'd mentioned being younger at one time, and other people had supported that. but there'd been no physical documentation...
~Kimnet
Here's a black and white of Stu. He still has that dress ;-)
More?
Faded Opacity Background Image
Flip-flop the thought . . .
How can I make the background image fade using CSS opacity filters? I want the opacity to work in Mozilla, IE, and Opera.
Opacity Background in Mozilla and IE
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
Is this code working? The syntax is correct. If you are using Blogger it changes our background so we are just playing along and using what Blogger wants in the copy and paste. Does the code work for you?
