90+ Useful and Detailed CSS3 Tutorials and Techniques
Using CSS3 proficiently makes design a lot more fun. With a good command of CSS3, you can create beautiful designs with great efficiency and ease. CSS3 tutorials are extremely helpful, not only for the professionals, but, also for the beginners.I’ve made a sorted list of CSS3 tutorials like: Menus tutorials, Buttons tutorials, Text tutorials, Gallery and Animation tutorials and Misc tutorials. This way a beginners to CSS3 coding can find what he wants.
Hope you like this collection,and please give you feedback.Please share, like if you like this collection.
Menus tutorials
Slide Down Box Menu with jQuery and CSS3
In this tutorial we will create a unique sliding box navigation.
Apple is known for very clean design and if you have been to their website in the last few years you’ve seen their primary navigation.
How to Build a Kick-Butt CSS3 Mega Drop-Down Menu
In this tutorial we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.
CSS3 is more powerful with its transition property, it help us creating animation without any JavaScript or even Flash help.
Create dropdown menus with CSS only
I rarely see drop down menus that behave like drop down lists, but I really like them. I noticed, however, that people often use JavaScript to achieve this effect. Actually, there is a simple way to do it only with CSS.
jSlickmenu: A jQuery plugin for slick CSS3 menus
The plugin called jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3 features likes rotation and shadows, this plugin can really lift up your design.
Awesome Cufonized Fly-out Menu with jQuery and CSS3
In today’s tutorial we will create a full page cufonized menu that has two nice features: when hovering over the menu items we will move a hover-state item that adapts to the width of the current item.
The drop-down works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.
Overlapped CSS menu using CSS Sprites
CSS sprites can be termed as a method for reducing the number of image requests to a web page by combining multiple images into a single image, and display the desired segment using CSS background-image and background-position properties. Now that almost all major browsers started supporting CSS background-image and background-position properties, CSS sprites are getting more significance.
Elegant Accordion with jQuery and CSS3
Today we will create an elegant accordion for content. The idea is to have some vertical accordion tabs that slide out when hovering. We will add some CSS3 properties to enhance the looks.
Make An Elastic Thumbnail Menu
In an ongoing attempt to offer alternative methods to spruce up menus, I’ve pieced together an elastic thumbnail menu.Magnifies menu items when they are hovered over,Menu items expand upwards.
Create a Fun Animated Navigation Menu With Pure CSS
Your website’s navigation can communicate a lot about your business or service. Clean, usable navigation is a staple in good web design and is always your safest bet.
CSS3 Minimalistic Navigation Menu
CSS3 animations are a powerful tool, which enables you to create animations which run without the need of applying additional scripting to the page So today we are making something practical – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.
A jQuery & CSS3 Drop-Down Menu With Integrated Forms
Some of these common functions are logging in, registering or even resetting a password, yet quite often in many cases we still provide users the same old experience – a separate page for logging in, another for signing-up and yet again another if you’ve forgotten what your login details were. Today I would like to present a project that tries to streamline this experience – FormBox.
Halftone Navigation Menu With jQuery & CSS3
Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.
RocketBar – A jQuery And CSS3 Persistent Navigation Menu
RocketBar is a simple solution for this which shows you how you can easily provide your users a persistent form of site navigation without them needing to scroll back up.
Sweet tabbed navigation using CSS3
Although I don’t understand why animations have been added in CSS3, this upcoming standard does have a couple of very neat features added to the CSS we’re using today. I wanted to take a couple of these new things, and create a Sweet tabbed navigation using CSS3.
Buttons tutorials
Build Awesome Practical CSS3 Buttons
What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons!
There was a goal Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible.
Fading Button Background Images With CSS3 Transitions
When Firefox 4 is released browsers that support the CSS3 transition property will make up approximately 30% of the market (providing current Firefox users upgrade). With this in mind, it now becomes viable to consider CSS as an alternative to using JavaScript to achieve fading :hover effects on buttons and other interface elements.
Google has a new focus on webkit-specific properties thanks to their new Chrome browser, which uses a branch of the same rendering engine Safari uses. This has actually allowed them to target the Google homepage to the webkit engine, probably after some sort of browser detection.
With this button pack, you can easily turn any link on your page into an animated button by just assigning a class name. No JavaScript necessary. Four color themes and three sizes are also available by assigning additional class names.
Make CSS3 buttons that are extremely fancy
Have you ever looked at a button and thought: “This button looks like crap!” This is the kind of thing that keeps me up at night. That’s why I made some snazzy buttons that I’ve dubbed “fancy buttons.”
Super Awesome Buttons with CSS3 and RGBA
One of our favorite things about CSS3 is the addition of RGBA, a color mode that adds alpha-blending to your favorite CSS properties. We’ve kicked the tires on it a bit with our own projects and have found that it helps streamline our CSS and makes scaling things like buttons very easy.
CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile
What if we could replace almost all of the graphical UI elements within Fennec with CSS created equivalents? As a designer, am I comfortable bypassing Photoshop and letting CSS run the pixel rodeo? After a few initial tests, the answer to both of those questions was a very solid “yes”. A solid “friggin’ right” if in Cape Breton.
How to create depth and nice 3d ribbons only using CSS3
Creating a 3D perception in a website and simulating a “world” in three dimensions are two great ways for the designers to play with their skills.
Text tutorials
How to Create Inset Typography with CSS3
In this tutorial, we’ll create inset type, a popular text treatment, using CSS. If you follow Six Revisions closely, you’re probably thinking: “Jacob already wrote a Photoshop tutorial on how to do that.”
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!
Thankfully, many of the popular browsers of today support the ability to rotate HTML elements. Even better? We can make it work in Internet Explorer (back to version 5.5 even). How you might ask? Okay,
The Easiest Way to Create Vertical Text with CSS
Earlier this morning, I needed to create vertical text for a project I’m working on. After trying out a couple ideas, I took to Twitter to find what sorts of thoughts our followers had on the subject. There were plenty of great responses and ideas that we’ll go over today!
Create Beautiful CSS3 Typography
In this tutorial, we’ll look at how to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3. There are no images or other external resources, just pure CSS magic.
With the latest advancements in CSS, we now have access to powerful styling techniques, including box shadows, rounded corners, background gradients, etc. However, we don’t currently have the ability to apply gradients to the text itself. Luckily, with a bit of trickery, we can force this effect — at least in webkit browsers!
Text Embossing Technique With CSS
I believe you love embossed text like it is going out of fashion. In fact, it’s liked so much right now by many web designers that it featured in Smashing Magazines “Web Design Trends for 2010-2012” article which firmly puts it up there! In this article I will show you a couple of real world examples of Text Embossing.
background-clip is a CSS property that was originally introduced in WebKit (in 2008) that allows backgrounds specified on elements to clip to the text content of the element.
Create a Letterpress Effect with CSS Text-Shadow
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!
Move your cursor over the box to cast a shadow with the spotlight. This demo uses the CSS property text-shadow, supported in Safari, Firefox 3.5, Opera, and Chrome.
How to Create a Cool Anaglyphic Text Effect with CSS
Anaglyphs are those amazing 3D images that are created by offsetting two of the red, green and blue channels, and are viewed with those nerdy looking 3D glasses with different coloured lenses.
Adding An Outline To Your Text Using the CSS3 text-stroke Property
In this tutorial I’ll show you how to add an outline, or stroke, to your text using the CSS3 text-stroke property.
Matrix Animation with WebKit CSS3
UX developer Paul Hayes showcases what you can do with the power of CSS3 3D transforms. He covers everything from 3D image galleries and subtle transitions to experimental 3D environments.
Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash).
Creating a polaroid photo viewer with CSS3 and jQuery
This example is making use of CSS3 and jQuery, just to show the effect when combining two powerful techniques. The CSS3 is injected by jQuery, keeping the CSS file clean.
Easily Turn Your Images Into Polaroids with CSS3
Love of CSS and doing something cool with it is kind of our thing and we quickly jumped on a brand new idea: polaroid style images with just CSS. Holy super awesome, Batman!
The perspective property is what we need to create the 3d effect. Using transform and transition, we can create 3d animation using pure CSS3.
Build a Kickbutt CSS-Only 3D Slideshow
In this tutorial, I’m going to show you how to create a 3D slideshow using only HTML and CSS. No JavaScript required! Fire up Safari and let’s get started!
Coding a Rotating Image Slideshow w/ CSS3 and jQuery
Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.
We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime.
jQuery & CSS3 3D Interactive Photo Stack
In today’s demo, I’ve taken a gallery of images of the jQuery team and transformed them into an interactive 3D stack. CSS3 provides the underlying styling for this whilst jQuery is used for calculations and positioning.
ShineTime – A Kick-Ass New jQuery & CSS3 Gallery With Animated Shine Effects
The idea behind a Shine Effect is to give your graphics the appearance of being on a glossy surface that have just had a light beam pass over them. This can make them appear to be made of glass and can increase the visual experience your end users see.
Going Nuts with CSS Transitions
I’m going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.
Super Cool CSS Flip Effect with Webkit Animation
There’s some seriously cool transform and animation effects available through the webkit engine that can really spice up the web experiences for users with the Safari browser. Here’s a quick look at how the rotateY property can produce a flip effect, and how it can be used to create a super cool Transformers themed top trumps design.
Greyscale Hover Effect w/ CSS & jQuery
A few months ago, James Padolsey introduced a cool greyscale technique for non-IE browsers. His technique inspired me to come up with a workaround with a similar effect.
Use CSS3 to Create a Dynamic Stack of Index Cards
We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).
CSS Fundamentals: CSS 3 Transitions
As CSS3 rolls out around the web, it is bringing some interesting new presentational techniques along with it. Today, we’ll review the basics of using CSS3 transitions and animations to add an extra layer of polish.
How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
More and more we see people using horizontal sliding panels on their websites. And they usually look very nice! Some will put a contact or login form in there, others will put some information about them and their website, or even things like a tag cloud or social networking buttons.
Related Posts Slide Out Boxes with jQuery and CSS3
When the user hovers over the items, they slide out, revealing the title and two links, one for the related article itself and one for the demo. Additionally, we will have a shuffle button under the list. When pressed, the list gets randomly refreshed with related posts.
Lightbox effect in CSS3 through transition
Since CSS animation first started to be used a few years ago, coders have enjoyed creating their own CSS-only Lightbox versions. Indeed, there is a real craze for CSS-only animation experimentation.
iPhone “slide to unlock” Text in WebKit/CSS3
Those will allow the background of the parent element to become the background of the text inside. I gots to thinkin’, if we made a made a horizontal gradient that faded in a gray-white-gray pattern, then animated it from left to right, we could make the iPhone/iPad’s “slide to unlock” screen with no images at all!
So here we will try to create fancy image hover with css3 as you all know we can have cool image hover effect using jquery but now using transform and transition properties of css3 we can have the same cooler effect with css3 only.
Animated Sprites with CSS3 Transitions
CSS sprites are a method for creating complex rollovers without using JavaScript.CSS3 animations (or more accurately, CSS3 transitions) is a new feature that has been added to some newer browsers, most notably WebKit-based browsers like Chrome and Safari. Like sprites, CSS3 animations don’t require JavaScript.
A Colorful Clock With CSS & jQuery
This is also the first tutorial that features our first very own jQuery plug-in – tzineClock (soon to be released officially in a post of its own).
OSX Fan Effect Using CSS3 Animations
CSS Animation is something that will be introduced with CSS3, allowing developers to do things that were previously only possible by javascript. To display what’s possible with CSS3 animations, I decided to put together this little effect that mimics the OSX fan effect on a Mac. It’s a pretty cool effect, and it’s nice to be able to do this with just CSS.
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.
WanderWall – A jQuery, CSS3 & HTML5 Hover-Based Interface
A hover-based interface is one where the majority (or all) of the user interaction on the page can be controlled by a user hovering over an element with their cursor. Hover-based interfaces require less work to see more content than a typical click based page.
Misc tutorials
They use no images, just CSS3 fancies. Like a good little designer always does, they fall back to totally acceptable experience.
Now that Safari announced there support of CSS3′s multiple backgrounds developers can have a taste of the future. In this article I will describe how multiple backgrounds work, how you can profit from them and how to do the fix for browsers who don’t support it.
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?') format('eot'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
body {
font-family: 'MyFontFamily', Fallback, sans-serif;}Use CSS3 to create a set of columns on your website without having to assign individual layers and / or paragraphs for each column.
Along with multiple background images, this following piece of CSS3 is among my favourites list. I think there is a lot of great potential for this CSS and in ways more than just a news paper/magazine layouts too!
About Author
