Design the Code

Posts Tagged ‘CSS’

Create a modern gallery using z-index and jQuery

Published: April 1, 2010

Introduction In this tutorial we want to create a unique picture gallery utilizing the CSS property z-index. In our example we have the appearance of a pile of pictures, on the next action we put the first picture on the last position and on the previous action we get the picture from the last position [...]

Continue Reading...

A guide to CSS Opacity

Published: March 25, 2010

CSS opacity has been a bit of a trendy technique for a few years now, and it’s been especially frustrating for developers trying to implement opacity (also referred to as CSS transparency) in a cross-browser fashion, because it’s taken a while for the different browsers to finally agree on settings. There is still not a [...]

Continue Reading...

10 tips for front-end web developers

Published: March 16, 2010

Explain which div you’re closing Most of the time when I’m viewing a website source, I see, at the very bottom of the page, an almost endless list of closing </div> tags. In fact, many beginners think they just have to use divs instead of tables to produce quality code. Divs are cleaners than tables, [...]

Continue Reading...

Pseudo Classes to the Rescue

Published: March 12, 2010

5 Advanced CSS Pseudo Classes that will Save your Day CSS3 provides powerful pseudo-classes that allow the designer to select multiple elements according to their positions in a document tree. Using these pseudo-classes can be a little confusing at first, but it becomes a lot easier over time to set up your layout. In today’s [...]

Continue Reading...

HTML and CSS Common Mistakes

Published: March 10, 2010

Beginners through advanced coders make mistakes in their HTML and CSS files, either through carelessness or lack of experience. Clean code is very important though and will help further your skills as a developer, as well as save you time in editing later on! It never hurts to review if you’re a skilled developer, many [...]

Continue Reading...

CSS: The Box Model, Margin, & Padding

Published: March 8, 2010

In the first of the CSS In depth series, we’ll be talking about margins, padding and the box model. Margins and padding are some of the most widely used styles in CSS, but are often the source of frustration in cross-browser compatibility. In this post, we’ll explain the difference between padding and margins, how the [...]

Continue Reading...

CSS3 Pushing Web Design Into The Future

Published: March 5, 2010

There are exciting new features in the pipeline for Cascading Style Sheets that will allow for an explosion of creativity in Web design. These features include CSS styling rules that are being released with the upcoming CSS3 specification.

Continue Reading...

CSS3 Pushing Web Design Into The Future

Published: February 23, 2010

There are exciting new features in the pipeline for Cascading Style Sheets that will allow for an explosion of creativity in Web design. 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, [...]

Continue Reading...

The Bible for CSS Print Style Sheets

Published: February 4, 2010

Print style sheets have been somewhat forgotten, and yet they remain important all the same. Many people print out articles to read while traveling or when they have no access to the Internet. Print style sheets have definite benefits. For example, reading on paper is less tiring on the eyes than reading on screen. Also, [...]

Continue Reading...

Fun with CSS3 and mootools

Published: February 1, 2010

Source: http://www.rickyh.co.uk/ 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. View Demo The Extend pre Bellow is the Mozilla pre to extend MooTools with the Border-Radius and Box-Shadow: var newStyles = new [...]

Continue Reading...