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

How to Size Fonts in CSS

One consideration most designers go through when creating content for today’s web is; should my stylesheet begin with a reset? The variety of reset options used today is fodder for a completely different discussion, but there is a subtopic I’d like to pursue. Oftentimes a …

Read More

Typography: Part 3

In Part 1 we began with a simple classification of the different typefaces used today.

In Part 2 we took a simple look at some of the basic character components.

In Part 3 we want to make the users of Adobe products aware of a wonderful service that is available through the Creative Cloud.

Back in 2009 Jeff Veen, Bryan Mason, Ryan Carver, and Greg Veen, all originally part of the Measure Map/Google Analytics team began a company called Small Batch, Inc. Its purpose was to make font usage on the web far more accessible by introducing a product called Typekit.

Designers had been painfully aware of the limitations associated with font usage online since the webs beginning. At best there were about 14 fonts most designers could count on being installed on the average user’s computer. Did you think everyone was really that crazy about Times New Roman, Arial, or Verdana?

Read More

How To Plan a WordPress Website

wordpress-logo-stacked-rgbYou’ve decided you need a website for your business, your frequent family reunions, your… And YOU want to build it – you don’t want to pay someone. Where do you start? Here’s the frustration and fun. You search  “how to build a website” (or something similar) and the resulting possibilities are seemingly endless. Wow. Where’s the aspirin?

Read More

Typography: Part 2

In Part 1 we began with a simple classification of the different typefaces used today. We kept things simple and broke them down into 5 different groups; serif, sans-serif, monospace, handwritten, and decorative. In Part 2 we will take a simple look at some of …

Read More

Typography: Part 1

This will be our initial look into the world of text. All those letters that we string together to form books, online articles, blog posts, and the like.

Most mere mortals pay little attention to the how and why of assembling all those words into a form worthy of consumption.

“Typography is to literature as musical performance is to composition: an essential act of interpretation, full of endless opportunities for insight or obtuseness.” ― Robert Bringhurst, The Elements of Typographic Style

This series will begin with a simple classification of the different typefaces used today. To keep things simple I, and many others, have chosen to break them down into 5 different groups; serif, sans-serif, monospace, handwritten, and decorative.

serif_fonts

Serif

Read More