A Printer Friendly Version

“You’ve seen them before: links that say “click here for printer-friendly version” or words to that effect. Every time you follow one of those links, you load a separate document that presents exactly the same information with a different layout, and probably different markup. That …

Read More

Using a CSS Reset

One of the frustrations designers have been feeling for some time now stems from web design by committee, or design via theme. Many web sites today are WordPress sites with a theme and some content. Just add words and you have an instant site. Then …

Read More

Is It Time for a New Browser?

       When it comes to the topic of web browsers one phrase comes to mind, oh how the mighty have fallen. In the 23 years since the release of Mosaic, “the world’s first popular browser”, we have seen several major contenders rise to …

Read More

How to Create Multiple Columns Using CSS3

CSS3 Multiple ColumnsWatch this video on YouTube In this CSS3 tutorial, you’ll learn how to create multiple columns using CSS3. You’ll see how to use the column-width, column-gap and column-count properties to make long blocks of text readable and responsive to your user’s preferred resolution. …

Read More

CSS3 Multiple Columns

Doing a basic web page text layout using more than one column has been much more of a chore than it ever should have been. In the early days of web design almost everything was built using tables. Actually tables inside tables inside tables. Along …

Read More

Cropping Images with CSS

There are times when you want to focus on a specific area of a photograph but don’t need a separate, cropped version of the picture. CSS offers an approach that will maintain the complete, original image but allow you to crop, mask, or clip your picture.

Let’s begin with a simple example. This page includes a full-size image of a young lady sipping a cold beverage on a beautiful spring day.

Read More

Using CSS3 Instead of JavaScript

CSS3 has been in development since 1998, that’s right, 1998. Both CSS1 and CSS2 became standards in quick succession, December of 1996 for CSS1, and May of 1998 for CSS2. One of the main differences between CSS3 and its predecessors is the use of documents or “modules” to contain different components of the specification. Some examples would include media queries, level 3 selectors, level 3 color, and multi-column layout. These modules progress at different rates and are largely dependent on browser support.

There are two specific modules we are going to take a look at today: transforms and transitions.

Transforms can be 2D or 3D and allow you to scale, rotate, move, or skew an object.

Transitions allow you to change properties smoothly from one value to another, over a measured duration.

These two modules in combination allow us to perform basic hover effects that in the past were only doable using JavaScript. The advantage of using CSS is twofold: less code, and slightly better performance since animating a transform occurs in the GPU.

If you are concerned about browser support we have included screen captures from caniuse.com. All is well as long as your users/clients have progressed beyond IE9.

caniuse-transform

caniuse-transitions

Our demonstration will begin with a simple list that will be styled to look like a couple of sticky notes.

html-step-1

To make our sticky notes appear to be hand written we would like to use a font that looks that way, hand written. CSS3 makes that easier now because of the addition of web-fonts. For years we were stuck using the same fonts over and over again. Now it’s as easy as going to Google Fonts, selecting something from their list of over 700 fonts, clicking the quick use button, copying a link and pasting it into the head of your web page. Just use the name of the font supplied by Google in your stylesheet and you are good to go.

css-step-2

We’ll also add a drop shadow to give a sense of dimension to our notes. You’ll notice a prefix being used for this code. With 5 browsers vying for your attention and each of them progressing at a different pace they have taken to using slightly different syntax. This prefix is necessary for a given browser in order for your style to work. Eventually all browsers will use a standardized syntax, but for the time being we will include the prefix to guarantee success.

css-step-3

With some basic styles in place our page should look like this.

screen-shot-2

Now we want our sticky notes to appear randomly placed which means they shouldn’t look straight or level. That’s where transform comes into play. We’ll take each note and rotate it and use relative positioning from CSS2 to move them up or down. We are also using the CSS3 pseudo class nth-child to select which list item we are styling.

css-step-4

Our page now looks like this.

screen-shot-3

The over-all effect we are looking for is a zoomed in, straightened view of our sticky note. To accomplish this we will use the CSS2 pseudo-class hover. It will allow us to scale our note using transform and then time and smooth that transformation using transition.

css-step-5

css-step-6

Read More

Preserving White Space Using CSS

We find it easy working with white space in today’s generation of applications. In word processing pressing the spacebar, tab key, enter, return, or even shift+ enter and what they deliver are all things we have grown to expect. That isn’t the case when designing …

Read More