How to be “Styling” Using CSS3

In my last post I covered how to build a nifty HTML5 form. I used as many of the new HTML5 form features as possible to create a simple recipe entry form. The sample form is here and lacks a bit of polish. After reading The Book of CSS3 by Peter Gasston, a comprehensive book aimed at more experienced web developers, I wanted to spruce up the form using some CSS3 features. In this post I’ll cover the CSS3 features I used.

Note: I’m using IE10 from the Windows 8 Developer Preview. You can view the sample here.

 

Media Queries

The exponential growth of devices (i.e. slates, phones, consoles) viewing online content – each with their own unique form factor – has made life extremely difficult for web developers trying to present their content in a consistent way. Tailoring content for each device, in the past, meant creating related but separate websites for each device, which put even more burden on the developer and caused code fragmentation.

In CSS3, Media Queries (MQs) help solve this problem by extending the @media types with a new query syntax to enable true device-independent websites. The MQ I used looks like:

<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 480px)" />

The above MQ targets devices that have a minimum screen width of 480px and shows them, what I call, the desktop version of the recipe entry form. All other devices show the basic/mobile version. You can see this in action by changing the browser size.

css3formRecipe Record – Desktop Version css3form-mobile
Recipe Record – Basic Version

The desktop version has a different layout and a background image. I’m following best practices by targeting mobile devices first via a basic style sheet and only loading the desktop style sheet if the MQ is satisfied. This helps save resources (i.e. bandwidth) for mobile devices because only the required style sheets and images are being prefetched. It’s not required for my simple demo but since MQs can completely alter the look and feel of a site it’s a good habit to get into.

For scenarios that require images that aren’t contained in a style sheet (i.e. switching between hi-res/low-res images) use IE10’s MQ listener, which evaluates the MQ at runtime, to dynamically choose what images to load. You can get more information here.

 

Backgrounds

Layers are a familiar concept in most photo editing software like Photoshop and in some UX stacks like Flash. Think of layers like a stack of transparencies. In CSS3 backgrounds now support layers allowing multiple images to be applied to an element. To create the background for the desktop version I created two layers (one for the repeating pattern and another for the bell pepper) like so:

form
{
    background-image: url('red-bell-pepper.png'), url('bgrepeat.jpg');
    background-position:right bottom, left top;
    background-repeat: no-repeat, round;
    background-size: 250px, auto;
}

The layers are created in reverse so the properties for the repeating pattern are second. I used the new “round” background-repeat value that lets the pattern repeat as space allows but scales the image so no clipping occurs. I also used the new background-size property to scale down the bell pepper.

 

Web Fonts

If you’ve ever wanted to use a custom font on your webpage it’s time to celebrate since all browsers finally support the @font-face rule defined in CSS3. The @font-face rule allows you to define any font you choose, which the browser will download and use. The @font-face rule I used looks like:

@font-face
{
    font-family: 'AlnurFont';
    src: url('MarketingScript-webfont.eot');
    font-weight: normal;
    font-style: normal;
}

The @font-face rule has a few legacy issues so I’d suggest you use http://www.fontsquirrel.com/fontface to generate the correct font formats and CSS for cross browser support. Since I’m targeting IE10 I used the supported .eot format.

 

Text

Some nice text effects can be created in CSS3 by using the new text-shadow property, which also supports multiple layers. I haven’t done it justice in my sample but here is the simple glow effect I used on the header:

h1
{
    text-shadow: 3px 3px 4px #fff;
}
shadowbefore
Before
shadowafter
After

The text-shadow supports x,y and blur – the latter causes the glow effect.

Note: There’s also a text-outline property that isn’t supported yet that’ll make stroking text a breeze.

There are also a handful of new text properties, which are valuable additions to the spec, that didn’t make sense in my sample. For example, text-overflow to define how text is clipped and word-wrap to define if lines or words are wrapped.

 

Layout

One of my favorite additions to CSS3 are the layout properties that make defining columns using DIVs or tables a thing of the past. However, there seems to be a catch. The new column properties (i.e. column-count, column-width, column-fill, etc.) seem to be designed for blocks of text and not for page layout. Since I didn’t have a large block of text in my sample I decided to play with them for layout. It worked for my simple scenario but I have a feeling it’d be a lot more complicated for anything complex. Nevertheless, by using a few properties I was able to achieve the three column layout I wanted using:

section
{
    column-count:3;
    height:350px;
    column-gap:10px;
}

Note: I think I hear -ms-grid calling…

 

Borders & Box Effects

To finish off my sample I added some rounded corners that finally made it into CSS3! It only takes one property to change square edges to smooth rounded edges.

input, textarea
{
    border-radius:7px 7px;
    box-shadow: 4px 4px 3px #000;
}

I also used the box-shadow to give the elements a drop shadow. The syntax is equivalent to text-shadow.

 

Next Steps…

That’s my step by step walkthrough of some of the new CSS3 properties. If you want to learn more about CSS3 I highly recommend The Book of CSS3 or the spec.

Both comments and pings are currently closed.

Comments are closed.