CSS3 Tutorials, Tips, Tricks and Techniques

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. To show you how, we’ve cooked up an example with some super awesome, scalable buttons.

Take Your Design To The Next Level With CSS3

It’s time to introduce CSS3 features into our projects and not be afraid to gradually incorporate CSS3 properties and selectors in our style sheets. Making our clients aware of the advantages of CSS3 (and letting older deprecated browsers fade away) is in our power, and we should act on it, especially if it means making websites more flexible and reducing development and maintenance costs.

Fun with CSS3 and mootools

These examples came about when experimenting with the extend property in MooTools. By extending the styles class I could add CSS3 properties into the Core MooTools framework and do CSS3 animations.

CSS3.info

CSS3 is the new kid in the stylesheet family. It offers exciting new possibilities to create an impact with your designs, allows you to use more diverse style sheets for a variety of occasions and lots more. We created this site because we want to share our experiences of CSS3 with you, and want nothing more than to simply be the biggest online resource covering CSS3.

Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

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.

Halftone Navigation Menu With jQuery & CSS3

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.

Get Started with CSS 3

Beautiful CSS3 tutorial article explaining several new CSS3 features and giving solutions how to create them actually.

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!

The fundamental problems with CSS3

This post brings to a head a lot of my thoughts and feelings with regard to CSS3 and the way the W3C is developing it. It does not aim to look at specific topics in detail, but to step back and question some fundamental issues that I feel need to be addressed.

Dynamic PNG shadow position & opacity

When the light is turned on, the position and opacity of the logo shadow will change dynamically, depending on the position and distance of the light bulb. Don’t forget to drag the logo and/or the light bulb around!

Awesome Overlays in CSS3

These overlays use a number of new CSS properties, some of which are simple like border-radius and using RGBa colors. The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS.

Sweet AJAX Tabs With jQuery 1.4 & CSS3

Organizing the content of a page in a both intuitive and eye-catching manner, is a must in modern web design. One principle that has been around for some time is dividing text into tabs. This allows you to squeeze much more content in a seemingly limited space and provide a structured way of accessing it.

Sliding Vinyl with CSS3

We take a standard album cover, a little HTML, and some CSS3 transitions and transforms to create a sliding vinyl effect for showing off the music you love.

CSS 3 Cheat Sheet (PDF)

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

New Selectors Introduced in CSS3

Everyone who has been using CSS is immediately familiar with selectors as they are what is used to target elements on a page and style them. CSS3 brings even more options as far as selecting elements goes. It will allow designers and developers to implement designs much easier and quicker than before.

Going Nuts with CSS Transitions

24ways going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.

CSS Animations

Push Your Web Design Into The Future With CSS3

These features include CSS styling rules that are being released with the upcoming CSS3 specification. Realistically, you won’t be able to use these on your everyday client projects for another few years, but for design blogs and websites aimed at the Web design community, these features can help you push the boundaries of modern Web design today, adding that extra spice to your design and helping the industry move forward.

Working With RGBA Colour

one of the clear goals was to have a graphical style without making the pages heavy with a lot of images. When we launched, a lot of people were surprised that the design wasn’t built with PNGs. Instead we’d used RGBA colour values, which is part of the CSS3 specification.

Six Questions: Eric Meyer on CSS3

Eric A. Meyer knows a thing or two about standards-based CSS and HTML development. He’s a distinguished expert on CSS and HTML, an author of numerous books on CSS, co-founder of An Event Apart, a coveted guest speaker, a member of the A List Apart crew, and founder of Complex Spiral Consulting (I could go on – but I think you get the picture).

Introduction to CSS3 – Part 1

This article marks the first of several, providing an introduction to the new CSS3 standard which is set to take over from CSS2. We will be starting from the very beginning – taking you from not having even heard of CSS3, to feeling ready to hit it running as various features start to become more widely adopted.

CSS3 Exciting Functions and Features

With version three of CSS, many exciting features will be implemented. CSS3 leads to greater flexibility and makes it much easier to recreate previously complex effects. Many time-saving rules are being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image ,multi-column layout, etc…

Rounded Corner Boxes the CSS3 Way

While the CSS working group still seem to be arguing over the exact syntax, Dave Hyatt went ahead and implemented the currently suggested mechanism into Safari. The technique is fiendishly simple, and I think we’ll all be a lot better off once the W3C stop arguing over the details and allow browser vendors to get on and provide the tools we need to build better websites.

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.

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.

CSS3 Gradients: No Image Aqua Button

WebKit CSS3 gradient and created a useless but fun stuff – an Aqua button with no images!

Shadows and CSS3

design that uses text-shadow and box-shadow, with RGBA in place to create the shadow color. I wanted to tweet about this technique because it’s simple and awesome, but to my surprise I couldn’t find a good, quick tutorial that covered the use of both text and box-shadow, along with RGBA. So I decided to create one.

Cleaner Code with CSS3 Selectors

In this article I’m going to take a look at some of the ways our front and back-end code will be simplified by CSS3, by looking at the ways we achieve certain visual effects now in comparison to how we will achieve them in a glorious, CSS3-supported future. I’m also going to demonstrate how we can use these selectors now with a little help from JavaScript – which can work out very useful if you find yourself in a situation where you can’t change markup that is being output by some server-side code.

border-radius and -moz-border-radius

One of the most keenly-anticipated CSS3 properties is border-radius. Web designers will no longer have to resort to complex table structures using custom-made corner graphics or including arcane JavaScript files in order to produce designs with rounded corners.

5 CSS3 Techniques For Major Browsers using the Power of jQuery

CSS3 leads to greater flexibility and makes it much easier to recreate previously complex effects. Not all current browsers support CSS3, but it is however possible to create equivalent effects and serve it with the power of jQuery.

Stronger, Better, Faster Design with CSS3

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

Playing with CSS3

When I was working on the new version of Abduzeedo, the current one, I decided to learn and use CSS 3 to enhance the visual of some elements. Instad of using images to create shadows and round corners I used CSS 3. Of course I knew that it would not be compatible to all browsers, more precisely, the Internet Explorer.

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.

Overview of CSS3 Structural pseudo-classes

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.

CSS3 Techniques You Should Know

Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I’ll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!

3 Easy and Fast CSS Techniques for Faux Image Cropping

This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. All techniques explained here actually need only couple of lines of CSS. However, it is not cropping in a real sense of the word, we are not cutting the image down to a certain size (CSS can’t do that yet) we are merely hiding the “extra” and displaying only a part of the image we want

The CSS3 border-radius property

One of the CSS3 properties designers have been longing the most for is undoubtedly the border-radius property. With CSS3 border-radius property it’s possible to create the so popular rectangles with rounded corners exclusively via CSS – no images needed.

Old School Clock with CSS3 and jQuery

It all started when I was looking at the WebKit blog and saw an article on the new CSS3 animations and the one that caught my eye was ‘rotate’. I started thinking what the hell can you rotate on a webpage (it’s animated GIF’s times ten!). Then it hit me — a clocks hands rotate! Bingo!

Accessibility Features of CSS3

This document summarizes the features of the Cascading Style Sheets (CSS), level 2 Recommendation ([CSS2]) known to directly affect the accessibility of Web documents. Some of the accessibility features described in this document were available in CSS1 ([CSS1]) as well. This document has been written so that other documents may refer in a consistent manner to the accessibility features of CSS.

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

Conversation with CSS 3 team

CSS 3 is arguably the most eagerly anticipated specification in the works at W3C. CSS 3 promises to make it easier to create page layout and to support formatting that is currently only achievable through hacks. In this article, xhtml.com interviews Bert Bos, chair of the CSS Working Group at W3C, about the next release of the CSS specification and how past design decisions are influencing the future of CSS. This interview offers a rare opportunity to learn more about the inner workings and thought processes of the CSS Working Group at W3C.

Get the best out of CSS3

Web designers spend quite a lot of time being angry. If they’re not moaning about how some typographic nicety isn’t available yet for online design, they’re rattling on about how Internet Explorer has once again left something nasty and smelly in their cereal. So, as an antidote to all that, this month’s CSS article is chock-full of unbridled optimism. What we’re going to do is take a look at some upcoming features of CSS3, and show how they can be of benefit to web designers.

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

CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile

Designing UI elements for a mobile browser has taught me a great deal when it comes to creating interactive graphical elements that are to be used in a very small space. Of course, when I say small space, I mean a small space that has the potential to be different for each handset out there.

How To Create Depth And Nice 3D Ribbons Only Using CSS3

This is a widespread trends in recent web design: 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.

CSS3 HSL & HSLA

Using the CSS 3 HSL declaration for colors/colours. Whatever next!?? HSLA… A tutorial on using the HSL & HSLA declarations along with the quick + / – guide to which browsers currently support the herein effect.

CSS3 + Progressive Enhancement = Smart Design

Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before..

The CSS3 :not() selector

There isn’t a lot of information to be found about the :not() selector. The specifications only offer 3 lines of text and a couple of examples. So lets see what it can do!

An Awesome CSS3 Lightbox Gallery With jQuery

In this tutorial we are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it.

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. Quick reminder, the demo is awesome-est in a WebKit browser (Safari or Chrome).

An Awesome CSS3 Gallery

Tutorialzine is a nice blog but I think sometimes it should should re-dimension chosen titles.

A Crash-Course in Advanced CSS3 Effects

Webkit is one of the few – if only – browser engines that really embraces advanced CSS3 effects. Unfortunately, this presents somewhat of a double-edged sword. We get to play with all of these amazing effects – such as CSS masks, reflections, transitions, animations, scaling, etc. – yet, we can’t truly implement them into our projects until more browsers provide support. With all of that said, it’s important to be on the cutting edge of what’s possible.

CSS3 Multiple Columns

Use CSS 3 to create a set of columns on your website without having to assign individual layers and / or paragraphs for each column. Along with the +/- quick list of compatible browsers, this is a guide on doing just that…

CSS @ Ten: The Next Big Thing

CSS is ten years old this year. Such an anniversary is an opportunity to revisit the past and chart the future. CSS has fundamentally changed web design by separating style from structure. It has provided designers with a set of properties that can be tweaked to make marked-up pages look right—and CSS3 proposes additional properties requested by designers.

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along.

CSS Trick: Hidden Messages

Here’s a cool little CSS 3 trick for hiding messages within your text. We’re going to be using the ::selection declaration to change the colour of the text on selection. The ::selection declaration is a new tool used in CSS 3, but currently isn’t supported by Internet Explorer.

CSS3 Reference Guide and Blog

Cascading Style Sheets (CSS) are the modern standard for website presentation. When combined with structural markup language like HTML, XHTML, or XML (though not limited to these), CSS provide Internet browsers with the information that enables them to present all the visual aspects and elements of a web document. CSS apply things like borders, spacing between paragraphs, margins, headings on images, control of font faces or colors, background colors and images, textual effects like underlined or strike-through text, layering, positioning, and a number of other presentational effects.

20 Useful Resources for Learning about CSS3

As a web developer, it’s crucial to be well-informed about modern and future web standards. To help you stay ahead of the curve – here are 20 excellent resources on the topic of CSS3.

CSS3 Unleashed – Tips, Tricks and Techniques

Separation of content from presentation has numerous advantages, some of which include: improvements in content accessibility, flexibility and control over presentation, share formatting across multiple pages, and reduce complexity and repetition in the structural content. This is why CSS was developed and all of this is achievable to a certain extend through current level of CSS.

CSS3 Unleashed – Tips, Tricks and Techniques

Separation of content from presentation has numerous advantages, some of which include: improvements in content accessibility, flexibility and control over presentation, share formatting across multiple pages, and reduce complexity and repetition in the structural content. This is why CSS was developed and all of this is achievable to a certain extend through current level of CSS.

30 Essential CSS3 Resources

Web designers around the world are extremely excited about the power of CSS3 and the creative freedom it offers. With that in mind, we’ve rounded up 29 resources for you to learn more.

Beautiful Photoshop-like Buttons with CSS3

In this Tutorial we’ll show you how to recreate 3 different, slick buttons that we created beforehand in Photoshop without the usage of any image in CSS3. We’ll use a multitude of CSS3 properties, such as @font-face, text- and box-shadow, gradients and border-radius.

Found something missing in this post?

While compiling this stuff on this post, it’s possible that we miss some other great CSS3 tutorials and techniques. Do not hesitate to share it with us in Comments so that we can add instantly.

This entry was posted on Tuesday, February 16th, 2010 at 4:15 PM and is filed under CSS, Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.