Web Design, CSS, and WordPress Taking Your Camera on the Road - CSS Unleashed - Experiments with Quotations, Pull-quotes and Blockquotes

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.

CSS Experiments

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

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

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

• » 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

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

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

random images, photography by Lorelle and Brent VanFossen - copyrighted

Authors, photographers, teachers, and public speakers, Lorelle and Brent VanFossen, travel extensively with their camera and pen in hand to bring you a variety of articles on nature and travel photography including basic nature photography and the photography business, writing, travel, recreational vehicles, web page design, and life on the road. All images, design, and content are copyrighted and protected by law.

You can find related articles to this topic in our Web Pages and CSS Tips and Tricks and Photographycategories. The previous post is CSS Unleashed - Experiments Playing With CSS Blocks and the next post is CSS Unleashed - Variations on a Theme. CSS Unleashed - Experiments with Quotations, Pull-quotes and Blockquotes, Issue Number 154, by Lorelle VanFossen, was updated September 2nd, 2006.

You can follow comments through the RSS 2.0 feed and you can find more feeds on our Feeds List. Your comment is welcome, as are trackbacks from your site.

Article Series - CSS Experiments

Next: CSS Unleashed - Experiments Showcasing Your Photography
Previous: CSS Unleashed - Experiments with Lists, Menus, Tables of Content, and More

Related Articles

7 comments from people who had something to say

RSS feed for comments on this post. TrackBack URI

People are talking here

chasmyn said:
December 31, 2005

I hope this isn’t inappropriate thing for me to ask - I’ve been Googling and reading the WP codex trying to figure this out all day. What code do you use to make the blockquote look like the handprint one? I have a different image in place of the handprint I’d like to use, but I cannot figure out the code to make it work, so that it is outside of the text and so that both of them show up. (I’m using WP 2.0).

Thanks.
Lorelle VanFossen said:
December 31, 2005

Chasmyn, all the information you need to know is on this page. It has nothing to do with WordPress and I designed all these years before WordPress was even a glimmer. To see how they work, view the source code for the quote you like and copy it.

In the source code for all of these CSS experiments are explanations, links, and the information you need to reproduce them. Sophisticated design elements sometimes required instructions in the style sheet, so you can look through that for the class or ID references to find the specifics there. Not all CSS works inline. Some have to be outside of the HTML page, which made this even more of a challenge.

If you are using Firefox, this is even easier. Select the entire blockquote you like with your mouse (highlight). Right click and choose “View Selection Source”. That specific area will then be highlighted in the source code page that opens. You can also see more CSS information by viewing the CSS with Web Developer Tools Extension and Edit CSS.

The key to this blockquote is that it is actually three wrappers. A DIV, blockquote, and another DIV. I got the idea from a similar layout by Nick Boalch at http: //www.frejol.org/ and then modified it to meet my own needs.

All of the blockquotes in the top section of the page are based upon Nick’s blockquote layout, showing you the versatility of the layout. The instructions and links are at the top of that section since they are all variations on the same theme.

I explain how to do CSS in many articles on this site. I consciously chose to keep the instructions within the source code so that instructions wouldn’t overwhelm the page visually.

I might change my mind for this, but part of the fun of these is figuring them out for yourself. After all, these are not for the faint of heart. They are for the determined, creative, and skilled who want to break the barriers of boring websites.

For more information on how these were done and how to use them within your website design, see CSS Experiments - How They Were Done and CSS Unleashed - Experiments - Putting It All Together.
John M. Dlugosz said:
November 15, 2006

I think you can make it work without the inner DIV. You need two elements to hang the images on: the wrapping DIV for the right graphic, and the left graphic can be applied to the BLOCKQUOTE itself, which contains padding to accomidate it.
Lorelle VanFossen said:
November 15, 2006

There are many ways to design the various blockquotes with CSS. To put a graphic on both sides of the content, without being “behind” the content and allowing width and height flexibility of the blockquote, this is the method I came up with that worked across all situations. Until you put this into real practice, theory doesn’t always hold water with CSS. ;-)

And there are always alternatives.
Amanda said:
June 29, 2008

Thank you, this was very helpful. :)

Trackbacks and Pingbacks: What People are Saying

[…] I added the CSS to style my blockquote look: […]

Pingback by Taking Your Camera on the Road » Changing the WordPress Quicktag Buttons — November 8, 2005 @ 8:59
[…] I added the CSS to style my blockquote look: […]

Pingback by Lorelle on WordPress » Customizing Your WordPress Quicktag Buttons — March 31, 2006 @ 11:55

Have Something to Add?

All comments are moderated, so play nice.