WEBEXPEDITION18 Never Stop The Exploring

CSS is the second-most-important thing you can master when it comes to web design, right after HTML. Below are brilliant articles and tutorials they can help you master the techniques that will help set your designs apart from the crowd.

Six CSS Layout Features To Look Forward To

There are six layout proposals that are relevant to us, all of which I described in the talk. Here is a little more about these proposals and how they will help you in developing websites in the future.

Measuring and Sizing UIs, 2011-style

For years we used pixels to lay out web pages. Then, not so long ago, we were dabbling with ems to make our pages elastic. Now, in 2011, most of us are adopting a responsive approach and using fluid grids and percentages.

An Introduction To Object Oriented CSS (OOCSS)

In this post, Louis Lazaris introducing the concept of object oriented CSS and how it can help improve both the performance and maintainability of your Web pages.

Understanding CSS’s vertical-align Property

The vertical-align property is one of those features of CSS that sounds pretty self-explanatory, but can cause problems for CSS beginners. I think even many CSS veterans have had problems figuring this one out at times.

Learning How to Use CSS pseudo-elements: :before & :after

Most people know everything about CSS transitions, rounded corners, box shadows and a bunch of other cool stuff, but I came to notice that not a lot of people know about one of my favorite highlights about CSS: Pseudo-elements.

Using Absolute Positioning in CSS

Once you start to become more experienced with CSS, one concept that will help you greatly is use of the position property, in particular with a value of absolute.

CSS3 Patterns, Explained

The biggest benefit of CSS-generated backgrounds is that they can be modified directly within the style sheet. This benefit is void if we are just copying and pasting CSS code we don’t understand.

CSS3 border-image Explained

One of the more powerful new CSS3 properties, border-image is also one of the best supported, with the exception of (all together now) IE9. It is, unfortunately, also one of the most obtuse and difficult to understand.

Typography Effects with CSS3 and jQuery

Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites.

Adobe-like Arrow Headers

Adobe has some pretty cool header bars for modules on their site. In this tutorial Chris Coyier will show us how to recrete them using CSS.

Create Five Awesome Hover Effects Using CSS Multiple Backgrounds

Today we’re going to have all kinds of fun with the CSS multiple backgrounds feature. You’ll learn how to use multiple backgrounds in a simple way and how to go much further by combining the technique with hover actions and CSS transitions to create some really cool effects.

Create Progressively Enhanced 3D CSS Rollovers

Here we’ll take a look at using CSS, 3D CSS transformations, transitions and CSS animations to create some great rollover styles without telling people that they need to have certain browser. Instead, we’ll fall back to a plain rollover for all CSS capable browsers.

Experiments with background-clip: text

With the CSS property “background-clip: text” (which is currently only supported in Webkit browsers), we can add a background image to a text element. Today we will experiment with it and create some fun examples by adding CSS3 transitions.

Numbering In Style

Chances are if you want to number things in order on a website, the ordered list (<ol>) is your guy. It also is pretty reasonable that you want to style those numbers. Strangely enough, styling those list numbers isn’t a very easy thing to in CSS.

Fun with CSS3 Transitions – Create Super Cool Text Effect using CSS3 and Lettering.js

When I saw that simple but yet amazing effect, when you hover over title in “Unitasking” post by Trent Walton, I was immediately in love. So, in this post we will see how to achieve that effect with a little help of lettering.js and css3 transition property.

Splash and Coming Soon Page Effects with CSS3

CSS3 opens up so many crazy possibilities and today we want to show you how to go wild with splash and coming soon page effects using CSS3 animations. We’ll experiment with animation sequences and how to bring some life to some simple elements.

Four Simple and Fun CSS Button Hover Effects for Beginners

Today we’re going to take a step back from advanced discussions about CSS preprocessors and return to some good old basics. We’ll work up four super simple CSS buttons, each with a unique animated hover effect.

CSS3 Pricing Table

When designing a pricing table for a product or service, your job as a web designer/developer is to make sure that the table is easy to understand, intuitive and clear. In this article you’ll learn how to build an awesome CSS3 pricing table, with no images and minimal HTML markup.

Say Hello to Webkit Filters

Earlier this month, a new specification, Filter Effects 1.0, was released. It presents some exciting new Photoshop-like effects that we can use in the browser. Even better, Webkit has already landed support (in the nightlies)!

Meet the CSS4 selectors

Almost two months ago, the latest CSS Selectors Level 4 Working Draft was released by the World Wide Web Consortium (W3C). In this article you’ll find out some interesting stuff about the new CSS4 selectors.