Lee Munroe » css

A better way to deal with Internet Explorer conditional styles

Lee — Mon, 30 May 2011 09:01:03 +0000

For a few years now I’ve been using one or two conditional stylesheets to help with cross browser support, or in other words ‘to help fix Internet Explorer’. But recently I’ve been trying out Paul Irish’s technique.

HTML5 Boilerplate

If you haven’t already go over to HTML5 Boilerplate and take a look at the notes. In particular look through the code for each file.

HTML5 Boilerplate is a bare bones framework for any web project, with all the best practice resets, styles, htaccess settings etc. in place.

I’ve been using bits and pieces of the HTML5 boilerplate for a while now and one of the things I like in particular is how it deals with conditional styles for Internet Explorer.

IE conditional stylesheets

Most of the sites I work on usually include something like this:

This was to fix anything that looked out of place in IE6, usually fixes for pngs, floats, widths, positioning etc.

In some cases the site might have 2 or 3 of these conditional stylesheets for IE7 and IE8 fixes also.

Adding conditional classes to the html tag

Recently I’ve started using something like this instead:

This adds classes to the HTML tag in the different versions of IE, enabling you to target them with different CSS rules.

If the user isn’t using Internet Explorer then it only recognises the html lang=”en-GB” tag.

So you can do stuff like this in your core stylesheet:

fieldset legend{background-color:#f6f6f6;}
.ie6 fieldset{position:relative;}
.ie6 fieldset legend{position: absolute;top: -.5em;left: .2em;}

This works better for a couple of reasons:

Less HTTP requests (calling 1 stylesheet rather than 2 or 3)
It keeps your CSS rule in one place

What do you think, nice technique?

Redesigning WebDesignire – a showcase of Irish web design

Lee — Sat, 14 May 2011 17:13:50 +0000

I just relaunched WebDesignire. WebDesignire is a website showcasing “beautiful web design from Ireland and Northern Ireland”. It’s a side project that I initially launched in 2009 but due to lack of time I haven’t been able to update it in quite some time. The new site is built with Ruby on Rails, and much of the original functionality has been stripped to keep it simple.

Why it needed re-designed and re-developed

The old site

The original site was built using WordPress. WordPress is a fantastic framework but it was far too bloated for a project like this. 99% of the WordPress functionality wasn’t needed.

Maintenance and keeping the site updated was also an issue. For every website that was submitted I would have to do several tasks including taking screenshots, saving screenshots, uploading screenshots etc.

Lots to do there, hence the reason I had no time to update it.

The new site

Using Rails I was able to develop a minimal web app that only included the functionality that it actually needed – submitting and approving websites.

Using the very cool Bluga.net webthumb API, the web app is able to automatically take, resize and save screenshots of the websites.

Approving and publishing a site now literally takes one click.

Experimental for me

As with any side project I was able to experiment and learn a few new things.

For this project I was able to try out:

Am loving the combination of Sass and Compass for writing CSS. Will follow up with a more detailed post on this soon.

How useful are ‘CSS galleries’?

Galleries like this have to be taken with a pinch of salt. Of course they don’t represent all the great sites that are out there and they certainly don’t take into account user experience or what’s below the surface of the iceberg. It’s a visual snapshot of a bunch of websites that form a good first impression.

Love ‘em or hate ‘em I still think it’s interesting and useful to see who’s delivering quality websites locally.

Do you know any cracking Irish websites?

Submit them to WebDesignire. Even better if it’s not one of your own sites ;-)

Looking for clean, well structured websites with a good mix of type, colour, shape, texture and whitespace etc. HTML5 and CSS3 use is a bonus.

Start Experimenting With CSS3 Keyframe Animations

Lee — Wed, 28 Jul 2010 10:01:40 +0000

You can now produce stunning animations with CSS3. Did you know that? Of course you did.

CSS3 animations are the new kid on the block. It’s a big step. Although they haven’t really taken centre stage yet as only the webkit browsers support them.

For this reason they’re used sparingly, in a lot of cases for experimental purposes or as ‘hidden gems’, but that doesn’t mean you should shy away from getting stuck in.

It was only recently I experimented myself so I thought I’d share a beginner’s demo with you.

How to do CSS3 keyframe animations

Keyframe animations involve you setting the object state (or property) at different stages of an animation.

Setup the environment

Let’s setup a little demo. I’m going to start with two basic boxes.

Now apply some basic styling so we can see them.

.box1{
width:200px;
height:200px;
background:rgba(255,0,0,0.5);
position:absolute;
top:100px;
left:50%;
margin-left:-100px;
}

.box2{
width:200px;
height:200px;
background:rgba(0,0,255,0.5);
position:absolute;
top:100px;
left:90%;
margin-left:-100px;
}

And you’ve got yourself two boxes.

View demo.

Setup the animation affect

Setup the animation affect and call it ‘movingbox’.

@-webkit-keyframes movingbox{
0%{left:90%;}
50%{left:10%;}
100%{left:90%;}
}

movingbox is the name we’re giving the animation. It’s up to you what you want to call it.

The keyframes we’ve setup for this animation are at 0% (start), 50% (halfway through) and 100% (end). The properties we’ve set at these keyframes are different positions. You can set any properties you like here.

So far we still have two static boxes.

View demo.

Apply the keyframe animation

Our last step applies the magic to the object of our choosing. We’re going to apply it to ‘box2′.

.box2{
-webkit-animation:movingbox 5s infinite;
}

movingbox calls the animation we want to use, which we have already defined.

5s states we want the animation movement to last 5 seconds.

infinite means the animation will keep going and going.

We now have a CSS3 animation – box2 should be moving from right to left and back again. (Note: remember this only works in Safari and Chrome).

View demo.

More CSS3 animation properties

This is a very simple example I have used here, and is just to help beginners get started.

For the -webkit-animation property, there are a number of other values you can try:

-webkit-animation-name: [any name you like];
-webkit-animation-iteration-count: [number, infinite];
-webkit-animation-timing-function: [linear, ease,ease-in, ease-out];
-webkit-animation-duration: [time];
-webkit-animation-delay: [time];

For the @-webkit-keyframes rule, instead of using percentage as keyframes, we can also declare a from and to state. You can also make it transform while animating.

@-webkit-keyframes movingbox{
from{left:90%;-webkit-transform: rotate(0deg);}
to{left:10%;-webkit-transform: rotate(360deg);}
}

View demo.

CSS3 animations in action

See if you can spot the @keyframe animations on these sites (note: you’ll need to use a webkit browser like Safari or Chrome to see the animations in action).

Our Solar System

Our Solar System using pure CSS3 for planets and orbits.

Future Of Web Design

404 pages are always a nice place to experiment with stuff that only us geeks will get.

Hard Boiled Web Design

If the teaser site is anything to go by this book from Andy Clarke should be a good CSS3 reference.

Massive Blue

Sam Brown’s portfolio animation is subtle but beautifully executed.

Ecliptic

This was my experiment, a hidden ‘Easter egg’ on the Ecliptic website.

Conclusion

In regards to usefulness, the CSS3 animations above aren’t that. But they do let you, the designer, experiment with the latest techniques available.

Make a point of working a CSS3 animation into your next project just so you can get a feel for how they work. Then in the near future, when more browsers adopt them, you’ll be able to make some really attractive user interfaces without a gif or Javascript effect in sight.

Have you experimented with CSS3 animations yet?

How To Setup A Reusable Framework For Your Next Website

Lee — Wed, 03 Mar 2010 10:01:05 +0000

You’ve done your research, sketched out the wireframes, designed a stunning mockup and now its time to markup. Where do you start?

Having your own reusable framework is a great way to save time and provide a basis for your next website.

Your own reusable framework is by no means perfect for every project that you work on but it is a great starting point and it can evolve over time.

This post looks at the current framework I have in place and breaks it down. Please feel free to reuse this as you see fit and also point out anything that you feel would be beneficial to add (or remove).

Framework structure

All files are kept in a folder simply named ‘NewSite‘ which contains the following:

ie.css
A stylesheet specific for IE6 (or sometimes 7) that at the end of a project will usually contain various CSS bug fixes and PNG transparency fixes.

images/ directory
For storing all images for the website.

index.html
The main template for the website. Depending on CMS or programming language I use this will be chopped up at some stage.

print.css
A stylesheet used when printing a document.

scripts/ directory
For placing all the project’s Javascript files.

script.js
A default script for placing most of the project’s Javascript code, stored in the scripts directory.

style.css
The main stylesheet.

Now lets look at what each file contains.

index.html

This is the main template for any website and the starting point for marking up.




	
	
	
	
	
	
	
	
	
	
	

	
	
	




Skip to content


	
	
		
		
		
		
	



	
	
	
	
	
	
	



Copyright ©

Notes about the markup used:

The doctype is HTML 5
There is a ‘skip to content‘ link for screen readers (the style sheet will hide this)
Uses a conditional statement to load ie.css for Internet Explorer browsers below version 7
JQuery library is included using Google’s CDN (but is commented out until it is needed)
The bare bones of the markup has been added

styles.css

Now lets look at the default stylesheet I’m using.

/*
Author: Lee Munroe
*/


/* 
# CSS contents ###################
* 1 Reset defaults
* 2 Layout
* 3 Nav
* 4 Headings
* 5 Lists
* 6 Images
* 7 Links
* 8 Forms
* 9 Tables
* 10 Typography 
* 11 Other
*/


/* 
# Colour reference ###################


*/
 
/*
# Reset defaults ################### 
*/

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; } 
a:link, a:visited{text-decoration:none;outline:none;}
html {overflow: -moz-scrollbars-vertical;}
#skipto{position:absolute;left:-9999px;top:-9999px;}
.group:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

/*
# Layout ################### 
*/

body{font:75%/1.5  "Helvetica Neue", Helvetica, Arial, sans-serif;color:#222;background:#fff;}

/*
# Nav ################### 
*/



/*
# Headings ################### 
*/

h1{}

h2{}

h3{}

h4{}

#logo{width:;height:;background:url(images/logo.gif) no-repeat;}
#logo a{display:block;height:100%;width:100%;}
#logo a span{position:absolute;left:-9999px;top:-9999px;}

/*
# Lists ################### 
*/



/*
# Images ################### 
*/

img{border:none;}
img.left{margin:0 10px 10px 0;}
img.right{margin:0 0 10px 10px;}

/*
# Links ################### 
*/

a{}
a:hover{}

/*
# Forms ################### 
*/



/*
# Tables ################### 
*/



/*
# Typography ################### 
*/

p{margin:0 0 1.5em;}

/*
# Other ################### 
*/

.right{float:right;}
.left{float:left;}
.clear{clear:both;}
.alignleft{text-align: left;}
.alignright{text-align: right;}
.aligncenter{text-align: center;}

Notes for the stylesheet:

Author name at the top. I’ll also include the project name and date here. This is mainly for the records of anyone the site is handed over to.
Using comments to break down the stylesheet into sections making it easier to scan down and find styles. Larger projects may have a different structure.
A general reset for margins and padding. There are lots of more advanced resets out there but I find this basic one works well. Read about CSS reset here
.group:after – the group class is applied to any element that needs cleared right after. Usually where there are 2 or more floats side by side.

ie.css

.group {zoom: 1;}

Notes:

As it stands, only contains a fix for the .group class

print.css

#header, #footer{display:none;}

Notes:

Removes the header and the footer when printing. The final file will need tinkering with though.

script.js

/*
$(document).ready(function() {
	
});
*/

Notes:

The document ready function is for JQuery Javascript functions that you want to run when your page loads. This is commented out until needed.

Conclusion

Download framework as zip file

Please feel free to use these templates in your own projects.

Again, this is just a framework I’ve put together over time. I recommend you adapt it to suit your own environment.

What does your framework look like? Anything useful I’ve missed?

Book Review: Handcrafted CSS

Lee — Tue, 02 Feb 2010 09:02:19 +0000

Handcrafted CSS is by one of the web design industries’ most established authors, Dan Cederholm. He is the man behind Bulletproof Web Design, Web Standards Solutions, Simple Bits and most recently Dribbble.

Dan is well known for his clean markup, embracing advanced CSS and his love of ampersands so I was really looking forward to this book.

Handcrafted CSS is for the CSS designer who wants to go the extra mile.

Who is it for?

This book would be more for intermediate/advanced designers, which is great as there are so many ‘beginner’ books out there it was nice to read a book that just got stuck in.

It’s for designers who care about the little things – the clean markup, the grid, the 1 pixels and the ampersands.

What’s in it?

Simple tricks for dealing with everyday CSS obstacles
Bulletproof CSS3 techniques
The fluid grid
Floats (and clearing them)
Frameworks (and crafting your own)
Small details that can make a great design
Stuff about ampersands

Verdict

I really enjoyed this book. I was able to learn from it, advance current techniques and be inspired by it.

It’s easy to relate to everything outlined in the book. Some things were a reminder while others I had never thought of before. Truly inspired to go away and start crafting something special.

Not only is the content good, even how the book is laid out is gorgeous with well spaced pages, nice formatting and an embossed front cover.

Highly recommended.

Pull quotes

…the larger the target, the quicker and easier it is to get there.

but the important thing to remember here is that this method degrades beautifully…The design is intact. It’s functional and readable.

…the rounded corners in Mozilla- and WebKit- based browsers are visual rewards rather than necessary requirements.

The problem with the fixed-width approach to interface design is that it’s asking the user to adapt to the design rather than the reverse.

How To Design A Sexy Button Using CSS

Lee — Tue, 26 Jan 2010 09:02:24 +0000

Last week I launched a holding page for Ecliptic Labs, an iPhone development company based in Belfast (keep an eye on them, there’s going to be some great stuff from them this year).

Here is the holding page in all it’s glory.

One thing you’ll notice is the big ‘Notify me’ button. One of the great things about this button is that it isn’t a graphic. It’s simply styled using CSS.

Advantages of using CSS instead of a graphic:

Optimisation – less file size, less http requests
Reusable – button can be used over and over again for different actions
Flexible – the button can stretch or compact depending on length of the text

Styling the button element

I’m going to be using Firefox 3.6 for the previews below.

The markup

This is how the default button looks.

Basic styling

First apply some basic styling to get started.

button{
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
padding:14px;
}

Nothing strange or startling about these styles. This is what we have now.

Background

Let’s add a background. Remember, we want to make the button reusable for any colour.

Go into Photoshop and create a new image 10px x 100px
Create a white rectangular shape that covers the top half of the canvas on a new layer
Give that layer 30% opacity and make the background transparent
Save that image as overlay.png

Decide what background colour you want to use and apply it to the button along with the overlay you just made.

background:url(overlay.png) repeat-x center #ffcc00;

This gives us a nice yellow background with a glossy overlay.

Border

Now get rid of that horrible outset border. Let’s give it a fine border that matches the background colour.

border:1px solid #ffcc00;

Rounded corners

Make your button a bit friendlier by giving it rounded corners. This is where Webkit and Mozilla browser users will take advantage, while IE browsers will be stuck with sharp corners.

-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;

Starting to look good eh? But a good designer likes to pay attention to detail.

Pixel perfection

Now finish off the button with some pixel perfect embossing. We’re going to give it a 1 pixel border and a 1 pixel inset shadow.

border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);

Notice how we’re using RGBA colours here. This allows us to apply alpha opacity to the colour. In this case, we’re giving white a 50% opacity.

Make it clickable

We know it’s a button and that it can be clicked but users might not. Change the cursor to a pointer so users know they can click it.

cursor:pointer;

Hover state

We now have a pretty sexy looking button. But what about a hover state?

To save us from thinking about a colour for the hover state, we can use the RGBA approach. Let’s revisit the background style. Add this after your background declaration.

background-color:rgba(255,204,0,1);

Nothing changes. All we did was change it to the same colour but using RGBA.

But how for the button’s hover state, give it the same background colour but alter the opacity slightly.

button:hover{background-color:rgba(255,204,0,0.8);}

This gives us a slightly different shade of background on hover, giving the user some feedback so they know they’ve hovered over a clickable button.

Put it all together

The final code.

button{
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
padding:14px;
background:url(images/splash/button.png) repeat-x center #ffcc00;background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
}

button:hover{background-color:rgba(255,204,0,0.8);}

button:active{position:relative;top:2px;}

I’ve slipped in an active state as well for the button so the user knows when they’ve clicked it.

This is how it looks in Firefox:

And this is an active preview.

Remember the button is reusable so if you apply a class to the button, e.g. class=”save”, you can apply a different colour to this button.

button.save{
background-color:#a7dd32;background-color:rgba(167,221,50,1);
border-color:#a7dd32;
}

button.save:hover{
background-color:rgba(167,221,50,0.8);
}

And you’d get something like this.

But what about Internet Explorer?

Yes, unfortunately IE users won’t get the full benefits of the sexy button. However, it doesn’t look that bad and to IE users it will seem like there is nothing wrong.

And IE6? It doesn’t support PNG transparency so you can remove the overlay background image with an IE6 conditional stylesheet.

Then in ie.css:

button{background-image:none !important;}

And there you have it. A beautifully designed button using (pretty much) only CSS.

Internet Explorer Users Don’t Care About Rounded Corners

Lee — Mon, 19 Oct 2009 14:30:39 +0000

Internet Explorer users don’t care about rounded corners. Bold statement? Perhaps. But recently I’ve taken this approach to a few designs as I’m tired of having to use some sort of rounded corner hack to support IE. It’s a lot easier to just use the CSS 3 declaration.

If you’re up-to-date with your CSS knowledge, you’ll know that CSS 3 has introduced rounded corners, among other ‘goodies’. The problem is though that IE doesn’t support CSS 3 yet but Firefox, Safari and Chrome do.

Some CSS 3 techniques I’ve been using on Sharethrough and Lookaly:

CSS 3 rounded corners

div{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

CSS 3 text shadow

div{
text-shadow: -1px -1px 3px rgba(0,0,0,0.25);
}

CSS 3 box shadow

img{
-webkit-box-shadow:0 0 5px 5px rgba(34,34,34,0.3);
-moz-box-shadow:0 0 5px 5px rgba(34,34,34,0.3);
}

But how do you deal with clients?

This is where it gets tricky. If you show a client a mockup with rounded corners and the final solution doesn’t have these (because they use IE) they’ll probably not be too happy.

If you’re working with computer savvy clients, who use Safari or Firefox, they should understand. If you’re working on your own personal or side project, happy days. If not, you can try Andy Clarke’s approach of designing in the browser. Time to stop showing clients static design visuals is a very good article about skipping the static mockup stage.

Conclusion

The point I’m trying to make here is that as long as it looks OK in all browsers, we can afford to take liberties when it comes to making it look nicer for those who use Firefox and Safari. Most designers use Firefox or Safari and they’ll appreciate the rounded corners more. IE users *probably* don’t care.

What do you think? Have you started using CSS 3 in your designs? Do you think IE users should get to see the rounded corners too? Share your thoughts below.

Book Review: HTML and CSS Web Standards Solutions: A Web Standardistas’ Approach

Lee — Mon, 28 Sep 2009 11:27:15 +0000

Every so often I will receive an email that asks the following:

How can I learn how to build websites?

There are two approaches you can take to learning how to build websites.

Learn how to build websites
Learn how to build websites the right way, aka the Web Standardistas’ way

I built my first website over 10 years ago but it wasn’t until final year of my University degree course Interactive Multimedia Design (IMD) that I discovered how to build sites properly using well structured HTML and CSS. Before this I was using tables, unstructured markup and invalid HTML. Who do I have to thank for this? Chris Murphy and Nicklas Persson, two lecturers on the IMD course.

Now you don’t have to take a University course to be taught by these two world renowned mentors. They have branded themselves as the Standardistas and have put all their years of wisdom and knowledge on paper in the form of HTML and CSS Web Standards Solutions: A Web Standardistas’ Approach.

This book will teach you how to build websites from scratch. Starting with the basics of semantic markup and how web pages work moving onto styling your first web page with CSS. It’s a one stop shop for putting together your first web site.

Who is it for?

People who want to learn how to build websites
Developers who need to brush up their front end markup skills
Designers who are using outdated techniques e.g. tables, to build websites
Professionals who want to earn the badge of a Web Standardista

Benefits of the Web Standardistas’ approach

Separates content and presentation (easier to update layouts)
Reduced markup (reducing page download times)
Increased accessibility (for screen readers and other platforms)
Cross browser compatibility
Forward compatibility

Web Design Trends: Designing Out Of The Box

Lee — Tue, 07 Apr 2009 09:00:49 +0000

This is a creative trend catching on. It’s very simple to do but adds an extra element of character and uniqueness to a design.

Take a look at how to implement this ‘out of the box’ technique and a list of creative websites that are using it.

Setup

First setup your page and graphic. I’m using this graphic.

The HTML for my page is like so:

And the CSS looks like this:

body{
background:#999999;
}

#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
}

Here’s a preview of what we have so far:

Positioning is relative

When we position the logo we want the positioning to be relative to the container, therefore make the position relative:

#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
position:relative;
}

Position it outside the box

Now all you have to do is position your logo. Place it horizontally so the tag sticks out of the container.

#logo{
position:absolute;
left:-15px;
}

Now we have our logo sitting outside the box. Easy!

15 creative designs using the ‘out of the box’ technique

Change in Command

Icon Designer

Yoast

Twiistup

The Design Superhero

Eric Ryan Anderson

Rock Werchter

Freelance Suite

Hipsterist

CreamScoop

Bright Kite

From The Couch

DesignM.ag

Matt Mullenweg

Feel free to share your thoughts on this and other emerging trends.

5 Quick and Easy Ways to Optimise Your Website

Lee — Mon, 16 Mar 2009 09:00:30 +0000

Performance is something you don’t often think about. You assume that if it loads quickly enough for you then everyone’s happy. Someone commented a while back saying that it takes quite long for my pages to load so I optimised it a tad and thought I’d share a few quick tips with you.

1. Use CSS sprites

Rather than having multiple CSS background images for your page, you can use CSS sprites to combine multiple images into one graphic. This reduces overall filesize and the amount of HTTP requests.

Once you do this you can use CSS to control the background images.

#services ol li{
background:url(images/homeicons.gif) no-repeat;
}

#services ol li.design{
background-position:0px -460px;
}

And as you can see the size and http requests are reduced considerably.

2. Use an external CDN

A CDN is a content delivery network and it basically means use scripts that are hosted on other sites. Why? Because users might not have to download the script when they visit your site as it’s already cached.

Google has an AJAX Libraries API that you can use.

3. Install YSlow

YSlow is a very useful optimisation tool for Firefox. YSlow will report on any page you load up and will give you information about the amount of HTTP requests, CDNs used, CSS and JS compression and will give you a grade for each and tell you how to improve the page so it loads quicker.

First you need to install Firebug. YSlow runs alongside this add-on.
Now install YSlow.
Watch this screencast on how to use YSlow

4. Put JavaScript at the bottom

Put any JS requests that you can at the bottom of your code, allowing your content to load first. This includes any Twitter or Analytics requests. This way your site content can load before trying to load external JS files.

5. Optimise graphics for web

Save your images for the web in Photoshop and you can alter the image quality, reducing the file size considerably. Of course I’d like to think you were doing this already ;-)

In Photoshop, File > Save for web & devices

More tips

Cache your pages – WordPress cache plugin
Make sure all your Javascript and CSS is external (not inline)
Compress your CSS
Compress your Javascript

How else can you optimise your website?

Lee Munroe » css

A better way to deal with Internet Explorer conditional styles

HTML5 Boilerplate

IE conditional stylesheets

Adding conditional classes to the html tag

Further reading

Redesigning WebDesignire – a showcase of Irish web design

Why it needed re-designed and re-developed

The old site

The new site

Experimental for me

How useful are ‘CSS galleries’?

Do you know any cracking Irish websites?

Start Experimenting With CSS3 Keyframe Animations

How to do CSS3 keyframe animations

Setup the environment

Setup the animation affect

Apply the keyframe animation

More CSS3 animation properties

CSS3 animations in action

Conclusion

Further reading

How To Setup A Reusable Framework For Your Next Website

Framework structure

index.html

styles.css

ie.css

print.css

script.js

Conclusion

Further reading

Book Review: Handcrafted CSS

Who is it for?

What’s in it?

Verdict

Pull quotes

How To Design A Sexy Button Using CSS

Styling the button element

The markup

Basic styling

Background

Border

Rounded corners

Pixel perfection

Make it clickable

Hover state

Put it all together

But what about Internet Explorer?

Further reading

Internet Explorer Users Don’t Care About Rounded Corners

CSS 3 rounded corners

CSS 3 text shadow

CSS 3 box shadow

But how do you deal with clients?

Conclusion

Book Review: HTML and CSS Web Standards Solutions: A Web Standardistas’ Approach

Who is it for?

Benefits of the Web Standardistas’ approach

Recommended

Web Design Trends: Designing Out Of The Box

Setup

Positioning is relative

Position it outside the box

15 creative designs using the ‘out of the box’ technique

5 Quick and Easy Ways to Optimise Your Website

1. Use CSS sprites

2. Use an external CDN

3. Install YSlow

4. Put JavaScript at the bottom

5. Optimise graphics for web

More tips