Creating 10 Most-Used Javascript Techniques Using Pure CSS Styling

Whatever content we have, we can present them in an interactive & more responsive ways with CSS styling only. In this article we’d like to present 10 Impressive techniques using pure CSS styling to create simple and interactive website without using Javascript at all.

How To Create a Pure CSS Polaroid Photo Gallery

Learn how to build a cool looking stack of Polaroid photos with pure CSS styling. Basic CSS is used to style up the photos into a Polaroid style images, then some additional styling with shadows and rotation are injected, then z-index property is used to alter the stacking order of all the objects.

Bubble Effect with CSS

You might be familiar with the plugin jQuery Dock which allows developers to create a menu like Apple Dock. Now, you will create a similar menu with bubble effect by using CSS only. Although it doesn’t have as smooth of an effect as jQuery Dock, it’s helpful for those that just want to make a cool menu by using pure CSS. This tutorial includes two methods: CSS sprites (basic) and the image swapping (advanced).

Text Rotation With CSS

Many of the popular browsers of today support the ability to rotate HTML elements. We can make it work in Internet Explorer (back to version 5.5 even). This tutorial explains this technique step by step.

Create a JQuery Content Slider Using Pure CSS

Learn how to create a working example without the aid of JavaScript, using layers in CSS and using CSS3 transitions to give the slider the necessary animation.

Pure CSS Timeline

Learn how to build a CSS timeline while using some clean and simple markup. The result is a simple and clean looking timeline with some very straight forward markup. The result is a simple and clean looking timeline out of CSS and HTML.

Pure CSS Vignette

A vignette effect is a discoloration on the edges of an image. This effect usually appears in photography and it can be either accidental or intentional. It can also be either light or dark, depending on the situation.

Pure CSS Animated Progress Bar

Here’s a simple demonstration of how you can create animated progress bar using pure css.

How to Create a Valid Non-Javascript Lightbox

A JavaScript free lightbox with valid markup. The trick in this tutorial is opening and closing the lightbox. To do that, you have to know that linking to an element that is hidden off the page causes the element to be “pulled” into view as opposed to the window jumping down to that element. So with that in mind you can change the href values of the content links to the ID values of the lightboxes and create a new #close element that the close buttons will link to.

Accordion using only CSS

An accor­dion effect can be achieved using CSS3’s :target pseudo-class-webkit-transition prop­erty this accor­dion can also be animated.

Snazzy Hover Effects Using CSS

This tutorial will go over creating flexible advanced hover techniques using CSS2.1 properties. We’ll be using these key CSS property, pseudo-classes, and pseudo-element to accomplish our technique:

• content Rather than create unnecessary mark-up to display our caption, we’ll use CSS generated content to add the caption.
• :hover/, :focus Lets us show/hide the caption overlay with our mouse/keyboard.
• :after Used in conjunction with the content property to dynamically append our caption content and layout.