CSS posts

Hidden away in the depths of the CSS specification you’ll find CSS counters. As the name suggests they allows you to count a thing on your page with CSS incrementing the value every time it appears on the document.

This is principally useful if you have a tutorial website — whether that be about cooking or web development — they all have steps to follow, and you’ll most likely have to write the step number before the actual content. CSS counters can help by doing that automatically, you can even use it to count the images on your file and add figure numbers...

The most frustrating aspect of web design for designers trained for print, is the persistent lack of typographic control.

Careful typographic choices are the hallmark of quality work and the lack of that quality online never ceases to be jarring for those of us that know what we’re looking for.

Fortunately, the level of control that we have is increasing all the time and support for more advanced typographic rendering is also increasing. Whilst it’s certainly not possible to deliver the kind...

When it comes to rendering on somebody else’s DOM, you can’t naively write HTML and CSS like you might for your own self-contained web application. You’ve got to think carefully about how preexisting CSS and JavaScript code might affect your application.

Before you begin to write any HTML or CSS, you’ll have to make an important decision regarding the look and feel of your application. Do you want your application to look the same everywhere? Or do you want the application to inherit the native look and feel of the page on which it’s hosted? Your answer will have a profound effect on your strategy for rendering your app.

One thing is constant: at some level, you’ll be practicing what we call defensive rendering. By defensive, we mean taking steps to output HTML and CSS that minimize the impact of the parent page on your application. The less you want your widget impacted...

Everyone loves motion. Adding the fourth dimension (time) to a site design is the main way screen-based design stands out from print design. CSS Transitions are a simple method for animating properties of an element enabling you to enrich certain events in your web design, without the need of Flash or JavaScript.

The W3C aptly describes transitions on their website as “CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration”.

HTML will only take the web designer so far and if you want to create dynamic, attractive, reactive web design then you need to learn and implement CSS. Not only can you create improved design elements for your pages but you can expect to enjoy faster loading times, easier maintenance, and less time to create new pages or update existing ones.

Below are 15 of the best...

If you plan to use CSS on a regular basis you need to develop an understanding of what specificity is and how it is applied.

Other than floats and positions, specificity may be one of the hardest things to get used to, let alone master. The selectors you use in your CSS all have different weights and those are controlled by specificity. That’s why sometimes, when you apply a rule to an...

We launched our new StartupGiraffe website a few months ago, and we’ve been meaning to write a post about how we did a piece of the frontend for anyone interested.

Our goal was to create a fun and responsive site that showed off our brand. Once our friends at Barrel NY agreed to do the graphic design for the site, we knew we’d also be able to pull of some neat tricks. We’d told them we wanted a really tall giraffe, but we didn’t really see all of the possibilities until we got the designs back: there were polygons of different colors, angles and shapes in the background; in the foreground, there were all sorts of elements that could work well in a parallax website…and there was that...

Thumbnails are one of the purest pieces of usability the digital age has created. In essence a thumbnail is a preview, a promise of what you’ll see if you click the link. A small glimpse with less data, faster to load and less greedy for screen real estate than the full-sized asset. They’re ideal for images, but what about video?

Well,...

There is one persistent problem with CSS; it doesn’t support variables. Each time you specify a color, for a block of text, or an image border, you have to repeat the hex code. When you want to change the color, you have to do so everywhere. Of course there’s the ‘replace all’ option in your text editor, but lack of built-in support for object oriented styles is a huge downside to CSS.

Numerous projects have attempted to solve the issue, and one of the most popular is Sass.

For those of you who aren’t very familiar with it, Sass is a CSS preprocessor that effectively expands...

The vast majority of articles talking about responsive design focus on two main areas: a fluid, flexible grid, and fluid, flexible images. What many of them don’t talk about is typography.

And yet, for the majority of websites the text, the content, is the most important element.

Granted, for sites where images or video are the primary content, responsive type is a bit less important, but it still shouldn’t be overlooked.

The good news is that...

InDesign boxes are as simple as click-and-drag. Photoshop’s layers let painters color pixels anywhere they please. But layout with HTML and CSS is a game of nudging and cascading.

It happens every day: Photoshop-savvy art directors mock up designs, honing their spacing, carefully choosing appropriate typefaces and colors. They hand off their work to an eager HTML developer, who announces that the design will likely take days to turn into working HTML/CSS. Worse, they’ll make changes to account for different screen sizes. Timing is a mystery to both parties. Will it take the developer an hour or a week to turn their PSD into...