An Introduction to CSS 3D Transforms

3D transforms change the way we think about the blank canvas of web design. Better yet, they change the canvas itself, trading in the flat surface for voluminous depth. We web designers, who have rejoiced for border-radius, box-shadow and background gradients, now have an incredible tool at our disposal in 3D transforms. They deserve just the same enthusiasm, research and experimentation we have seen on other CSS3 features. Now is the perfect time to take the plunge and start thinking about how to use three dimensions to elevate our craft…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Using the LESS CSS Preprocessor for Smarter Style Sheets

The simple design of CSS makes it very accessible to beginners, it also poses limitations on what you can do with it. These limitations, like the inability to set variables or to perform operations, mean that we inevitably end up repeating the same pieces of styling in different places. Not good for following best practices—in this case, sticking to DRY don’t repeat yourself for less code and easier maintenance.

Enter the CSS preprocessor. In simple terms, CSS preprocessing is a method of extending the feature set of CSS by first writing the style sheets in a new extended language, then compiling the code to vanilla CSS so that it can be read by Web browsers. Several CSS preprocessors are available today, most notably SASS and LESS…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Using RGBA to Prevent the CSS Opacity Inheritance from Parent to Child Elements

This new solution deals with RGBA CSS3 backgrounds for Mozilla FireFox, Google Chrome, Opera and Apple Safari and the Microsoft-proprietary DXImage gradient filters for Internet Explorer and may give you some new design ideas. Make sure you check the test page which I have created for this article…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

CSS Arrows and Shapes Without Markup

Often it’s useful to show an arrow or some sort of contextual indication of what element something is related to. We see this frequently with tooltips that use arrows to point to the item that is triggering them.

Today I’m going to show you a way to add in these visual hints without having to create any markup…

VN:F [1.9.22_1171]
Rating: -1 (from 1 vote)

CSS Positioning 101

If you’re a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. In what might be a refresher for some, or even an “a-ha!” for others, let’s look at the CSS position property to see how we can use it to create standards-compliant, table-free CSS layouts…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Understanding CSS3 Transitions

We can start to use CSS3 transitions right now as long as we carefully choose the situations in which to use them. They certainly won’t replace existing technologies like Flash, JavaScript, or SVG (especially without broader browser support)—but they can be used to push the experience layer a notch higher. And most importantly, they’re relatively easy to implement for the web designer already familiar with CSS. It only takes a few lines of code…

VN:F [1.9.22_1171]
Rating: 0 (from 2 votes)