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
- css only slider (3)
- slider without javascript (2)
- 10 best javascript (1)
- css only sliders (1)
- css table examples no javascript (1)
- css without javascript (1)
- DENBAGUS (1)
- free javascript content slider example for html (1)
- how to develop accordion using javascript and css (1)
- Javascript needed (1)
- only with css (1)
- pure css accordion (1)
- pure css content slider (1)
- pure css contentslider (1)
- undefined (1)
- using only css no javascript needed (1)
- css only sites no js (1)
- css no sliders (1)
- accordion only css (1)
- accordion using only CSS (1)
- accordion with css only (1)
- alternate row colors in css with unordered lists (1)
- android html css javascript programming examples (1)
- best accordion javascript (1)
- best css content slider sites (1)
- best css only designs no images (1)
- best css slider (1)
- best javascript csss UI (1)
- best javascript sliders (1)
- best website designs css no javascript (1)
- css best techniques (1)
- css bubbles no javascript (1)
- css no (1)
- webkit javascript slider (1)
Stumble Us
Designfloat 
Technorati Bookmark
[...] Share this on del.icio.us [...]
A content slider is a great tool
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.
[...] 10 Best Techniques Only with CSS No JavaScript Needed | denbagus blog [...]
[...] 10 Best Techniques Only with CSS No JavaScript Needed [...]
Very nice list. I’m not really understand javascript so these css tricks will help a lot
Nice post. Thanks for sharing.
PS: Your comment box color is very hard to see the text.
@Deluxe Blog Tips : thank you for your advise.. i will change in order easy yo see.
@LiliekS thank you for your comment . i hope this article very useful for you
@eric your welcome Eric…
[...] 10 Best Techniques Only with CSS No JavaScript Needed – Denbagus [...]
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!
I didn’t know this stuff before. Thanks for sharing.