Why I love CSS

Amanda Anderson • 24 Jan 2011

love coding

Ever since I was introduced to CSS to create my websites about 6 years ago, I have loved it. I love being able to make items on your website go wherever you want to put them, and the challenge of getting a page to look exactly like it did in your design. I would spend all day coding CSS if I could get away with it.

I remember when I did my first websites, before I was introduced to CSS and PHP, mostly they were dummy websites for class projects, but I was so proud of them. And when I look back at them today, all I think is 'Boy did I have a lot to learn' They were so ugly!

Discovery of PHP made making changes to sites a lot easier - set up a file for your menu and include it in every page. That way, when you wanted to add an extra page in, you only had to make changes in one place. Then to go on and discover how to make the most out of CSS was awesome. No more clogged up code - all that styling info was pulled out of my files and put into 1 place which updated the entire website.

And even today I'm still learning more CSS. Version 3 has been around for a while now, but I haven't had to use it yet - most of my design work can be put together with images and the CSS that I already knew.

But today I was putting together a site that had faded out menu buttons when they were highlighted. In the 'days of old' I would have created 2 images for each button - one for normal state, one for the hover. I was thinking to myself, there must be a better way to do this because I now do sites that are CMS based and the menus are automatically generated, which makes lining the images up with the right menu item complicated because the client can change the names of them at any time.

So I started looking up CSS image map menus, which didn't get me very far and weren't really the answer I was looking for. With a little further searching, I found a tutorial about using opacity's, so I continued looking to see how compatible it is across browsers - I use Firefox and Crome mainly, but need to check in IE even if I can't stand it because so many other people use it.

The two lines of code that I used were so simple, the first makes the opacity work in Firefox, Crome etc and the second line is for IE:

opacity:0.7;
filter:alpha(opacity=70)

I added these into the menu hover and menu selected states, and here is the results:

CSS Opacity Example

Main Menu with about page selelcted

CSS Opacity Hover Example

Main Menu - hovering over Home page

So quick and simple, and it even works in IE! I'll post a link to the actual site when it's up on the server.

Tags: ,


Post your comment

Comments

No one has commented on this page yet.

RSS feed for comments on this page | RSS feed for all comments