 |
As we all know, a lot of complicated CSS code snippets had to be used back then when you simply wanted to achieve a rounded corner, and even had to use JavaScript for simple animations. But since the coming out of CSS3, life has become a lot easier.
In this post we provide you with a great collection you can always turn back to; whether you’re a pro and haven’t seen that particular tutorial yet, or a beginner who has newly discovered their love for CSS3. Either way, please feel free to mention tutorials that were missed out and would like to share with others.
Awesome Cufonized Fly-out Menu with jQuery and CSS3
In this tutorial you can learn how to create a full page cufonized menu that has two nice features:
Subtle CSS3 Typography That You’d Swear was Made in Photoshop
Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby!
CSS3 Minimalistic Navigation Menu
Here is a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers:
CSS3 Background-Clip: Text
To carry out the DIN typeface, a transparent PNG with letters was used to achieve that subtle yellow to blue fade animation: Click on the image to read more:
Create a Vibrant Digital Poster Design with CSS3
Follow this walkthrough of the making of Circlicious — a vibrant and abstract digital poster design made purely of HTML and CSS:
How to create a kick-ass CSS3 progress bar
In this tutorial you can learn how to create a fancy progress bar using CSS3 and jQuery, without using Flash or even images:
Colourful Rating System
In this tutorial you are going to follow a relatively simple jQuery tutorial. Rating systems are used on a lot on websites, for example on how to rate a certain product, article or comment:
Create Animated Price Grid Using CSS3
In this tutorial, an animated Price grid will be created with only the help of CSS3. No jQuery, No Images, No Flash at all:
Related Posts Slide Out Boxes with jQuery and CSS3
In this tutorial, a fixed list is created at the right side of the screen with some thumbnails sticking out:
Halftone Navigation Menu with jQuery & CSS3
In this tutorial you will find out how to create a CSS3 and jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links:
How to Create A Multi-Step Signup Form With CSS3 and jQuery
In this tutorial, a simple multi-step signup form using CSS3 and jQuery will be created. To spice things up a bit, we will include a progress bar with the form, so the users will be able to see the percentage of form completion:
Coding a Rotating Image Slideshow w/ CSS3 and jQuery
In this tutorial you are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow:
Animated Navigation Menu with CSS3
In this tutorial you will be shown how to create an animated navigation menu with CSS3:
Create Ajax Loading Animation with CSS3
Normally, frontend developers use GIF animations for Ajax data loading. But now CSS3 animation properties allow us to achieve the same Ajax loading animation effect, without GIF animation required:
Slick CSS3 Animated Image Caption
This is an experiment to create an animated image caption. You might have seen enough of this effect all over the web, but here we’re trying to achieve the same effect using CSS3 Transitions:
Create Animated Landscape using Pure CSS3
In this tutorial you’ll see how you can create a landscape effect with pure CSS3 technology:
Sticky Notes with CSS3
In thios tutorial you can see how sticky notes with CSS3 can be created:
How To Create a Sexy Vertical Sliding Panel Using jQuery and CSS3
In this tutorial you can find out how to create a sexy vertical sliding panel using jQuery and CSS3:
Display Social Icons in a Beautiful Way Using CSS3
The goal here was to slowly fade-in and fade-out the opacity changing, and animate the position of the tooltip a little bit:
Animated Wicked CSS3 3D Bar Chart
In this tutorial you can learn how to create a beautiful 3D bar chart::
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 animations using pure CSS3:
Cross-Browser Rounded Buttons with CSS3 and jQuery
In this tutorial, a cross-browser with rounded buttons will be created with the help of CSS3 and jQuery:
Slide Down Box Menu with jQuery and CSS3
In this tutorial, a unique sliding box navigation is created. The idea is to make a box with the menu item slide out, while a thumbnail pops up:
Beautiful Photo Stack Gallery with jQuery and CSS3
In this tutorial you can learn how to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, the images of that album are shown as a beautiful photo stack:
How To Change Default Text Selection Colour
Whilst this CSS3 declaration might not be crucial to your project or design and yes it is not supported by all browsers, but it is a fantastic effect that really takes your design one step further:
Making Better Select Elements with jQuery and CSS3
Here you can find out how to build a script, one which is going to take an ordinary ‘select’ element, and replace it with a better looking, markup powered version, while keeping all the functionality intact:
CSS3 Animated Bubble Buttons
Here is a useful set of animated buttons created with the power of CSS3s multiple backgrounds and animations. No JavaScript necessary:
BounceBox Notification Plugin with jQuery & CSS3
In this tutorial you will find out how a bouncebox notification plugin can be created with jQuery & CSS3:
Use CSS3 to Create a Dynamic Stack of Index Cards
In this tutorial you can learn how to create a dynamic stack of index cards solely with the help of HTML and CSS3 features:
Interactive Image Vamp up with jQuery, CSS3 and PHP
In this tutorial, an online application for giving some funny touches to an image is created. jQuery, jQuery UI and PHP are needed:
Contextual Slideout Tips with jQuery & CSS3
Knowing the importance of HTML standards, here is a set of contextual slideout tips with jQuery & CSS3 which are ideal for product pages and online tours:
Carbon Fiber Signup Form with PHP, jQuery and CSS3
In this tutorial you can see how you can make a carbon fiber signup form using PHP, jQuery and CSS3:
Sexy Image Effects Similar to Flash – in Pure CSS3
Here is a very different image effect that can be achieved by not only using Flash but also CSS3:
Awesome Buttons using CSS3
Here you can check out a new look to Buttons that can be adjusted in CSS3:
Getting Clever with CSS3 Shadows
As soon as we detach a shadow from the element, itself, we can then transform the shadow in interesting and creative ways. Click on the image to find out more:
How to Build a Kick-Butt CSS3 Mega Drop-Down Menu
In this tutorial you can learn how to build a cross-browser with an awesome CSS-only drop-down mega menu, using nice CSS3 features:
Flexible, Mobile-First Layouts with CSS3
CSS3 provides a fairly rich toolset for mobile-friendly formatting, relying on the client’s browser capabilities instead of back-end templating:
CSS3 Slideup Boxes
Follow along and see how we can use a few very simple CSS3 transitions to create a “slideup” box effect:
How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery
In this tutorial you can take a look and see what can be achieved with the help of HTML5 and CSS3 as well as some jQuery:
Fancy Image Hover Using CSS3
In this tutorial you can learn how to create a fancy image hover with CSS3. As you all know, we can have cool image hover effects using jQuery. By using transform and transition properties of CSS3 we can have an even better effect:
CSS3 Dropdown Menu
Here is a Mac-like multi-level dropdown menu that can be created using border-radius, box-shadow and text-shadow:
Fun with CSS3 and Mootools
These examples came about when experimenting with the ‘extend’ property in MooTools:
Colorful Sliders with jQuery & CSS3
In this tutorial you can learn how to use jQuery and the new transformation features brought to you by CSS3 to create a three dimensional dynamic slider effect:
Coding a CSS3 & HTML5 One-Page Website Template
In this tutorial you are going to make a HTML5 web template by using some of the new features brought to you by CSS3, jQuery and the ‘ScrollTo’ plug-in:
Create a Yoyo with jQuery and CSS3
Here you can learn how to create your own yoyo with the help of CSS3 and jQuery:
How to Create Depth and Nice 3D Ribbons Only Using CSS3
In this tutorial you can learn how to create nice 3D ribbons with the help of CSS3 only:
Create a Fancy Web Form with Field Hints Using Only CSS3
Here you’ll be shown how to create a fancy web form with field hints using only CSS3:
Pure CSS Social Media Icons
This is an experiment that creates social media icons using CSS and semantic HTML:
Build a Simple Portfolio Image Gallery with CSS3
Here’s how you can use CSS3 to create a Javascript-free gallery that enlarges your images on hover:
Create Beautiful CSS3 Typography
In this tutorial, you will find out how to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3:
Old School Clock with CSS3 and jQuery
Here is an interesting tutorial on how to create an old school clock with the help of jQuery and CSS3 features:
Build Awesome Practical CSS3 Buttons
Here is a video tutorial that will show you how to build some awesome practical CSS3 buttons:
(ik)