Taking Your Camera on the Road

The ability to use backgrounds with CSS adds to the power of your imagination. We played around with more CSS experiments, this time with background transparency filters, and a few other effects to create interesting background and text effects. These tricks don't work on all browsers, but they do find on MS Internet Explorer and Firefox. Stretch the possible with transparency filters.

Understanding how CSS and HTML work together is not easy. The idea that it takes two pieces to fit together to make a web page display is a challenge. We've broken down the concept into simple terms and definitions, as well as simple examples to help you understand how CSS influences HTML and how they work together, and how to start to create your own web page designs. We begin with terminology and then simple application, developing into an understanding that while tables no longer shape and form web pages, the containers created with HTML and CSS not only shape but provide a new form of control over the end result. If you are considering exploring our CSS experiments, or doing any of your own web page design, then take time to understand how CSS selectors and attributes work.

While there is a lot of information about code styles and design layouts out on the web and throughout our CSS experiments, some of the smallest details can be difficult to find. One of the little bits I needed to know was about how to layout a style sheet. Where do the spaces go? Does there need to be spaces between the codes? Does each rule need to be on its own line? And how to structure the rules, selectors, and declarations? When do I use colons and when do I use semi-colons? When do I use quote marks in CSS? Is there a reason and rhyme to naming DIVs and classes? While HTML isn't very forgiving when it comes to a slip of the finger or a space in a tag, CSS is a bit more forgiving. Here are a few things we learned along the way, especially while working on our CSS experiments.

In a burst of determined and creative energy, I tackled what is possible, and only imagined, using only CSS to create design elements for web pages. I collected examples from magazines, newspapers, brochures, advertisements, books, anything I could get my hands on and then put CSS to the test. Few others at the time were pushing the CSS design elements, so I did. These are free for you to use and learn from and include a wide range of experiments in CSS design, emulating magazine looks and layouts, headings, titles, section heads, pull-quotes, quotes, blockquotes, magazine looks, lists, tables of content, menus, box, containers, and headlines.

Continuing with our CSS experiments, we take you through the evolution of a blockquote, from the simple addition of a border, to enhancing the background, and even modifying the text, then putting it all together. The evolution process should help you understand the various ways CSS can be used to modify a design element, and encourage you to explore the possible.

Blockquotes in a web page are dramatic ways of highlighting text, like a quote, a saying, or some text content you want to highlight. We explore a wide variety of blockquote CSS designs in our ongoing CSS experiments, recreating a wide variety of blockquotes you can use for free.

It seems like yesterday we were playing with blocks and building imaginary buildings. You can treat CSS blocks as toy building blocks and create a variety of effects to enhance different headings, blockquotes, photographs, or other graphic elements within your web page. Explore the possibilities with more CSS experiments.

In our CSS experiments, we've played with text, blocks, and backgrounds, so now it's time to create some simple logos built entirely out of CSS. Even if you have a company logo, you may be able to recreate it with CSS, or design a logo specifically for your website, giving it its own unique look. We have a few simple logos to get your imagination started.