with Lorelle and Brent VanFossen

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.

 
This article was posted in CSS Tips and Tricks, Photography, Technology and tagged , , , , , , , . Bookmark the permalink. Follow comments with the RSS feed for this post.Post a Comment or leave a trackback: Trackback URL.

2 Comments