Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40
Filed in:CSS
Web Dev·The Web

Playing with Opacity

May 29th, 2008  · stk

Opacity is a CSS3 directive, but there's no reason not to start using it today. Apply it against the major browsers, validate it against the W3C CSS validator and I'll even show you a great "Before & After CSS Opacity Technique" for displaying your before-after photos

opacity overlay

hover to read

Using the CSS3 "Opacity" Directive: Future-Proof, Valid CSS and No CSS Hacks

opacity sidebar

The "Opacity" CSS directive is part of the CSS "level 3" Color Module, which is a "Candidate Recommendation". In a nutshell, this means that opacity isn't "ready for prime time".

Darn and phooey! You like opacity. And why not? It's fun to play with and you can achieve some nifty web effects using opacity. (I'll demonstrate an opacity technique that provides a great CSS-only way of showing "before" and "after" photos!)

Enjoy the MAGIC of Valid CSS3 Today!

What is opacity? Well, it's the opposite of transparency. Something that has 100% opacity is 0% transparent. Likewise, something with 0% opacity is 100% transparent.

The W3C (World Wide Web Consortium) recommends thinking of opacity as a post-processing operation. After an element (including it's children) is rendered into an image for the computer monitor, the opacity setting specifies how to blend the element into the final display.

Applying opacity to an element is easy. Simply specify the "opacity" directive to a selector and provide a value from zero to 1.0, where zero is completely transparent and 1.0 is completely opaque.

Of course, the difficulty is that the level 3 CSS candidate recommendations are only honored by a select number of web browsers, notably current versions of FireFox, Opera, Safari & Netscape. As usual, the Grand Pubah of browsers (Microsoft's Internet Explorer), doesn't adhere to this as-yet approved CSS directive.

That's the bad news.

The good news is that I'm here to tell you that if you want to use opacity for your web pages - you can! We have been for some time!

There's a way to use opacity for FireFox, Opera, Safari, as well as Internet Explorer 6 and Internet Explorer 7. (According to AWSTATS, a web server statistics program, 97% of our 113,728 April visitors used one of these browsers ... heck, that's about as close to "everyone" as you're going to get in this cross-browser world of ours!).

There's even a way to use opacity so that the CSS validates (to verify this, just click on the "CSS" validation button in the footer below)!

Best yet, it's completely future-proof and requires no CSS hacks.

OKAY ... you're primed and ready. You want to start using opacity.

All you have to do is read on, Cascading Style Sheet lovers ... read on ...

Read full story...

(Permalink)
Views: 51041 views
9 Comments · GuestBook
default pin-it button
Updated: 30-May-2008
Web View Count: 51041 viewsLast Web Update: 30-May-2008
Filed in:CSS
Web Dev·XHTML·The Web

Rockin' da Sidebah

December 22nd, 2007  · stk

Merry Christmas! How about a pure CSS technique to finish out 2007? Introducing "pop-Info" boxes, an XHTML/CSS-valid method of popping up sidebar information. It's cross browser compatible, written to standards and doesn't require any javascripting. (There's even a click-only version - same deal). Have a peek!

flower background pop-Info - (A CSS Technique for Popping Information)

popInfopopInfo jack-in-the-box

AFAIK everyone likes the <acronym> tag. Hey, it provides a nifty way to expand an acronym (or abbreviation ... or other abuses) into "more information". This detail shows in a tool-tip, when you move your mouse over it. Nice.

Normal Sidebar

This is an example of a sidebar (a short, often boxed, auxiliary news story that is printed alongside a longer article). It often contains additional, contrasting or late-breaking news.

On a web page, the sidebar breaks up the flow of the main article and takes up page real-estate. Why not have it display like an acronym (hidden ... until the visitor decides they want to see it)?

I expanded on the idea, using an info class with a <span> tag, to provide more information on a concept or word. Cool.

Unfortunately, it's limited to a short amount of text.

What if you want to include more information about some detail of the main article? What if you want to include an image? What do you do then?

In journalistic jargon, we've now entered the realm of the sidebar. A sidebar is a short news story, containing supplementary information, which is shown alongside the feature story, often in a box. It's similar to a pull-quote or callout.

What if a sidebar could display like an acronym, in some type of a tool-tip-type hover? Hmmm. After playing a bit with photo-caption zoom figure numbers, I got the idea that such an idea might be achievable. It is! Have a look at a popInfo Sidebar box "PopInfo"  Sidebar BOOM! A popping sidebar! Centered for liquid layouts, it can pop anywhere for fixed-width layouts. popInfo css toy Add images and other styling. It's XHTML & CSS-valid, cross-browser compatible (IE6, IE7, Opera, Netscape, FireFox, Safari) & we think it's a cool way of displaying "more information", saving page real estate and amping page SEO. .

For more popInfo examples, a click-version, the CSS and XHTML code, as well as a discussion on the method ... sally forth ...

Read full story...

(Permalink)
Views: 27662 views
9 Comments · GuestBook
default pin-it button
Updated: 3-Feb-2008
Web View Count: 27662 viewsLast Web Update: 3-Feb-2008

Four the Third Time

December 16th, 2007  · stk

Last week was an interesting one, for this website. We were hosted on a dedicated server (till a HDD failure), moved back to our yucky shared host and then finally settled with a new VPS (Virtual Private Server) host. Learn more about hosting option (we've now tried them all). :p

Web Hosting: Free, Shared, Dedicated & VPS
We've tried them all. Which is right for you?

 
 
 
 
 
 
 
 

With Christmas right around the corner, the last thing I needed was a server failure. Unfortunately, along with a high blood pressure diagnosis, the impending holiday season and four chickens rapidly outgrowing their temporary home ... that's exactly what happened.

Last week, we moved randsco.com from a failed dedicated server, back to our old shared host and then to a new VPS. We went from peachy Georgia, to too-big Texas and finally settled with all the lovers in Virginia. We went from an empty football field, back to cramped quarters of shared hosting and then to - what we hope is - a cozy condo.

Like Goldilocks, we had to try them all on, in order to find something that felt "just right".

For five years (1999-2004) we used a free web host. Then we moved to a shared web host account for three years (2004-2007). We outgrew that (about a year ago, actually), and had recently moved to a dedicated server, with some mates. However, after an unexpected hard disk drive failure, which knocked out our website for several days, we wondered if we were up for the rigors of a dedicated server.

After a bit of investigation, we've decided that a VPS host was more our speed.

If you're deciding on a web host or want to learn the differences between "free hosting", "a dedicated server", "shared hosting" and "Virtual Private Servers" (via a simple analogy) ... read on!

Read full story...

(Permalink)
Views: 6053 views
3 Comments · GuestBook
default pin-it button
Updated: 18-Dec-2007
Web View Count: 6053 viewsLast Web Update: 18-Dec-2007
Filed in:The Web
Web Dev

Preparing Photos for the Web

November 23rd, 2007  · stk

A 10-step, practical guide for preparing digital camera images for display on your website or blog. The software-independent guide covers important steps for editing, optimizing and working with photographic data files in JPG format. Several links to freely available, quality image-editing software packages are also provided.

A Practical "How-to" Guide for Using Digital Camera Images on the Internet

As a web-developer and b2evolution forum moderator, I often work with people (or companies) that are new to blogging, authoring web pages, the Internet or even *gasp* the computer. Most want to use digital camera images on their new blog or website. Many think that they can just upload the image files that they get from their digital camera.

A website has 30 seconds to impress. Take the time to prepare your digital images.

"Hey, it's a digital camera, right?"

In one sense, they can. The file format generated by most digital cameras is a JPG file, which is an ideal format for the Internet. But, even though it is possible to transfer the image straight from the camera, to a website, it would be a mistake.

This article will tell you why.

It will also provide a practical, 10-step guide for preparing digital camera images for the web. It will cover several basic, but important steps for editing, optimizing and working with photographic data files in JPG format. The guide is software-independent, but several links to freely available, quality image-editing software packages are provided.

If you are new to digital cameras, image-editing or JPG files and want to use your digital images on the Internet, on your blog or website, you will benefit from reading this practical guide.

Read full story...

(Permalink)
Views: 88289 views
6 Comments · GuestBook
default pin-it button
Updated: 15-Jan-2008
Web View Count: 88289 viewsLast Web Update: 15-Jan-2008
Filed in:Web Dev
The Web

Laughing on Linux

November 8th, 2007  · stk

After we moved Randsco to a dedicated Linux server, I've been able to (again) use UNIX line commands via shell access. Sweet. Here's a growing reference of Linux ditties (currently just a one-line recursive, global search & replace)

It's been ages (1999) since I've worked on a Unix operating system (Sun Microsystem - Solaris). Since our recent move to a Linux web-server, I've had fun dusting off my rusty memory of line commands.

Gosh, 'Nix is such a more robust operating system than DOS or XP!

In any case, I had the need to do some fancier-than-normal stuff and thought it would be a good idea to jot the commands down, in case I needed them again. So, here's my (slowly growing) list of tested, linux-based one-offs.

 

Read full story...

(Permalink)
Views: 14382 views
5 Comments · GuestBook
default pin-it button
Updated: 21-Nov-2008
Web View Count: 14382 viewsLast Web Update: 21-Nov-2008