30 个新鲜免费的 CSS3, HTML5 和 jQuery 教程指南

1) Card Expansion Effect with SVG clipPath

In this tutorial you will learn creating grid layout with card. Here you will learn how to animate a card expansion with a simple effect of morphing on the cover image.

2) Filterable Product Grid

This tutorial teaches to create a responsive product grid layout and touch friendly Flickity galleries. Moreover, it has Isotope powered filter functionality.

3) The Color Extraction Effect

Color Extraction effect tutorial teaches how to create a beautiful color palette from a picture. It gives a subtle effect on the image, and also fanciness on the main palette.

4) Image Tilt Effect

In this tutorial you will learn how to add a beautiful tilt effect to your image. This is done by moving the copies of the layers of a semi-transparent division. There is a background image as well. This tutorial include CSS properties that functions in latest browsers.

5) Product Comparison Layout and Effect

This tutorial teaches how to design a multi-responsive grid for product layout. This make a proper product comparison effect, and allows the user to compare a maximum of three products.

6) Inspiration for Text Styles and Hover Effect

Making effects with text, typography or a link, then there are thousands of creative things that you can do. This tutorial teaches you how to create awesome styles and hover effect to add a professional appearance to your website.

7) Photography Website Concept

In this tutorial you will learn to create the idea of a photography website. It teaches to create a slider containing bunch of photos using the Flickity. When the user clicks on the slider, it shows up all its content.

8) Interactive Drag and Drop Coloring Concept

This is a creative and amazing tutorial to learn. Here you will learn how to easily drag a color picked from a list of color palette into the website mockup. It is a whole new and unique tutorial.

9) Grid Item Animation Layout

You will explore how to create a responsive layout with a slider and grid item that are animated for a larger content area. When the content is clicked, the area fills in the grid. While in the second demo the entire layout slides towards the left.

10) Motion Blur Effect with SVG

If you want to learn creating a stunning Motion Blur Effect with SVG then this tutorial is for you. It teaches how to apply the perfect blur effect with JS or CSS animations.

11) Prism Effect Slider with Canvas

This tutorial will teach you how to construct a simple slider with prism effect. You will be using HTML5 and a plain JavaScript.

12) Create Jump Loader Animation with SVG and GSAP

Explore how to create a Jump Loading animation using the GSAP and SVG. A plugin known as DrawSVGPlugin is very important as Jump Loader effect greatly depends on this plugin.

13) Create Sticky Navigation with CSS or jQuery

Sticky navigation can create easiness for your users, and this tutorial teaches you to create a beautiful sticky navigation with jQuery or CSS. You only need basic knowledge of jQuery and CSS to create a sticky navigation.

14) CSS3 Hover Link Effects

There are various anchors on the website that take to a new page when clicked. This tutorial teaches you to anchor your links in a creative way using CSS3 transition and transform effect.

15) Animation SVG Gradients

SVG gradients could be of great use for you. With SVG gradients, you can fill complex shapes. You will need the latest browser to continue with this tutorial.

16) Automatic Figure Numbering with CSS Counters

In this tutorial you will explore how to blend the usage of <figure> element with your CSS counters. This allows making the inserted elements beautiful.

17) Responsive CSS Timeline with 3D Effect

Here you will learn a unique radio input trick with the help of which you will be able to create some stunning CSS timeline structure. When the user will click on the radio input, the content will automatically expand and rotate to 3D perspective.

18) Interactive Infographic with SVG and CSS Animations

Ready to create some stunning and cool looking Infographics? Then this tutorial is perfect for you that make use of SVG and CSS Animation. This will require latest browser version.

19) Fluid CSS3 Slideshow with Parallax Effect

Parallax effect gives a professional look to website while the user hovers the site. In this tutorial you will learn how to create a stunning slideshow with parallax effect with the help of CSS3.

20) CSS Responsive Layout with Smooth Transition

If you want to learn creating a 100% width and height scrolling appearance with CSS, then must go for this free tutorial.

21) Sliding Image Panels with CSS3

This tutorial teaches you how to create some amazing clean and minimal sliding imaged panel with CSS.

22) Rotating Word with CSS Animations

Here you will learn how to create amazing typographic effects, and give your website a cool animation with the help of CSS.

23) CSS 3 Image Slider with Stylized Thumbnails

Many people look for fade-in and fade-out image sliders that have thumbnails as well. This tutorial will teach you exactly the same with simple and easy to follow steps.

24) 3D Restaurant Menu Concept

3D Restaurant Menu Concept tutorial teaches you to create a beautiful 3D menu concept for a restaurant type site

25) RocketBar jQuery and CSS3 “Stay On Top” Navigation Menu

With “Stay On Top” Navigation menu, your users will easily navigate the site without scrolling back. It is one of the simplest, yet effective tutorial.

26) Swatch Book with CSS3 and jQuery

If you want to create a swatch book, then this tutorial teaches you the same. It lets you rotate a single swatch that reveals a particular detail.

27) CSS3 Hover Effects with WebSymbols

This tutorial will show you how to add CSS Hover effects with the help of CSS transition properties along with websymbols.

28) CSS3 Lightbox Gallery with jQuery

Here you will reveal how to create a stunning image gallery that alleviates the current CSS3 and jQuery tactics. This is a search engine friendly feature for your website.

29) Live Album Previews with CSS3 and jQuery

This tutorial teaches you to create a script that previews content of album with a slideshow effect. You can use it for photos and galleries, etc.

30) Login and Registration Form with HTML5 and CSS3

It is a unique tutorial that will show you to creat HTML5 and CSS3 forms. You will be able to create two different forms that are Login and Registration form. The final form created is beautiful, responsive and minimal.