Tips and Tricks for Interactive CSS/jQuery

by Jamal A
The article I read talks about how easy it is now to create unique interactive websites than ever before with the help of CSS3 and JavaScript. There are five interactive techniques that were mentioned in this article: “Animated text effects”, “Animated images without GIFs”, “More engaging drop-down menus”, “Fancier slideshow navigation”, and” Animated icons”. To show how to animate text author used a line of code: “<span class=”extruded”>Extrude Me</span>”. According to the author, the interactive text effect is quick and impressive way to add some flare to a website. However, the author point out that with only a few lines of CSS3 codes, one can make the text appear to pop out of the page in three dimensions. However, while one can easily animate text with a few lines of code, animating an image usually requires animated GIFs or Flash or HTML5 video. However, author mentioned another way to create animations by creating a compelling illusion of animation using CSS alone. The trick is to use a transparent PNG with a background color. The color of the PNG should match the website’s background, so that all of the transparent areas in the PNG show up when filled with a background color. Thus, the PNG should contain the negative space of the image you want to display (i.e. the shape you want should be transparent, and everything else should be the same color as the background). Moving on, the author also mentioned that there is one common design problem that many web designers don’t realize when they are writing codes. The mistake is that they often contain a lot of items in a long single column. However, instead of presenting all of its items in a long single column, one can use a different approach called “Bohemia Design” which is a multi column dropdown approach. This approach not only looks great, but provides an opportunity to group the links and highlight the most important ones.

This article relates to class because it describes most of the stuff that we discussed in the class. However, some of the stuff that was mentioned in this article helped me a lot with class project two. I personally learned a lot from this article because I did not know that we can use CSS to create animations as well as well-organized dropdown menus. I recommend everyone to read this article. It’s not just an article; it’s a tutorial that will guide you step by step how to do things.

Raasch, J. (2011, June 16). Five Useful Interactive CSS/jQuery Techniques Deconstructed | Smashing Coding. Smashing Coding. Retrieved May 7, 2012, from http://coding.smashingmagazine.com/2011/06/16/five-useful-interactive-css-jquery-techniques-deconstruted/#animated-images

Tags

4 thoughts on “Tips and Tricks for Interactive CSS/jQuery”

  1. I was expecting something about a hack or a security breach your title was really catchy and was something that was actually interesting. There is a lot you can do while you are creating a web site and now with everything new we are able to do so much more i didn’t know that they actually had code to already create things that are basically 3d. I guess that is something that will be new and something that will be improved on when html 5 becomes something that all web developers begin to transition to and use.

  2. Very interesting. I never heard of the “Bohemia Design”, until after I reviewed your article. Good thing I did. I too did not know that we can use CSS for creating animations. In class, we only discussed the benefits of CSS is to format each webpage the same. I also found your article helpful because of the step-by-step guide on how to do certain things with CSS and jQuery. Good find on this article.

  3. hahah Thanks Michael I spent less time writing this article and more time thinking of a catchy title lol!! jk

Comments are closed.