15 Good Sample JQuery and CSS

, by , jQuery, CSS3

If you are a designer you need to know more about style CSS3 and JQuery sample. you can see the beauty sample design with CSS and JQuery bellow.

Colourful rating system with CSS3

Today, we’re going to do a relatively simple jQuery Sample. Rating systems are used a lot on websites, for example to rate how good a certain product, article or comment is. I slightly wanted to improve this idea, by making it more visually attractive.

download  View demo

jQuery quickie: Slot machine navigation

Navigation is one of the things you’ll see on every website. I wanted to give this part a little bit extra life, and when I saw a movie yesterday that included slot machines, it suddenly hit me. Using jQuery and some basic CSS and HTML, we could add some sweet slot machine style animation to a normally boring kind of navigation. So, for today, we’ll be creating a slot machine style navigation that you could use on your website.

View demo

CSS3 on Over Style Starbursts

I was recently experimenting with the new CSS3 rotation property and it occurred to me that I could use this to create image-free starbursts. The above starburst will only work in browsers that support the CSS3 rotation property, currently that’s Safari, Firefox, and Google Chrome.

demo

jQuery quickie: Unlimited Scroll using the Twitter API

I wanted to take this technique and port it to another jQuery example. So the quickie for today is Unlimited scroll using jQuery. I’ve using the Twitter API to make the example, so you’ll learn a little bit about JSON

demo

Advanced jQuery background image slideshow

With the use of transparent PNG’s, some HTML, pretty nifty CSS and jQuery, we can make this technique work. Read the rest of this article to learn how to create a beautiful advanced jQuery background image slideshow.

download demo

6. Shrinking Images

We can style visited links in a thumbnail gallery to make the viewed images smaller. The art thumbnails below change format when each link has been visited. Each art thumbnail starts off full size, but when you visit art page the image shrinks into the centre.

download demo

Wicked CSS3 3d bar chart

While browsing the web, I came across a pretty cool 3d bar chart created with Flash. I was wondering if I could recreate the same neat effect using pure CSS3 and started working on this wicked CSS3 3d bar chart. Check out the example to see that (almost) no images were used to create this wicked effect.

download demo

Pretty Simple Content Slider with jQuery and CSS3

Today we will create an auto-playing content slider with jQuery and CSS3. The idea is to alter the background image and to slide in the heading and the description. By clicking on one of the menu items, the auto-play function is stopped and the respective content slides out.

demo

Awesome Cufonized Fly-out Menu with jQuery and CSS3

We will use jQuery for the effect and some CSS3 properties for the style. We are not going to use any images.when hovering over the menu items we will move a hover-state item that adapts to the width of the current item, and we will slide out a description bar from the left side of the page, reaching towards the current menu item.

demo

Image Slider With Pure CSS3

Image slider is a popular effect and often used in portfolio sites and blogs. Most of these sliders are created by Javascript. But with CSS3’s strength, we can implement an image slider with only pure CSS3. This article will guide you to do that.

demo

Fancy Apple-Style Icon Slide Out Navigation

This menu looks very similar to the Apple-style navigation but it reveals some icons when hovering over it. The icons slide out from the top and when the mouse leaves the link, the icon slides back under the link element. This creates a neat “card-shuffle” effect.

demo

Beautiful Slide Out Navigation Revised

Being in a horizontal position makes everything readable and when the user hovers over the label, the rest of the item with the icon will slide out. Although this tutorial is related to the previous one, I will start again from scratch – for the readers that are only interested in this new navigation.

demo

3d animation using pure CSS3

The perspective property is what we need to create the 3d effect. Using transform and transition, we can create 3d animation using pure CSS3.

demo

Arrow automatic scrolling image gallery

To make the carousel automatically loop round by itself is pretty easy. In addition to automatic scrolling, I wanted to add the ability to make the scrolling pause when the mouse was over the carousel.

demo

Ajax Menu Images Show

The only way we can get an image to appear to zoom is by having the actual image element and increasing the height and width. However, I’m going to create these image elements on the fly because when my page runs without JavaScript I want the images to appear in the background of the panels.

demo

 

Inline Modal Window w/ CSS and jQuery

There are many elegant and easy to install modal window (Popup) plugins out there, but there are times where the script interferes with some of the logic processed on the page.

demo

Related

29+ Free Responsive Navigation Menu Plugins & Tutorials

23+ PHP jQuery CSS Poll Vote & Survey Code Script

90+ Free Responsive jQuery Image Slider & Slideshow Download

86+ Useful jQuery CSS3 Loading & Progress Bar Tutorials

45 Free CSS jQuery Drop Down Menu Plugins & Tutorial

Written by

Graham Bill is a professional web designer and developer for both WordPress, Joomla and platform for eCommerce websites.

Feedback Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *