with Lorelle and Brent VanFossen

CSS Unleashed – Experiments with Lists, Menus, Tables of Content, and More

There are many ways of arranging content. Articles often feature tip boxes, pull-quotes, blockquotes, lists, tables of contents, and menu items helping people get the information they need within and without of the scope of the article. These can also include step-by-step instructions pulled from the article to help take people through the process.

We decided to experiment with a few of these content handling designs to find ways of moving beyond the pull-quote or blockquote to actually presenting bits and pieces of information in an interesting and eye catching fashion with CSS as part of our CSS experiments. In general, the HTML is simple, but the design elements can be sophisticated. As mentioned before, these are CSS experiments, so test them thoroughly within your own design to make sure they work.

Most of these content handling designs begin with a list. It’s what you do with the list that makes the design interesting and part of our CSS experiments.

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.

  • Item One
  • Item Two
  • Item Three

  • Item One
  • Item Two
  • Item Three

  • Item One
  • Item Two
  • Item Three

  • Item One
  • Item Two
  • Item Three
 

  • Item One
  • Item Two
  • Item Three
 

  • Item One
  • Item Two
  • Item Three
 

  • Item One
  • Item Two
  • Item Three
 

  • Item One
  • Item Two
  • Item Three
 

Today’s List
  • Item One
  • Item Two
  • Item Three
 

Camera Equipment Tips
  • Buying a Camera Overcoming the camera buying fears.
  • Buying a Used Camera A great camera can be a once-loved camera.
  • Lighting Accessories Light is the trick of all photography.
  • The Camera Bag Know before you go what you need to lug it with you.

Let’s go back to the simple list and remove the list images and see what we come up with.

  • Item One
  • Item Two
  • Item Three
 
 

Today’s List
  • Item One
  • Item Two
  • Item Three

The HTML for these CSS experiment designs can be set up in lists, paragraphs, or other HTML tag divisions and containers. We’ve kept the style codes inline for tweaking and messing, and we discuss how to pull these inline CSS codes out to become style sheet references in our last section on this series.

As with all these types of designs and CSS experiments, the color choices are unlimited, so use your imagination and play with these designs to match your own web page designs.

 

Feature Articles
How To? What For? Basics of Nature Photography Introduction to the basics behind our nature images Lorelle and Brent VanFossen

Background Magic Investigating your backgrounds Lorelle and Brent VanFossen

Patterns in Nature Exploring the geometry of nature Lorelle and Brent VanFossen

Close Ups In Nature Peek into the world of the small Lorelle and Brent VanFossen

Digital Camera Tips and Tricks Techno-age meets tree huggers Lorelle and Brent VanFossen

 

Ann Smart photographs an insect up close and personal, photograph by Lorelle VanFossen How To? What For? Basics of Nature Photography

Introduction to the basics of nature photography, from the first step to advanced techniques, including digital photography

White tiger, photo by Lorelle VanFossen Wild Thing, I Think I Love You

Wildlife photography is an exciting part of nature photography. We have the the tips, techniques and advice you need for photographing wildlife and wild things

Patterns in ferns and clover, photograph by Brent VanFossen Patterns in Nature

New article series on exploring the geometry of nature through line, shape, texture, color, pattern and rhythm, shape recognition

 

WANT SOME ANSWERS?
If you are looking for answers to your nature photography questions, you’ve come to the right place.
QWhat camera do you use?
AWe use two different camera brands, Canon and Nikon. The Canon equipment is lighter, travels well, and we have a wide range of lenses well suited for travel photography. Our Nikon equipment is older, heavier, and ideal for serious nature photography. We have the long and fast lenses which are ideal for both wildlife and scenic landscapes.
QWhat kind of film do you use and why?
AWe currently use two types of film from one brand: Fuji. We use Fuji’s Sensia 100 for our normal work on just about everything. We also use Fuji’s professional film, Velvia, for high contrast and quality color and slower ISO 50 when the moment cries out for vivid colors, such as for the wildflowers of Texas.
QWhat are your favorite photographic subjects?
AAs nature and travel photographers, our interests are both narrow and diverse at the same time. In general, we avoid photographing people unless they add something to the scene like a cultural event. Yet, we photograph a wide range of animals from large elk, moose, and bear, to the smaller insects and butterflies of the world. We do a lot of scenic landscapes and closeups, and feature a wide range of textures and patterns in our inventory. You could call us focused and selectively diverse.
 

FOR MORE INFORMATION
Email Address
Email us at either fred@fred.com or fredlet@fred.com. We travel a lot so please don’t expect a prompt reply.

Telephone
You can also call 020 020 020 0200 but never during the day or night.

Mailing Address
We are rarely home but if you want to mail something to us, please send it to:
Fred.com
1234 Fred Street
Fredville, FRED 002000

 

Step By Step Instructions
1

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.

2

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.

3

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.

 

Step By Step Instructions
1

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.

2

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.

3

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.

 

Step By Step Instructions
1

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.

2

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.

3

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.

 

Step By Step Instructions
1

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.

2

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.

3

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.

 

Step By Step Instructions

1Lorem 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.

2Vestibulum 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.

3Lorem 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.

 

Step By Step Instructions
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.

B

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.

C

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.

 

STEP BY STEP INSTRUCTIONS

The following are step by step instructions for the process involved.

STEP ONE

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.

STEP TWO

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.

STEP THREE

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.

 

STEP BY STEP INSTRUCTIONS

STEP ONE 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.

STEP TWO 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.

STEP THREE 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.

 

STEP BY STEP INSTRUCTIONS
STEP ONE
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.
STEP TWO
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.
STEP THREE
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.
 

How To? What For? Basics of Nature Photography Introduction to the basics behind our nature images Lorelle and Brent VanFossen
Background Magic Investigating your backgrounds Lorelle and Brent VanFossen
Patterns in Nature Exploring the geometry of nature Lorelle and Brent VanFossen
Close Ups In Nature Peek into the world of the small Lorelle and Brent VanFossen
 

3 Trackbacks

Post a Comment

Your email is kept private. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.