Essential CSS3 Resources

Essential CSS 3 Resources, Guides and Tools

Previously, I have introduced you to this new style format on the internet. This blog is based on it and I have to say it works much better than previous version. CSS3 is the new trend on the internet, and there are more websites which use it right now!

Today, I have collected a few free and cool CSS 3 tutorials, guides, scripts and tricks which you can use on your website or a blog design. I am sure you will find something useful for you and your website through this article.

This is a great way to show you which things you could do with CSS 3. Through, all browsers right now does not fully support it. CSS 3 would be highly compatible with all browsers in the future I am sure! See CSS 3 web browser compatibility chart.

CSS 3 Visual Effects and Layouts

CSS3 Analogue Clock – Analogue clock created using webkit transition and transform CSS style. Through JavaScript is only used to present you the time! Works simply great!

Dynamic PNG Shadow Position – Create nice PNG-based shadow position and opacity with CSS3. A very good demonstration is shown on this website.

Create 3D Ribbons using CSS3 – On this page, you will find out how to create depth and nice 3D ribbons using only CSS3 style! Can be a very useful for some websites!

Awesome Overlays – Create awesome overlays using only CSS3 and a few small images. These overlays completely use a new CSS3 properties and works on FF and Safari browsers for now.

Facebook Style Overlay – Use YUI 3 & CSS 3 to create a perfect Facebook overlay on your sites and your own site links. Facebook uses overlays extensively and they have a distinct style.

Old School Clock – Create the old-school clock using only CSS3 and jQuery script. A very good guide to create an affective live clock on your website.

Dynamic Stack of Index Cards – Create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition box-shadow and border-radius.

CSS 3 Navigation, Buttons and Menus

Windows 7 Start Menu – Create an affective CSS3 based Windows 7 start menu! This menu entirely uses CSS3 for style and some photo elements! Simply looks phenomenal!

Awesome CSS3 Buttons – Create an outstanding CSS3-based buttons for your websites. Using new coding and a few more tricks. I have to admit these buttons looks awesome indeed!

Sweet AJAX Tabs – Sweet AJAX Tabs with jQuery and CSS3. Create effective and nice-looking tabs using these two scripts. Looks and works good!

Halftone Navigation Menu – Create effective and nice-looking halftone navigation menu using only jQuery and CSS3 styles. Looks really cool.

Coverflow using CSS Transitions – Create a coverflow effect on your menus or navigation using only CSS3 transition elements and properties.

Aqua Buttons – Create no image aqua-like buttons with pure CSS3 elements. Works best in Safari Web browser for now and it is a very good way to show you what can be done with CSS3.

Pretty CSS3 Buttons – Create nice CSS 3 buttons with this simple tutorial. With gradient backgrounds, rounded corners and advanced formatting – without any images.

Google Buttons – Roll your own Google buttons using CSS 3 styling. These buttons looks good and uses no images at all! Very nice buttons for my taste!

Overlapped CSS Menu – Create an affective and cool overlapped CSS 3 menus using CSS Sprites. Looks very good and works very cool!

Sexy Buttons – These stylish, attention getting buttons can be used for calls to action wherever user interaction is desired.

Firefox Style Buttons – You like buttons on Firefox add-on pages? Well, you can easily create them using CSS 3 styles and without any images!

CSS3 Online Generators

CSS3 Rule Generator – A very simple and effective online generator which allows you to easily generate CSS3 Rule with Cross-browser support using live technology!

CSS3 Generator – Simply great website which allows you to generate border radius, shadow, text shadow, RGBA, @Font Face, Multiple columns and much more! With easy-to-use interface!

CSS3 Gradient Generator – Simply and easily generate CSS3 gradients for your CSS3 styles! Works good, effective and very fast. Using easy-to-use interface with all necessary information!

CSS3 Generator – A simple and easy-to-use CSS3 generator allowing you to generate codes for round corners, box shadows, reflection, transform, opacity, text shadow and stroke!

CSS Style Master – Developers from Westciv offer free to use CSS3 generators, that will not only help with your buttons but with almost every aspect of CSS3 – completely for free!

CSS 3 Animations and Demos

Fun with CSS3 and MooTools – By extending the styles class I could add CSS3 properties into the Core MooTools framework and do CSS3 animations. Works great!

CSS3 & jQuery Equivalents – Demonstration with a few simple CSS3 and jQuery animations including Fading effects, bounce and a few others.

Snowy CSS3 Animation – An effective and very cool snowy effect animation using mainly CSS3 transition and styles. Works good on Google Chrome browser.

CSS3 Animation Pulse – A simple and effective pulsating animation which works on Safari and Google Chrome web browsers for now.

IsoCube – Simply the great animation which show the real power of CSS3 engine. Showing you some 3D cubes with elements (and videos) embedded into them! Nice!

3D CSS3 Transforms – Some cool examples how powerful CSS3 transition can goes. Works best with Apple Safari and Google Chrome web browsers.

The Matrix – Create cool and effective matrix-like animation with CSS3! It is a good example how CSS3-based animations can work!

jQuery and CSS Animation – This is a patch for jQuery which enables you to independently set and/or animate both the scale and rotation of any HTML content with jQuery.

3D Animated Cube – A 3D cube can be cre­ated solely in CSS, with all six faces. Using JavaS­cript to detect key presses and update inline styles this cube can be intu­it­ively navigated.

CSS 3 Galleries, Photos and Images

CSS3 Lightbox Gallery – An awesome CSS3 lightbox gallery with jQuery support. It is one of the coolest things CSS3 and jQuery can do… at least for me!

Pure CSS Polaroid Photo Gallery – Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix.

Editabe CSS3 Gallery – An editable CSS3 photo gallery with loads of HTML5, CSS3, jQuery, and PageLime! Works good on my browser and showing you some nice tricks.

CSS3 Gallery – Showing you how fast CSS3 gallery can be. All you need to do is to hover images in this gallery to quickly view them – nice trick.

CSS3 Transitions – A very effective and nice CSS3 based way to design your photo album. Showing you the real power of CSS3 transitions.

CSS 3 Advanced Textual Effects

Letterpress Effect – Create a letterpress CSS3-based effect with text shadow elements. This effect is becoming hugely popular in web design through the internet.

Owltastic Effect – Design your text-shadow and box-shadow elements to look great on your web design with nice and effective text effects.

Basic CSS3 Text Effects – Showing you some basic text effects you could apply with CSS3 styling. Effects works only with text-shadow attributes.

Anaglyptic Text Effect – Find out how to create an anaglyptic text effect using CSS3 coding and styles. A very useful styling for some users for sure!

CSS 3 Learning Guides and Tutorials

Design Shack’s CSS3 Guide – A very good series of posts which will lead you in CSS3 world following some easy-to-follow and read examples.

CSS3 HSL & HSLA – A guide to using CSS3 HSL & HSLA, giving us not only the ability to set HSL color/colour but also apply a level of opacity.

RGBA Color Guide – A productive guide which shows you how to work with RGBA color elements on your CSS3 style. It gives us the ability to create far more graphically rich designs without the need to use images.

IE CSS3 – Allows Internet Explorer to identify CSS3 pseudo-class selectors and render any style rules defined with them. A very useful script for all CSS3 designers.

Text-Shadow Exposed – Make cool and clever text effects using pure CSS3 text-shadow feature. A very nice and informative guide.

CSS3.info – Everything you need to know about CSS3. A very nice blog which present you the latest events in CSS3 world.

CSS 3 Cheat Sheet – CSS 3 cheat sheet that presents the main features of CSS 3 in a handy, printable reference card. Download in PDF format.

30 Exciting CSS3 Tutorials – Kawsar Ali has created a great collection of 30 exciting CSS3 tutorials and features which will help you to understand CSS3 better.

CSS3 Techniques – In this article Andrew Roberts would show you some different CSS3 techniques  that work great in some of the leading browsers.

Advanced CSS3 Effects – Video tutorial with all of these amazing effects – such as CSS masks, reflections, transitions, animations, scaling, etc.