15 Good Sample JQuery and CSS
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.
1. 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
2. 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.
Download (730) | View Demo
3. 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.
Download (562)| View Demo
4. 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
Download (572)| View Demo
5. 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 | View 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 | View Demo
7. 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 | View Demo
8. 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.
Download (578) | View Demo
9. 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.
Download (461) | View Demo
10. 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.
Download (448) | View Demo
11. 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.
Download (461) | View Demo
12. 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.
Download (495) | View Demo
13. 3d animation using pure CSS3
Theperspective property is what we need to create the 3d effect. Using transform and transition, we can create 3d animation using pure CSS3.
Download (702) | View Demo
14. 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.
Download (377) | View Demo
15. 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.
No comments: