CSS Fun

I thought I would share with you some interesting ways to display quotes using CSS, jQuery, and Javascript. I created both of these some months ago, but have yet to upload any.

The first one is by far the more interesting. Using all three of the above technologies, I created an interactive quote-display webapp. Should work in FireFox and Chrome. Does not work in IE. The image below gives you a bit of an idea of what you’ll be in for. Hover your mouse over each bubble to interact with it.

quote example

Action Reaction

Go here to check it out: http://tassile.com/quotes/QuoteGen.php

Or create your own, just follow this pattern: http://tassile.com/quotes/QuoteGen.php?q=Your+quote+here.

 

Another way to display a quote (and all of it at the same time, no less) would be in the style of those animated textography videos. Instead of animating the thing, I chose to make one entirely out of CSS. (No I didn’t bother with CSS transitions). Because of the finicky nature of web browsers, this quote only displays correctly in Chrome (Webkit). It looks okay in FireFox, but some rotations are off. It completely fails when rendered by IE. Here is an image for those who enjoy using lesser browsers.

Quote by John Calvin

John Calvin. Always succinct.

This one can be accessed here: http://tassile.com/words/word1.html

That’s it for now. Thanks for reading, and make sure to “like” this page.

This entry was posted in Art, Design, Javascript, Programming. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

2 Comments

  1. Bruno
    Posted October 23, 2011 at 6:58 AM | Permalink

    Very nice, Tas. The second has a very simple code and looks pretty beautiful (one could make a tshirt out of that — hint hint, haha). To be sure: the CSS needs future-proofing. Why don’t you use one of those “compiled CSS” thingies which take care of that for you? :)

    • Posted October 24, 2011 at 1:50 PM | Permalink

      I’ve never heard of compiled CSS, actually. How does that work?

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>