with Lorelle and Brent VanFossen

Hoaxes, Rumor Mills, Chain Letters, and Online Trash

Make money now! Send this email to 10 people in the next 5 days…! Boycott X! Did you know you can die from soap scum? Be terrified. Be warned! Be afraid! Be happy! Spread the good word! Share with your friends! Tell everyone you know! Excuse me, before we get too carried away here, STOP!

If you get email from anyone, including friends or relatives, that promotes get rich, forward this email, or offers some terror or warning, STOP. Take a moment and breath. This is not the end of the world. In fact, the email itself might be more horrible than the warning or information included. These are all part of the unrecognized SPAM (unwanted email) spreading across the Internet like a plague. They are part of the rumor mills, chain letters, and hoaxes that litter the Internet and email inboxes around the world. Before you click the forward button, check out the information to see if it is real first. And stop the spread of online litter.

Here are a few examples of the most popular and recent hoaxes going around. Remember, these are lies, made up stories, totally fake, and not real.:

  • On September 11, 2000, Daisy the dog saved over 1000 people from the World Trade Center.
  • A legal looking email tells you that if your surname matches the name of some dead wealthy person living overseas, you may have just inherited millions of dollars. “If you respond and confirm this email, we will send you more information…”
  • Hotmail, the free email acount service by Microsoft, is shutting down because too many people are applying for accounts.
  • Emails claiming to be from Visa, MasterCard and other popular credit cards and financial institutions want you to visit “their Website” to stop from losing your credit privileges or to inform you that there has been fraudulent use of your credit card. If you respond, it asks you to confirm your personal information including your credit card data.
  • Many changing rooms and public restrooms are using two-way mirrors to peek and spy on you. Using your fingernail, you can test the mirror to tell if it is a real mirror or a two-way mirror to prevent “visual rape”.
  • Signing up with the “National Do Not Email Registry” will stop spam and unwanted email. [Currently, there is no such registry and never has been]
  • A man is suing CBS, Janet Jackson and Justin Timberlake for an on-air incident involving the exposure of one of Ms. Jackson’s breasts. Steve Bosell of Corona, California has filed a lawsuit claiming that the incident left him physically ill, induced vomiting, psychologically scarred his children and has ruined sexual relations with his wife.

All of these are completely fake, hoaxes, rumors and lies! Honestly, before you hit the foward button, check it out. You can start more aggressively with one or more of the Websites listed below that specifically deal with the rumor mills and hoaxes going around the Internet. And trust me, they repeat on a regular basis. We keep seeing the same hoax going around warning you to search your computer for a specific file and delete it because it is a virus, when the file is actually part of your operating system and you just screw up your computer all by yourself without the help of an email virus.

Be warned and don’t trust even the most helpful of friends and family – check first!

File Sharing – Kazaa, Kazaa Lite, eDonkey, Bit Torrent, LimeWire, and More

Living overseas away from easily accessible mail order, stores, and media outlets, as well as most of our personal music and video collection, we are truly blessed to be able to take advantage of peer-to-peer file sharing programs to allow us to hear and see media that we miss terribly. There is a lot of talk about how bad the file sharing services are, how packed full of viruses and abusive they are. As user of some of these services, and representing the majority of these users, we can mostly say good things about it.

We will also share with you some tips and tricks we’ve learned along the way and tell you about the various programs available for file sharing and peer-2-peer networks.

The recording industry and others are doing their very best to shut these services down, but guess what, folks? Too late. They provide a valuable service above and beyond all the hype and drama. We have learned a lot of tips and tricks about using these programs, too. But for us, they are a way to access media and resources we can’t find living overseas.

According to research by two economists, Felix Oberholzer-Gee of the Harvard Business School and Koleman Strumpf of the University of North Carolina at Chapel Hill, peer-2-peer file sharing has little or no relationship to a loss of income from the recording industry. Their study, reported in the New York Times and elsewhere, found that just because people download files doesn’t mean they will or won’t pay for the CDs. Blaming the file sharing services for the recent losses in the record industry, they concluded, overlooks the more dramatic justifications for losses in slow and bad economies worldwide and other economic trend reasons. Other research, like studies by Forrester Research indicate music downloads might even be beneficial to the music industry. Shareware is a prime example of try-before-you-buy becoming successful, helping individuals gain respect and reputation, with some growing into large profitable companies.

If you are interested in the trends, resources, and discussions about file sharing, these links and resources will help you learn more.

Worries, Fears, and Facts about Peer-to-peer Sharing

Currently, in spite of what the record industry and fear mongers want you to believe, you are more likely to get a virus from your email than from a downloaded file from a file sharing service. Yes, there are viruses in some of the files shared on file sharing services, but not all and certainly not a majority, as the rumor mill wants you to believe and be afraid. Currently, there is no way of actually calculating how many infected files are available for download at any one time since it is nearly impossible to get a count of how many people are actually using these services at one time. When you hear people or researchers say that “some” outrageous percentage of files on peer-to-peer file sharing networks contain viruses – don’t believe them. Since the ratio of virus-infected messages to other e-mail traffic increased by nearly 85 percent in 2003, be more afraid of your email inbox.

The best way to protect yourself from viruses from downloaded and shared files is no different than how you should treat any file you download from the Internet or accept through your email. Scan it with your virus checking software before running the program, and keep your virus checking program on and updated at all times.

File Sharing and Peer-2-Peer
Network Software Programs

There are a variety of file sharing programs available online and it is important to know how each works and the potential risks involved in using the different programs. Some contain spyware installed as part of the package. Others are spyware-free. We use several of these programs and offer a few tips and tricks below. Let’s look at some specifics.

Kazaa
Kazaa runs a virus checking program within its full service program that monitors your downloads and uploads. It also slows the file transfer rates, but it does help prevent viruses. Add to your defenses with your full service anti-virus software running as well. The full version of Kazaa contains spyware even though they report that they don’t. One of their spyware programs is called Cydoor. There are add-on programs available that will delete these files and replace them with “dummy files” which act like placeholders telling the program that the spyware is still running. Search the Internet for these programs using the search terms such as “cydoor”, “Kazaa” and “spyware”. Or you could choose to run the spyware-free Kazaa Lite K++ or Kazaa Lite Resurrection.
Kazaa Lite K++ and Kazaa Lite Resurrection
While Kazaa has officially closed down Kazaa Lite++, it is still available if you search the Internet. It has also been “recreated” under a new name as Kazaa Lite Resurrection, and has more powerful features than the other two versions. Kazaa Lite K++ and Kazaa Lite Resurrection do not contain spyware, are free, and feature some amazing tools and Kazaa Lite K++ screen shotpowerful downloading options. In many ways, these work better than the original software. The last version produced contained the ability of doing unlimited searches, maintaining a high participation level, and tools like KaZuperNodes which allows a user to jump to a higher speed access point or to one with more files of the type they are looking for. They are also simple to install.
NOTICE: If you have installed the Windows XP Service Pack 2 (SP2), you may have problems using Kazaa in any form. It seems that Microsoft has made it more difficult for users to get “out” as well as evil doers to get “in” and Kazaa was one of those targetted. We’re still searching for tech help files to figure out how to get Kazaa working again. We’ll let you know when we do.
Fast Track Client Software
Fast Track is the parent of peer-to-peer (p2p) programs, of which Kazaa is the most popular software client which uses the Fast Track network. iMesh is one another file sharing service, but it comes with “bloat” and spyware, so try the iMesh Light client software, though it does offer fewer search results and slower downloads than Kazaa, Kazaa Lite K++, Kazaa Lite Resurrection, and the full version of iMesh. The Gnutella Network has been around for a while and is still going, accessible with Fast Track software such as Xolox which is free and has some great power user features.
LimeWire
Billed as the “fasted on the Internet”, LimeWire is a fast growing peer-to-peer file sharing program. So far, we haven’t found any spyware or any significant impact on our computer use, though we’ve found a bit of a slow down on our high-speed Internet access times, similar to many other programs. There is a wide variety of files available and searches can be grouped internationally to target specific language files. We found that download speeds are fast if there are lots of users with the same file, but very slow if the file isn’t very popular.
eDonkey
Of all the peer-to-peer file sharing software programs we’ve tried, eDonkey, a Bit Torrent client, seems to be one of the few that survived the Windows XP SP2 upgrade. It is a very streamlined software package and we’ve found only a slight speed slow down when in use. Downloads are fast for popular programs and the reports on file download activity is set by a color bar chart, making it easy to see where your downloads are active and how far they have to go. If you are looking for Overnet or Hybrid, they are all now combined into eDonkey.
Bit Torrent
Bit Torrent is considered the file-sharing software of the future and allows users to download a file in pieces, called seeds, downloading many of the pieces like a puzzle from several different computers at the same time and then compiling it into one file when done. Because someone can download a part of the puzzle (seed) from your computer before you have even finished downloading, as you can from other computers, the process may go faster than traditional single file downloads. Many professional software producers are looking at Bit Torrent technology for online downloading of their programs, so this is definitely technology to look for in the future. eDonkey is gaining popularity for Bit Torrent users because of its easy use and installation and is promoted as spyware-free. Another popular client is Overnet and Overnet Pro. Overnet is now combined with eDonkey. You can download Overnet but it will ask you if you want to install eDonkey. Overnet, originally based on eDonkey, has merged back with eDonkey. Overnet is free and limited but the paid Overnet Pro version is supposed to be faster and “better”. The Shadow’s Experimental Bit Torrent Client allows the user to adjust the upload bandwidth and control a few other functions. Shareaza is another Bit Torrent program which also allows access to eDonkey2000 and the Gnutella network, and is designed for the more sophisticated power user.

Note: Bit Torrent on its own still proves to be a bit slow unless the file is extremely popular and available. eDonkey seems to be one of the better clients but more software clients are popping up all the time, so experiment until you find one that works well for your area and needs.

These are just a few of the popular file sharing software programs available.

Tips and Tricks for Kazaa,
Kazaa Lite Resurrection, and Kazaa Lite K++ Users

Why We Support File Sharing
We support file sharing and here are some examples of why.

As a long time Star Trek fan, I’ve been without any form of entertainment from the numerous Star Trek series for quite a few years, while traveling and now while living in Israel. Until two years ago, choices in media were few Israel. Using Kazaa Lite K++ and Kazaa Lite Resurrection, I was able to download the entire seven year run of Star Trek Voyager. Instead of constantly dealing with the fear of Bush’s attack on Iraq and the horrible news of suicide bombings of buses killing teenagers on their way to school, I could escape for 45 minutes to strange and distant worlds where people fought challenges much more complicated than us running away from war. I’m now working on the Stargate and Deep Space 9 series, enjoying every moment. I’m not selling these or doing any more than deleting them off my computer when I’m done to save hard drive space.

Brent is studying jazz and acoustic folk guitar. He loves listening to the different musical styles. This is his way of forgetting about the stresses of our life on the road. Unfortunately, if it ain’t top 40, finding it in Israel is very difficult, and much of what we find is pirated – sold on the streets. Using Kazaa, Kazaa Lite K++, Emusic and other paid and unpaid file sharing and music downloading programs, he has been able to access music that would take months of hunting through music shops to find, and involve leaving the country. He listens to a song or two to get a feel for the artist, and if he likes what he hears, he will buy the CD online, if he can find it, or through Ebay and have it mailed to us in Israel by his family. This process can take months.

Listening to a couple of sample files, he found a song he liked and found the artist on the Internet. The guitarist, Woody Mann, had music books, videos and teaching materials in addition to the sale of his CDs online. From his Website, Brent found out Woody was going to be in Prague teaching a workshop. We signed up and flew there for the weekend workshop and Brent got a chance to buy his CDs directly from the artist as well as work one on one with him. He had such a great time, Brent signed up for two more workshops, one in Seattle and another in Amsterdam. All from one downloaded sample song.

It isn’t all about stealing, and this is the future. The ability to access and exchange music and other media has to change to accommodate the growth in digital artistry. It’s just a fact.

If you are currently a Kazaa user, consider uninstalling the program thoroughly, (save your downloads in a different directory – even the unfinished ones) and install Kazaa Lite K++ or Kazaa Lite Resurrection. Kazaa is doing its best to stop the use of Kazaa Lite, but so far, it is still functioning and you can find copies of it spread around the Internet. Besides avoiding spyware, you will find power, control, and capabilities you never dreamed of if you are a serious Kazaa user.

Either bundled with your download file of Kazaa Lite K++, Kazaa Lite Resurrection, or available separately, there are some add-on tools that will help you get the most out of your download capabilities. We’ll look at a few and offer a few tips and tricks for using Kazaa Lite K++ and Kazaa Lite Resurrection:

Play Fair and Play for Speed
The process of file sharing works because people share files. If you are in this to just download and not share, stop now. What if everyone else felt that way? Everyone would be for the getting and there would be none for the giving. Don’t share everything, but share what you think people will like that isn’t illegal or harmful. Virus scan your system regularly and if you download something that is wrong or bad, delete it immediately so others won’t waste their time. Play fair and we all win through faster and accurate downloads.
Don’t Give Out Your Email
In Kazaa, Kazaa Lite K++, and Kazaa Lite Resurrection, the program asks for your email address and user name. Do not provide a real user name or email address. Make one up or use the defaults given. There is no need and this adds another protection Layer for your privacy.
Share Only What You Want to Share
Under OPTIONS, TRAFFIC in Kazaa Lite K++ and Kazaa Lite Resurrection, or in Kazaa OPTIONS, set your Shared Folder to be only the folder in which you want to share files and include only the files you want to share. Do not set it for the C: drive or to include your Documents ( My Documents) folder. Do not include personal items like resumes (I’ve found a lot!), address books, correspondence, memos, or any personal files. Do not include playlists for your MP3 or media player or Album Art. If it is junk, move it to another place and keep it out of your Shared Folder. Check it frequently to see what is in there are only the things you really want to share.
Screw the Participation Rate
On Kazaa, there is a competition to get your participation rate up high so you can get access to files ahead of someone else who wants the same file. A lot of Kazaa users get into the fuss and trouble of harassing those with high participation rates or trying to force their participation rate up. Stop it. There are add-on programs that will fake your high participation rate by either speeding it up or slowing it down or keeping it the same. In Kazaa Lite K++, you choose your participation rate. If only one person is after the file, it doesn’t matter anyway. Your participation rate is based upon how many files are upload from your computer, not how many you download or have to offer. Offering hundreds of files for uploading won’t increase your participation rate, in fact, it may slow your download speeds. If you were one of the first with a copy of the video of Janet Jackson’s bared breast at the Superbowl, with that one file your participation rate would have skyrocketed. Play fair and have patience, and ignore the participation rate or find a quick cure for it.
If Participation Rate Is Important
Remember the key behind file sharing is SHARING FILES. The participation rate scores on how many uploads come off your computer not how many files downloaded. Your participation rate is not changed by how many files you have to offer for upload, only how many are actually chosen by others to upload. One way to increase your uploads is to make sure you check the option that allows others to see your files available for uploading. Many people aren’t sure of what they are looking or need something specific and are having trouble finding things. By viewing a list of files they may find more than what they would find from direct searches. Help everyone by allowing others to see what is in your shared folder. They can’t get access to your entire computer, just to the folder you have designated your sharing folder. Keep it clean of the junk they don’t want to see.
Increasing Your Download Speed
There are several ways to increase your download speeds.

  • Take advantage of the tool KaZuperNodes to find a fast supernode connection
  • Use the add-on program KaZuperNodes SuperList (from the newest version of KaZuperNodes) to force the program to say only with the supernodes of your preference, preferably consistently fast access points
  • Use the add-on program Speed Up to keep your searches active
  • If you can, make sure you have few or no other software programs running to give your computer’s memory over to your download
  • Download during off hours – if everyone is competing for the same file at the same time, wait until most of the country is asleep and try for it during the off hours
  • Leave your computer and file sharing program running at night or when you are away – this not only allows others to access your files, but if someone else obeys this advice, you can download from them while you both sleep
  • Get the fastest Internet connection you can buy
  • Keep your number of shared files low, 50 – 150 files is average – Test your speeds to see if fewer makes a difference
  • Keep the number of download files in your Traffic area low, preferably under 100 – 50 is better. The harder the program is working to find a lot of different files, the slower the process for you and for the others on that supernode.
  • Set your simultaneous upload permissions from a minimum of 5 to 10 – Zero is not playing fair and 20 is a bit overkill and may actually slow things down.
  • Understand that the faster people can upload from you, the faster you can download from others
Use Kazaa Lite K++ KL Extensions Options
The KL Extensions Options inside of Kazaa Lite K++ and Kazaa Lite Resurrection (OPTIONS, KL EXTENSIONS) include some powerful features. One in particular is the Accelerator. This makes the program check the minimum download speeds and searches for other options if the download speed is too slow. You can also control other aspects of your search and “find more resources” capabilities.
Speed Up
Usually downloaded separately, an add-on software program called “Speed Up” goes through your list of downloading files and puts the pressure on to find new sources and keep the downloads going. Combined with Kazaa Lite K++ and Resurrection’s Accelerator, it keeps the searches and “connecting” efforts going. It must be run separately from Kazaa Lite K++ and Kazaa Lite Resurrection, but it can be loaded from the Windows Startup directory when you turn on your computer.
See a Fast Connection – Check Out What They Have
If you see a user giving you a high speed download, or someone uploading at a fast speed, click on the file and RIGHT CLICK, FIND MORE FROM SAME USER, or click the icon under the menu bar featuring a person with a magnifier. This will switch you to the search window and if the person has turned on the feature to allow users to get a list of their shared files, you will see all the files they have to offer in their shared folder. This will often help you find things you are specifically interested in from people who share similar interests. If you have a high speed Internet connection, turn on the feature to let others view your shared files.
Preview Files
Kazaa Lite K++ and Kazaa Lite Resurrection offer the ability to preview files before they have finished downloading. If you want to make sure you are downloading the right file before you waste weeks working on a download, when enough of the file has come in, click on the file name and RIGHT CLICK, PREVIEW WITH and choose one of your options. This will switch you to the Theater and allow you to view as much of the file as you have received, provided it is a viewable or playable format. If it isn’t what you want, cancel the download.
Use Auto Search
Kazaa Lite K++ offers a unique ability to “auto” search for your search terms over a period of time, forcing the search function to repeat the search over and over until the time period runs out. The experts recommend that you keep this number below 2 minutes as repeated searching slows down supernodes. As the program searches over the 2 minute period, new users may come on who have the file you are looking for and if you didn’t repeat the search, you might have missed them. Beware of over-using the 2 minute auto-search. It an slow down the supernode which slows down the overall network. If the file you want isn’t there, the odds are that it won’t be for a few hours. If you really want it now, jump supernodes and search again.
Soft Jump Supernodes
One of the features in the new Kazaa Lite Resurrection is called “soft jump”. Right click on the taskbar icon for the program and choose “Jump Supernode” and the program will automatically go to the next supernode it encounters along the network. You might find faster downloads or the files you are looking for there. Be sure and Refresh the list in KaZuperNodes and Check the Status from the new supernode to see if you can find a faster supernode to jump to from there.
Be Kind to Others
I used to watch every upload from my computer, worrying about where my files were going and who they were going to. After a while, I realized it didn’t matter. They were just people like me having fun with what I had to offer. So I took time to make sure what I was offering were things people wanted, that it was virus scanned and safe. I kept my list of files short, which allowed for faster uploads and increased my download times. If I had time, before shutting off my computer, even for a reboot, I would check to see how close someone was to completing an upload from my computer. I know how miserable it is to be down to the last 10 seconds of a 200 meg television show that left me suffering from a cliff hanger a week ago only to have the user turn off their computer or disconnect from the supernode, stopping my download. It could take days before I found another source to finish the last 10 seconds of the file. If I see someone with only a minute or two to go, I will wait and finish up another project before turning off the machine. It’s just nice to be nice.

KaZuperNodes and KaZuperNodes Superlist

Often found bundled with the software, KaZuperNodes monitors the supernode you are connected to. A supernode is a computer that is acting like a Kazupernodes screen shotserver, collecting the names of the files available for download from the other computers connected to it, and listing which computer has the information. It’s like a database and when you choose a file it connects you to that computer. Some supernodes are “faster” and more available than others. Some have certain kinds of files that are different from others. For instance, if you are on a supernode in Indian, you have a better chance of finding tons of Indian music, television shows and movies. On a supernode in California and you will find more technical journals, books, and health information in addition to a lot of movies.

To start KaZuperNodes do either of the following:

  • RIGHT CLICK on the Kazaa Lite icon near your clock on the taskbar and choose TOOLS
  • From the menu choose TOOLS, KaZuperNodes

To use KaZuperNodes program:

  • At the bottom of the screen there are several small buttons. Click REFRESH to reload the list of supernodes
  • Click CHECK STATUS to begin testing the supernodes access speeds
  • The access speed status of the supernodes are measured from 0 (excellent) to 20 and higher or time out representing the time it took to connect to the supernode
  • Click on the next button, LOCALIZE, to find the location by country or state of the supernode
  • To change supernodes, double click on your choice and when you see the number come into the right hand window under NEW SUPERNODE, click the check mark
  • If the program fails to connect, click the colored K (for Kazaa) to force a connection. If it still doesn’t connect, close the entire program and restart and try again – though this rarely happens.

When you find supernodes that serve you very well with speed and subjects of interest, you can save it to a Favorites List and save that file by exporting the list so you can import it later if needed.

In the newest version of KaZuperNodes is another program accessible from within KaZuperNodes called SuperList. This add-on program (usually bundled with Kazaa Lite Resurrection) accepts supernodes from your favorite’s list in KaZuperNodes. When a supernode shuts down or pauses, Kazaa will jump to another supernode without informing you, trying to stay online downloading files. If it jumps to a slower supernode, your download is slowed or you lose access to it completely. SuperList works from your provided list to reset Kazaa Lite Resurrection back on the supernodes of your choice, like a kind of babysitter, keeping you on the right track. The program does consume a bit of RAM, so unless I’m downloading something critical, I will only run it at night when I’m away from the computer.

Make KaZuperNodes’ Favorite Lists Work For You

Some files are more prevalent in certain countries. For instance, I would probably find more oriental movies and music styles from supernodes in China, Hong Kong, Japan, and nearby countries than I might find in Denmark. I might find more popular German language files in Germany than I would in Hong Kong.

Using KaZuperNodes Localize feature, you can group favorite supernodes by country. If you are finding what you want most from a specific country, or you find a particular country or area (Europe vs Canada/US) gives you faster supernodes speeds than others, sort the list by country name and delete the countries you don’t want on your favorites list. Save the favorites list to your hard drive and then check it a couple times a day for consistent time out and slow status speeds. Delete those and resave the list. Over a couple of weeks, you will find that your favorites list is fairly consistent with high speed supernodes within that country. Keep saving the list and restore it if anything happens to your favorites list. If you want to try another country or collection of high speed supernodes, repeat the proces.

CSS Tips and Tricks – Backgrounds and Transparencies

We’ve done a lot of different CSS experiments, pushing CSS to its limits with fun and jazzy text, filters, horizontal and vertical flipping, and more, and now it’s time to tackle some fun with more filters.

Be sure and check out more of our CSS Experiments to help you expand your imagination with what is possible with CSS.

Background Transparency CSS Filter

In addition to shadow and drop shadow filters, another popular filter is the alpha transparency filter. Primily recognized by Microsoft Internet Explorer, more browsers are starting to recognize this filter. We used this effect in one of our demonstration layout pages. The alpha transparency filter creates semi-transparent content allowing the background to be visible through the transparency. For web page designers, this opens up a whole new range of artistic possibilities.

NOTE: More information on CSS transparency filters that work with Firefox can be found at Mandarian Design CSS Opacity Transparency Filters and CSS Opacity for Mozilla Firefox and Other Browsers.

The level of transparency (or opacity) is controlled by a fraction or percentage. The higher the number, the less transparency. For instance, 20% or 0.2 opacity would be very transparent and 80% or 0.8 would be almost solid.

The alpha transparency filter can be used on images, text and containers for a variety of design features. There are a few drawbacks, though. Everything within an alpha transparency filter container fades. For example, to the left is the fully opaque box with text in it and to the right is the same box with the 50% opacity alpha transparency filter applied. As you can see, not only has the box’s background faded, the text color has also faded.

At 100% opacity, this is the original box.
At 50% filtered opacity, this is the box
<div style=”display:block; width:150px; background:#000099; color:yellow; font-size:1.3em; padding:5px; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; -khtml-opacity:.5“>At 50% filtered opacity, this is the box.</div>

When used against a backdrop, such as a colored background, you can see the transparency even more. Notice in the box to the right how the background is visible through the box and the text. Instead of yellow, the text is blending with the light blue background to make it green, changing the colors within the overlaying container.

At 100% opacity, this is the original box.
At 50% filtered opacity, this is the box
 
<div style=”display:block;
height:150px;
width:200px;
background:#00FFFF”>
<div style=”color:yellow;
height:100px;
width:150px;
background:#000099;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
-khtml-opacity:0.5;
font-size:1.3em;
padding:5px”>
At 50% filtered opacity, this is the box
</div></div>

When used with an image in the background, the effect is mesmerizing.

30% opacity against the flower

Look closely at this example. The white box in which the text resides is partially transparent, allowing the flower photograph to be visible through the box. Unlike the above boxes where the text became transparent right along with the parent container, the text in this example isn’t transparent. It is solid and you can’t see the flower through the text.

There are several ways to achieve this effect. One is by layering of containers using the z-index. The z-index takes advantage of the power of CSS to not only create containers within containers on a linear basis, but also in 3 dimensions. The z-index works the CSS layers to determine what is in front or behind what container, adding depth to web page designs. Using absolute positioning, two containers, one with the transparency effect and the other with the content, can be positioned over each other using the z-index. Some of the links below describe this technique.

Unfortunately, using absolute positioning contrains a web page design to absolutes. The more absolute positions you use in your layout and design, the stricter your web page layout structure becomes and the more confined it is to one fixed width browser window, creating space at the sides of web pages viewed with high resolution screens.

Using a great technique by Ove A. Klykken, a Norwegian freelance web designer, we use the power of CSS’s relative positioning and hierarchy of parent-child, and a little creative use of CSS wildcards, we can create three containers with the following rules:

CSS Style Sheet:
/* Parent division with background image */
#backtrans {
float:left; width:161px; height:241px; padding:5px; background:url(blueeye1.jpg) no-repeat}

/* Transparent text area */
#transbox { width:130px;
margin-left:10px;
margin-top:25px;
background:#FFFFFF;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
-khtml-opacity:0.5;
}

/* Asterick represents wildcard for child dependents of #transbox */
#transbox * {position: relative}

/* Text div – lacks transparency */
#transbox div {padding:10px;
color: #000;
font-weight:bold}

HTML Structure:

<div id=”backtrans”>
<div id=”transbox”>
<div>
30% opacity filter against the flower
</div>
</div>
</div>

However, this technique does not work in Firefox. I’ve poked and poked and so far have been unable to make it work. The filter works but it applies to all containers within the parent container. I’m still working on a solution, and have a bit of one found on one of our CSS test pages. View it both in Internet Explorer and Firefox to see the drastic differences as each browser interprets the CSS differently. View the source files and the CSS to see the differences in the code.

Alpha transparency filters are not all equal when it comes to various web browsers. To make sure you catch whatever browser is coming your way, you can set the alpha transparency filter to cover all the bases. If a browser doesn’t recognize the transparency filter, it will just ignore it and the containing box will become solid. Here are the differences for the different browsers for 30% opacity:

.filter {
filter:alpha (opacity=30); /* MS Internet Explorer */
filter:progid:DXImageTransform.Microsoft.Alpha
(style=0, opacity=30) /* MS Internet Explorer proprietory */
-moz-opacity: 0.3; /* Mozilla v1.6 and below */
opacity: 0.3; /* CSS-3 Standards */
-khtml-opacity:.3 /* Safari */
}

Alpha Transparency Filter – Links and Resources

CSS Tips and Tricks – Filters and Transforming Text

Flippin’ Filter Fun: flipv and fliph

There are tons of filters you can have fun with with your CSS experiments. Remember, these only work on a few browsers, so test them out before putting them into use. Firefox and older browsers have trouble with these, though Microsoft Internet Explorer’s latest versions display these well. We have links to help you explore the fun and games with CSS filters below, but here are a few more examples of some CSS experiments with filters.

The flipv or Vertical Flip actually mirrors the content upside down.

Flip Things Vertically
<div style=”height:5%; width:50%; font-size:1.3em; color:blue; filter:flipv“>Flip Things Vertically</div>

The fliph or Horizontal Flip mirrors the content horizontally. It also flips everything within the division including the margin, padding and width.

Flip Things Horizontal
<div style=”height:5%; width:50%; font-size:1.3em; color:blue; filter: fliph“>Flip Things Horizontal</div>

The Flip Horizontal and Vertical filters appear to be fairly silly CSS experiments, but there are some interesting things you can do with them, if you release your creative spirit. One technique is to use the fliph and flipv repeatedly within the same filter statement. This example flips the text vertically and then horizontally. A text-align:center declaration forces the lines to be in the center close to each other.

Dream Now

Dream Now
<div style=”height:1%; width:30%; padding:10px; text-align:center; font-family:Georgia, Times Roman, serif; color:purple; font-size:140%; font-weight:bold; background:#FFCCFF”>
Dream Now
<div style=”height:1%; filter:flipv fliph“>
Dream Now
</div>
</div>

The example below flips the repeated text horizontally, then vertically, then horizontally to move it upside down under the original text.

Dream Now

Dream Now
<div style=”height:1%; width:30%; padding:10px; text-align:center; font-family:Georgia, Times Roman, serif; color:purple; font-size:140%; font-weight:bold; background:#FFCCFF”>
Dream Now
<div style=”height:1%; filter:fliph flipv fliph“>
Dream Now
</div>
</div>

By uses CSS classes to hold the horizontal or vertical flip instructions, you can apply this technique to design elements within your web page design.

In this example, we’ve actually forced the letters to go sideways, then using the flip filters, we’ve flipped the first one vertically and then horizontally, an the second one has been flipped vertically twice and then horizontally once to create a reverse reflection.

SIDEWAYS SIDEWAYS
CSS Style Sheet:
.verttext {
font-family:Georgia, Times Roman, serif; color:purple; font-size: 120%; writing-mode: tb-rl; filter: flipv fliph; padding:5px}

.verttextflip {
font-family:Georgia, Times Roman, serif; color:purple;font-size: 120%; writing-mode: tb-rl; filter: flipv flipv fliph; padding:5px}

HTML Structure:
<div>
<span class=”verttext”>SIDEWAYS</span>
<span class=”verttextflip”>SIDEWAYS</span>
</div>

Leaf pattern, photograph by Brent VanFossenUsing the photograph to the right of a closeup leaf pattern, we’ll use a similar technique to the one done to create our popular PhotoQuilt notecards, but we will only use the CSS filter for vertical and horizontal. First we will display the two images side by side by using a style declaration of float:left on the first image. Notice also that all the margins and paddings have been set to zero to make sure there is no white space between the images.

Leaf Leaf
<div>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”float:left; margin:0; padding:0″ width=”85″ height=”127″ alt=”Leaf”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”float:left; margin:0; padding:0″ width=”85″ height=”127″ alt=”Leaf”>
</div>

Let’s apply the flip vertical filter to the second image.

Leaf Leaf
<div”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”float:left; margin:0; padding:0″ width=”85″ height=”127″ alt=”Leaf”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”margin:0; padding:0;filter: flipv” width=”85″ height=”127″ alt=”Leaf”>
</div>

Let’s change the vertical flip to the horizontal flip filter on the second image to begin the mirror reflection aspect.

Leaf Leaf
<div”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”float:left; margin:0; padding:0″ width=”85″ height=”127″ alt=”Leaf”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”margin:0; padding:0; filter: fliph” width=”85″ height=”127″ alt=”Leaf”>
</div>

Now we have something interesting with our CSS experiments. Remember, these filters aren’t recognized by all browsers, so if you only see two leaf pictures sitting next to each other, or some space between the photographs, then your browser is having trouble interpreting the CSS filter instructions since they are proprietary for Microsoft products. We’ll show you a graphic image of what the final result should look like in a moment.

Let’s double up on what we’ve done to create a first level quilt effect with our CSS experiments. We now have four sets of images, two on top of each other.

Leaf Leaf
Leaf Leaf
<div>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”float:left; margin:0; padding:0″ width=”85″ height=”127″ alt=”Leaf”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”fmargin:0; padding:0; filter: fliph” width=”85″ height=”127″ alt=”Leaf”>
<br>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”float:left; margin:0; padding:0″ width=”85″ height=”127″ alt=”Leaf”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”margin:0; padding:0; filter: fliph” width=”85″ height=”127″ alt=”Leaf”>
</div>

Now, let’s double flip the bottom two images so they will create the final results.

Leaf Leaf
Leaf Leaf
<div>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”float:left; margin:0; padding:0″ width=”85″ height=”127″ alt=”Leaf”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”margin:0; padding:0; filter: fliph” width=”85″ height=”127″ alt=”Leaf”>
<br>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”float:left; margin:0; padding:0; filter: flipv” width=”85″ height=”127″ alt=”Leaf”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”margin:0; padding:0; filter: fliph flipv” width=”85″ height=”127″ alt=”Leaf”>
</div>

Wow! Let’s take it a little further and reverse the top and bottom two images to change the “look” of the PhotoQuilt. Notice in the code how the third box in the list has no flip filter. It is in the position of the original image.

Leaf Leaf
Leaf Leaf
<div”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”float:left; margin:0; padding:0; filter: flipv” width=”85″ height=”127″ alt=”Leaf”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”margin:0; padding:0; filter: fliph flipv” width=”85″ height=”127″ alt=”Leaf”>
<br>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”float:left; margin:0; padding:0″ width=”85″ height=”127″ alt=”Leaf”>
<img src=”http://cameraontheroad.com/images/web/leafclose.jpg” style=”margin:0; padding:0; filter: fliph” width=”85″ height=”127″ alt=”Leaf”>
</div>

Final images of the PhotoQuilt effect created with CSS Filters fliph and flipv, original photograph by Brent VanFossen Can’t see the effect we’re going for here? Here is a screen shot of what the final results should look like. We’ve taken four exact images and used the CSS filter for flipping horizontally and vertically to position these images, using only CSS styles, to recreate the PhotoQuilt effect. We have more examples of our real PhotoQuilts and how we create our PhotoQuilt Notecards in our Learning Zone.

Flipping CSS around can be fun. Use your imagination and see what is possible.

 

More Text Tips and Tricks:
Engrave and Emboss Filters

The Engrave and Emboss Filters are different from others as they change the background to gray, but the intensity of the effect is based upon the tone of the background color.The closer to white, the more intense the effect. The closer to black or dark tones, the less intense the effect is.

Embossed on white background.
Embossed with green-toned (#009900) background.
This is Embossed with blue background.
<div style=”height:25px; width:50%; padding:10px; font-size:1.2em; font-weight:bold; background:white; filter:progid:DXImageTransform.Microsoft.Emboss ()“>Embossed on white background.</div>
 
Engraved with white background
Engraved with green-toned (#009900) background
Engraved with blue background
<div style=”height:25px; width:50%; padding:10px; font-size:1.2em; font-weight:bold; background:white; filter:progid:DXImageTransform.Microsoft.Engrave ()“>Engraved with white background</div>

These two CSS filters can be used to create buttons or links, such as the one below using the embossed filter. We maintained our web page design link featuring a background and top and bottom borders that look like this link when you hover the mouse over the link. See the interesting results when you move the mouse over the link box below.

<div style=”height:25px; width:25px; padding:10px; font-size:1.5em; font-weight:bold; background:#CCCCFF; filter:progid:DXImageTransform.Microsoft.Emboss()“><a style=”padding:5px” href=”cssfun.html#linkemboss” title=”this link reloads this page on CSS Filter Fun”>Link</a></div>

CSS Tips and Tricks – Jazzing Up the Content

We’ve show how to jazz up a web page’s content within a container or box. Now it is time to look at some tips and tricks for jazzing up the content.

CSS Text Effects

There are a variety of text characteristics you can also add to jazz up your text.

First of all, you can play with color. One of the popular effects on web pages in the early 1990s was a text rainbow of colors:

T h i s i s a R A I N B O W o f C O L O R F U L t e x t .
<div style=”text-align:center; font-family:Arial Black, Arial, Helvetica, sans-serif; font-size:110%; font-weight:bold”>

<span style=”color:blue”>T</span>
<span style=”color:aqua”>h</span>
<span style=”color:lime”>i</span>
<span style=”color:purple”>s</span>
<span style=”color:fuchsia”> </span>
<span style=”color:orange”>i</span>
<span style=”color:gold”>s</span>
<span style=”color:green”> </span>
<span style=”color:blue”>a</span>
<span style=”color:aqua”> </span>
<span style=”color:lime”>R</span>
<span style=”color:purple”>A</span>
<span style=”color:fuchsia”>I</span>
<span style=”color:orange”>N</span>
<span style=”color:gold”>B</span>
<span style=”color:green”>O</span>
<span style=”color:blue”>W</span>
<span style=”color:aqua”> </span>
<span style=”color:lime”>o</span>
<span style=”color:purple”>f</span>
<span style=”color:fuchsia”> </span>
<span style=”color:orange”>C</span>
<span style=”color:gold”>O</span>
<span style=”color:green”>L</span>
<span style=”color:blue”>O</span>
<span style=”color:aqua”>R</span>
<span style=”color:lime”>F</span>
<span style=”color:purple”>U</span>
<span style=”color:fuchsia”>L</span>
<span style=”color:orange”> </span>
<span style=”color:gold”>t</span>
<span style=”color:green”>e</span>
<span style=”color:blue”>x</span>
<span style=”color:aqua”>t</span>
<span style=”color:lime”>.</span>
</div>

You can also create the rainbow effect word by word:

This is a RAINBOW of COLORFUL text.
<div style=”text-align:center; font-family: Arial Black, Arial, Helvetica, sans-serif; font-size:110%; font-weight:bold”>

<span style=”color:green”>This</span>
<span style=”color:blue”>is</span>
<span style=”color:aqua”>a</span>
<span style=”color:lime”>RAINBOW</span>
<span style=”color:purple”>of</span>
<span style=”color:fuchsia”>COLORFUL</span>
<span style=”color:orange”>text.</span>
</div>

You can also play with text colors for headers such as this technique which highlights each word with a color and removes the space between them to look like many popular magazine headings.

RED BLUE

A similar technique uses the background to influence the color and let’s the text be white or the color of the background.

REDBLUE

Or take it a step further and reverse all the colors.

REDBLUE

We’ve grouped all three of the above examples together so you can compare the CSS construction.

Simple Text Colors:
<div style=”font-family:Arial Black, sans-serif; font-style:italic; font-size:150%; font-weight:900″>
<span style=”color:red“>RED</span>
<span style=”color:blue“>BLUE</span>
</div>

Colored Backgrounds with White (or Transparent) Text:
<div style=”margin:10px; font-family:Arial Black, sans-serif; font-style:italic; font-size:150%; font-weight:900; color:white“>
<span style=”background:red; padding:10px 0 10px 10px”>RED</span>
<span style=”background:blue; padding:10px 10px 10px 0″>BLUE</span>
</div>

Colored Backgrounds with Colored Text:
<div style=”margin:10px; font-family:Arial Black, sans-serif; font-style:italic; font-size:150%; font-weight:900″>
<span style=”background:red; color:blue; padding:10px 0 10px 10px”>RED</span>
<span style=”background:blue; color:red; padding:10px 10px 10px 0″>BLUE</span>
</div>

You can also play with the way the text looks using CSS properties like text-transform, font-variant, and letter-spacing:

this is all lowercase forced to uppercase
<div style=”text-transform:uppercase”>this is all lowercase forced to uppercase</div>
This is Font-Variant Small Caps
<div style=”font-variant:small-caps”>This is Font-Variant Small Caps</div>
This is letter-spacing at .5em
<div style=”letter-spacing: .5em”>This is letter-spacing at .5em</div>
This is letter-spacing at 1em
<div style=”letter-spacing: 1em”>This is letter-spacing at 1em</div>
This is a line of text
with the line height forced to 8px
<div style=”line-height:8px”>This is a line of text
with the line height forced to 8px</div>

Why would you want the text to overlap? Here is a design to consider:

CSS Style Sheet:
#logo {
position:relative; line-height:60%; font-family:Arial Black, sans-serif; font-weight:bold; text-align:center; padding:15px}

#logo div {
color:#66CC00; font-size:3em; letter-spacing:.1em}

#logo span {
color:#006600; font-size:1.5em; font-style:italic; letter-spacing:.6em; padding-left:15%}

HTML Structure:
<div id=”logo”>
<div>LORELLE</div>
<span>Design</span>
</div>

 

CSS Filter Fun

The use of CSS filters is another way of jazzing up your web page content and design. Filters come in different types ranging from simple shadows to eye-popping. The following are a few of the more popular, and easily attainable, filters. CSS filters are still fairly new and now all browsers recognize filters equally. Firefox is one of those which has trouble with filters, but all of these should work in the latest Microsoft Internet Explorer. Also, if you have an older browser, it’s time to update it!

Shadow Filter

Filters that create shadows on the content come in two forms: shadow and drop shadow. The Shadow filter merely shows a narrow shading behind a graphic or text. The Drop Shadow Filter shows an offset silhouette duplicate of the graphic or text behind the subject. Let’s look at their features individually.

The shadow filter creates a simple shadow behind the subject.

Shadow Filter – Gray
<div style=”font-size:1.3em; height:1%; font-weight:bold; filter:shadow(color:gray)“>Shadow Filter – Gray</div>

Notice how the left side of the S in Shadow is cut off along the left margin. The shadow effect literally casts a shadow to the left and down from the subject as the default. If there is no padding around the subject, the shadow will be cut off. Let’s add the padding.

Shadow Filter – Gray
<div style=”font-size:1.3em; height:1%; font-weight:bold; padding:10px; filter:shadow(color:gray)“>Shadow Filter – Gray</div>

Now the shadow filter is completely visible on the left. Also, almost all filters require a height, and a few require a width, to their container. Let’s look at some color effects you can do with shadow.

Shadow Filter With Light Green Shadow
<div style=”font-size:1.3em; height:1%; padding:10px; filter:shadow(color=#33CC99)“>Shadow Filter With Light Green Shadow</div>
Blue Shadow Filter With Peach-Colored Text
<div style=”font-size:1.3em; height:1%; font-weight:bold; padding:10px; color:#FF9966; filter:shadow(color=#0033FF)“>Shadow Filter With Blue Shadow and Peach-Colored Text</div>

As you can see, you can play with the colors of the shadow and the text to create different effects with the shadow filter. You can also play with the direction of the shadow by adding a directon attribute.

This is Shadow set at Direction 145
<div style=”font-size:1.3em; height:1%; padding:10px; filter: shadow( color=gray, direction=135)“>This is Shadow set at Direction 145<

Shadow filters affect more than text. They can also be used on images and graphics as well as boxes. Remember to allow enough margin and padding for the effect to be fully seen. Here are some examples:

Baby Blue Eyes Flowers, photograph by Brent VanFosssen

<div class="alignleft" style="padding:10px; height:241px; width:161px; filter:Shadow(direction=135, color=#0000ff, strength=12)">
<img src="blueeye1.jpg" width="161" height="241" alt="Baby Blue Eyes Flowers, photograph by Brent VanFosssen"></div>

 
This is Shadow set on the box at Direction 315 with the strength to 25.

<div style="width:40%; filter:shadow(color=#999900, direction=315 strength=25); padding:30px 10px 5px 30px"><div style="border:2px #006600 solid; background:#99CC66; font-size:1.1em; font-weight:bold; padding:10px; color:#006600">This is Shadow set on the box at Direction 315 with the strength to 25.</div></div>

To Make A quote diffeRENT from the rest, you can bEAT your own DRUM.

You can really have some design fun with CSS text shadows and filters. It is really up to your imagination. Here is an experiment to create a magazine style pull-quote, using many of the techniques discussed on these pages about CSS tips and tricks. There are many over-the-top ways to use the shadow filter. There are also some very subtle designs that can be used with the shadow filter that can enhance your web page. We’ve created a container box with a shadow, and then applied various font elements to the text to create a fun, magazine-style effect.

CSS Style Sheet:
#shadowbox {
width:40%; float:right; filter:shadow(color=#999999, direction=225); padding:10px}

#shadowbox div {
background:white; font: 1.5em Impact, Helvetica, sans-serif; color:#99CCFF; padding:10px 20px 10px 10px}

HTML Structure:
<div id=”shadowbox”><div>To
<span style=”color:#CC99CC; text-transform:uppercase; font-variant:small-caps; font-family:Georgia, Times, serif; font-weight:bold; font-size:1.4em”>Make</span>
A quote
<span style=”font-weight:bold; font-size:1.8em”>diffe
<span style=”color:#FF99FF”>RENT</span>
</span>
<span style=”text-transform:uppercase; font-variant:small-caps; color:#6699CC”>from the rest </span>,
you can
<span style=”color:#6699FF”>b</span>
<span style=”color:#CC99FF”>EAT</span>
your own D
<span style=”color:#FF99FF”>RUM</span>.
</div>
</div>

Drop Shadow Filter

Like the shadow filter, the drop shadow filter also casts a shadow, but this one is a duplicate of the content offset from the original.

Drop Shadow Filter
<div style=”font-size:1.3em; height:50px; filter:dropshadow(color=red)“>Drop Shadow Filter</div>

Just like the shadow filter, you can play around with the colors on the drop shadow filter.

Yellow Drop Shadow Filter with Blue Text
<div style=”color:blue; font-size:1.3em; height:50px; filter:dropshadow(color=yellow)“>Yellow Drop Shadow Filter with Blue Text</div>
Light Green Drop Shadow Filter with Dark Green Text
<div style=”color:darkgreen; font-size:1.3em; height:50px; filter:dropshadow(color=#66FF00)“>Dark Green Drop Shadow Filter with Dark Green Text</div>
Purple Drop Shadow Filter with Pink Text
<div style=”color:pink; font-size:1.3em; height:50px; filter:dropshadow(color=#9900CC)“>Purple Drop Shadow Filter with Pink Text</div>

As you can see from these examples, the dark text with a complementary lighter shadow color is a more pleasing look. But the drop shadow filter fun doesn’t stop here. As with the shadow, you can adjust the offset position with the drop shadow.

Drop Shadow offset by 3 on x and y
<div style=”padding-left:10px; font-size:1.1em; height:30px; filter: dropshadow( color=#999999, offx=3, offy=3, positive=1 )“>Drop Shadow offset by 3 on x and y</div>
Drop Shadow offset by 20 on x and y
<div style=”padding-left:10px; font-size:1.1em; height:50px; filter: dropshadow( color=#999999, offx=20, offy=20, positive=1)“>Drop Shadow offset by 20 on x and y</div>
Drop Shadow offset by minus 20 on x and plus 20 on y
<div style=” padding-left:40px; font-size:1.1em; height:50px; filter: dropshadow( color=#999999, offx=-20, offy=20, positive=1)“>Drop Shadow offset by minus 20 on x and plus 20 on y</div>

Again, watch your edges. I had to increase the left padding on the last example by 40px in order for the shadow to be entirely visible on the left size.

The drop shadow filter can also be added to images and boxes.

Baby blue eyes flower, photograph by Brent VanFossen

<div class="alignleft" style="padding:10px; filter:dropShadow( color:#6699CC, offX=-10, offY=10, positive=true); width:161px; height:241px">
<img style="margin:8px" src="http://cameraontheroad.com/photos/flowers/blueeye1.jpg" width="161" height="241" alt="Baby blue eyes flower, photograph by Brent VanFossen">
</div>

 
Drop Shadow on a box

<div style="width:30%; filter:dropShadow(color: #999900, offX=10, offY=-10, positive=true); padding:15px">
<div style="border:2px #006600 solid; background:#99CC66; font-size:1.1em; font-weight:bold; padding:10px; color:#006600">
Drop Shadow on a box</div>
</div>

 

Shadows and Drop Shadows – Links and Resources

CSS Tips and Tricks

While we avoid a lot of whizbang tricks, we have used a few here and there. Most recently, we discovered some useful tricks when designing a “fancy” version of our web page layout. A major part of these we turned into our CSS Experiments.

As nature photographers and instructors, Brent likes to teach the following when dealing with the use of filters, special effects, and gimmicks in photography, and it applies to web design:

Just remember to use filters like using spices in cooking. A small amount can make the dish but too much will spoil the meal.
Brent VanFossen, nature photographer

To showcase the different techniques, tips, and tricks we’re using for these and our many CSS experiments, many of our examples feature the style codes inline, or inside the HTML tag as if this was the only tag within your website being modified like this. It is preferable to remove this style or presentation code and set it up in a style tag or linked stylesheet using divisions and classes. We only use this technique of inline styling in our own pages when a unique effect is needed. For more information on linking CSS style sheets, visit our introduction page to our style sheet design and layout.

If you are new to CSS, the following are more articles we’ve written to help you learn more about how CSS works in web page design:

CSS Simple Text-to-Boxes Fun

Before we get to the more serious fun, like our CSS Experiments, let’s look at some simple ways you can jazz up your design without a lot of special bells and whistles. One of the easiest things to do to highlight some content is to give it a background color. This can be done within the text.

This is normal text and this is highlighted text and we are back to normal.

<p>This is normal text and <span style=”background:yellow”>this is highlighted text</span> and we are back to normal.</p>

While not a filter, the background declaration can create some interesting effects with text. We can improve this by adding some space on either side of this is highlighted text with a padding declaration.

<p>We can even improve this by adding some space on either side of <span style=”background:yellow; padding-left:10px; padding-right:10px“>this is highlighted text</span> with a padding declaration.</p>

This can also be done by giving a background color to any container box such as this paragraph:

This is a simple paragraph of content set with a background color. From here, we can do a lot of interesting things to turn this into a box, pull-quote, or whatever we want, as seen in our many CSS Experiments and design element examples.

<p style=”display:block; width:50%; padding:5px; border:none; background:#99CCCC; color:#000066″>This is a simple paragraph of content set with a background color. From here, we can do a lot of interesting things to turn this into a box, pull-quote, or whatever we want.</p>

Going back to the highlighted text created by adding a background span, we can add a border to the span’s style so the highlighted text features a box effect.

…the span’s style so the <span style=”background:yellow; border:1px solid blue; padding-left:10px; padding-right:10px”>highlighted text</span> features a box effect.</p>

Let’s use the same technique on the paragraph:

This is a simple division with a background color and a border. From here, we can do a lot of interesting things to turn this into a box, pull-quote, or whatever we want.

<p style=”display:block; width:50%; padding:10px; border:1px solid blue; background:#99CCCC; color:#000066″>This is a simple division with a background color and a border. From here, we can do a lot of interesting things to turn this into a box, pull-quote, or whatever we want.</p>

We’ve moved from highlighting text with a background effect to creating boxes. Did you make the transition without trouble? Understanding that everything in CSS and HTML is “in a box” – held in check by containers – we have a sense of the possibilities. Let’s do some more CSS experiments with one of those boxes.

To introduce you to the concept of containers and divisions, let’s simply replace the paragraph tag with a division tag and change the border from a thin solid line to a double line.

This is a simple division with a background color and a double line border.
<div style=”display:block; width:50%; padding:5px; border:8px double blue; background:#99CCCC; color:#000066″>This is a simple division with a background color and a <b>double line</b> border.</div>

A border effect you see on many blogs uses dots to line its border. These are no different from the ones we’ve just been playing with, though we changed the background color to a light blue so the border is more evident.

This is a simple division as shown before but this time featuring a thin 1px dotted line border.
<div style=”display:block; width:50%; padding:5px; border:1px dotted blue; background:#CCCCFF; color:#000066″>This is a simple division as shown before but this time featuring a thin 1px <b>dotted line</b> border.</div>

Let’s keep going with some of our container experiments.

This is the same division with a thicker (3px) dotted line border.
<div style=”display:block; width:50%; padding:5px; border:3px dotted blue; background:#CCCCFF; color:#000066″>This is the same division with a thicker (3px) <b>dotted line</b> border.</div>
This is also the same division with a thicker (5px) dotted line border.
<div style=”display:block; width:50%; padding:5px; border:5px dotted blue; background:#CCCCFF; color:#000066″>This is also the same division with a thicker (5px) <b>dotted line</b> border.</div>

The dotted line and the following dashed lines are simple to create and their look can change based upon the width of the border. In the next examples, we’ve used a dashed line with different widths and changed the background color to show the effect dark blue text has on different colored backgrounds.

This division features a soft light blue background color (#ccffff) and a thin (1px) dashed line border.
<div style=”display:block; width:50%; padding:5px; border:1px dashed blue; background:#CCFFFF; color:#000066″>This division features a soft light blue background color (#ccffff) and a thin (1px) <b>dashed line</b> border.</div>
This division features a soft light yellow background color (#FFFF99) and a medium (3px) dashed line border.
<div style=”display:block; width:50%; padding:5px; border:3px dashed blue; background:#FFFF99; color:#000066″>This division features a soft light yellow background color (#FFFF99) and a medium (3px) <b>dashed line</b> border.</div>
This division features a soft light green background color (#ccff99) and a thicker (5px) dashed line border.
<div style=”display:block; width:50%; padding:5px; border:5px dashed blue; background:#CCFF99; color:#000066″>This division features a soft light green background color (#ccff99) and a thicker (5px) <b>dashed line</b> border.</div>

There are currently thousands of colors and 10 different border styles you can choose from:

  • none
  • hidden
  • outset
  • inset
  • groove
  • ridge
  • solid
  • double
  • dotted
  • dashed

The border styles “none” and “hidden” aren’t visually pleasing but they have their purposes. We’re going to continue to concentrate on the visually pleasing choices. We’ve seen a thin solid and played with dotted and dashed, so let’s see what else we can come up with.

Just as dotted and dashed are related in style, groove and ridge are related.

This is a simple division with a background color and a ridge line border.
<div style=”display:block; width:50%; padding:5px; border:8px ridge blue; background:#99CCCC; color:#000066″>This is a simple division with a background color and a <b>ridge line</b> border.</div>
This is a simple division with a background color and a groove line border.
<div style=”display:block; width:50%; padding:5px; border:8px groove blue; background:#99CCCC; color:#000066″>This is a simple division with a background color and a <b>groove line</b> border.</div>

They can also be used in combination for a different effect.

This is a simple division with a background color and a groove line and ridge line using different colored borders.
<div style=”display:block; width:50%; padding:10px; border-left:10px groove #66CCFF; border-right:10px ridge blue; border-bottom:10px groove #66CCFF; border-top:10px ridge blue; background:#99CCCC; color:#000066″>This is a simple division with a background color and a <b>groove line</b> and <b>ridge line</b> using different colored borders.</div>

Solid borders can also be interesting, if you play with complementary or contrasting colors with the background. Play with the width for more accent, too, as you move from these examples to your own CSS experiments.

This is a simple division with a contrasting background color and a 20px thick purple border.
<div style=”display:block; width:50%; padding:5px; border:20px solid #9900CC; background:#99CCCC; color:#000066″>This is a simple division with a contrasting background color and a <b>20px thick purple</b> border.</div>
 
This is a simple division with a complementary background color and a 40px thick dark blue border.
<div style=”display:block; width:50%; padding:5px; border:40px solid #6666CC; background:#99CCCC; color:#000066″>This is a simple division with a complementary background color and a <b>40px thick dark blue</b> border.</div>

Here is another CSS experiments technique that takes advantange of the background color like we tried in the beginning. It uses a paragraph inside of a container box and both the container and the paragraph have a background color. The padding declaration creates a “margin” around the paragraph allowing the background color of the parent container to be visible, appearing to look like a border.

This is the parent container with a colored border and background color.
 

This is the paragraph container that will sit inside of the parent container with no border and a background color.

Now, let’s put the two together:

The 10px padding of the parent container creates the “margin” around the paragraph allowing the background of the parent container to be visible.

<div style=”width:50%px; border:10px solid navy; background:blue; padding:10px“>
<p style=”background:lightblue“>The 10px padding of the parent container creates the “margin” around the paragraph allowing the background of the parent container to be visible.</p>
</div>

Now, let’s take this another step forward and add a border to the paragraph tag and create a “deeper” border effect.

The 10px padding of the parent container creates the “margin” around the paragraph allowing the background of the parent container to be visible. Then we added a border of medium blue around the paragraph to add depth.

<div style=”width:50%px; border:10px solid navy; background:blue; padding:10px”> <p style=” border:10px #3399FF solid; background:lightblue”>The 10px padding of the parent container creates the “margin” around the paragraph allowing the background of the parent container to be visible. Then we added a border of medium blue around the paragraph to add depth.</p></div>

There are two more border styles to play with: inset and outset.

This is a simple division with a background color and an inset line border.
<div style=”display:block; width:50%; padding:5px; border:10px inset blue; background:#99CCCC; color:#000066″>This is a simple division with a background color and an <b>inset line</b> border.</div>
This is a simple division with a background color and an outset line border.
<div style=”display:block; width:50%; padding:5px; border:10px outset blue; background:#99CCCC; color:#000066″>This is a simple division with a background color and an <b>outset line</b> border.</div>

CSS Containers and Borders – Links and Resources

CSS Border Effects

Computer Fun and Games

So many people seem so panicked and fearful of their computer, from worrying about viruses and the horrors coming in through their email to the fear they might touch something and make it crash and blow up – I thought I’d take a moment to share with you the fun things you can do with your computer that might not make your life easier, but you will have a good time doing it.

There is a lot of time while traveling on the road and photographing and writing about nature that is called “down time”, time when you are waiting between “moments” of action. We’ve used these games to amuse us through long hours waiting in airports, waiting for changes in the weather, and just to relax our minds from the stress of our lives. We also use Microsoft’s MSAgent characters as personal virtual assistants to let us know about the news and weather that affects our life on the road. We hope you enjoy some of our time wasters AND useful tools.

Playing Games

The number one reason people get a computer is to do work and to communicate. The number one activity done on a computer is playing games. I don’t see much work or communicating Screen shot of the solitare card game that comes with Microsoft Windows involved in that, do you? But it’s true. We all like to have a good time and the joy of computers is their ability to have fun and play games as well as their ability to do the task at hand.

If you are new to computers, I highly recommend you start RIGHT NOW playing the Solitaire card game that comes with most versions of Windows. It sounds funny, but Solitaire will teach you all you need to know to get familiar with your mouse. You will learn clicking, click and drag, double click (to make an ace move to the top pile or the next card in line Solitare card game with the options menu showingup there), and steering. Your mouse skills will improve greatly by just playing this game for twenty minutes. The problem will come in stopping after twenty minutes!

Solitaire Card Game Tips
Microsoft’s version of Solitaire, the traditional seven card spread, has some options worth checking out. To change the deck cover design, choose GAME, DECK. Some deck designs also feature the occasional animation, so watch them closely.

To move an Ace to the top of the playing table, double click it. Double click on all cards that go in sequence on top of the Ace cards to move them quickly.

To add a little more thrill to the game, choose GAME, OPTIONS, and choose to play three cards and not one, keep a cumulative score, and play Vegas style which tracks your score in monetary values rather than points. Playing Vegas and three card style will end the game after three rounds of the deck.

There are many online and free or shareware games available for download. Tucows is one of the largest suppliers of shareware (and freeware) software on the Internet and they list thousands of games to choose from. Backgammon, chess, card games of every shape and size, gambling, dice, you name it, you can find it on the Internet.

Brent and I have been playing solitaire and multiple player games for years and here are a few of our favorites. Some of the more dynamic games may not be readily available in computer stores, but you can find them on Ebay or in used software shops.

Buried in Time and Legacy of Time (Journeyman Project Series)
Buried in Time Computer GameOh, boy! Want to leave the planet and have the time of your life? The games produced by Presto and the Journeyman Project are some of the best games. Created in the genre called “RPG” this means they are Role Playing Games. You interact within the program as the main character, exploring and discovering, and hopefully solving the mysteries within the world of the game. The first in the series was called Journeyman Project and was more of a robot-beat ’em-up game. Then came Buried in Time and Legacy of Time and computer games took on a new twist, following in the steps of Myst. In Buried in Time and Legacy of Time, you play the character of John Gage, a time-traveling cop who is sent back and Legacy of Time computer gameforward in time to stop someone from messing with the time line. You visit incredibly realistic and interactive locales such as Leonardo da Vinci’s studio and home, the ancient Mayan Temples in their prime, the castle of Richard the Lion-hearted during a siege, a space station floating out in the far reaches of space, and more. Award-winning, these games are not for the weak minded. They will test your analytical skills and problem-solving techniques. These games involve a lot of learning, about history, archeology, anthropology, art, and more. You learn to build things using da Vinci’s plans and drawings and pour through his brilliant designs and blue prints. You learn about the secrets of the priests inside the Mayan Temple and learn to read a little Mayan. Brilliant time wasters that teach as you go, without feeling like you are learning but experiencing!
Myst, Riven and Exile
Myst 10 year anniversary setThe first of the most incredible interactive realistic RGP computer games ever made, Myst brought to the world the real potential of what a computer could do to the world. In Myst, you help research the ages created through books, which transport you to the same island but a different time and Myst Exileand place. You become an archeologist and detective, searching for the clues as to what happened here and who done it – who is ruining or interfering with the ages? In the sequels, Riven and Exile, the technology improved greatly so you can actually get sea sick watching the water move around the island. These are not violent games and there are few chances to die, but there are tons of challenging puzzles that will get your brain working to figure it all out. A new sequel, URU Ages Beyond Myst, is out now (2004) and has already won extremely high praise and top awards.

 

You are in an open field west of a big white house with a boarded front door.
There is a small mailbox here.
>
Opening Lines From Zork, The Interactive Fiction Original Game

Zork
Back in the dark ages of computers, you were lucky if you got a computer monitor that would show amber or green type on the screen. Graphics were horrible blocky bits of dots and lines made into pictures. But games were still played and adored One of the advertising looks for the original Zork gameby all. One of the great granddaddy of the first computer games was Zork. Imagine reading a book and being able to control each page, twisting and turning down different paths, a treasure hunter – finding things and figuring out how to make things work to get you further along the way, exploring as you go, occassionally meeting the bad guy in the form of a troll or gru (ah, they hate the light) and risking your life to defend yourself. Most of the best interactive games today came from the successful techniques created in Zork and its sequels. Over time the Zork games became more sophisticated, culminating in the Myst style interactive and highly graphical interface of Return to Zork. While the new games rely upon a combination of mouse movement and clicks and entering text, the old games relied completely upon the keyboard. The player enters the commands to go in the different directions, look at this or that, pick it up, put it somewhere, and fairly simple commands and interface. Through the keyboard, you could interact with the creatures and people you met within the world of the game, asking questions and gathering information. The games are easy to playYou can still step back to a simpler world of your imagination and play the original games.

Interactive Fiction
The unique magic of the text only, interactive fiction game of Zork didn’t end in the 1980s. It is now a popular game style called “interactive fiction”. Brilliant academics and fans of Zork created their own version of the code for writing Zork-like games and released it as open source. With the support of other Zork fans, people started writing interactive fiction games, trading programming secrets and tips, and developing even more sophisticated coding and programing efforts. Every fall the Interactive Fiction Forum hosts the annual Interactive Fiction Game Competition. Brent’s entry, She’s Got a Thing for a Spring, came in fourth place in 1997. The games run the gamut in genre styles from detective who-done-it to science fiction extraordinaire. These games can be played on any kind and age of computer as well as on handheld computers and even cell phones with Internet connections. They require no special graphics or computer memory to run. These are the kinds of games that are great for travelers, when just reading a book gets dull and boring and interacting with a book is the way to go. To find out about this year’s contestant games and more about Interactive Fiction, visit the Interactive Fiction Forums newsgroup at rec.games.int-fiction or their archives web page. Here is a list of some of our favorite Interactive Fiction games:

* These games are not typical interactive fiction games and are a little more challenging, but excellent games.

Kyodai
Oh, boy! Play a few games of Kyodai and you will be completely addicted. Sample game look from KyodaiThis is the ideal, rarely boring, and completely addictive Maj Jong or Tai Pai game. Based on the traditional tile Japanese games, this goes way beyond with incredible colors and responses. It is not only fascinating, it stimulates the brain’s recognition of patterns and combinations. I’ve introduced this to many friends who hate me later for getting them totally hooked. Don’t take my word for it, download the shareware version and you will be hooked.

More Game Information

We have played lots of games but not as many of the serious game players. To find more information about the most popular games, we’ve provided some links to help you.

Have Your Computer Talk Back to You

MSAgnet character HandzWhen people stop by, they are always amazed at how my computer talks to me. You know, it gets lonely being stuck all alone with just a computer to amuse you, so why not have it really amuse you by talking to you?

Through the use of Microsoft’s MSAgent characters, you, too, can have your own computer friend. He, she or it will tell you the time, give you news bulletins from the Internet, check email, tell you about the weather outside and even read to you. You can have it do all kinds of fun things.

The Microsoft Paper clip helperWhen you need some help in Microsoft Word or Excel, you know the little paper clip dude or the puppy dog that pops up to help you? This is one of your Window’s operating system helpers, a character. With a little help, these characters can do more than just help you when you need help.

MSAgnet character Handz animates itself with a book as it reads the news or weather reports To use MSAgent characters, you have to download a few free add-ons to Windows. Begin by visiting YeaYou’s step-by-step instructions page on installing MSAgent Characters and features. Do the procedure in the order they list. Once the programs are installed, you get to pick a character.

Microsoft provides some basic characters like Merlin the Wizard, a genie, dog, robot, and more. These creatures act like what they are (dog barks, genie poofs, and wizard whizzes). Through the Speech Control Panel, you can control their speech characteristics from male to female and slow to fast. There are more characters MSAgnet character Handz uses Cyberbuddy to read the newsavailable online and my particular favorite comes from MyDevotion.com and is called Handz. Handz is just that, a pair of hands with sunglasses who chats at you. Using the free version of the program Cyberbuddy, I have instructed Handz to give me reminders on lunch and bedtime, and a few other appointments I frequently keep. To remind me, he knocks in the “inside” of my monitor screen and then makes his announcements. The sound of knocking on glass like knocking on a window is so realistic, it actually sounds like he is knocking on the inside of my monitor’s screen. I love it! There are plenty of other characters with their own special effects to choose from.

MSAgnet character Handz uses Cyberbuddy to read the top science news Cyberbuddy is a free interactive program to use with your MSAgent character. With this program you can get weather reports, news bulletins, reminders, and more. The paid version includes more advanced features including voice recognition so you can actually talk back to your MSAgent character.

For more information on MSAgent, characters, and other similar interactive programs:

Winning Web Page and Website Awards

For your information, we’ve provided a list of sites which offer awards for web pages and Websites based upon different criteria: design, layout, structure, content, accessibility, and overall quality. If you are interested in winning awards for your web page design and development, make sure your site is award-winning first and then you may submit it to one of these listed below or found by searching the internet for “site awards” or “Website awards”. These award-giving sites are not all free and may require a participation fee, and they change frequently, so do let us know if a site listed is not found to help us keep this list up-to-date.

The qualities of an award-winning site include:

  • Easy to read
  • Easy to access and navigate
  • Clean and clear design and layout
  • Meets Web Standards
  • Using interesting and/or novel eye catching techniques
  • Presents information in a distinctive way
  • Contains well proofed quality information and content

Each site has their own criteria, so read through the fine print thoroughly before submitting your site to see that you are meeting their criteria and not wasting their time.

Articles and Information About Winning Website Awards

Truly Exceptional Site Awards

HTML Awards

Site Design Awards

Graphics Awards

Resource AwardsManual

Business-related Awards

Non-Commercial & Homepage Awards

Awards with special requirements

To help you with your web page submissions we’ve included this list of sites giving out awards for web pages and Websites as well as lists for the top search engines, search engines and directories, special search engines and directories, and we even have a Microsoft Excel spreadsheet which combines all these lists into one easy-to-use layout form for downloading.

For more information on how to prepare your Website and web pages for submission to search engines and directories, take time to read our article series on web page validation and preparation for search engine submissions. We also have listed extensive information in our article series on web page design to help you create the best possible “search engine friendly” and user-friendly Website.

CSS Unleashed – Experiments with CSS Designs

99 THINGS
YOU DIDN’T
KNOW
YOU COULD
DO WITH CSS *
W3c.org's CSS Check Icon
*And How To Do Them Well!

We decided to offer up some of our own experiments for you to learn more about CSS and for us to have a little fun, too. The following designs were completely created without tables, using only Cascading Style Sheets (CSS) for positioning and presentation. You are welcome to copy anything within these pages, though we recommend you have some fun of your own and take these experiments a little further with your own colors and experiments. If you come up with something really cool based on these designs, we’d love to see it and possibly add it to our offerings. Let us know at via the comments below.

The process, as you can imagine, of creating these CSS boxes, headings, menus, table of contents, pull-quotes and blockquotes, and titles came with a serious education into how Cascading Style Sheets work. We’ve shared notes about how these were created in our comments next to the codes and the bigger lessons at the end of this series of experiments where we explain how we created these creative CSS designs so you can create your own.

HOT! | PURE CSS DESIGNS

As with all experiments, these come with some warnings. They are not perfect and not perfectly viewed on every web browser. They have been moderately tested over the years and the various browsers. If your browser sees something garbled, please let us know so we can fix it.

These do have “breaking points”, points where the design might not hold up under pressure. These points are usually based upon screen width and resolution. To see where a design might “break”, resize your browser’s window or change the font-size specifications (From Menu > View > Text-Size).

The CSS in these experiments are over-coded. There are always simplier ways to do things, so streamline the code as you see fit. We are still playing around with these, so we’ve left much of the code inline without relying upon style sheets so we can tweak at will. To use these on your page, check out our examples of how to move the inline coding to style sheets.

To maintain a consistent look with these experiments, we used generic fonts available on most computers and a relative font size. We decided to preserve the size of the examples by using font sizes in pixels. In general, the fonts should not resize with the change in font-viewing size set by the browser. We recommend you change the font and font size specifications to meet your own needs.

We hope you enjoy and use our experiments and learn a bit more about the creativity of CSS as you go.

To see how these CSS experiment and styles work, view the source code of the page. In your web browser menu, click VIEW > SOURCE or VIEW > PAGE SOURCE to view the source code. For the most part, the styles are included inline with each design.

Many magazines highlight headings, sections, or departments with a reverse solid colored background with white or complementary text.

In this series, we simply change the backgrounds and letter spacing.

 
BLUE WHITE
 
REDWHITE
 
REDBLUE
 
REDBLUE
 
HELLOTHERE
 
HELLOTHERE
 
HELLO
THERE
 
HELLO
HELLOTHERE
 
HELLO
THERE

HELLO

 

In the example below, we’ve eliminated the background color and added a border line to the bottom of each element. Watch your padding and margins to line up the borders. MSIE adds 3 pixels to containers, which makes this a challenge to reproduce on every brower perfectly.

 
HELLO
THERE
 

While this design looks different, it only features a uniform background color.

 
FLORIDA | BIRDING SPOTS
 

Using the same techniques, we can create solid lines of background colors and stack them on top of each other within a single division.

 
PHOTOGRAPHY
NATURE AND WILDLIFE
 

The two following CSS examples use the same techniques of stacking divisions in a group.

TRAVEL
TRAVEL TIPS FOR THE TRAVEL WEARY
50 Ways to Arrive Refreshed and Ready
 
TRAVEL
TRAVEL TIPS FOR THE TRAVEL WEARY
50 Ways to Arrive Refreshed and Ready
 

Magazines also graphically play with text, messing about with line-height, letter spacing, and more to create more interesting headings, sections, and department titles.

Wide letter spacing makes this one interesting.

SKIPPING ACROSS THE STONES OF LIFE
WE FIND SIMPLE THINGS ARE THE BEST
 

Line height creates this magazine look which can be changed to create some interesting overlap effects.

 
50
GREAT
IDEAS
 
50
GREAT
IDEAS
 

In this dramatic example, we’ve taken a design right off the cover of PC World computer magazine and put in our own text. It uses line height, color and font sizes in spans to create the final results. While it looks like a graphic, it is text. Try selecting the words with your mouse. Well, all is text except for the CSS verification logo, showing you how to incorporate an image into the text graphic.

 
20 THINGS
YOU DIDN’T
KNOW
YOU COULD
DO WITH
W3c.org's CSS Check IconCSS*
*And How To Do Them Well!
 

Combining some of the techniques, we used colorful spans along with one span featuring a background color which makes the text look like it is in a box. I updated the solid color background with a gradient style not an image background available with CSS3 using the technique described by WebDesignerWall.

 
The Color Balancing Act
made easy!
 

Below the CSS green graphic was inspired from an advertisement for Biolage Matrix hair products and features the effects of playing with borders and background colors. The “borders” on top are DIVs with colored backgrounds, no borders. The bottom DIV featuring “nature” has a darker top border and bottom border of yellow. I was a purist, I could have put all the background effects in divisions but I wanted to keep some of the coding simple by using a borders on one DIV. The “E” in Nature is in a span to color it yellow to match the bottom border. It makes for an interesting header effect and one that could set an entire look for a web page design.

 
NATURE

Borders around headings, sections and department titles can create dramatic attention getting results, too. Borders are more than lines around boxes. Borders are visual lines around objects created both with and without using CSS order styles. Borders aren’t limited to only one per division container. You can layer borders, use selective borders, play with colors, and create lines and geometric shapes with borders. Use your imagination with CSS borders, background colors, and more.

Lines above and below text add accent and drama to the words. These are great for headings and titles.

 
LIVINGNOW
 
 
DREAMA LITTLEDREAM
 
 
LIVINGNOW
 
 
DREAMA LITTLEDREAM
 

Going back to the basics, this simple box features a dashed border on a container inside of the parent container. The parent container features a 10px padding, which makes it appear like a border edge. Could be an interesting coupon effect.

 
Help Nature and work on with her; and Nature will regard thee as one of her creators and make obeisance. And she will open wide before thee the portals of her secret chambers, lay bare before thy gaze the treasures hidden in the depths of her pure virgin bosom.
H.P. Blavatsky (1831-1891)
 

Borders aren’t limited to one, or one color. This CSS design features three borders and plays with padding and border width to create its border effect. I’ve also used the CSS first-letter pseudo element style with the paragraph to enlarge the first letter of the first word in the sentence.

When you photograph something, don’t accept it as the end result; there’s always a next step. But repeat something only if you can improve on it. Otherwise, you must move on. A photographer must change to show change, and it is as much the photographer’s challenge to show change as it is to preserve what is. A picture must be a question as well as an answer.
Ernst Haas
 

Using the same above design, we’ve changed the colors of the borders to create a dramatic and a bit over the top border design. Use your imaginaton and use complementary or contrasting colors.

When you photograph something, don’t accept it as the end result; there’s always a next step. But repeat something only if you can improve on it. Otherwise, you must move on. A photographer must change to show change, and it is as much the photographer’s challenge to show change as it is to preserve what is. A picture must be a question as well as an answer.
Ernst Haas
 

A border doesn’t have to be on all four sides. This CSS design experiment features a top border on the inside container with a large dashed border.

The shadow’s the thing. Outside, shadows are blue, I read, because they are lighted by the blue sky and not the yellow sun. Their blueness bespeaks infinitesimal particles scattered down infinitesimal distances. Muslims, whose religion bans representational art as idolatrous, don’t observe the rule strictly; but they do forbid sculpture, because it casts a shadow. So shadows define the real.
Anne Dillard Pilgrim at Tinker Creek
 

Right out of a magazine design, the outer parts of this heading feature thin top and bottom borders. The middle section is simply a container with a border and background color. The three elements float to the left of each other to create the illusion of the two outer sections passing underneath the middle container.

 
Inside the
Camera
of Your Dreams
 

Going back to the top border only design, we’ve layered this CSS design with four colorful top borders. This is good as a blockquote or pull-quote design, too. Notice the arrows around the author at the bottom of the quote. Extended character entities were used to create these arrows.

 
Surely there is something in the unruffled calm of nature that overawes our little anxieties and doubts: the sight of the deep-blue sky, and the clustering stars above, seem to impart a quiet in the mind.
» » » Johnathan Edwards (1703-1758) « « «
 
An artist chooses which subjects to portray; this is a way of praising… ultimately, one’s work is merely a magnifying glass offered anyone looking in our direction.
Friedrich Nietzsche
 

We’ve stepped up the design by adding a left border to each of our side borders to create a frame only on the top and left sides.

An artist chooses which subjects to portray; this is a way of praising… ultimately, one’s work is merely a magnifying glass offered anyone looking in our direction.
» » » Friedrich Nietzsche « « «
 

The examples above show the use of borders to create color around the edges. By introducing a background color and padding, the background color of each division acts as another border color, adding more drama to the CSS design.

Though we travel the world over to find the beautiful, we must carry it wihin us or we find it not.
» » » Unknown Author « « «
 
Creativity is dangerous…Its pleasure is not the comfort of the safe harbor, but the thrill of the reaching sail.
» » Robert Grudin « «
 

We took away the background colors we added and kept an even 10px padding on each division container, then made the border lines 2px thick, creating a very dramatic container, good for quotes or headings.

As little children we all start out with eyes close to the ground, seeing, feeling, smelling, exploring, and learning. Seeing with a camera is the best way I have found to get close to the earth again.
» » » Earnest Braun« « «
 

The following two examples use a technique of creating geometrics with borders. This technique is explained very well by Infimum Examples of CSS Slants Using Borders.

Science tends to be more an intellectual exercise, tending to separate the observer from the observed. Art tends to intergrate the subject and the observer.
Story Musgrave
 
One of the hardest things in this world is to admit you are wrong. And nothing is more helpful in resolving a situation than its frank admission.
Benjamin Disraeli
 

These next two designs were inspired by a web page layout. I didn’t like what they did, so I played around with it until I found something I liked. This is part of the fun of experimenting and making it your own design. The blocks feature borders on the sides of different colors. Look for the style classes in the header of this page under blackblock. The first one is a very simple look that could be used as a heading and the second one uses the style as a menu with css rollover or hover colors.

TalkingListeningConversationQuestionsAnswers
Test Yourself. Are you paying attention? It is time to ask yourself. Just be.
 
Your loneliness is your Self wanting to make friends with itself. Your loneliness is your Heart wanting to sing to itself. Your loneliness is your Being wanting to dance with itself.
Rusty Berkus, Appearances
 

Another challenge in CSS designs, we found this design on a web page done with tables and wondered if we could recreate it as pure CSS. Well, we did. This is not the most user-friendly and totally accessible CSS design experiment we’ve done, but it was a serious challenge. We’ve added the white-space: nowrap to keep the whole thing together, so it won’t wrap when the screen width shrinks. If you choose to use this, change the height in the last division to accomodate the content you add, and also change the height on the other divs within that set, and add 10px for padding, or whatever your padding choice. If you change the width, since it is set in total absolutes, you have to change the widths throughout to add up appropriate. This one needs a lot of care and feeding, but it is a very cool geometric look.

An additional note. I first designed these using Internet Explorer versions that were pretty poor, but then came Internet Explorer 6 which broke all web standards conventions, and these designs. Thankfully, as I update this in 2011, the war on web standards has been won and most of these designs, including this one that relies so heavily on precision sizes and spacing, work.

 
Backgrounds & Borders Games
 

Banning Computer Games in Greece

Just when you thought the world couldn’t get more strange, with people who let wackos run their government and dictate what they can do, wear, think, and believe, we find something else to make us believe that the world is even more screwed up than we thought. Growing up in Seattle, our joke to compete with the joke about New York (In the New York Subway, it’s illegal to spit, but puking is free) I was amazed to find out that every Washington State licensed vehicle must have windshield wipers. It doesn’t have to have windshields but it must have the wipers. Banning electronic and computerized games in public in Greece, a land that had “culture” long before culture was a word, home of the greatest games on the planet, the Olympics – well, this is very strange. So we thought we’d bring it to your attention.

We thought about doing a summary about the law and its consequences, but when we read the law, we realized that it explained itself, and humiliated itself, without any help from us.

This is what Brent got in his Interactive Fiction (IF) newsgroup (>> symbols represent quotes from previous messages):

September 6, 2003
From Joachim
Okay, folks, here is what I have:

Adrien Beau wrote:
>> Nikos Chantziaras wrote:
>>
>> Real life paranoia! New Greek law bans all PC-Games!
>>
>> The Greek government has recently decided to ban all PC-Games in
>> public and private places alike.
>>
>> In an absurd and unprecedented way that conforms to regiments where
>> computers and the internet are considered evil, the Greek Parliament
>> has effectively outlawed all computer games in Greece, even those
>> that can be played on the Internet!
>>
>> That is to say that games such as Age of Empires, Counter-Strike,
>> backgammon or Chess on Yahoo! are considered illegal from now on.
>> (Even Interactive Fiction!)
>>
>> This is no joke! I am an outlaw now. If I don’t stop playing
>> Jigsaw and Curses, I could end up in prison. The Taliban may no
>> longer rule over Afghanistan, but they rule over Greece.
>>
>> Again, this is no joke! Please visit
>> http://www.netcafe.gr/protest/protest.php?lang=english
>> and help us out here in New Afghanistan.

>>
>> Are you expecting people to sign your petition without any further
>> explanation? Do you have a reference to the text of the law proposal,
>> law or decree that is “banning all PC-Games?” Does the text
>> explicitly ban PC-Games, or is this an unfortunate side-effect of a
>> wider text?

It looks like this is the case.

>> Do you have any
>> summary of the current political situation in Greece so that we can
>> understand the context in which the law was passed? Is such a text
>> compatible with the guidelines of the European Union? Are you sure
>> your country can be likened to the Taliban regime? Are you aware that,
>> in its present form, you message uses the same mechanisms as spam, and
>> is as unconvincing as spam?

Whatever you think about the message, he’s telling the truth.

http://www.theregister.co.uk/content/4/26939.html

And the actual text of the law, for those who read Greek:

http://www.netcafe.gr/files/pdf/nomos.pdf

Brief quote:
“The government of Greece is making heroic efforts to humiliate the nation in front of the entire world, by banning all electronic games. That’s right; something as innocent as playing computer chess on your laptop in a hotel lobby is now a crime with penalties of up to three months in stir and a fine of 10,000 euros.”

So it seems that IF is now banned in Greece.:-/

Joachim

Then Brent found the English translation of the Greek law. We thought it was amusing, and inciting, reading:

LAW NUMBER 3037 – 30 July 2002 – GAMING PROHIBITION
The President of Greek Republic

We issue the following law which was voted by the Greek Parliament

ARTICLE 1 – GAME CATEGORIES
According to notion of the commands of the current law:

a. Mechanical games are those, that depend on one’s muscle force.

b. Electrical games are those, that depend on electrical mechanisms.

c. Electromechanical games are those that depend on electrical mechanisms and the use of one’s muscle force.

d. Electronic games are those, that depend on both electrical-electronic mechanisms and software.

e. Entertainment technical games are those, whose result depends exclusively on the ability and skill of the player, and are used solely for entertainment.

The category (e) also includes all card games which had been characterized as “technical” games, according to the statement of law F.E.K A21.

ARTICLE 2 – GAME PROHIBITION
1. Operation and installation of any game of type (b), (c) and (d) of Article 1, including computer games, placed in public places such as hotels, cafeterias, organization halls and in any other public or private place, is prohibited.

2. Operation of games of type (e) is allowed in devices of type (a). Regarding these games, it is prohibited to place bets. Such bets will attract penalties described in Articles 4 and 5.

ARTICLE 3 – INTERNET CAFES
The prohibition of using computers described in Article 2 does not affect internet cafes, as long as the computers are not used for any gaming activities.

To be able to run an Internet cafe, a special permit is required from the municipal or the state where the company is based) and from its starting point (port) if it is a boat based company. According to the first application of this measure, the company should be equipped with this permit in three months from the issue date of this law.

ARTICLE 4 – CRIMINAL SANCTIONS
1. Any persons who manage or depend on centres or other places as described in paragraph 1 of Article 2 where games prohibited by the previous Articles are in use or even exist, will be penalized with at least three months of jail plus a fine of at least 5,000 Euros. If this offense is repeated, the penalty will be at least one year of jail plus a fine between 25,000 and 75,000 Euros. The court will also command the confiscation of all those games.

2. The orders for the games of type “c”, in paragraph 1, paragraph 3 and 4 of Article 7 of the coded command 29/1971 are followed accordingly.

ARTICLE 5 – ADMINISTRATIVE SANCTIONS
1. Apart from the criminal sanctions, if it is found that a prohibited game, according to the commands of the previous articles, there will be a fine of 10,000 Euros for every such game and permanent taking away of the business license, according to the orders of Article 7.

2. The fine will be based on the decision of the corresponding authority, in paragraph 1 of Article 6, who had found the violation. In this decision the violation will be described, the fine will be underlined, as well as the order in use. Together with this decision, a copy of the violation report will be notified towards the violator.

ARTICLE 6 – REPORT OF CONFIRMATION OF VIOLATIONS
1. The police authorities are responsible to enforce this law. The port authorities are responsible for boats traveling domestically, and for any other boats staying at the corresponding port.

2. If the authorities for the “body for fighting financial crime” find violations of the law for the games, they will impose the sanctions and will proceed to actions described in the previous article.

ARTICLE 7 – AUTHORIZATION
1. The terms, conditions, procedures and permits for Internet companies are determined by the common decision of the Ministry of Finance, Ministry of Internal Affairs, Ministry of Public Administration, Ministry of Public Order and Ministry of Trading.

2. A similar decision establishes the authority which enforces the taking away of business licenses, the procedure of taking it away as well as any other necessary details for applying the orders of this law.

ARTICLE 8 – TAX RETURNS
Whoever has already paid ” tax for running businesses with entertainment technical games” for 2002 for electronical, electrical or electromechanical games, will have their tax returned corresponding to the time of the publication of the law in the Government’s Paper until the end of the year. No returns will be made in the case of violation of the law for games and there is no awaiting court case in front of the Committee in paragraph 4 of article 15 of law 2753/1999 (FEK 249 A’).

ARTICLE 9 – MAINTAINED AND TRANSITIVE ORDERS
1. With the orders of this law, there are no complications with the orders of the law 2206/1994 (FEK 62 A’) as well as the rest of the orders regarding casinos.

2. From the start of the enforcement of this law, the three-member game committees which are established by the orders in paragraph 4 of article 15 of law 2753/1999, cease to exist. They will still exist though, until the finish of check up of the game machines that had been binded by the auditor authorities and for which there had been a reserve.

Articles 10, 11, and 12 describe the changes in the laws only for card games and are not relative with the game machine orders.

No responsibility is taken for any syntax, grammatical or translation mistakes.

Signed: Grand Master Peter

= = = = = = = = = = = = = =

Always keeping you informed on the most critical issues of the day,

Lorelle
Tel Aviv, Israel

CSS Unleashed – Variations on a Theme

We’ve been looking at a variety of CSS experimental examples, and now I’d like to take you through a design journey. These ideas come from magazines and advertising material, but they also come from a simple idea that is then played with to create different effects. Play with these effects and you have variations on a theme, each one special.

To see how these CSS experimental boxes and styles work, view the source code of the page. In your web browser menu, click VIEW > SOURCE or VIEW > PAGE SOURCE to view the source code. For the most part, the styles are included inline with each design.
There is no rule that says you can only have one “look” to your page. You can have several different types of pull-quotes and boxes styles, as long as they complement each other. Sure, too many is too much, but variations on a theme can give you different options to choose from, picking the appropriate design for your content.

Some of these look the same: Some of these CSS experiments that “look” the same in your browser may look different in other browsers. Some use filters to create dropshadows and other effects which will not appear in Firefox or other browsers. Try viewing these pages with different browsers to see the different effects.

Today Thoughts

If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles

Today Thoughts

If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles

Today Thoughts

If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles

Today Thoughts
If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles
 
Today Thoughts
If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles
 
Today Thoughts
If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles
 
Today Thoughts
If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles
 
Today Thoughts

If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles

 
Today Thoughts
If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles
 
Today Thoughts

If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles

 
Today Thoughts
If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles
 
Today Thoughts
If a photographer really expects to produce great work, they must, just like musicians, be prepared to practice their craft every day. EVERY DAY. This does not mean one has to take pictures every day, but one must at least practice seeing every day.
David Bayles

Let’s try a different type of pull-quote and see how many variations on a theme we can come up with. The first four examples play around with different fonts, most of which are found on most computers around the world. If you don’t see a change, your computer doesn’t have that font. But scroll down, the variations on the theme continue without being dependent upon the fonts.

For what has made the sage or poet write, But the fair paradise of Nature’s light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature’s light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature’s light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature’s light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature’s light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature’s light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature’s light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature’s light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature’s light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature’s light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature’s light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature’s light.
Keats (1795-1821)
 
For what has made the Sage or Poet write, But the Fair Paradise of Nature’s Light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature’s light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature’s light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature’s light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature’s light.
Keats (1795-1821)
 
For what has made the sage or poet write, But the fair paradise of Nature’s light.
Keats (1795-1821)
 

CSS Unleashed – Experiments with Quotations, Pull-quotes and Blockquotes

CSS containers and boxes can be used to create a wide range of blockquotes, pull-quotes and quotes in general, highlighting a bit of content to attract attention. These can also be used as boxes to highlight tips, advice, or sidebar information with the help of a few bullets in a list. We want to push the limits on what you can do with CSS containers and boxes with our CSS experiments.

Inspiration for our CSS experiments come from a variety of magazines and printed informational material, using their graphic use of text and color as inspiration. Remember, none of these use tables, only CSS to create the design.

Color and text style always plays an important role in creating dramatic and attention-getting blockquotes and pull-quotes, but also notice the use of space around and in-between a pull-quote. Empty space can also enhance the impact of the quote. And remember, these are CSS experiments, and they may break in different browsers, page designs and layouts, as well as column widths.

For more information on how these were done and how to use these CSS design elements and style experiments, see CSS Experiments – How They Were Done and More and CSS Experiments Putting It All Together.

To see how these CSS experimental boxes and styles work, view the source code of the page. In your web browser menu, click VIEW > SOURCE or VIEW > PAGE SOURCE to view the source code. For the most part, the styles are included inline with each design.

A photograph is a secret about a secret. The more it tells you, the less you know.
Diane Arbus (1923-1971)

A photograph is a secret about a secret. The more it tells you, the less you know.
Diane Arbus (1923-1971)
A photograph is a secret about a secret. The more it tells you, the less you know. Diane Arbus (1923-1971)
A photograph is a secret about a secret. The more it tells you, the less you know. Diane Arbus (1923-1971)
 
A photograph is a secret about a secret. The more it tells you, the less you know. Diane Arbus (1923-1971)
 

It’s an amazing thing to just talk to someone and have handprints frame the quote as if it was being held up against the wall. Who knows? Maybe it is?
Lorelle, Goofing Around
 

No Matter How Slow The Film,Spirit always stands still long enough for the photographer It has chosen. Minor White

The universe does co-operate with the photographer, when the photographer is willing in spirit and soul to take the time it takes, to have the patience, to have the courage, to wait for the moment. It is then the shutter is pressed. Not when the photographer is ready. When the moment is right.
 
No Matter How Slow The Film,Spirit always stands still long enough for the photographer It has chosen. Minor White

The universe does co-operate with the photographer, when the photographer is willing in spirit and soul to take the time it takes, to have the patience, to have the courage, to wait for the moment. It is then the shutter is pressed. Not when the photographer is ready. When the moment is right.
 

Henri Poincare: Science is facts; just as houses are made of stones, so is science made of facts; but a pile of stones is not a house and a collection of facts is not necessarily science.
 
Ernst Haas says: The less descriptive the photo, the more stimulating it is for the imagination. The less information, the more suggestion; the less prose, the more poetry.
 

I LOOK LIKE A PHOTOGRAPHER
Nevada Wier, Travel Photographer
I keep my antennae out and pay attention. I move slowly and work quickly. I want to be an active observer not a passive bystander. It breaks down the barriers because here I am, looking like I just landed from Mars with all this equipment on me, and I’m cute and funny and make them laugh as I should. I build a rapport at that moment.
 

I LOOK LIKE A PHOTOGRAPHER
Nevada Wier, Travel Photographer
I keep my antennae out and pay attention. I move slowly and work quickly. I want to be an active observer not a passive bystander. It breaks down the barriers because here I am, looking like I just landed from Mars with all this equipment on me, and I’m cute and funny and make them laugh as I should. I build a rapport at that moment.
 

5,342
THE NUMBER OF PEOPLE WHO MIGHT VISIT THIS WEB PAGE DAILY BUT ARE UNSURE OF THE PURPOSE OF IT.
Statistics are average and not based on any daily recommended allowances or dietary restrictions, if any.
 

COUPON SALE
There is no must in art because art is free. Kandinsky

Sell your cleverness and buy enchantment. Rumi

This is a coupon sale style with a dashed border around it which gives it a very newspaper feel.

 

ART DEFINED HERE
Art is unquestionably one of the purest and highest elements in human happiness. It trains the mind through the eye, and the eye through the mind. As the sun colors flowers, so does art color life.
Lubbock (1834-1913)
 
ART DEFINED HERE
Art is unquestionably one of the purest and highest elements in human happiness. It trains the mind through the eye, and the eye through the mind. As the sun colors flowers, so does art color life.
Lubbock (1834-1913)
 

» Wildlife needs clutter and chaos. It needs options and opportunities. It needs the slow centuries of growth, nurture, disturbance and decline that produces a complex and unique forest community.
David Middleton, Ancient Growth
 

For what has made the sage or poet write, But the fair paradise of Nature’s light.
Keats (1795-1821)
 
Nature, like a kind and smiling mother, lends herself to our dreams and cherishes our fancies.
Victor Hugo (1802-1885)
 

If we had something to say, it would be that this is white on rust
If we had something to say, it would be that this is rust on yellow
If we had something to say, it would be that this is yellow on orange
If we had something to say, it would be that this is orange on rust, but we don’t, so we just wander around looking cute. That’s good enough, right?
 

Go confidently in the direction of your dreams! Live the life you’ve imagined. Thoreau
 

Look Down
There Is A World Below

“Wandering through the world as I do, I often forget to watch my feet. When I stop to watch them, I often find camouflaged, wondrous things. Insects, lizards, butterflies, ants, flowers….it makes me walk a little more carefully and slowly now.”
Lorelle VanFossen, Personal Journal
 
Look Down
There Is A World Below

“Wandering through the world as I do, I often forget to watch my feet. When I stop to watch them, I often find camouflaged, wondrous things. Insects, lizards, butterflies, ants, flowers….it makes me walk a little more carefully and slowly now.”
Lorelle VanFossen, Personal Journal
 

A photographic image creates a story that was never intended to be told. It is a lie telling the truth, a yes and no at the same time, an is and an is not.

Ernst Haas, photographer and author
 

 
FULFILLING MOMENTS
One of life’s most fulfilling moments occurs in that split second when the familiar is suddenly transformed into the dazzling aura of the profoundly new…These breakthroughs are too infrequent, more uncommon than common; and we are mired most of the time in the mundane and the trivial. The shocker: what seems mundane and trivial is the very stuff that discovery is made of. The one difference is our perspective, our readiness to put the pieces together in an entirely new way and to see patterns where only shadows appeared just a moment before.
Edward B. Lindaman, Thinking in Future Tense
 

PHOTOGRAPHER’S CODE OF ETHICS
An animals wariness is it’s key to survival and critical to the protection of it’s young. The Photographer’s Code of Ethics prohibits harassing, endangering or interfering with the natural life cycle of wild animals. Therefore, we choose to work in National Parks, wildlife viewing areas and occassionaly with hand raised subjects such as this wolf. In this way, we can share the antics and spirit of relaxed, unstressed animals without endangering the animal or it’s young.
Leo Keeler, Alaska Photographer
 

 
As long as I live, I’ll hear waterfalls and birds and winds sing. I’ll interpret the rocks, learn the language of flood, storm, and avalance. Ill acquaint myself with the glaciers and wild gardens, and get as near the heart of the world as I can.
John Muir
 
 
As long as I live, I’ll hear waterfalls and birds and winds sing. I’ll interpret the rocks, learn the language of flood, storm, and avalance. Ill acquaint myself with the glaciers and wild gardens, and get as near the heart of the world as I can.

John Muir

 

Whatever you are from nature, keep to it; never desert your own line of talent.
Be what nature intended you for, and you will succeed; be anything else, and you will be ten thousand times worse than nothing.
Syndey Smith

CSS Unleashed – Experiments Playing With CSS Blocks

Think of CSS divisions and spans as children’s toy building blocks. Give them a background. Fill them with text. Flip them around and see what you can come up with through the creative use of CSS in your CSS experiments.

As with many of these CSS experiments, they don’t all work equally under different web browsers. Sideways text using the flipv and fliph filters don’t work equally across the browsers. Currently, these will only work with Microsoft Internet Explorer as they are proprietary to that browser. These can also break in various browsers and page widths. Narrow the window size or change the browser’s font size and these might fall apart. Still, they are CSS experiments and ideas worth exploring.

For more information on how these were done and how to use these CSS design elements and style experiments, see CSS Experiments – How They Were Done and More and CSS Experiments Putting It All Together.

To see how these CSS experimental boxes and styles work, view the source code of the page. In your web browser menu, click VIEW > SOURCE or VIEW > PAGE SOURCE to view the source code. For the most part, the styles are included inline with each design.

If you find a way of improving or expanding upon these CSS experiements, let us know by leaving a comment below.


This first group of examples uses the vertical flip filter found in Internet Explorer only. It should look like the words “The closer” are across the top and “one” is turned on it’s side.

THE CLOSER
ONE LOOKS
THE FARTHER ONE SEES.
David Cavagnaro
 

The above is a mess if you aren’t using Internet Explorer, but thanks to CSS3, we can use the new rotate property to tilt and flip text around.

THE CLOSER
ONE
LOOKS
THE FARTHER ONE SEES.

David Cavagnaro

 
THE CLOSER
ONE LOOKS

THE FARTHER ONE SEES.
David Cavagnaro

 
THE CLOSER
ONE LOOKS THE FARTHER ONE SEES.
David Cavagnaro
 
THE CLOSER

ONE
LOOKS
THE FARTHER ONE SEES.
David Cavagnaro
 
THE CLOSER ONE LOOKS

THE FARTHER ONE SEES.
David Cavagnaro
 
I REMEMBER

THE DAY
I HAD SOMETHING
WORTHWHILE
TO SAY TO YOU.
 

Talking Listening Conversation
Your loneliness is your Self wanting to make friends with itself. Your loneliness is your Heart wanting to sing to itself. Your loneliness is your Being wanting to dance with itself.
Rusty Berkus, Appearances
 

ATTRACT ATTENTION
TODAY IS THE DAY TO DO MORE THAN TALK
 
ATTRACT ATTENTION
TODAY IS THE DAY TO DO MORE THAN TALK
 
ARTICLE INTRO Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quam tortor, pulvinar ut, luctus vel, vestibulum id, wisi. Maecenas molestie sollicitudin velit. Duis bibendum elit vitae dui. Fusce feugiat, nunc quis euismod rutrum, neque mauris luctus tortor, ut tempus tortor orci quis mauris.

DETAILS Vestibulum sollicitudin pede vitae erat. Aenean purus velit, posuere non, auctor ut, hendrerit laoreet, wisi. Aliquam erat volutpat. Maecenas tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut pede quam, tincidunt in, scelerisque id, gravida eget, mauris.

Q&A Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quam tortor, pulvinar ut, luctus vel, vestibulum id, wisi. Maecenas molestie sollicitudin velit. Duis bibendum elit vitae dui. Fusce feugiat, nunc quis euismod rutrum, neque mauris luctus tortor, ut tempus tortor orci quis mauris.

 
ARTICLE INTRO Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quam tortor, pulvinar ut, luctus vel, vestibulum id, wisi. Maecenas molestie sollicitudin velit. Duis bibendum elit vitae dui. Fusce feugiat, nunc quis euismod rutrum, neque mauris luctus tortor, ut tempus tortor orci quis mauris.

DETAILS Vestibulum sollicitudin pede vitae erat. Aenean purus velit, posuere non, auctor ut, hendrerit laoreet, wisi. Aliquam erat volutpat. Maecenas tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut pede quam, tincidunt in, scelerisque id, gravida eget, mauris.

Q&A Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quam tortor, pulvinar ut, luctus vel, vestibulum id, wisi. Maecenas molestie sollicitudin velit. Duis bibendum elit vitae dui. Fusce feugiat, nunc quis euismod rutrum, neque mauris luctus tortor, ut tempus tortor orci quis mauris.

 

CSS Unleashed – Experiments with CSS Logo Designs

We’ve played with blocks and a wide variety of CSS experiments designs. Now let’s apply these techniques to creating business and web page logos.

Your website should have a logo, whether it is your company logo or one specific to the web page. Our company is called VanFossen Productions, but our website is called “Taking Your Camera on the Road”. We’ve created a graphic logo for the site, and below we’ve made a few attempts to reproduce it with CSS as part of our CSS experiments.

A pure CSS logo loads faster and saves bandwidth. But there are some limits. Unless you use embedded fonts, a technique limited to only a few web browsers, fonts are limited to a select few fonts available on most people’s computers. With a limited selection of fonts, the logo designs must concentrate on the graphic display of the content rather than the typographics.

That still leaves the field wide open to a powerful imagination and a wide variety of CSS experiments in design.

For more information on how these were done and how to use these CSS design elements and style experiments, see CSS Experiments – How They Were Done and More and CSS Experiments Putting It All Together.

To see how these CSS experimental boxes and styles work, view the source code of the page. In your web browser menu, click VIEW > SOURCE or VIEW > PAGE SOURCE to view the source code. For the most part, the styles are included inline with each design.

We order a lot of photographic equipment from B&H Photo-Video and their ads fill most photography and computer magazines. We thought we’d have a little fun on a take-off of their company logo.

A & B
An Alphabet Company
 

Sometimes a simple concept can create a powerful logo look. This logo design is timeless.

BLAH INCORPORATED
MORE BLAH AND MORE BLAH BLAH PLUS MORE BLAH
 

This logo design incorporates absolute and relative positioning to move the letter “D” into place and overlap the bottom banner, creating a dramatic logo look.

D

ancing

IN THE DARK
THEATER COMPANY
 

Using a technique of creating shadows with actual duplicates of the same content and not using CSS filters allows this shadow effect to be used across all browsers. You can find more information about creating such filters on the final page of this series. The style codes are listed at the top of this page in the head section.

Taking Your Camera Taking Your Camera
on the Road on the Road
With Lorelle and Brent VanFossen
 
Taking Your Camera on the Road Taking Your Camera on the Road
With Lorelle and Brent VanFossen
 

In the following CSS logo design experiment, I wanted to play with the dramatic effects of strong blocks of black and the empty space effect it can create when there are feelings of holes in the blocks. If you are using Internet Explorer, you would see “Alphabet” as vertical lettering. If you aren’t, you just see “Alphabet” in a white “block” space.

ALPHABET COMPANY
INCORPORATED
Seattle, Washington

Dedicated to the letters of the world

 

I feel sorry for the rest of us who rarely use Internet Explorer, so here’s another black and white graphic block example on a similar vein for a CSS only logo look.

ALPHABET
COMPANY
INCORPORATED

Seattle, Washington

Dedicated to the letters of the world

 

I really believe that the old calling card, a business card with your name and contact information, is still one of the most elegant designs. I recreated that look in this CSS only logo design using borders and clean lines and spacing. For more examples of fun with CSS borders, see my CSS design experiments with borders.

 
Alphabet Company
A Subsidiary of Letters Soup

Changing the world one letter at a time

 

Using some of the CSS design experiments with borders, I created a more visual CSS only logo design, a colorful keyword focused design.

Budgets Taxes Investments
ALEXANDER ACCOUNTING ASSOCIATION
YOUR ONE STOP MONEY SHOP
 

HTML Character Entities are great substitutes for simple symbols. You can have fun with CSS logo designs using the character entities and shades of interesting colors.

» » »Fred Smith Artistic Company « « «
 
» » »Fred Smith Artistic Company « « «
 
The Heart Goes On And On Company
 
Girls Love Diamonds Inc.
CSS Tips and Tricks, Photography, Technology | , , , , , , , | 1 Comment

CSS Unleashed – Experiments Showcasing Your Photography

By Lorelle VanFossen |

As nature and travel photographers, we are always looking for interesting ways to showcase and display our photographs and images, whether on their own in a photo gallery display online or within our articles. These are some examples of the CSS experiments with CSS design that we’ve been working on to showcase and display our photography, and to give you some ideas for your own CSS experiments with displaying photographs and images in your website, blog, photoblog, or photo gallery.

As with all CSS experiments, these are overcoded and may not work exactly the same on all browsers. We do our best to make sure our CSS and HTML meets web standards compliance, but not all browsers are equal. Test these thoroughly to make sure they withstand the rigors of your design needs.

For more information on how these were done and how to use these CSS design elements and style experiments, see CSS Experiments – How They Were Done and More and CSS Experiments Putting It All Together.

To see how these CSS experimental boxes and styles work, view the source code of the page. In your web browser menu, click VIEW > SOURCE or VIEW > PAGE SOURCE to view the source code. For the most part, the styles are included inline with each design.

Bugling Elk

Elk bugling in Jasper, Alberta, Canada, Photograph by Brent VanFossen

Photograph by
Brent VanFossen
Jasper, Alberta, Canada
During the fall, rut season begins and elk do amazing things like strutting and stomping and bugling. Brent photographed this elk early in the morning right outside of the small town of Jasper in the Canadian Rockies.
Brent used the Nikon F4 SLR 35mm camera with a 500mm lens with a 1.4x teleconverter. The film was Fuji’s Sensia 100 slide film.
 

Marmot babies kissing and sniffing each other, photograph by Brent VanFosen

Kissing Babies
Late spring brings out the marmot babies, peeking out from their holes in the grounds of the high alpine mountains. Caution soon gives over to rollicking play as they scamper about, darting in and out of the various burrows of their underground condominiums. These two cute fellows sniff each other prior to wrestling and rolling down the hill.

Photograph by Brent VanFossen
Olympic Marmots (Marmota Olympus)
Hurricane Ridge, Olympic National Park, Washington State, USA
Photographed using a Nikon F4 camera body with a 500mm f4 lens plus a 1.4x teleconverter
 

WILD THING, I THINK I LOVE YOU

orang12a.jpg - 12120 Bytes

Animals are such agreeable friends, they ask no questions, they pass no criticisms.
George Eliot

The camera always points both ways. In expressing the subject, you also express yourself.
Freeman Patterson

 

TOLEDO, SPAIN
Sunrise on Ancient City. The moment was perfect. We arrived early in the morning or late in the night, whichever is closer to 3AM, praying for a moment such as we received. The pre-dawn colors were intensly vibrant pinks and fushias, casting the adobe colored buildings into vibrant tones. The shutter whirred and clicked as Brent captured each moment of the quickly changing light.

Sunrise on Toledo, Spain, photograph by Brent VanFossen

 

NOTE: The following CSS experiments and designs use the flipv and fliph horizontal and vertical flipping filters and a variety of other filters such as shadows. These work in Internet Explorer and other browsers as they are proprietary to Microsoft, so they don’t work well in Firefox. We are currently working on new versions that will work in Firefox as well as other browsers. Until then, the rest of this page of css experiments are best viewed with something other than Firefox. Such is the challenge of working with CSS experiments.

SNOWSHOE HARE ( Lepus americanus)Snowshoe Hare, photograph by Brent VanFossen Photograph by Brent VanFossen, Olympic National Park. Washington State, USA
 

Grizzly Bear, photograph by Lorelle VanFossen

GRIZZLY
BEAR
PHOTOGRAPH BY LORELLE VANFOSSEN
 

Famous Blue Mosque of Istanbul, photograph by Brent VanFossen
Blue Mosque of Istanbul

Built in the early 1600s, the Sultan Ahmet Mosque is also known as the Blue Mosque. The nickname comes from the extensive blue-stencilled tiles decorating the inside upper levels. The mosque is considered a masterpiece by the Ottoman architect Sedefkar Mehmet Aga, principle architect for many of the surviving wonders of Istanbul. The building hosts 260 windows which fill the mosque with natural light, and the tallest dome is 43 meters high and 33.4 meters around. Among the various domes, the building features an unsual six minarets. It is considered one of the architectural wonders of Istanbul.

© Photograph by Brent VanFossen
 

Nature and Travel Photography

Brent VanFossenDrops of water on grass, photograph by Brent VanFossen

 
 

Birds in flight at Bosque del Apache, New Mexico, photograph by Brent VanFossen
 

Birds in flight at Bosque del Apache, New Mexico, photograph by Brent VanFossen
 

Butterfly photograph by Brent VanFossen

Butterfly by Brent VanFossen

“Happiness is a butterfly, which when pursued,
is always just beyond your grasp, but which,
if you will sit down quietly, may alight upon you.”
~~Nathaniel Hawthorne

Butterflies have always enchanted us with their ethereal nature. They work so hard as caterpillars, spend ages transforming themselves into winged creatures, and then live a short life as a butterfly before beginning the process over again, starting with death.

 

Egrets on nest with chicks, Florida, Photograph by Brent VanFossen

Those little nimble musicians of the air, that warble forth their curious ditties, with which nature hath furnished them to the shame of art. ~ Izaak Walton

There is nothing in which the birds differ more from man than the way in which they can build and yet leave a landscape as it was before. ~ Robert Lynd, The Blue Lion and Other Essays

 
Egrets on nest with chicks, Florida, Photograph by Brent VanFossen
Birds sing after a storm; why shouldn’t people feel as free to delight in whatever remains to them? ~Rose F. Kennedy

A bird does not sing because it has an answer. It sings because it has a song. ~Chinese Proverb

 

Peeking Out From Under
Nature
and
Travel
Photography
by Brent
VanFossen

Frog peeking out of duckweed, photograph by Brent VanFossen

Moving through the wetlands quickly, swatting at mosquitos, it is easy to overlook the small things. But once noticed, your attention moves from blood sucking mosquitos to enchantment.
© Brent VanFossen, VanFossen Productions
 

White Pelican, photograph by Brent VanFossen
 

White Pelican
Florida, USA

White Pelican, photograph by Brent VanFossen

Photograph by Brent VanFossen
© VanFossen Productions

 

Orangutan, Florida, Photograph by Brent VanFossenOrangutan, photograph by Brent VanFossen
 

In the next three designs of our CSS experiments with showcasing and displaying your photographs and images, we used a hover state to change the background color of the link. The links here are dummy links, but they still take on the action of the hover when the mouse passes over them.

The first one below doesn’t have the link, though it could be added. The next one is a variation on the same theme and features the link with the hover feature. Move the mouse over the text to change the background color of the text container. The bottom pure CSS experiments design also features a hover in which the background color changes when the mouse passes over.

Butterfly photograph by Brent VanFossen

Insects
Grizzly Bear photograph by Lorelle VanFossen

Mammals
Grand Canyon photograph by Brent VanFossen

Travel
 

 

Butterfly photograph by Brent VanFossen

VanFossen Productions offers a wide range of butterfly and other insect photographs.

Grizzly Bear photograph by Lorelle VanFossen

We specialize in photographing large and small mammals, especially North American wildlife images.

Grand Canyon photograph by Brent VanFossen

As nature and travel photographers, our life on the road has taken us all over North America, Europe and the Middle East.

 

Photography Within a Photograph
This CSS experiment features a photograph in the outside container with a repeating background image, and an inside container with a white background so the content sits inside the first container photograph like a frame.

Ferns, photograph by Brent VanFossenA shadow is created to make the inside container look like it is covered by the outside container and photograph with a silver border on the inside container with a top and right border of 3px and the other two borders at 2px.

We’ve included a small photograph of the background image to show the versatility of this CSS design. The photograph features a fern photographed against clover by Brent VanFossen.

 

WATER DROPS

This is an example
the white space and
the same technique

ON PLANTS

of a paragraph that crosses
the photograph keeping
going.

 

Nature Images by The VanFossens
American Alligator, Florida, photograph by Brent VanFosen
American Alligator
by Brent VanFossen
Butterfly photograph by Brent VanFossen
Butterfly
by Brent VanFossen
Baby Blue Eye Flower, photograph by Brent VanFossen
Baby Blue Eyes Flower
by Brent VanFossen
Caterpillar, photograph by Brent VanFossen
Caterpillar
by Brent VanFossen
herons making nest, photograph by Brent VanFossen
Herons Builting Nest
by Brent VanFossen
Grizzly Bear, photograph by Lorelle VanFossen
Grizzly Bear
by Lorelle VanFossen
 

This next example includes techniques from Pixy’s No Pre-Load Images and the SimpleBits example of a zoomed image. Move your mouse over the photograph and it will “zoom” to a larger size. Move away and it will go back to the smaller size.

View photo
ZOOM! Photo Gallery

To see the image “zoom” to a larger size, move the mouse over it.

This is a more interactive version of CSS experiments with photographs and image displays and galleries. To see a larger version of an image, like from a thumbnail version to a “full-sized” version, usually the user clicks on a graphic of the thumbnail and is taken to a new “page” view of the graphic itself. The surrounding “page” only holds the graphic so there is no information about the photograph or anything. If the designer doesn’t want to create a separate page for every graphic to hold information about the larger photograph, the viewer is stuck with a blank page of just the graphic image on it. Boring.

This technique involves a single graphic image of two sizes of the same photograph located within an anchor. To see the graphic example, click on the photograph. When you move the mouse over the anchor (link), the CSS hover command changes the positioning of the image to reveal the larger sized image and changes the width and height of the container. This novel effect can replace the “click to see a larger size” process, allowing viewing of the larger version of the image while staying on the same page with the matching content. Wonderful!

There are some limits to this CSS experiment and design technique. There can be no other links within the container unless some design modifications are made. Two separate images may actually be smaller in file size than the single larger image because of the excess space. It also shifts the text content around which could mess up your layout (as shown with the title if the window is narrow). Unprepared viewers can get a bit startled by the effect. Otherwise, it’s a fun idea.


Another Twist on Displaying Images with Javascript

New techniques in CSS experiments are coming out all the time using Javascript and Ajax to enhance your photographs and images. Here is a list of some interesting methods to experiment with:

CSS Tips and Tricks, Photography, Technology | , , , , , , , | 5 Comments