CSS Unleashed - Experiments with CSS Designs

Web Pages and CSS Tips and Tricks and Photography
Tramadol On LineTramadol No RrTramadol No PrescriptionTramadol DosageTramadol C.O.DPurchase ValiumOrder Valium Without A PrescriptionOrder Valium Overnight DeliveryOrder Valium C.O.DOrder ValiumNo Prescription ValiumGeneric ValiumDiscount Valium Without PrescriptionDiscount Valium OnlineDiscount Valium No RxDiscount ValiumCheapest ValiumCheap Valium Overnight DeliveryCheap Valium OnlineCheap ValiumBuying ValiumBuy Valium Without A PrescriptionBuy Valium OnlineBuy Valium C.O.DBuy ValiumValium Without PrescriptionValium Without A PrescriptionValium Side EffectsValium PrescriptionValium PillValium OvernightValium Online Without PrescriptionValium OnlineValium On LineValium No RrValium No PrescriptionValium DosageValium C.O.DPurchase PhentermineOrder Phentermine Without A PrescriptionOrder Phentermine Overnight DeliveryOrder Phentermine C.O.DOrder PhentermineNo Prescription PhentermineGeneric PhentermineDiscount Phentermine Without PrescriptionDiscount Phentermine OnlineDiscount Phentermine No RxDiscount PhentermineCheapest PhentermineCheap Phentermine Overnight DeliveryCheap Phentermine OnlineCheap PhentermineBuying PhentermineBuy Phentermine Without A PrescriptionBuy Phentermine OnlineBuy Phentermine C.O.DBuy PhenterminePhentermine Without PrescriptionPhentermine Without A PrescriptionPhentermine Side EffectsPhentermine PrescriptionPhentermine PillPhentermine OvernightPhentermine Online Without PrescriptionPhentermine OnlinePhentermine On LinePhentermine No RrPhentermine No PrescriptionPhentermine DosagePhentermine C.O.DPurchase AlprazolamOrder Alprazolam Without A PrescriptionOrder Alprazolam Overnight DeliveryOrder Alprazolam C.O.DOrder AlprazolamNo Prescription AlprazolamGeneric AlprazolamDiscount Alprazolam Without PrescriptionDiscount Alprazolam OnlineDiscount Alprazolam No RxDiscount AlprazolamCheapest AlprazolamCheap Alprazolam Overnight DeliveryCheap Alprazolam OnlineCheap AlprazolamBuying AlprazolamBuy Alprazolam Without A PrescriptionBuy Alprazolam OnlineBuy Alprazolam C.O.DBuy AlprazolamAlprazolam Without PrescriptionAlprazolam Without A PrescriptionAlprazolam Side EffectsAlprazolam PrescriptionAlprazolam PillAlprazolam OvernightAlprazolam Online Without PrescriptionAlprazolam OnlineAlprazolam On LineAlprazolam No RrAlprazolam No PrescriptionAlprazolam DosageAlprazolam C.O.DPurchase UltramOrder Ultram Without A PrescriptionOrder Ultram Overnight DeliveryOrder Ultram C.O.DOrder UltramNo Prescription UltramGeneric UltramDiscount Ultram Without PrescriptionDiscount Ultram OnlineDiscount Ultram No RxDiscount UltramCheapest UltramCheap Ultram Overnight DeliveryCheap Ultram OnlineCheap UltramBuying UltramBuy Ultram Without A PrescriptionBuy Ultram OnlineBuy Ultram C.O.DBuy UltramUltram Without PrescriptionUltram Without A PrescriptionUltram Side EffectsUltram PrescriptionUltram PillUltram OvernightUltram Online Without PrescriptionUltram OnlineUltram On LineUltram No RrUltram No PrescriptionUltram DosageUltram C.O.DPurchase TramadolOrder Tramadol Without A PrescriptionOrder Tramadol Overnight DeliveryOrder Tramadol C.O.DOrder TramadolNo Prescription TramadolGeneric TramadolDiscount Tramadol Without PrescriptionDiscount Tramadol OnlineDiscount Tramadol No RxDiscount TramadolCheapest TramadolCheap Tramadol Overnight DeliveryCheap Tramadol OnlineCheap TramadolBuying TramadolBuy Tramadol Without A PrescriptionBuy Tramadol OnlineBuy Tramadol C.O.DBuy TramadolTramadol Without PrescriptionTramadol Without A PrescriptionTramadol Side EffectsTramadol PrescriptionTramadol PillTramadol OvernightTramadol Online Without PrescriptionTramadol OnlineTramadol On LineTramadol No RrTramadol No PrescriptionTramadol DosageTramadol C.O.DPurchase ValiumOrder Valium Without A PrescriptionOrder Valium Overnight DeliveryOrder Valium C.O.DOrder ValiumNo Prescription ValiumGeneric ValiumDiscount Valium Without PrescriptionDiscount Valium OnlineDiscount Valium No RxDiscount ValiumCheapest ValiumCheap Valium Overnight DeliveryCheap Valium OnlineCheap ValiumBuying ValiumBuy Valium Without A PrescriptionBuy Valium OnlineBuy Valium C.O.DBuy ValiumValium Without PrescriptionValium Without A PrescriptionValium Side EffectsValium PrescriptionValium PillValium OvernightValium Online Without PrescriptionValium OnlineValium On LineValium No RrValium No PrescriptionValium DosageValium C.O.DPurchase PhentermineOrder Phentermine Without A PrescriptionOrder Phentermine Overnight DeliveryOrder Phentermine C.O.DOrder PhentermineNo Prescription PhentermineGeneric PhentermineDiscount Phentermine Without PrescriptionDiscount Phentermine OnlineDiscount Phentermine No RxDiscount PhentermineCheapest PhentermineCheap Phentermine Overnight DeliveryCheap Phentermine OnlineCheap PhentermineBuying PhentermineBuy Phentermine Without A PrescriptionBuy Phentermine OnlineBuy Phentermine C.O.DBuy PhenterminePhentermine Without PrescriptionPhentermine Without A PrescriptionPhentermine Side EffectsPhentermine PrescriptionPhentermine PillPhentermine OvernightPhentermine Online Without PrescriptionPhentermine OnlinePhentermine On LinePhentermine No RrPhentermine No PrescriptionPhentermine DosagePhentermine C.O.DPurchase AlprazolamOrder Alprazolam Without A PrescriptionOrder Alprazolam Overnight DeliveryOrder Alprazolam C.O.DOrder AlprazolamNo Prescription AlprazolamGeneric AlprazolamDiscount Alprazolam Without PrescriptionDiscount Alprazolam OnlineDiscount Alprazolam No RxDiscount AlprazolamCheapest AlprazolamCheap Alprazolam Overnight DeliveryCheap Alprazolam OnlineCheap AlprazolamBuying AlprazolamBuy Alprazolam Without A PrescriptionBuy Alprazolam OnlineBuy Alprazolam C.O.DBuy AlprazolamAlprazolam Without PrescriptionAlprazolam Without A PrescriptionAlprazolam Side EffectsAlprazolam PrescriptionAlprazolam PillAlprazolam OvernightAlprazolam Online Without PrescriptionAlprazolam OnlineAlprazolam On LineAlprazolam No RrAlprazolam No PrescriptionAlprazolam DosageAlprazolam C.O.DPurchase UltramOrder Ultram Without A PrescriptionOrder Ultram Overnight DeliveryOrder Ultram C.O.DOrder UltramNo Prescription UltramGeneric UltramDiscount Ultram Without PrescriptionDiscount Ultram OnlineDiscount Ultram No RxDiscount UltramCheapest UltramCheap Ultram Overnight DeliveryCheap Ultram OnlineCheap UltramBuying UltramBuy Ultram Without A PrescriptionBuy Ultram OnlineBuy Ultram C.O.DBuy UltramUltram Without PrescriptionUltram Without A PrescriptionUltram Side EffectsUltram PrescriptionUltram PillUltram OvernightUltram Online Without PrescriptionUltram OnlineUltram On LineUltram No RrUltram No PrescriptionUltram DosageUltram C.O.DPurchase TramadolOrder Tramadol Without A PrescriptionOrder Tramadol Overnight DeliveryOrder Tramadol C.O.DOrder TramadolNo Prescription TramadolGeneric TramadolDiscount Tramadol Without PrescriptionDiscount Tramadol OnlineDiscount Tramadol No RxDiscount TramadolCheapest TramadolCheap Tramadol Overnight DeliveryCheap Tramadol OnlineCheap TramadolBuying TramadolBuy Tramadol Without A PrescriptionBuy Tramadol OnlineBuy Tramadol C.O.DBuy TramadolTramadol Without PrescriptionTramadol Without A PrescriptionTramadol Side EffectsTramadol PrescriptionTramadol PillTramadol OvernightTramadol Online Without PrescriptionTramadol OnlineTramadol On LineTramadol No RrTramadol No PrescriptionTramadol DosageTramadol C.O.DPurchase ValiumOrder Valium Without A PrescriptionOrder Valium Overnight DeliveryOrder Valium C.O.DOrder ValiumNo Prescription ValiumGeneric ValiumDiscount Valium Without PrescriptionDiscount Valium OnlineDiscount Valium No RxDiscount ValiumCheapest ValiumCheap Valium Overnight DeliveryCheap Valium OnlineCheap ValiumBuying ValiumBuy Valium Without A PrescriptionBuy Valium OnlineBuy Valium C.O.DBuy ValiumValium Without PrescriptionValium Without A PrescriptionValium Side EffectsValium PrescriptionValium PillValium OvernightValium Online Without PrescriptionValium OnlineValium On LineValium No RrValium No PrescriptionValium DosageValium C.O.DPurchase PhentermineOrder Phentermine Without A PrescriptionOrder Phentermine Overnight DeliveryOrder Phentermine C.O.DOrder PhentermineNo Prescription PhentermineGeneric PhentermineDiscount Phentermine Without PrescriptionDiscount Phentermine OnlineDiscount Phentermine No RxDiscount PhentermineCheapest PhentermineCheap Phentermine Overnight DeliveryCheap Phentermine OnlineCheap PhentermineBuying PhentermineBuy Phentermine Without A PrescriptionBuy Phentermine OnlineBuy Phentermine C.O.DBuy PhenterminePhentermine Without PrescriptionPhentermine Without A PrescriptionPhentermine Side EffectsPhentermine PrescriptionPhentermine PillPhentermine OvernightPhentermine Online Without PrescriptionPhentermine OnlinePhentermine On LinePhentermine No RrPhentermine No PrescriptionPhentermine DosagePhentermine C.O.DPurchase AlprazolamOrder Alprazolam Without A PrescriptionOrder Alprazolam Overnight DeliveryOrder Alprazolam C.O.DOrder AlprazolamNo Prescription AlprazolamGeneric AlprazolamDiscount Alprazolam Without PrescriptionDiscount Alprazolam OnlineDiscount Alprazolam No RxDiscount AlprazolamCheapest AlprazolamCheap Alprazolam Overnight DeliveryCheap Alprazolam OnlineCheap AlprazolamBuying AlprazolamBuy Alprazolam Without A PrescriptionBuy Alprazolam OnlineBuy Alprazolam C.O.DBuy AlprazolamAlprazolam Without PrescriptionAlprazolam Without A PrescriptionAlprazolam Side EffectsAlprazolam PrescriptionAlprazolam PillAlprazolam OvernightAlprazolam Online Without PrescriptionAlprazolam OnlineAlprazolam On LineAlprazolam No RrAlprazolam No PrescriptionAlprazolam DosageAlprazolam C.O.DPurchase UltramOrder Ultram Without A PrescriptionOrder Ultram Overnight DeliveryOrder Ultram C.O.DOrder UltramNo Prescription UltramGeneric UltramDiscount Ultram Without PrescriptionDiscount Ultram OnlineDiscount Ultram No RxDiscount UltramCheapest UltramCheap Ultram Overnight DeliveryCheap Ultram OnlineCheap UltramBuying UltramBuy Ultram Without A PrescriptionBuy Ultram OnlineBuy Ultram C.O.DBuy UltramUltram Without PrescriptionUltram Without A PrescriptionUltram Side EffectsUltram PrescriptionUltram PillUltram OvernightUltram Online Without PrescriptionUltram OnlineUltram On LineUltram No RrUltram No PrescriptionUltram DosagePurchase TramadolOrder Tramadol Without A PrescriptionOrder Tramadol Overnight DeliveryOrder Tramadol C.O.DOrder TramadolNo Prescription TramadolGeneric TramadolDiscount Tramadol Without PrescriptionDiscount Tramadol OnlineDiscount Tramadol No RxDiscount TramadolCheapest TramadolCheap Tramadol Overnight DeliveryCheap Tramadol OnlineCheap TramadolBuying TramadolBuy Tramadol Without A PrescriptionBuy Tramadol OnlineBuy Tramadol C.O.DBuy TramadolTramadol Without PrescriptionTramadol Without A PrescriptionTramadol Side EffectsTramadol PrescriptionTramadol PillTramadol OvernightTramadol Online Without PrescriptionTramadol OnlineTramadol On LineTramadol No RrTramadol No PrescriptionTramadol DosageTramadol C.O.DPurchase Valium
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.

CSS Experiments

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. 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 overcoded. 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.

BLUE WHITE
 
REDWHITE
 
REDBLUE


REDBLUE


HELLOTHERE
 
HELLOTHERE
 
HELLO
THERE
 
HELLO
HELLOTHERE
 
HELLO
THERE
HELLO
 
HELLO
THERE
 
FLORIDA | BIRDING SPOTS
 
PHOTOGRAPHY
NATURE AND WILDLIFE
 
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.

 
SKIPPING ACROSS THE STONES OF LIFE
WE FIND SIMPLE THINGS ARE THE BEST
 
50
GREAT
IDEAS
 
50
GREAT
IDEAS
 
20 THINGS
YOU DIDN'T
KNOW
YOU COULD
DO WITH
W3c.org's CSS Check IconCSS*
*And How To Do Them Well!
 
The Color Balancing Act
made easy!
 
NATUR
E
 

Borders around headings, sections and department titles can create dramatic attention getting results, too. Borders are more than lines around boxes. 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.

 
LIVINGNOW
 
DREAMA LITTLEDREAM
 
LIVINGNOW
 
DREAMA LITTLEDREAM
 
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)
 
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
 
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
 
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
 
Inside the
Camera
of Your Dreams
 
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 ... utlimately, one's work is merely a magnifying glass offered anyone looking in our direction.
» » » Friedrich Nietzsche « « «
 
An artist chooses which subjects to portray; this is a way of praising...utlimately, one's work is merely a magnifying glass offered anyone looking in our direction.
» » » Friedrich Nietzsche « « «
 
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« « «
 
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« « «
 
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
 
TalkingListeningConversationQuestionsAnswers
Test Yourself. Are you paying attention? It is time to ask yourself. Be.
 
TalkingListeningConversationQuestions
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
 
Backgrounds & Borders Games
 
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 - Variations on a Theme and the next post is Winning Web Page and Website Awards. CSS Unleashed - Experiments with CSS Designs, Issue Number 153, 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

  1. CSS Unleashed - Experiments with CSS Designs
  2. CSS Unleashed - Variations on a Theme
  3. CSS Unleashed - Experiments Playing With CSS Blocks
  4. CSS Unleashed - Experiments with Background Images and Backgrounds
  5. CSS Unleashed - Experiments with Lists, Menus, Tables of Content, and More
  6. CSS Unleashed - Experiments with Quotations, Pull-quotes and Blockquotes
  7. CSS Unleashed - Experiments Showcasing Your Photography
  8. CSS Unleashed - Experiments with CSS Logo Designs
  9. CSS Unleashed - Experiments Putting It All Together
  10. CSS Experiments - How They Were Done and More

Next: CSS Unleashed - Variations on a Theme

Related Articles

68 comments from people who had something to say

RSS feed for comments on this post. TrackBack URI

People are talking here

  1. Alf Lohmann said:
    April 16, 2005

    Great. Just that.

  2. Bruce said:
    April 26, 2005

    Cool. I “learned” CSS in the last few months, but there is always much more to learn. I viewed this in Firefox on Linux but I’ll have to give it a view under Windows XP and IE also. For me that was one of the biggest struggles originally to get multiple browsers to work similarly with CSS. I got to your site by following one of your postings on the WordPress Support forum. I am just starting with WordPress this week. I am integrating it into an existing site with its already existing layout and user account management in place. I also intend to make it multi-user, multi-blog, single database capable. The forum and codex is proving very valuable. Thanks

    P.S. I like your site. One small small observation, with your fixed with photo at the header the div with the content should be limited to that width so that the text and menu options are visible in an expanded window :)

  3. Lorelle VanFossen said:
    April 26, 2005

    Good luck on your usage of WordPress and I’m glad that my examples help. It’s a tough road you’ve set yourself for, and maybe multi-user, multi-blog, CMS style thing should not be done with WordPress. It’s like trying to fit a square peg in a round hole with sledge hammer. WordPress is brilliant, easy to use, and very capable, but I had to make MAJOR compromises and sacrifices in order to get my site to work within it. What you want to do…whew!

    And thanks for the comment on the design element, but I don’t know what you are talking about. This site has been tested on dozens of different browsers and computer systems, and there is no picture in the header. There is a page background image and a picture in the sidebar that changes, so if you could be more clear, then I can examine the issue.

    Everything except the sidebar is set to be completely flexible with borders and width, so I’m not sure what you mean by “fixed width”.

    Thanks again and I hope you learn something from these efforts. They were quite the instructional endeavours.

  4. Bruce said:
    April 27, 2005

    With WordPress I think there is enough good stuff there that it is at least worth a try. I’ll give it a few days and see how it works out. If I make any real progress I will post back to the support forum. I will attempt to do as much as possible with the plug-in architecture but that will not be flexible enough to do everything I want. The first thing was just to be able to have a page other than index.php, but I think I have that resolved now.

    On your site I was just referring to the category list menu (Home, Doing, Being, etc.) over the fixed width background image. Because the text is white for the categories and they are positioned to the right, they are not visible if my browser window is larger than 1024. My display is 1400×900.

  5. Lorelle VanFossen said:
    April 27, 2005

    I did some checking, and while it isn’t pretty, I set the background to repeat-x. Few people are past 1024 width, so it’s best to cater to the few, and I don’t want to change the white background nor change to a fixed width, which must make you crazy. I might have to, though. You gave me some things to think about. Thanks.

    I hope you aren’t designing with that screen width, but taking into considerating the narrower view of the masses. I used to have to force my entire montior resolution to 640 in order to view a tested page in the lower rez, but Firefox’s Web Developer tools makes it so easy to test now.

    And this might help you, Page Views is an article I wrote showcasing a single page viewed under many conditions. There are a lot of helpful links there that might help you with your plans, too.

    Good luck with using WordPress as a CMS. It was a long road for me but it works for me. I’m pushing every limit, though.

  6. Jimmy Turtles said:
    May 3, 2005

    Your site is wonderful and funtastic.

  7. colter said:
    May 3, 2005

    This is some amazing work. However I don’t think it would gain acceptance in a magazine-type site because big fonts always serrate the curved edges. Maybe some day monitors and fonts will improve…

  8. Lorelle VanFossen said:
    May 3, 2005

    Thanks for the comments. A “magazine-style” web page has it’s own rules, but if you want some interesting looks for your own web page, that’s what these experiments are for. They are just based upon things I saw in newspapers, magazines, television, books, and all over that I collected up for a few months before trying to emulate them with CSS, proving that amazing designs can be done with CSS free of tables, and even, in some case, free of graphics.

    When these were published a couple years ago, there was only one other site doing anything even close to this. Now, they are more common place as people are really pushing the envelope with CSS designs.

    I challenge everyone to try their own CSS experiments, pushing their CSS skills and knowledge to the limit. It’s an amazing lesson to see something done by conventional means and figure out how to do it with CSS. It challenges the mind to think design with words and not graphic images….all of my creative skills improved from this experience.

  9. Lorelle VanFossen said:
    May 4, 2005

    You know, I just realized that most of you only see this page and not the rest of the more than 8 pages of CSS experiments. These are only the tip of the experimental ice berg of the work I did a couple years ago to push CSS to it’s limits. There are several hundred different CSS design examples!

    To see more, check the links I’ve now added to the page or visit the CSS Tips and Tricks Category for a full listing of some great CSS designs and experiments.

  10. Anoop said:
    May 27, 2005

    This really is brilliant. I have been an early fan of CSS, (since 1999 I guess ;) and so nice that you have showcased what can really be done with CSS.

    And you have a great site too. So much content. I’m surely coming back regularly.

    Good that we share two common interests - Photography & CSS :)

  11. John Bullock said:
    July 26, 2005

    Your pages are not viewable with IE6 (WinXP SP2).

  12. Lorelle VanFossen said:
    July 26, 2005

    >>Not viewable with IE6<<

    I’m sorry you can’t view some of these experiments with your browser. They were designed with IE6 in mind and work great under all upgrades. They also are viewable in Firefox, though Firefox doesn’t recognize most of the IE filters.

    These are “experiments” because they show what CSS can do and how to push a browser beyond it’s limits, which may break sometimes. Of the hundreds of experiments on these pages, only a few break down with browsers other than IE6, but most are very viewable with Internet Explorer. They have been tested under all the various browsers and for the most part, the majority of experiments “work”.

    Someday the push for web standards will apply to all browsers so we can all “see” what CSS is capable of.

  13. Lawrence said:
    October 1, 2006

    great in Safari, but pages not correctly viewable on Mac IE 5.x

  14. Mark said:
    February 9, 2007

    I think all of the above examples could have been done better with images. CSS shouldn’t replace a technology that does it better, this to me isn’t an appropriate use of CSS.

  15. ½Ð²ñ¤¤ said:
    November 7, 2008

    ¤Á¤ç¤³¤é¤Ö¤Ç´Å¤¤Îø¤ò¾þ¤Ã¤Æ¤ß¤Þ¤»¤ó¤«

  16. ºßÂð¥Ð¥¤¥È said:
    November 9, 2008

    ¤ª²È¤ÇŽÀŽÞŽ×ŽÀŽÞŽ×¤·¤Ê¤¬¤éŽÎŽ½ŽÄʤεëÎÁ¤ò¼ê¤Ë¤·¤Æ¤¯¤À¤µ¤¤¤Þ¤»

  17. SM said:
    November 10, 2008

    ¼«Ê¬¤Ç¤âÃΤé¤Ê¤«¤Ã¤¿À­Êʤò˽¤¯SMÅÙ¥Á¥§¥Ã¥«¡¼

  18. ½ÐÄ¥¥Û¥¹¥È said:
    November 11, 2008

    ¤ª»Å»ö¤ò¼­¤á¤Æ¡¢¹¹¤Ë²Ô¤²¤ë½ÐÄ¥¥Û¥¹¥È¥µ¡¼¥Ó¥¹

  19. ¥ª¥Ê¥Ë¡¼ said:
    November 12, 2008

    ÃËÀ­Íͤϥ»¥ì¥Ö½÷À­¤ÎÃѤº¤«¤·¤¤»Ñ¤ò¸«¤Æ¤¢¤²¤ë¤À¤±¡¢¤½¤ì¤À¤±¤Ç3Ëü±ß¤Î¼ÕÎ餬¤¤¤¿¤À¤±¤Þ¤¹

  20. ±¦Ç¾ said:
    November 13, 2008

    Å·ºÍÈ©¤ò¸«Ê¬¤±¤ë³Ú¤·¤¤À¹¤ê¾å¤¬¤ê¥Ä¡¼¥ë

  21. ¥»¥Õ¥ì said:
    November 14, 2008

    °ìÈ̿ͤǤÏÁÛÁü¤â¤Ç¤­¤Ê¤¤³Û¤ò²Ô¤°¥»¥ì¥Ö¤òÊú¤¤¤Æ¤ª¶â¤ËÊѤ¨¤í

  22. µÕ±ç½õ said:
    November 15, 2008

    °ìÈÕ¤À¤±¤Î±Ä¤ß¤Ç½½Ê¬¤Ê¤ó¤Ç¤¹¡£¤ªÉÕ¤­¹ç¤¤¤¯¤À¤µ¤¤¤ëÊý¤Ë50Ëü±ß

  23. ºßÂð¥Ð¥¤¥È said:
    November 16, 2008

    Æü³Û3Ëü±ß¤«¤é»Ï¤á¤ì¤ë¹â¼ýÆþ¥¢¥ë¥Ð¥¤¥È

  24. ½ÐÄ¥¥Û¥¹¥È said:
    November 18, 2008

    Ìþ¤·¤¢¤ë°ì»þ¤ò¤´°ì½ï¤·¤ÆÆü³Û3Ëü±ß¤Î¼ÕÎé¤ò夤¤Æ¤¯¤À¤µ¤¤¤Þ¤»

  25. ¥¨¥Ã¥Á said:
    November 19, 2008

    Æó¿Í¤Î»þ´Ö¤ò²á¤´¤¹¤À¤±¤Ç°ì¤«·î¤Î¼ýÆþ¤òĶ¤¨¤ë»ö¤¬¤Ç¤­¤Þ¤¹

  26. ¥â¥ÆÅÙ said:
    November 20, 2008

    ¥â¥ÆÅÙʬÀϤò¤·¤Æ¿ÍÀ¸2²ó¤Ï¤¯¤ë¥â¥Æ´ü¤ò¥º¥Ð¥ê¿ÇÃÇ

  27. ¥»¥Õ¥ì said:
    November 22, 2008

    ¤´°ì½ï¤Ë¤¤¤ì¤ë»ö¤òÀ¨¤¯´ò¤·¤¯»×¤¦¤Î¤Ç»ä¤ò1Æü¤À¤±Ìþ¤¹µ¤»ý¤Á¤Ç²á¤´¤·¤Æ¤¯¤À¤µ¤¤¤Þ¤»

  28. ºßÂð¥Ð¥¤¥È said:
    November 23, 2008

    ¤ª²Ë¤Ê»þ´Ö¤¬¤Ç¤­¤¿Êý¤Ï»þµë1Ëü±ß¤ÎºßÂð¥Ð¥¤¥È¤Ç¤ª¾®¸¯¤¤¤ò´Êñ¤Ë²Ô¤¤¤Ç¤¯¤À¤µ¤¤¤Þ¤»

  29. ºßÂð¥Ð¥¤¥È said:
    November 29, 2008

    ´Êñ¡¢¹â¼ýÆþ¤ÊºßÂð¥Ð¥¤¥È

  30. ½Ð²ñ¤¤ said:
    December 1, 2008

    ÃѤº¤«¤·¤¯¤Æ¿¶¤ê¤Ë¤¯¤¤¥¨¥Ã¥Á¥Í¥¿¤â¤³¤ì¤ò»È¤¨¤Ð°ìȯ¤ÇÂç¥É¥Ã¥«¡¼¥ó¥¦¥±

  31. ½Ð²ñ¤¤ said:
    December 2, 2008

    »Å»öµ¢¤ê¤ËÈà»á¤Î¤ª²È¤Ç´ó¤êź¤¤¤¿¤¤¡¢¥Ù¥Ã¥È¤Ç°ì½ï¤Ë¿²¤¿¤¤¤Ê¤É¡¢½÷À­¤«¤é¤ÎÍ×˾¤¬º£·î¤¬ÆäË¿¤¤¤è¤¦¤Ç¤´¤¶¤¤¤Þ¤¹

  32. µÕ±ç½õ said:
    December 3, 2008

    ÍÍ¡¹¤ÊµÕ±ç½õ¤Î·Á¤¬¤³¤³¤Ë¤¢¤ê¤Þ¤¹¡£

  33. ¥â¥Æ¤ë said:
    December 3, 2008

    ¤¢¤Ê¤¿¤Î¥â¥ÆÅÙ¤ò̵ÎÁ¿ÇÃÇ

  34. ºßÂð¥Ð¥¤¥È said:
    December 6, 2008

    ²È¤Ë¤¤¤Ê¤¬¤é¹âÊó½·

  35. ¤ª¤Ã¤Ñ¤¤ said:
    December 7, 2008

    ÃËÀ­Íͤ⿧¡¹¤Ê³Ú¤·¤ßÊý¤ò¤É¤¦¤¾

  36. ½Ð²ñ¤¤·Ï said:
    December 9, 2008

    Áǿͤò¥Ï¥áÅݤ·¤Ç¤­¤ëºÇ¶¯¤Î½Ð²ñ¤¤·Ï

  37. ¿ÍºÊ said:
    December 9, 2008

    ¤¹¤°¤ËÆùÂδط¸¡¢¥»¥Õ¥ì¤Ë¤¹¤ë¤Ê¤é¿ÍºÊ

  38. ¥¢¥À¥ë¥È said:
    December 21, 2008

    ´ó¤êź¤¦¤À¤±¤Ç´î¤Ó¤ò´¶¤¸¤ì¤Þ¤¹

  39. ̵ÎÁ¿ÇÃÇ said:
    December 22, 2008

    ¶¯ÎÏ¥³¥ó¥Æ¥ó¥ÄËþºÜ

  40. ¥¨¥í said:
    December 22, 2008

    ¤ª¶â¤ÇÀ­ÍߤòËþ¤¿¤¹°ìÈÕ¤ÎÎø¿Í¤ËËþ­¤ÈÌþ¤·¤òÍ¿¤¨¤Æ¤¯¤À¤µ¤¤

  41. ÁÇ¿Í¥Û¥¹¥È said:
    December 23, 2008

    ̵ÎÁ¥È¥é¥¤¥¢¥ë¤â½¼¼Â¤ÎÁÇ¿Í¥Û¥¹¥È¤ò»Ï¤á¤Æ¤ß¤Þ¤»¤ó¤«

  42. ¥¨¥Ã¥Á said:
    December 24, 2008

    ¥¨¥Ã¥ÁÅÙ¤ò¥º¥Ð¥ê̵ÎÁȽÄê

  43. Nitsan Bin-Nun said:
    December 25, 2008

    I already know these CSS tricks but good to know people are aware of them.
    I would suggest you to go further and try out CSS3 tricks ;)

    Hanuka Sameach,
    Nitsan Bin-nun
    Israel

  44. ½Ð²ñ¤¤ said:
    December 25, 2008

    ·î£±£°Ëü°Ê¾å¤Î¼ýÆþ¤òÊݾã

  45. 出会ㄠsaid:
    March 19, 2009

    xcgbafgb

  46. jhgf said:
    June 30, 2009

    エッチ can compare! Full demo trading information for beginners.

Trackbacks and Pingbacks: What People are Saying

  1. […] from davidbisset.com

    99 Things You Didn’t Know You Could With CSS Interesting experiments, but nothing earth-shattering.
    […]

    Pingback by davidbisset.com » 99 Things You Didn’t Know You Could With CSS — May 3, 2005 @ 11:45

  2. […] give us up to the second updates from the floor. Did you know that you can do as many as 99 things with CSS? Rumor has it that they’re working on the 100th thing, but I’m not […]

    Pingback by boredumb » Chinese Food for the Soul — May 3, 2005 @ 12:48

  3. […] Apples to Oranges has info on making bar graphs and charts with CSS, a technique I experimented with ages ago in my popular series of CSS Experiments in the experiments with creating Backgrounds, Bar Charts, and Graphs with CSS techniques. […]

    Pingback by Lorelle on WordPress » CSS Bar Graphs and Charts — January 5, 2006 @ 11:31

  4. […] « « CSS Unleashed - Experiments with CSS Designs International Standards » » Connect the Dots […]

    Pingback by Taking Your Camera on the Road » CSS Tips and Tricks — February 1, 2006 @ 1:07

  5. […] CSS Design Experiments […]

    Pingback by Lorelle on WordPress » Finding Your CSS Styles in WordPress — February 20, 2006 @ 18:24

  6. […] My very popular series on CSS Experiments in Design consists of almost a dozen pages with hundreds of different design experiments. Most of these feature inline styles, but a lot of them had their own styles in a separate style sheet. The styles sheet was huge. With about a thousand articles on my site, why should I include over 30K of styles in my site’s default style sheet when I only need them for a handful of articles? […]

    Pingback by Lorelle on WordPress » Creating Multiple Single Posts for Different Categories — February 25, 2006 @ 22:45

  7. […] You can add more style references, like DIV or SPAN, to the title to further its design elements. From here, the design elements are infinite. […]

    Pingback by Lorelle on WordPress » Dissecting the WordPress Post Title Link — May 24, 2006 @ 12:01

  8. […] You would think that exciting and innovative articles like CSS Unleashed - CSS Experiments with Design Elements, which took months to produce and is still one of the best single resources on the web for showcasing CSS design elements for web page designs, would attract a lot of attention. You would think that our online books on photography, “How To? What For? The Basics of Nature Photography”, “I Long to Be Close to You: Closeup Nature Photography Techniques”, and “Bows and Flows of Angel Hair: Photographing Patterns in Nature” would consistently draw people into our site. Not into photography? Then the article series on “Know Before You Go”, about travel planning should attract a substantial number of readers. Right? […]

    Pingback by Lorelle on WordPress » Blog About Someone or Something That Has Changed Your Life — June 7, 2006 @ 9:27

  9. […] CSS Experiments - Web Fonts and Embedded Fonts Learning and Web Pages and CSS Tips and Tricks By Lorelle VanFossen CSS Experiments CSS Unleashed - Experiments with CSS Designs […]

    Pingback by Taking Your Camera on the Road » CSS Experiments - Web Fonts and Embedded Fonts — June 7, 2006 @ 9:34

  10. […] CSS Experiments - How They Were Done and More Learning and Web Pages and CSS Tips and Tricks By Lorelle VanFossen CSS Experiments CSS Unleashed - Experiments with CSS Designs […]

    Pingback by Taking Your Camera on the Road » CSS Experiments - How They Were Done and More — June 7, 2006 @ 9:34

  11. […] 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. 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. CSS Experiments CSS Unleashed - Experiments with CSS Designs […]

    Pingback by Taking Your Camera on the Road » CSS Unleashed - Variations on a Theme — June 7, 2006 @ 9:35

  12. […] 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. CSS Experiments CSS Unleashed - Experiments with CSS Designs […]

    Pingback by Taking Your Camera on the Road » CSS Unleashed - Experiments with Quotations, Pull-quotes and Blockquotes — June 7, 2006 @ 9:49

  13. […] 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”. 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. If you find a way of improving or expanding upon these CSS experiements, let us know by leaving a comment below. CSS Experiments CSS Unleashed - Experiments with CSS Designs […]

    Pingback by Taking Your Camera on the Road » CSS Unleashed - Experiments Playing With CSS Blocks — June 7, 2006 @ 9:50

  14. […] 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. CSS Experiments CSS Unleashed - Experiments with CSS Designs […]

    Pingback by Taking Your Camera on the Road » CSS Unleashed - Experiments Showcasing Your Photography — June 7, 2006 @ 9:51

  15. […] The background element in CSS offers a wide range of possibilities including embedded background images, content over backgrounds, and backgrounds as art. As you play with your CSS experiments with backgrounds and background images, it’s important to understand how they work, where they work, and how to control their appearance. Let’s start with a few CSS experiments in placement. CSS Experiments CSS Unleashed - Experiments with CSS Designs […]

    Pingback by Taking Your Camera on the Road » CSS Unleashed - Experiments with Background Images and Backgrounds — June 7, 2006 @ 9:52

  16. […] 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. CSS Experiments CSS Unleashed - Experiments with CSS Designs […]

    Pingback by Taking Your Camera on the Road » CSS Unleashed - Experiments with Lists, Menus, Tables of Content, and More — June 7, 2006 @ 9:53

  17. […] We’ve shown you some of our experiments in CSS designs, playing with text, borders, displaying your photography, pull-quotes and blockquotes, lists and menus, logos, and more. Now we want to show you some of the tips and tricks we learned from doing these experiments and how to turn the inline CSS code into style sheets which complement the HTML tags and streamline the coding process. CSS Experiments CSS Unleashed - Experiments with CSS Designs […]

    Pingback by Taking Your Camera on the Road » CSS Unleashed - Experiments Putting It All Together — June 7, 2006 @ 9:54

  18. […] A few years ago I did an extensive series on CSS design element experiments and a lot of people are having trouble figuring out how they work. I will help you to understand how to copy and emulate these design elements to incorporate them into your blog, whether or not you use WordPress. […]

    Pingback by Lorelle on WordPress » Things to Stay Tuned For — June 17, 2006 @ 7:41

  19. […] Some nice experiments with css. Great for headers read more | digg story […]

    Pingback by Designs » 99 things you didnt know you could with css … and how to make them well — August 30, 2006 @ 7:54

  20. […] 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 sebsite 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. CSS Experiments CSS Unleashed - Experiments with CSS Designs […]

    Pingback by Taking Your Camera on the Road » CSS Unleashed - Experiments with CSS Logo Designs — September 2, 2006 @ 23:18

  21. […] CSS Design tips Posted on October 27, 2008 by thinkrajesh http://www.cameraontheroad.com/index.php?p=153 […]

    Pingback by CSS Design tips « Simply-URL (A place for all important bookmarks) — October 27, 2008 @ 4:24

  22. […] for her early innovative explorations into the possible in web design elements with her series on CSS Unleashed – Experiments with CSS Designs and other web designs, development, and standards. She works with many individual businesses, […]

    Pingback by Living A Created Life 2: Lorelle VanFossen | Living a Created Life - Disconnect your Oughta-Pilot and live YOUR life! | Life Coaching, Entrepreneurship, Interviews | Bitwire Media — February 4, 2010 @ 19:16

Have Something to Add?

All comments are moderated, so play nice.

The previous is CSS Unleashed - Variations on a Theme
Winning Web Page and Website Awards is next