Brilliant Articles and Tutorials That Will Help You Improve Your CSS Skills

    written by Nikola Lazarevic

    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

    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

    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)

    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

    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

    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

    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

    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

    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

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

    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

    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

    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

    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

    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

    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

    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

    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

    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

    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.

    Authored by

    Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.

    Enjoyed this story?

    Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

1 Comment
ADD COMMENT
  • Image Masking says:

    December 30, 2011

    You’ve done really awesome job! thanks a lot for sharing this nice post & I’ll visit your site again :)