Warning: count(): Parameter must be an array or an object that implements Countable in /home/public/wp-includes/kses.php on line 704

Warning: count(): Parameter must be an array or an object that implements Countable in /home/public/wp-includes/kses.php on line 704
CSS Fun

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. Fatal error: Uncaught Error: Call to undefined function ereg() in /home/public/wp-content/themes/thematic/library/extensions/comments-extensions.php:349 Stack trace: #0 /home/public/wp-content/themes/thematic/library/extensions/discussion.php(10): thematic_commenter_link() #1 /home/public/wp-includes/comment-template.php(1694): thematic_comments(Object(stdClass), Array, 1) #2 /home/public/wp-includes/class-wp-walker.php(135): Walker_Comment->start_el('', Object(stdClass), 1, Array) #3 /home/public/wp-includes/comment-template.php(1661): Walker->display_element(Object(stdClass), Array, '5', 0, Array, '') #4 /home/public/wp-includes/class-wp-walker.php(365): Walker_Comment->display_element(Object(stdClass), Array, '5', 0, Array, '') #5 /home/public/wp-includes/comment-template.php(1985): Walker->paged_walk(Array, '5', 0, 0, Array) #6 /home/public/wp-content/themes/thematic/comments.php(34): wp_list_comments('type=comment&ca...') #7 /home/public/wp-includes/comment-template.php(1152): require('/home/public/wp...') #8 /home/p in /home/public/wp-content/themes/thematic/library/extensions/comments-extensions.php on line 349