March 2010 Meeting Report: Background Images and CSS3

At the March meeting, we followed up on our topic from February, showing how to clickable image using CSS and not putting the image into the HTML. We then took a second image and used it as the hover background image.

We spent the second half of the meeting looking at some of the new features that will be part of CSS3. The sites we looked at are listed here:

• Basic CSS3 Techniques That You Should Know


• CSS3 Techniques You Should Know


• Dabbling in CSS3: Drop Shadow

Also take a look at this site: CSS3 Generator

March 2010 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, March 20, at the usual 9 - 10 am hour.

We have two things I hope to cover this month. One is to look at background images using the example from last month and expanding on it, including using different images for link and rollover. That last topic will lead toward a discussion of the CSS sprite.

But we might not get to sprites because I also want to look at some examples of CSS3 properties because browsers are starting to incorporate CSS 3, even though it is not yet adopted as a standard.

February 2010 Meeting Report: Clickable Background Images

At recent meetings, we have looked at styling links and positioning elements with CSS. This month, we took those styles and added background images to create a clickable image that was entirely styled with CSS.

The technique was based on the article Clickable Background Images Via CSS. We started by reviewing the HTML technique for making an image clickable, and we talked about the deficiencies of that approach. Then, we showed how CSS background, position, display, height, and width could be brought together to achieve the same result while keeping all presentational elements in the style sheet.

February 2010 Meeting Announcement

The next meeting of the PACS CSS Workshop will be this Saturday, February 20, at the usual 9 - 10 am hour.

We have been working on navigation menus, starting with styling links, and then going to positioning. This month, we will tie up some loose ends from last month. Then we will put the elements together to make a link with a graphic background, using as an example something I recently did for a site.

Finally, if we have time, we will look at some interesting new properties that are coming with CSS3.

January 2010 Meeting Report: Using Position for Page Layout

We started out January meeting with a look at some statistics from some local government webmasters showing the browsers used to access their sites. Over the last year, generally Firefox has increased in use, IE6 is still a major player, and Chrome has made progress.

We then looked at an article on The Case Against Vertical Navigation from Smashing Magazine. The article was nicely related to the topic that we are covering in this year's meetings.

We then moved on to the tutorial on positioning that we have been working on, Learn CSS Positioning in Ten Steps. We finished that tutorial, and next month will move on to positioning background images.