10 Best Techniques Only with CSS No JavaScript Needed

When JavaScript by various frameworks have been  result in an appeal to web development, another alternative emerged using CSS. Pure CSS techniques described in this article are alternative solutions to develop web applications using CSS.

This article has been collecting a variety of techniques that bervareasi css that does not require JavaScript to create a web site but still interesting and interactive.

SlickMap CSS — A Visual Sitemapping Tool

SlickMap CSS is a simple stylesheet for displaying finished site maps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

Pure Css Data Chart

Data visualization is mostly achieved with flash applications or with help of some programming languages. Are those solutions the only way to present, let’s say simple data chart? How about giving it a try with nothing but good ol’ css?

CSS Image Map

While they may not be used as often as they once were in the heyday of HTML table based web design, image maps can still be quite useful in situations that call for it. In this tutorial, you’ll be shown how to build a pure CSS image map with background image sprites and cap it all of with a “tooltip” like popup, all with CSS.

Create a Content Slider Using Pure CSS

As a proof of concept, this developer decided to experiment and create a working example of a CSS slider without the aid of any JavaScript, using layers in CSS and CSS3 transitions to give the slider the necessary animation.

Accordion Using Only CSS

An accordion effect can be achieved using CSS3’s :target pseudo-class, without needing JavaScript. Using the proprietary -webkit-transition property this accordion can also be animated. Each part of the accordion has an ID, heading and content region. The header includes a link that matches the section’s ID, whilst the content is wrapped in a container which will control its display.

Pure CSS Speech Bubbles

Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effects created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.

CSS Vignette

Vignettes! The technique involves a few divs, a bit of simple CSS, and a whole lot of fun. So click the pic and read on.

Pure Css Line Graph

The intention of this tutorial was not only to enable data visualization to people that don’t feel comfortable with using various scripting languages but also to demonstrate the power of CSS and present a way of using CSS a bit differently.

Text Rotation with CSS

Pure CSS Scrollable Table with Fixed Header


Excellent Full Color Sticker Printing available at PsPrint

Your career can take the right turn by passing our 70-290 exam, 70-564 dumps and hp2-e33 dumps .You can also download 70-403 dumps and 70-502 exam kit.

EmailFacebook0Google+1StumbleUpon2012Twitter5Reddit0Pinterest0Digg

16 Responses to “10 Best Techniques Only with CSS No JavaScript Needed”

  1. A content slider is a great tool

  2. The link for the chat bubbles was an interesting read. Slider demo seems like it’ll be a good replacement for javascript sliders, once css3 becomes more standardized and support.

    The stripped css table is a bit misleading, since it did require javascript to pull off the alternating row colors.

    Thanks none the less for the informative links.

  3. Very nice list. I’m not really understand javascript so these css tricks will help a lot :)

  4. Nice post. Thanks for sharing.

    PS: Your comment box color is very hard to see the text.

  5. @Deluxe Blog Tips : thank you for your advise.. i will change in order easy yo see. :)

  6. @LiliekS thank you for your comment . i hope this article very useful for you

  7. @eric your welcome Eric…

  8. Hey, I saw this one on FAQPAL. It will be real handy for me because I am learning CSS but these will make me look like I know what I’m doing already. ;)
    Thanks!

  9. I didn’t know this stuff before. Thanks for sharing. :)

  10. Nice & interesting post! Thanks for sharing.

  11. How would I go about creating a new blog that could become successful in less than a year. I have a lot of ideas of different things I could include, so I don’t know that content would be an issue. What are good ways to promote a new blog and is it better to jump around with different topics or stick to one? What else can I do to make it successful??.

  12. Hi there! This is kind of off topic but I need some guidance from an established blog.

    Is it tough to set up your own blog? I’m not very techincal but I can figure things out pretty fast. I’m thinking about
    creating my own but I’m not sure where to begin. Do you have any tips or suggestions? Thanks

Trackbacks/Pingbacks

  1. 10 Best Techniques Only with CSS No JavaScript Needed | RefreshTheNet - 18 May 2010

    [...] Share this on del.icio.us [...]

  2. Porch Swings – A Fantastic Way To Kick Back And Relax | Front Porch Swings - 19 May 2010

    [...] 10 Best Techniques Only with CSS No JavaScript Needed | denbagus blog [...]

  3. [User Link:10 Best Techniques Only with CSS No JavaScript Needed ] | Tips for Designers and Developers | tripwire magazine - 19 May 2010

    [...] 10 Best Techniques Only with CSS No JavaScript Needed [...]

  4. Most Popular Design Links of the Week 17-23 May 2010 « Web Design Mash - 23 May 2010

    [...] 10 Best Techniques Only with CSS No JavaScript Needed – Denbagus [...]

Leave a Reply