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.
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.
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.
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
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.
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.
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.
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.
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.
Image Slider With Pure CSS3
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.
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.
3d animation using pure CSS3
perspective property is what we need to create the 3d effect. Using
transition, we can create 3d animation using pure CSS3.
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.
Ajax Menu Images Show
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.