Nice JavaScript Techniques Using for awesome CSS Styling

Nice JavaScript Techniques Using for awesome CSS Styling

Content is king we knew that very well. Bloggers who love to create new contents must be concern about their presentation styles. Whatever content we have, if we can present them in an interactive & more responsive ways then it brings much more meaning.

We can do this very easily with CSS styling and short JavaScript only. In this post I would like to present a great list of Impressive techniques using pure CSS styling to create simple and interactive website using JavaScript and CSS at all.

1. How To Create a Pure CSS Polaroid Photo Gallery

pure_css_polaroid

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.

DEMO & DOWNLOAD

2. Bubble Effect with CSS

bubble effect

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).

DEMO & DOWNLOAD

3. Pure CSS3 Shadows

pure css3

Pure CSS3 Shadows is clear and modern way to use shadows in your website

– Features:

  • Pure CSS3 (no images used)
  • Clean & modern look
  • Clean & commented code
  • Separated files
  • Easy to edit

Demo & Download

4.Text Rotation With CSS

text rotation

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.

DEMO & DOWNLOAD

5.Animated Tooltips Megapack

animated tooltips

All animations are pure CSS3 , that means it may not work properly in older browsers. some effect lists – Pulse, Flip 3D, FlipInX 3D, FlipInY 3D, FadeIn, FadeInUp, FadeInDown, FadeInLeft, FadeInRight, FadeInUpBig, FadeInDownBig, FadeInLeftBig, FadeInRightBig.

Demo & Download

6.Create a JQuery Content Slider Using Pure CSS

content_slider

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.

DEMO & DOWNLOAD

7. Pure CSS Timeline

pure_css_time_line

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.

DEMO & DOWNLOAD

8.Pure CSS Vignette

pure_css_vintage

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.

DEMO & DOWNLOAD

9.Pure CSS Animated Progress Bar

progress bar

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

DEMO & DOWNLOAD

10. How to Create a Valid Non-Javascript Lightbox

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.

DEMO & DOWNLOAD

11.Accordion using only CSS

accordion

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

DEMO & DOWNLOAD

12.Snazzy Hover Effects Using CSS

snazy

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.

DEMO & DOWNLOAD

Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!

Share It

Related Posts