Top 100 Useful And Detailed CSS3 Tutorials And Techniques

I was trying a few weeks ago to find some CSS3 tutorials on a specific topic so I looked and looked and went through a lot of articles and annoyed me that I spent a lot of time looking for that single tutorial I wanted. To help you not go through the same thing I’ve made a sorted list of CSS3 tutorials on 5 categories: Menus tutorials, Buttons tutorials, Text tutorials, Gallery and Animation tutorials and Misc tutorials. This way a newcomer to CSS3 coding can find what he wants and needs.

Menus tutorials

Slide Down Box Menu with jQuery and CSS3

Slide Down Box Menu with jQuery and CSS3

In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.

Apple Navigation with CSS3

Apple Navigation with CSS3

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. It’s a staple of the apple website and today I wanted to take a crack at recreating the Apple navigation using CSS3 techniques.

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.

CSS3 Flying Menu

CSS3 Flying Menu

As we know CSS3 is more powerful with its transition property, it help us creating animation without any JavaScript or even Flash help. We’ll use them for creating the flying effect and here is the result.

Create dropdown menus with CSS only

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

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. It’s fairly easy to use, highly customizable and pretty cool (and fun!) to see.

Awesome Cufonized Fly-out Menu with jQuery and CSS3

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, and we will slide out a description bar from the left side of the page, reaching towards the current menu item.

We will use jQuery for the effect and some CSS3 properties for the style. We are not going to use any images.

CSS3 Dropdown Menu

CSS3 Dropdown Menu

Overlapped CSS menu using CSS Sprites

Overlapped CSS menu using CSS Sprites

It is said that 70 to 80 percentage of the end-user response time is spent on the front-end. A major portion of this time is exhausted on downloading all the external components in a web page including, stylesheet, images, scripts, flash etc. An extra HTTP request adds 200+ milliseconds to a page (worldwide average). Since most of today’s browsers limit about 3 or 4 parallel requests at a time, a page with so many external references can cause the requests to get queued up. This may eventually cause the page loading time to increase. In short, the fewer files the web browser has to fetch that much faster the site loads. It’s as simple as that.

Elegant Accordion with jQuery and CSS3

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

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.

What does it do exactly?
– Magnifies menu items when they are hovered over.
– Menu items expand upwards.

Create a Fun Animated Navigation Menu With Pure CSS

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.

However, if you’re ever creating a site that doesn’t necessarily have to be so professional, the navigation provides a great place to have a little fun and insert some personality.

CSS3 Minimalistic Navigation Menu

CSS3 Minimalistic Navigation Menu

As you have probably heard by now, CSS3 animations are a powerful tool, which enables you to create animations which run without the need of applying additional scripting to the page. What is even better, in the next generation of browsers we will have even more powerful tools, including 3D transformations (already present in Safari).

But what difference does it make for us today? At the moment only three browsers give you the ability to animate CSS properties – Chrome, Safari and Opera, which together take up only a small part of the browser market. Firefox is expected to soon join the club, and with the impending release of IE9, it suddenly makes sense to start leveraging this technique.

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

A jQuery & CSS3 Drop-Down Menu With Integrated Forms

When designing the layout for a website there’s one thing that we as designers are always conscious of – making things easier for users. No matter what it is your site offers, you’re still going to need to balance the interface in a way that keeps it very easy for users to find and perform core site functions around your site or service, ideally without having to load up a completely different page.

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

Halftone Navigation Menu With jQuery & CSS3

Providing an intuitive, yet eye-catching navigation on your site, is one of the ingredients for a great design. And with the performance improvements in newer browsers and the rise of JavaScript frameworks such as jQuery, it is becoming easier to include beautiful animations in your page designs.

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 – A jQuery And CSS3 Persistent Navigation Menu

Everyday on the web there’s something that we all do, almost regardless of the site that we’re on – we scroll down. If we’re reading a blog post, looking through a product description or even just scouring through eBay listings..in every case we need to scroll back up to the top of the page if we want to use the site navigation again or perform a site search. 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

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

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!

BonBon Sweet CSS3 Buttons

BonBon Sweet CSS3 Buttons

There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible.

And voila.. here they are, the BonBon Buttons. Named after the French word for “Candy”. So, let’s take a tour trough the candy store.

Fading Button Background Images With CSS3 Transitions

Fading Button Background Images With CSS3 Transitions

Roll Your Own Google Buttons

Roll Your Own Google Buttons

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.

The buttons use the -webkit-gradient function, which takes in arguments for the gradient start and stop points as well as color and then creates what the browser basically considers an image. That means we can use gradients anywhere we could use images, including backgrounds and even borders (with border-image).

CSS3 Animated Bubble Buttons

CSS3 Animated Bubble Buttons

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

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.” Fancy buttons are already in use in our web editor, and we will be adding these buttons throughout the site very soon. Why are these buttons fancy? Well they’re fancy for these reasons:

Super Awesome Buttons with CSS3 and RGBA

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

CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile

How to create depth and nice 3d ribbons only using CSS3

How to create depth and nice 3d ribbons only using CSS3

Text tutorials

How to Create Inset Typography with CSS3

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.”

That is correct, but this time we are going to do it using only CSS.

Subtle CSS3 Typography that you’d Swear was Made in Photoshop

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!

Text Rotation with CSS

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

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. We’ll also touch on some general typographical concepts along the way.

Pure CSS Text Gradients

Pure CSS Text Gradients

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

Text Embossing Technique With CSS

If you’re like me, 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 2009” article which firmly puts it up there! In this article I will show you a couple of real world examples of this, as well as describing how to implement this effect with CSS. More importantly, I give you the rules around how to correctly add an embossed effect to any text depending on the colors used.

CSS3 Background-Clip: Text

CSS3 Background-Clip: Text

Create a Letterpress Effect with CSS Text-Shadow

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!

Text Shadow

Text Shadow

How to Create a Cool Anaglyphic Text Effect with CSS

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. I don’t know if this effect works for real, as I’ve unfortunately misplaced my 3D specs, but it’s a pretty cool text effect nevertheless! Let’s take a look at how a similar style can be created for sprucing up your web designs, while taking into consideration semantics and avoiding the repetition of any markup.

Adding An Outline To Your Text Using the CSS3 text-stroke Property

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

Matrix Animation with WebKit CSS3

CSS Gradient Text Effect

CSS Gradient Text Effect

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). All you need is an empty < span > tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how.

Gallery and Animations tutorials

Creating a polaroid photo viewer with CSS3 and jQuery

Creating a polaroid photo viewer with CSS3 and jQuery

Easily Turn Your Images Into Polaroids with CSS3

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!

3d animation using pure CSS3

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 animation using pure CSS3.

Build a Kickbutt CSS-Only 3D Slideshow

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

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.

Editable CSS3 Image Gallery

Editable CSS3 Image Gallery

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

jQuery & CSS3 3D Interactive Photo Stack

CSS3 has a lot of hidden power in it’s transform function including the ability to do really neat things like skewing an image, rotating it or scaling it, all in just one or two lines of code. You probably know what rotating an image does but how about skewing?

Well, think of skewing as a way to transpose an image at particular angles – basically, pulling the X axis at one angle and the Y axis in another. It sounds a little complicated, but this technique is really great for simulating 3D perspective effects.

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

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

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

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

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.

My solution relies on CSS Sprites and a few lines of jQuery, but requires a bit of preparation before it can be implemented. It is not recommended for large scale projects and probably best for displaying portfolio pieces.

Use CSS3 to Create a Dynamic Stack of Index Cards

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

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.

So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens? While thinking of alternatives to the usual horizontal panels, I thought it would be nice to create something that works in a similar way, but that is a bit more flexible.

Related Posts Slide Out Boxes with jQuery and CSS3

Related Posts Slide Out Boxes with jQuery and CSS3

The other day we were wondering how we could show our visitors more of our works. It’s normal that in a blog older posts get forgotten and even if something might still be very interesting and relevant, it get’s lost under the pile of new stuff. So we decided to create something like a little widget that can be used to show related posts in any page. The main idea is to show a fixed list at the right side of the screen with some thumbnails sticking out. 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

lightbox effect in CSS3 through transition

iPhone “slide to unlock” Text in WebKit/CSS3

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!

Fancy Image Hover Using CSS3

Fancy Image Hover Using CSS3

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.

Combining the two methods, we can create a simple animated rollover effect with endless possibilities. Check out the demo page using the button below to see four somewhat silly examples that I created. The examples are not necessarily the most attractive or practical, but they’re just some over-the-top examples to demonstrate what’s possible when you combine these two CSS techniques.

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

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

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

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, but do need some thought to be put into their design and structure so that the user knows how to navigate around. WanderWall uses a hover-based interface.

Misc tutorials

CSS3 Progress Bars

CSS3 Progress Bars

They use no images, just CSS3 fancies. Like a good little designer always does, they fall back to totally acceptable experience.

Multiple Backgrounds (CSS3)

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.

Using @font-face

@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;
}

CSS3 Multiple Columns

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!

Design a Prettier Web Form with CSS 3

Design a Prettier Web Form with CSS 3

Thanks to advanced CSS properties, such as gradients and shadows, it’s now quite easy to turn a dull web form into something beautiful – with minimal effort.

Zebra striping tables with CSS3

Zebra striping—or, coloring or shading alternate rows on a table—is thought to enhance the usability of a table by guiding the user’s eye along a row. This method has been used in print for years, and many designers try to emulate this technique when making tables for the Web. CSS has made achieving zebra striping easier, but, up until CSS3, it still involved a bit of cumbersome coding.

With the advent of CSS3’s nth-child selector, we are able to target multiple elements in a document by creating a “counter” that skips over specified children in the document tree. This allows us, specifically, to style only the odd or even rows of a table. This article details how to use nth-child successfully.

11 Classic CSS Techniques Made Simple with CSS3

We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there’s a new age coming. This new age includes the use of CSS3. In today’s tutorial, I’ll show you eleven different time-consuming effects that can be achieved quite easily with CSS3.

Using CSS 3 selectors to apply link icons

You don’t need to limit yourself to just the href attribute; with CSS 3 selectors, you can use the same technique for any tag which has an attribute.

Making a Sleek Feed Widget With YQL, jQuery & CSS3

Making a Sleek Feed Widget With YQL, jQuery & CSS3

You will be surprised at how much data is made available on the web through RSS or ATOM feeds – twitter searches, your latest diggs, Google Search alerts, your own blog categories and so much more. You just have to look for that orange icon and you’ll surely find a lot more precious data, just waiting to be put into use.

Today we are making a sleek feed widget, that will fetch any feed and display it in your blog sidebar. You can set it up to show the latest posts from the different categories of your blog, your latest stumbles, or even people mentioning you on twitter.

Working With RGBA Colour

Working With RGBA Colour

CSS3 introduces a couple of new ways to specify colours, and one of those is RGBA. The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency. This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through. Like with layers in Photoshop.

Pure CSS3 bokeh effect with some jQuery help

Pure CSS3 bokeh effect with some jQuery help

Bokeh – In photography, bokeh is the blur, or the aesthetic quality of the blur, in out-of-focus areas of an image, or “the way the lens renders out-of-focus points of light.” (from Wikipedia). I’m pretty sure you’ve seen this effect before, since there are loads of wallpaper roundups and tutorials using this technique. Currently, one of my favourite wallpapers has to be this bokeh effect from -kol.

Today, I want to add another addition to the bokeh “hype”, by creating a pure CSS3 bokeh effect. With some help from jQuery, we can add some randomness in colour, size and position for the effect.

Cross-Browser CSS Gradient

The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome.

Styling Full Width Tabs with CSS3

Styling Full Width Tabs with CSS3

In this article I will demonstrate how to create full width “browser-like” tabs using pure CSS3 and some HTML5 markup. This article includes whole lot of new CSS properties such as box and text shadows, border radius and CSS gradients. That means a lot of vendor prefixes in the code

CSS 3 selectors explained

In this article, the specification I am referring to is the Selectors W3C Working Draft 15 December 2005. The new selectors described in the document will be used by CSS level 3, but may also be used by other languages. If you are reading this article months, or even years after that date it may be worth checking if a more recent version is available.

Pure CSS speech bubbles

Pure CSS speech bubbles

Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.

CSS: Transition Timing Functions

This article follows on from the related article on Animation using CSS Transforms and investigates the transition-duration and transition-timing-function properties which control, respectively, the duration and speed at which a transition is carried out.

Animated CSS3 cube using 3D transforms

Animated CSS3 cube using 3D transforms

A 3D cube can be created solely in CSS, with all six faces. Using JavaScript to detect key presses and update inline styles this cube can be intuitively navigated.

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.

Better Check Boxes with jQuery and CSS

Better Check Boxes with jQuery and CSS

In this short tutorial, we will be creating a replacement for the default browser checkboxes in the form of a simple jQuery plugin. It will progressively enhance your forms but at the same time fall back to the default controls if JavaScript is unavailable.

Stronger, Better, Faster Design with CSS3

In this second article we’re going to focus on using those CSS techniques (and a little JavaScript) to create some practical elements and layouts. As before, caveat coder — a lot of the CSS properties we’re going to use have limited support, if any, in IE6/7 and probably 8. Firefox 3.5+ and Safari 4 are your best bet right now to see all the cool stuff going on in CSS right now (Chrome does a pretty good job, too).

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.
The HSL declaration sets color/colour using Hue (H), Saturation (S) and Lightness (L).

Hue is derived from a degree on the color wheel: 0 & 360 being red, around 120 for the greens, 240 for the blues and everything else in between
Saturation is a percentage: 0% being grayscale and 100% in full color
Lightness is a percentage: 0% is dark, 50% the average and 100% the lightest

Overview of CSS3 Structural pseudo-classes

CSS’s goal of “separating style from content” relies heavily on its ability to reach that content first. Well, in CSS3, that mission is bolstered by the addition of Structural pseudo-classes. These selectors let you select child elements of a parent based on a variety of generic criteria, such as the 3rd child, even/odd child elements, the nth child within each group of children of a certain type (ie: LI) within the parent, and more. A little overwhelming, yes, but it’s sure better than underwhelming, right?

@font-face in IE: Making Web Fonts Work

All Hallows’ Eve seems the perfect time for something a little spooky. Getting @font-face working in IE may just be spooky enough. As you probably know @font-face already works in Safari 3 via WebKit and is supported in the latest Firefox 3.1 beta. With IE, that means around 75% of the world audience could see custom typefaces today if their EULAs allowed it. Fortunately, there are good free faces available to us already, as well as some commercial faces that permit embedding. Fontin is one of them and I’ve built it into this example page:

Overriding The Default Text Selection Color With CSS

Overriding The Default Text Selection Color With CSS

One of those cool CSS3 declarations that you can use today is ::selection, which overrides your browser-level or system-level text highlight color with a color of your choosing. At the time of this writing, only Safari and Firefox are supporting this, and both in slightly different ways. Fortunately, this can be thought of as one of those “forward-enhancement” techniques. It’s a nice touch for those using modern browsers, but it just gets ignored in other browsers and it’s not a big deal.

The Power of HTML 5 and CSS 3

As far as we’ve come using HTML 4 and CSS 2.1, however, we can do better. We can refine the structure of our documents and increase their semantic precision. We can sharpen the presentation of our stylesheets and advance their stylistic flexibility. As we continue to push the boundaries of existing languages, HTML 5 and CSS 3 are quickly gaining popularity, revealing their collective power with some exciting new design possibilities.

CSS 3 Cheat Sheet (PDF)

In this post we present a printable CSS 3 Cheat Sheet (PDF), a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification. Next to each property is a listing of the expected values that that property takes (normal text shows named values it accepts and italics shows value types it will accept).

Rounded Corners, Drop Shadows, Opacity & CSS3

Rounded Corners, Drop Shadows, Opacity & CSS3

There are some very cool features that have come along with HTML5 and CSS3. Generally, alot are only able to be displayed in Firefox and Webkit-based browsers like Chrome and Safari. Here, I’ll show you an example of how to implement drop shadows, rounded corners and opacity in your designs using CSS3. The first example is from an article by Divya Manian. Really cool designer that one. As usual, IE doesn’t support these features, but there are a few hacks that need to be implemented to get these same effects to work in IE

Drawing Calendar Icon With CSS3

Drawing Calendar Icon With CSS3

In this article I am going to use some of the CSS tricks to create a calendar icon you can use for your blog posts or something similar. It is important to notify that there are no images used here and the markup couldn’t be simpler than it is.

How to create a kick-ass CSS3 progress bar

How to create a kick-ass CSS3 progress bar

As I’ve shown you in some of my recent posts, the new features introduced in CSS3 allows developers to create stunning visual effects. Today, let’s create a fancy progress bar using CSS3 and jQuery, but no Flash or even images.

How to Create A Multi-Step Signup Form With CSS3 and jQuery

How to Create A Multi-Step Signup Form With CSS3 and jQuery

In this tutorial we will see how to create a simple multi-step signup form using CSS3 and jQuery. To spice up things a bit, we will include progress bar with the form, so the users will be able to see the percentage of form completion.

Animated wicked CSS3 3d bar chart

Animated wicked CSS3 3d bar chart

The principle is the same as the previous version: Create a beautiful 3d bar chart. But this time, we don’t create a “stacked” one (since animation would be hard), but several bars placed under each other. When hovering, the animation shows and the bar will grow to the appropriate size.

Sticky Notes with CSS3

Sticky Notes with CSS3

Enjoyed this article? Subscribe to read more like it

 
 
 
 
 

Sponsors