CSSgirl Designs

How do you code?

Lindsey — Mon, 23 Feb 2009 18:28:20 +0000

When you work on a new web design project and have entered the stage for coding, how do you go about it?

Do you start with the HTML and write the whole HTML page first, then code your CSS then troubleshoot?
Do you write all of your CSS first, then the HTML markup, then troubleshoot?
Or, do you write chunks of HTML first, add in the styles, troubleshoot/test, repeat?

Personally, I have done it just about all three ways - but my most often used method is the 3rd. I start from the top and work down to the bottom from left to right. I will start and code the entire header of a site in HTML first - then write my styles. Check in firefox, and repeat. Then, after the whole page is completed I check in all browsers to trouble shoot compatability issues - which are usually minimal and related to IE6 only - go figure!

So, how about you?

Note: There is a poll embedded within this post, please visit the site to participate in this post's poll.

Notice - Possible downtime 2/15

Lindsey — Sat, 14 Feb 2009 20:58:08 +0000

Tomorrow I’m going to be porting CSSgirl over to my new host (Media Temple) and CSSgirl may experience periodic downtime. Or it may not :P

Also, tomorrow the new CSSgirl theme will go LIVE along with a brand new article! Thanks for the patience!

Many, Many Apologies

Lindsey — Mon, 09 Feb 2009 02:07:17 +0000

I have to apologize for basically falling off the face of the earth!

A lot of you aren’t familiar with me personally, and because of this I understand why people became annoyed when I stopped publishing articles as frequently.

I love to blog, and I love web design and development, but sometimes this little thing called life pulls me away from the “blogosphere” ;) For those not familiar - I have three small children - 7 & under. I also have a full time job as web developer and I freelance - after all of that I have only a few moments to spare for CSSgirl.

But thankfully, I’ve sorted out my time spectacularly now, and I have seven great new articles in the works to be published in the upcoming week (or two). I also have my new theme almost ready to go live AND I’m moving CSSgirl from my old webhost (Micfo) to my new host (Media Temple).

I have a lot of work ahead of me in the coming weeks, and I hope everyone will bear with me as CSSgirl has hit some growing pains.

To satisfy your web dev and design cravings I strongly suggest you take a gander at CSS Tricks, CSS Globe and Noupe.

Also - the three themes that were not chosen from September’s vote will be available for download and use within the next 30 days!

And the winner is…

Lindsey — Fri, 19 Sep 2008 12:14:28 +0000

Dark Rainbow!

I want to thank each and every person who voted. It was very close at the end and Dark Rainbow beat out Whiteboard by just one vote!

Now, what happens next?

Well, I have taken all of the comments and suggestions you guys left in the comments and have been working on making Dark Rainbow easily work for everyone. Some noted that the light gray text on black background wasn’t enough contrast, so I’ve upped the contrast for better readability. I’ve made other minor design changes (organization of content), and will be launching CSSgirl on Dark Rainbow within the next two weeks!

What about the other themes?

Well, here’s the best news for those who voted for one of the three other themes: I’m converting each one of these to generic Wordpress themes for free use! Those themes will be ready within the next month and I’ll make an announcement of where you can demo and download them.

Once again I appreciate all the votes and comments. :)

VOTE: I Want Your Opinions

Lindsey — Thu, 21 Aug 2008 18:41:27 +0000

In the beginning of 2006 I launched CSSgirl. I moved all the content from my old site (triplelproductions.com) and started CSSgirl Designs with a brand new design. Over time I’ve changed the design a bit, adding and removing sections, images and content.

Since last summer I’ve been planning a redesign, but I just can’t settle on one that I am happy with. So, I would like to have some feedback from the people who visit my site- who see it regularly!

I have four designs that I’ve created that I am deciding between. View them and let me know your opinions - good or bad! Two have already been coded, two are just image mockups:

1. Watermelon:

(HTML Mockup)

2. Super Serious Dark:

(Graphical Mockup)

3. Dark Rainbow:

(HTML Mockup - semi- complete)

4. Whiteboard:

(Graphical Mockup)

Vote for your favorite:

(PS: If you vote for “something else entirely”, let me know WHY. otherwise I’m going to remove that choice because I won’t know which direction people are looking for! Your comments won’t hurt my feelings, I promise!)
Note: There is a poll embedded within this post, please visit the site to participate in this post's poll.

Voting ends September 1st, 2008.

The three designs I do not choose will be converted into free Wordpress themes (and Movable Type too, if I find the time!) :)

Please leave comments with suggestions, criticisms, etc!

My Love Affair With Woopra

Lindsey — Tue, 19 Aug 2008 02:23:40 +0000

I love looking at the analytics for my site. I love seeing what articles are most popular, what people land on the most, where they come from and where they leave.

A few months ago I learned about Woopra - a free tracking/analytics program that has a beautiful gui and some pretty freakin’ cool features.

What is Woopra exactly? From their site (bolds are from me):

Woopra is the world’s most comprehensive, information rich, easy to use, real-time Web tracking and analysis application. And it’s free!

When you sign up for a free Woopra account you give them the urls you would like to install/use Woopra on. In turn (after your site is approved) you are provided with a little javascript code to place on your site so that Woopra can track your visitors. You will also need to download the Woopra desktop client. From there you can start live tracking all your visitors. Oh, yeah, and they just released a new Wordpress plugin that integrates their analytics right in your WP Admin. Sweet!

Woopra will track every visit and record important information for you - browser, OS, screen resolution, referral, etc. Ok, so not much different than all the other analytic tools out there right? But Woopra offers a really cool live tracking feature which allows you to see exactly who’s on your site at that very moment.

For each person who visits your site Woopra tracks their actions, and than stores them so that you can lookup that person’s history on your site. The live feature also allows you to “start a conversation” with any visitors currently on your site. I haven’t tried that feature yet - I think it’s kinda weird to interrupt someone browsing my site, but I find it interesting and in some situations I can actually see it working as a helpful interactive feature.

A breakdown of Woopra

Click to enlarge

The live feature really is the kicker for me, but the analytics Woopra offers shouldn’t be forgotten either - the top of the application features a line graph representing your pageviews and visits for that day. You can also switch the graph to show visits for that day VS the average visits, today’s pageviews VS the average amount of pageviews or have the numerical value of live visitors show.

The next level shows a component on the left with a breakdown of visits and pageviews for the previous month. You can also toggle this component to show your hourly overview instead. To the right of this component is your content breakdown - listing your pages that are being visited and the total landing, total exits, total pageviews and average time spent on each page.

Below those two components are three more - the first of the three being my favorite - a list of referrers - and the time people landed on your site via those referrals. The list is linked so you can click on these referrers and via your browser be directed to the page your visitor was sent from.

On this component there are three toggles - the first allows you to display a pie-type graph that represents the sources from where your visitors are coming from. Letting your mouse hover over one of these colored area displays the exact percentage of users from that source, the exact amount of links from that source and also highlights the corresponding name of the source in a list to the right.

The second toggle s your “top” sources of traffic (for that day mind you) and how many hits were delivered via that source. The third toggle is what I had mentioned first - the list of all your referrers with a link to where your visitor came from.

The second component is for search information - you can toggle this by keywords - which is displayed in a slick tag cloud-ish format. The second toggle allows you to display the exact search phrases that led visitors to your site (plud which engine they were directed from and the time).

The last component is geared toward visitor information. The first toggle, loyalty, allows you to see how many visitors for that day were “loyal” (returning) and how many were new visitors. Hovering over the pie chart gives you the same breakdown as the sources chart - returning a percentage and exact number of visitors.

The second toggle, countries, provides you with a list of countries and the breakdown of how many visitors were received from each.

The last toggle, map, gives you a visual breakdown of where these users are from - the hottest spots are marked in yellow, others are marked in a light blueish town. Hovering over a country/region will display the countries name, flag and a number of visitors you received from that country.

Woopra’s Live Visitor Analytics

Click to enlarge

And that’s not it. To the left of the components is a menu that allows to get even deeper into your analytics. The first button takes your to the dashboard, which I explained above. The second and my favorite, “Live”, shows you all of your live users and where they are currently on your site. If Woopra recorded a referrer for that site, it’s listed, along with the time of arrival. There is a breakdown of specs (browser, ip location, resolution, OS, country, language and so forth), and then it tracks -live- ever page that the visitor goes through. (It also marks any extrernal links that the user has clicked on).

At the bottom it gives even more details - total visits for that user, total pageviews, the average pageview for each visit, total time spent and average time spent.

Each user is assigned an ID (I assume based on IP), and you can view their history for each time they have visited (how they got there and what they did when they were on your site).

In the live section is where you can start a conversation with any live user on your site. One last option “tag this visitor” allows you to assign a tag to that visitor - so for example you can name yourself - maybe any visitors you know that visit regularly and you have an idea of what their IP is, or other people who work on your site with you.

Aside from the visitor specific goodies, to the left of that is a map - which pinpoints locations on the map of live users. You can also sort these live users by all of the above mentioned characteristics.

One last thing you can do is search for users - and you can search by any query - brower, country, platform, etc.

All the rest…

There are so many great features to Woopra, without making this into a book I’m going to have to lightly go over them. The final menu items are Search (display your search results and allows you to search anything), Analytics (standard analytic goodies - pretty much a more comprehensive breakdown of what you see on your dashboard with more sorting/filtering options) and Manage - which allows you to create notifications for a variety of things (if a certain visitor goes to your site, or if a page is landed on or you receive a referral from a url you define) and has a “custom live map” - which I haven’t messed with so I can’t give an accurate breakdown just yet.

The Scrolling Data

One last cool feature Woopra provides is at the very bottom of the application is a scrolling marquee of all data and where you stand for that day in regards to averages (ex: total pageviews are down, but pageviews per visit is up by 1%).

My love affair will continue

I’ve pretty much forsaken Google Analytics for Woopra - mind you I’m not a hard core stats fanatic. I just like seeing the numbers. Most of the more advanced features of Google Analytics I bypass because I either don’t understand them, or I don’t need them. Woopra is open 24/7 on whatever computer I’m on, but I find myself only checking in about 1-2 times a day now that I’ve gotten over the initial puppy love.

Woopra isn’t perfect by any means - before they released Woopra 1.2 (August 10th) I had found it to be a little buggy - for example I would get disconnected and I would have to end the Woopra process in order to get it to reconnect. That’s been fixed now with the latest release.

So is Woopra right for the hard core stats whore? Maybe - but if you’re looking for an easy way to track your visitors and get a nice visual representation that Woopra will work well for you. Woopra lets you track multiple sites - not sure what the limit is, but I currently am tracking six.

To note: “Woopra is free of charge during the Beta testing phase. Both free and paid plans will be available as soon as Woopra is officially released. Enterprise editions for commercial, high traffic sites, will also be available.”

Update 8/21/08: Opened up my Woopra this morning to find my main site missing (cssgirl.com) and the rest of my sites aren’t tracking at all. :( So sad. I’m not using the Wordpress plugin, which many people have been having problems with apparently. Also, in my member’s area, the API key for my site cssgirl has gone away and only says “null”.

Sent an email via their contact form at 9am. Left two messages (seems to be a widespread problem) on the forum. Will wait and see how this plays out.

I’m going into stats withdrawal.

Update 8/21 #2: CSSgirl is back (along with my other sites- well all but one) and tracking! Happy days.

IE6 PNG Fixes - SuperSleight & Unit PNG Fix

Lindsey — Sat, 09 Aug 2008 21:15:57 +0000

A few weeks ago a new javascript, Unit PNG Fix, was released by Unit Interactive for an IE6 and below PNG support fix. Up until now I have been using SuperSleight with no issues. So I decided to do a little research this morning to find out what made Unit’s Interactive PNG fix better than good old SuperSleight.

At first glance Unit PNG Fix has the benefit of being smaller (1k .js file, 1 transparent .gif). SuperSleight has a total of 3 files (two .js files and (one 3k, the other 2k, and the transparent .gif), but you can choose to use either one of the SuperSleight .js files - so if you prefer to use the mini version of SuperSleight it would just be 2k.

Both are called the same way in the

of the document - a conditional focusing on IE6 and below.

Unit Interactive lists the benefits of it’s script as:

Very compact javascript: Under 1kb!
Fixes some interactivity problems caused by IE’s filter attribute.
Works on img objects and background-image attributes.
Runs automatically. You don’t have to define classes or call functions.
Allows for auto width and auto height elements.
Super simple to deploy.

24 ways introduced SuperSleight as having the following qualities:

Works with both inline and background images, replacing the need for both sleight and bgsleight
Will automatically apply position: relative to links and form fields if they don’t already have position set. (Can be disabled.)
Can be run on the entire document, or just a selected part where you know the PNGs are. This is better for performance.
Detects background images set to no-repeat and sets the scaleMode to crop rather than scale.
Can be re-applied by any other JavaScript in the page – useful if new content has been loaded by an Ajax request.

After creating a few png transparent images and testing both methods here are my pros and cons of each:

SuperSleight
PROS:

No need to edit .js files with image link when both are placed in the same directory (ie: root).
Plug and play - just upload the supersleight-min.js and x.gif to your root directory, plug in the link to the file in an IE conditional and it works.

CONS:

Get IE warning about “blocked content”. Need to click top warning popup to activate supersleight.
Comes packed with two .js files: supersleight.js and supersleight-min.js. Could be confusing to a lay-person as to which file to use, and if both are needed.
Loads slightly slow. On pages with multiple PNGs in IE6 you see a “gray flash” before the PNG fix kicks in.

Unit PNG Fix
PROS:

Smaller size. But only by 1k.
No popup warning that their is active content.
Seems to load multiple images faster than superselight. A page with about 20+ transparent pngs loaded almost instantly without the “gray flash” commonly seen before the js kicks in for IE6.

CONS:

Comes with the path to the clear.gif image linked in the /images folder.

So overall, I have come to the conclusion that it seems Unit Interactive’s Unit PNG Fix is indeed a better alternative to good old SuperSleight. Let’s just keep hoping that user will keep updating their IE6’s until there is virtually no one using IE6.

Typography Essentials - Free Fonts, Tools and Tutorials

Lindsey — Sun, 03 Aug 2008 18:55:13 +0000

Another important aspect in web design (combined with the right color combinations and Photoshop essentials and brushes) is getting just the right typography for your design. There are many, many free fonts available as well as tools to build your own. Not only that but you can use free online resources to determine the name of that elusive font you’ve seen used elsewhere and want to grab it for yourself.

Once you find the font perfect for your project then you have to know how to use it. While some of the best resources about learning more about typography are books (Thinking with Type and The Elements of Typographic Style are two of my favorites) there are tons of online articles and tutorials written by people in the design industry that will help you better your typography.

Identifying a Font

Don’t you hate it when you’re to work on a project where you don’t have access to the original design files, and the client doesn’t know the name of the font in their logo? No worries, these sites will help you find that font!

WhatTheFont - is a search engine that allows you to upload or link to an image and it will bring up results for you of several similar fonts so you can compare and match. For example I linked to the new search engine cuil’s logo. I went through the process of refining the search (adding the characters isolated to each letter in the images) and was presented with a list of 30 possible matches. Part way down I determined that the font was Myriad Pro-Black - as you can see the image you upload scrolls the page with you for easy matching.

Font Lover - is a livejournal community that allows people to discuss various aspects of fonts and typography and it’s highly knowledgable font obsessed following can help you define fonts you’ve seen and find a similiar or the exact font used. Just upload a good quality image of the font you are looking for and they will have at it!

Identifont - this site allows you to answer a series of questions and it will try to narrow your results by process of elimination. I went through the Q & A to see how well it did, using Trebuchet MS as my “answer”. To be “serious” about this test I used a small sample of text (two long sentences) and answered the questions as applied only to that sample. So if it asked about an upper case “J” which wasn’t present- as well as any other unpresent letters - I clicked the “not sure” answer. (In a lot of cases you will have very little character samples to go with). After answering all the questions I was given the font “Alwyn” as the most possible answer. Out of the total of 7 fonts, Trebuchet MS was not present. I’m sure this site may work for others, but from my simple test I didn’t receive very reliable results. (Alwyn and Trebuchet MS are not that similar!)

Free Fonts

Finding the perfect font for your project can be a headache with so many choices available. Thankfully these services allow you to browse by the fonts characteristics aiding your search for the perfect font.

1001 Free Fonts - one of my favorite font sites since day one of my foray into design. They offer free fonts categorized by category (”Brush”, “Western”, “3D”, etc) and you cna browse alphabetically. You can also search for a font by name (should you know it). I’m not sure what their total number of fonts are, but they had “1001″ back in 1998 when they launched, so I’m guessing it may be a bit larger now! The only unfortuante thing is that they are constantly trying to sell you the “Ultimate Font Pack” or commercial fonts for sale.

Dafont - offers categories and subcategories to browse by, latest fonts, top fonts, search and alphabetical listings and brags that they have 8031 fonts (and growing!). You can preview the font by entering you own sample text as well as adjusting the approximate size (tiny, small, medium, large). Also allows comments on the fonts by other users.

SimpletheBest Free Fonts - is another site just like 1001 Free Fonts and dafont, but offers a little twist - the font preview is in color and also includes a very brief description (informative stuff like if the font is only lower case of it it includes international symbolds, etc).

Fontleech - was a blog that updated sporatically from 2005-2007 linking to various free fonts all over the internet of very high qualities. I’d definitely recommend browsing through the archives and finding some new favorites.

40+ Excellent Free Fonts for Professional Design - Smashing Magazine put this list together in 2007 of over 40 great font that you can use for free in your professional work, where I found one of my favorite fonts Anivers*. Smashing Magazine also provides a great series called Free Fonts of the Month, linking you directly to the months best free fonts!

Typography Tutorials and Articles

You found the found you need for your project… now you’ll need some inspiration and direction on how to use it!

I Love Typography - Comprehensive site dedicated to typography. Publishes articles on font finds, history of fonts and typographical styles and so much more. Definitely worth an add to your RSS feed collection.

Super Cool Frilly Bits Typography - Abuzeedo.com provides a fantastic tutorial on how they added frills to match their logo with a grunge like background.

40 Killer Typographic Posters, Photoshop Effects and Tutorials - Typography by example. 40 amazing, beautiful, stunning and “killer” examples for you to learn and drawn inspiration from.

Typography Matters - A List Apart contributor Erin Kissane explains about an often overlooked item of online typography - typographically correct punctuation.

Down With Helvetica: Design Your Own Font - The New York Times has a decent article about how more and more people are turning away from readily available free and commercial fonts and creating their own.

50+ Fonts for Big, Bold Headlines - A great list of FREE fonts available for download that will help you construct that perfect headline that pops out grabbing readers.

Web Style Guide - Everything you will ever need to know about typography on the web.

5 Simple Steps to Better Typography - Mark Boulton provides a series of five articles explaining five very simple things you can do to achieve better typography. This is the first of the series, before the comments is the links to the other four “chapters”.

Better CSS Font Stacks - Nathan of Unit Interactive has written a great article that no CSS coder/designer should miss out on. He explain how we can easily make better “font stacks” (a.k.a - the list of fonts that the browser should display for elements).

8 Fonts You Probably Don’t Use In CSS But Should - Tahoma lover? Century Gothic fan? Here’s your lead-in to start using your favorites in your CSS.

Typography Tools

Can’t find the perfect font? Create your own!

FontStruct - Design and create your very own font family - free!

How To Create Your Own Font(s) - I Love Typography brings you an fantastic article on how you can make your own font and the tools your need to start.

Even More Obscure Photoshop Essentials! The Free Photoshop Brushes Edition

Lindsey — Sun, 27 Jul 2008 16:17:48 +0000

I’m a big fan of small sites that provide free quality content just for the love of creating various items for people to use for their own design purposes. Before I provided a list of thousands of free Photoshop essentials from patterns, to brushes and gradients. Here’s some lesser known sites and designers and their awesome brushes. Quantity may vary with these smaller sites, but the quality is remarkable!

Photoshop Brushes

Studio Brushes - Nikki Jeske has provided a small but decent collection of various photo realistic brushes as well as a sampling of swirly brushes. My favorite? “Paper & Ink“.

Luxa - Luxa is a community of Photoshop users that provides video tutorials, step by step instructions, a small sampling of brushes and a digg-like article voting system. Favorite brush set? “Astral Flora”.

Encre - Encre offers a couple dozen brush sets of all different varieties - from floral, swirls, grunge, scratches, abstract and more. Favorite? Brushes 14 (second on page).

100×100 brushes - 100×100 brushes at Livejournal. I mentioned brush addicts at livejournal.com before as one of my favorite resources, and this is another great one. Tons and tons of brushes to download from very talented artists, most sized to work well with 100×100px dimensions - great for icon design.

Celestial Star - Celestial Star has tons of free brushes ranging from grunge, photo-realistic, illustrations, glitter, and more. Lots to choose from.

Beautiful-Sin - Small selection of some nice grungy - abstracty brushes. Nice sized brush packs, I hope they add some more!

Bedazzling - Bedazzling has several Photoshop brushes in the grunge and icon brush categories. Favorite? “Textured Wind”.

Misprinted Type - Older site, small selection - insanely useful and high quality grunge brushes. Definitely grab brush packs #2 and #4. Unfortunately no previews of brushes before downloading - but have no fears you won’t be disappointed!

deviantART Photoshop Brush Goodies

XxMortanixX - XxMortanixX provides two really random and quirky brush sets via deviant art. Really good stuff for oddball art and designs.

IHEA - Another talented artist who stocks deviantART with their fantastic content, IHEA provides us with plenty of vector-style brushes. I’m digging Vector Linedots Vol II.

SummerAIR - SummerAIR adds to the deviantART Photoshop brush collection with two packs of floral and swirl type brushes.

Trisste Brushes - Phenomenal eyelash and hair brushes, along with a few other packs such as wounds and decay. In the (very quickly thrown together) example above I’ve used the lovely Sarah Michelle Gellar to demonstrate one of the eyelash brushes. :)

InvisibleSnow - offers several random packs of brushes - my favorites being the hand drawn sketches like Urban Scrawl 2 and Sketchbook Scribble Brushes.

Tazni - Tazni has made a bunch of brush packs that come overflowing with brushes galore. Definitely check out the Tech and Grunge packs.

I could got on and on with more deviantART favorites but this sampling should keep you busy for at least a little while :)

How to Use CSS Sprites With Son of Suckerfish Drop Downs

Lindsey — Sun, 22 Jun 2008 21:53:18 +0000

So recently I was working on a project that required image based navigation AND drop down menus. From the get-go I decided to use CSS Sprites for the tabbed menu for the normal, active and hover styles. I also decided the best way to implement the drop down was to use the “Son of Suckerfish” drop down menus heavily modified from the original code to fit in with the original programming I had done for the menu.

I’ve explained before how to use CSS Sprites for changing images, so I won’t go into too many more details on how to accomplish this, but to recreate this for your own site you will need to create one sprite for your normal tab, hovered and current/active tab. That’s three sets of tabs in one file.

This is what your file should look like after you have finished styling it to your liking (click to enlarge):

As you can see, for ease of writing the CSS I have exactly line up each navigation style exactly below the “normal” style. The middle is the “hover” images, with the last being our “current/active” tab styles.

Now, the CSS for the sprites is pretty simple - I’ve made a class for each tab that defines the height, width and background position. Next, I added the hover styles for each class, just changing the background position. Finally, to achieve the “current” styles, I added an id to be applied for when that particular link is “active” (ie: you are on one of the pages).

Click here to see the example of the sprite with dropdowns.

The code is pretty long for the CSS so I’m not going to post it directly into this post, so you can check it out here.

As you can see I renamed the primary id for the suckerfish menu to #drops (in example by HTMLdog it’s #nav - which I had already used as a container for my entire tab scheme). From there I pretty much changed everything to fit in with the navigation I had already built (using floats) except for the main “switch” that hides the drop down until it’s hovered over (the negative absolute positioning and the “left:auto” to bring it back). Of course the modification brought some IE6/IE7 issues so when you view source of the HTML you can see the two conditionals I added to fix the problem (mostly margin based).

As you can see combining the two methods is not hard at all and takes a little extra markup and a little extra CSS.

If you have tried this method and used it successfully leave a comment to show you’re awesome work!! If not, and you need some help troubleshooting leave a comment with the problem and we can work it out.

How To Make Aardvark Add-on Work With Firefox 3!

Lindsey — Fri, 20 Jun 2008 12:32:12 +0000

I’m a huge, huge fan of the latest Firefox release. But I was really, really disapointed that a LOT of my very favorite (and most used!) plugins were incompatible. The plugin I felt most lost without was Aardvark, which I use every single day, practically all day long to aid me in development, editing and design.

Aardvark is a simple little Firefox plugin that when activated (right click and choose “Start Aardvark”) lets you highlight each elements on the page with a red border - not only that, a tab appears on the border with the element and id/class that is associated with it.

This plugin is critical for me (along with Firebug) when diagnosing layout problems.

So, unfortunately when Firefox 3 shipped on Tuesday I realized that my favorite tool wasn’t compatible. With a little research I found a loophole to circumvent the incompatibility issue.

Open up any browser BUT Firefox and download the latest version of Aardvark. Save to your desktop for easy access.
Right-click on the aardvark-2.9-fx.xpi file and change the file extension to .rar (you will need a program such as Winrar or WinAce - both free- to complete this)
Double click the new aardvark-2.9-fx.rar file and extract JUST THE INSTALL.RDF file. Nothing else. If you happen to extract the whole folder it doesn’t work.
Open install.rdf with your text editor of choice. I used Notepad++, but regular Notepad will suffice. Search for 3.0pre and replace with 3.0. Save!
Close the edited install.rdf file and drag it into the aardvark-2.9-fx.rar archive.
Change the archive’s extension back to it’s original .xpi — aardvark-2.9-fx.xpi.
Drag aardvark-2.9-fx.xpi into any Firefox window and it will install as usual and work!

This trick was provided by Dinaz in a thread of comments in the Aardvark’s plugin page on Firefox Add-ons.

Other plugins that weren’t automatically updating for me and I had to go to the Firefox Add-ons section to download: Firebug, ColorZilla and Colorful Tabs.

Other plugin(s) that still aren’t updated that I miss: CuteMenus - Crystal SVG, Fasterfox (although you can make it work with the same hack used for Aardvark).

Also, slightly off the subject - but I’m slightly annoyed with the Firefox site. I searched for “colorzilla”, “colorZilla”, “color zilla” and “colorzilla 2.0″ with their in site search and each time it returned “No results to display”. Jumping over to google it was the first result from my query. Same for cutemenus. I think Firefox needs to work on their search feature!

Create A Memorable Maintenance Page

Lindsey — Mon, 16 Jun 2008 13:30:11 +0000

Every once in a while we have to take our site down for upgrades, or god forbid something breaks and we have to fix it and we don’t want to leave the broken version for our users to see.

I was inspired to write this after seeing the funny Technorati maintenance page this morning:

Maintenance pages are important for many reasons, but one of the most important reasons is to make people remember to come back. If someone is visiting your site for the first time and you are currently working on your site and have placed it in maintenance mode typically you will replace your index with a page explaining the downtime and encouraging users to check back later (giving a specific time frame is good practice).

When designing your maintenance page you must keep in mind that people see dozens, maybe hundreds of websites a day. And if you’ve taken your site down for upgrades you definitely want these people to remember your site and to return later on.

A few tips to a better maintenance page:

1. Keep the general design close to your site’s design. It doesn’t necessarily need to be an exact duplicate of your layout - but it is wise to use the same colors and feeling as the original.
2. Make it simple. No need to go into exact details about WHAT your working on. Just let people know you’re working on it.
3. Give a time frame for people to return. Best is something like “Please try again in 30 minutes!”.
4. Make static content available. Have a few popular articles mirrored statically and link to them through your maintenance page. Give visitors a taste of what you have so they remember to come back for more great content.

Wordpress users can download a plugin for when they are making adjustments, upgrades or fixing their blogs called “Maintenance Mod Plugin“. When activated a maintenance page will show for any users NOT logged in. If you are logged in you can view all content on the front and backend and work as needed.

The sample page that comes with the plugin is fully customizable:

Here are some examples of maintenance pages from some popular sites (click to enlarge):

Adsense:

Blogger:

Bloglines

Digg

Feedburner - not exactly a maintenance page - but good demonstration of an error page.

IStockPhoto - my favorite!!

Mixx

Twitter - has several

As you can see some of the best pages here stay true to the site brand, while making it a little fun. They also offer information about what is happening and when you can return to the site for it’s regular content.

Do you have a favorite/memorable maintenance page? If so leave a comment and I can add it to this post. Want to show off your own personal maintenance page? Leave a comment!

Rounded Corner Boxes With Expandable Heights Using CSS and Images

Lindsey — Tue, 10 Jun 2008 02:05:05 +0000

Rounded corners are a great design element to escape from the blocky/boxiness a lot of web designers fall victim to. I remember the first time I created my own rounded corner box using Photoshop and HTML/CSS. What a thrill :) A lot of people shy away from it because it SEEMS a lot more difficult than it really is.

I’m going to show two ways to create this effect using Photoshop (or the graphic editor of your choice) and HTML/CSS. There are other ways to create this effect using just CSS - but I really am not a big fan of it because it creates a lot more empty divs than this method. Yes if images are off you will lose this effect - but I’m willing to sacrifice that.

Like I said I’m going to demonstrate two ways to accomplish this. The first is using just a flat rounded corner image with no other effects. The second will have a box with a drop shadow, border and gradient. :) So let’s start easy!

First open up Photoshop, and create a new document with a size of 200×200px.

For this example you don’t really need to have a background color (ie: you can use a transparent gif), but for the sake of this example I’m going to use a white background fill.

Next, select your rounded rectangle tool and draw the shape out to fill most of the box. My shape radius option is set to just 5px, but you can choose whichever best fits for your design. The concept is the same no matter how rounded your corners are.

I’ve chosen one of my favorite colors for the shape’s fill - #ff008a - a nice bright magenty-pink :)

Now, hold down CTRL while clicking on your shape layer. Your shape should now be selected:

Now that you have the whole shape selected let’s remove any excess background you might have. From the top menu choose “Image” and then choose “Crop”. This will take your image down to just the shape. You will see a tiny bit of the background peeking from the corners where it rounds.

Make sure your shape is still selected (CTRL + CLICK shape layer). Now, choose the Rectangular Marquee Tool (keyboard: M). Now, while holding down the ALT key* (while holding ALT and using the rectangular marquee tool parts of your selection that are already selected will be deselected) select right after the TOP rounded corners end deselect the bottom half. It may be helpful if you zoom in a bit.

Here is what your selection should look like:

Great, now crop that image the same way we did to the original shape - find “Image” on the top menu, and then select “Crop” from its dropdown.

There you have it. All we need to make our rounded corner box! I’ll explain:

First, CTRL + ALT + SHIFT + S to “Save for Web…”. Save your image as top.gif.

Now, press CTRL + SHIFT + E to flatten your image. You will be left with one layer. Next press CTRL + T to transform.

***TIP*** if your final layer is “locked” double click the lock next to the layer name and when the dialog pops up called “New Layer” press ok, THEN press CTRL + T.

Right click on your image and from the drop down select “Flip Vertical”. This will give you the bottom to your box. CTRL + SHIFT + ALT + S to save, naming it bottom.gif.

Great. Now that we have our images we can start the code.

Our HTML will look like this (I’m using divs for this example, but theoretically this can be applied to most if not all block level elements).

class="wrap"> class="mybox"> My box text ;) This is my rounded box, isn't it so cool! I love my rounded corner box, it's SO pretty! And it's expands it's height to fit in as much text as I want to throw in it! How awesome! class="endbox">

**NOTE** : The “wrap” class is really for demo purposes. Because I am using floats for this example unless the parent element has a width the bottom of the box will float next to it. You won’t need to wrap each rounded box in this if you have them in a sidebar/part of your page of some sort with a set width close the the width of your box.

If you want to remove the wrap class and have the same effect in an area with no container width switch the “float:left” in “mybox” and “endbox” to “display:block;”. I recommend using floats contained within a set width parent though to prevent compatibility issues!

That’s it for the HTML, now the CSS. You will need to know several things before starting -

1) The WIDTH and HEIGHT of your rounded corner images AFTER cropping. If you are not sure open the file up in Photoshop and right click the title bar of the image and select “Image Size” and you will see the dimensions. You can also open up the folder where you have saved the image and hover over the image and the popup in Windows will show you the width/height.
2) The location of your image.

.wrap { width:200px; float:left; } .mybox { float:left; padding:10px; /*Your width is 190px minus 20px for your left and right padding totally to 170px*/ width:170px; /*the url to your top rounded corner image*/ background:#ff008a url(top.gif) no-repeat; font:12px 'trebuchet ms', arial, verdana, sans-serif; color:#fff; } .endbox { float:left; width:190px; height:6px; /*url to the bottom rounded corner*/ background:transparent url(bottom.gif) no-repeat; }

Great, that’s IT! Like I said before the “wrap” class is necessary only if you aren’t putting this within another div that doesn’t have a width set. This works cross browser FF, IE6/IE7, Safari and Opera.

See Rounded Box Using CSS

Now ;) For the “harder” method. It’s actually not much harder. You will need three images instead of two - but it’s the same principle.

I’ll quickly explain how to make our image in Photoshop. First, start just like our previous image create a new image at a size of 200×200px. This time though be careful to make your rounded rectangle shape slightly smaller then the previous version - remember you will need to leave enough space around the image for your surrounding shadow. If you find later on that you’ve run out of space for your shadow then right click the title bar and from the drop down select “Canvas Size”. Add space to the height and width as needed to fit in your shadowing.

Ok, next step is to make our box a little prettier - double click the shape layer to bring up the layer styles dialog. First add a border. For this example I placed a border of 2px, color:#035873 and opacity of 39%. Next let’s add a gradient that repeats down the length of the box.

These are the following options for your gradient:

Finally, lets add our shadow. First CTRL + Click the shape layer to select it. Next, create a new layer (CTRL + SHIFT + N). Move this layer BELOW the shape layer. Make sure your selection is still intact. If not CTRL + Click the shape layer to reselect.

Now, make sure your on the new layer you have created. Fill with black. The next step depends on how much shadow you want. But here is what I did: on the top menu click on the “Filter” menu and from the drop down select the “Blur” option, from that slideout choose “Gaussian Blur…” finally on the window that pops up put in a radius of 4.3.

You should now have a rounded box that looks like this:

Now, for cutting out the slices for this box you will have to select outside of the main rounded box area. For this the best option is to use the rectangular marquee tool (keyboard: M).

Select the top part of your box and make sure your selection is large enough that it goes just slightly beyond your shadow. If you cut too close your shadow will cut off abruptly and you will lose the whole effect.

So your first selection should look like this:

See how my selection reaches outside of the shadow? This is very important. Next, go to “Image” on the top menu and then select “Crop”. Save this image.

Next, press CTRL + ALT + Z to take a step back to before you cropped. Make sure your Rectangular Marquee Tool is still selected. Now hold down SHIFT and press the down arrow to move your selection all the way to the bottom. (Let go of SHIFT if the selection goes to far and adjust up/down as needed).

Repeat the steps to crop, save and take a step back (CTRL + ALT + Z).

Grab your “Single Row Marquee Tool” (click the Rectangular Marquee Tool so the slideout pops out and scroll down to the 3rd tool). Just click anywhere in the middle of your box. You see a single 1px high selection for the width of your box.

Now repeat the Crop and Save.

Great! Now you have the three images you will need to complete this effect. Now it’s time for the HTML:

class="wrap"> class="top"> class="box"> My box text ;) This is my rounded box, isn't it so cool! I love my rounded corner box, it's SO pretty! And it's expands it's height to fit in as much text as I want to throw in it! How awesome! class="bottom">

Again, the wrap isn’t needed if you have it placed within another div in a sidebar-like situation.

And the CSS:

.wrap { width:200px; float:left; } .top, .bottom { float:left; width:200px; height:23px; /*url to the bottom rounded corner*/ background:transparent url(rounded-shadow-btm.gif) no-repeat; } .top { /*url to the top rounded corner*/ background:transparent url(rounded-shadow-top.gif) no-repeat } .box { float:left; padding:15px; /*Your width is 200px minus 20px for your left and right padding totally to 180px*/ width:170px; /*the url to your text background*/ background:transparent url(rounded-shadow-bg.gif) repeat-y; font:12px 'trebuchet ms', arial, verdana, sans-serif; color:#fff; }

Works in all browsers!

See Rounded Box With Shadows Using CSS & Images

And there you have it. Two simple ways to have rounded corners using images and CSS!

***TIP*** - For my examples I am NOT using a CSS reset method. So your results may vary. If this is the case (and usually it is with IE6 - big surprise!) you will have to adjust the margins and/or paddings. I’m not going to tell you how to solve this problem should you run into it, because solving your own problems is 99% of how you learn CSS and get your experience. But you now have the general principles and should be easily able to integrate this!

And if you can’t, post any questions in the comments or email me and I will try my best to help you out.

Create Full Width Header & Footer With Centered Content Using CSS

Lindsey — Sat, 07 Jun 2008 19:36:53 +0000

There are probably a million different ways to do this, but I’m going to show the way that I have preferred to do it, combined with my favorite centering position method.

So the simple way to do this is as follows:

HTML:

id="headerbg"> YOUR TEXT id="container"> class="left"> This is content that goes on the left! class="right"> Here is my right column! class="clear"> id="footer">HEY HERE IS MY FULL WIDTH FOOTER

Simple right? And here is the CSS:

/*Simple CSS reset for items we will use JUST for this example. Please use full reset when designing! Reseting the margin and padding is important for the body tag so the header and footer will hug the whole screen.*/ h1, p, body, html { margin:0; padding:0;} /*Just visual styles*/ body { background:#000; font:12px verdana, sans-serif; color:#000; } /*Our full length header. We align the text center so it shows up in the middle. If you prefer you could right or left align it.*/ #headerbg { background:#cccc66; text-align:center; padding:20px; } /*Center Content*/ #container { position:relative; margin:0 auto; width:800px; } /*Full width footer*/ #footer { background:#cccc66; padding:10px; text-align:center; } /*These are just styles used for the example for the content.*/ .left { float:left; width:500px; background:#ccff66; } .right { float:left; width:200px; clear:right; background:#66ff33; } .left p, .right p { padding:10px; } /*If you are going to use floats then you will NEED to clear the footer so it doesn't bunch the content up*/ .clear {clear:both;}

See Example

But wait, theres more. Often I have several things going on in my header, like a logo, and some links. I’ve actually used this on the redesigned CSSgirl, and right now you all are going to get a sneak peek of the homepage of the design in static format so I can illustrate this.

It’s basically the same as the above example except two critical things:

1. In our HTML the header is going to be an empty div. You will need also to define a height for your background.
2. We will use a negative top margin to pull the centered content on top of the full width header.

This is a really easy way to use patterned/repeated background patterns in your header that expand the entire width of the site.

So, here is how those things will change:

/*Our full length header. */ #headerbg { background:#cccc66; height:90px; } /*Center Content*/ #container { position:relative; margin:0 auto; width:800px; margin-top:-90px; }

Now you can position and float things ON TOP of the full length header.

See the main page of the all new CSSgirl in static HTML format for examples (full length header and footer). (And no this isn’t the 100% final version :)

Photoshop Essentials - Thousands of Free Brushes, Gradients, Layer Styles and More!

Lindsey — Mon, 02 Jun 2008 02:36:42 +0000

Photoshop is an amazingly powerful tool. It alone can allow you to create fantastic designs and photo manipulations. But, there are many, many other resources available to designers to enhance Photoshop and increase your productivity.

I’m talking about free gradients, patterns, brushes, layer styles and more that you can download and add on to Photoshop.

Patterns

(Some of these sites don’t actually have the pattern present downloads. What you do will be to download the pattern and open it in Photoshop and define it as a new pattern yourself)

Pattern Cooler - Library of patterns (some a little too loud!) that you can edit the color scheme and size of.

Squidfingers - Some of the best, most intricate patterns I’ve seen. I’ve been stuck on Travis’s patterns since 2003!

Kaliber10000 - A collection of user generated patterns - 953 of them! Unfortunately hasn’t been updated since 11/2007

Kollermedia’s Pattern Library - A library of 272 patterns collected and available for download.

Tartan Maker - Create your own tartan patterns on this easy to use site. Store and download patterns of your own or from others!

bgMaker - Create your own pixel patterns or download one of the over 1000 pages of patterns created (warning all are user generated and some aren’t that good)

Stripe Generator - Like the name implies you can create your own stripe patterns (with a multitude of options) or download someone else’s creation!

Gradients

Ultimate Web 2.0 Gradients - 130 free Web 2.0 gradients. A very, very nice set (also see Ultimate Web 2.0 Layer Styles).

Ladyoak - 67 free sets of gradients (total of 3470). Check out my favorite Giorginia (also check out the complete Photoshop downloads section).

Free Logo Maker’s Gradients - Small collection of 150 gradients available for download in ten different sets.

Brushes

PS Brushes - 511 sets of brushes categorized in 23 categories. Their terms of use is full of hard core legalese and it’s a little ad heavy, but there are some nice brush sets.

100 Awesome High Resolution Brushes - Photoshop Roadmap has put together a collection of 100 AWESOME brushes created by various artists.

Miss M - 80 sets of high quality brushes. Sets include swirls, text, florishes, dust, doodles and more.

Obsidian Dawn - Tons of useful and fun brushes. Be careful though - she requires a link back if you use the brushes unless you purchase a commercial license.

Brush Addicts on Livejournal - Hundreds and hundreds of Photoshop brushes. Unfortunately you will have to page through the entries and more often then not be directed to another link to download. Well worth it.

Inobscuro - Tons and tons of really useful brushes ranging from effects brushes to photo brushes.

Chez Plumeau - Collections of brushes made by graphics designers to use in various works of art.

Mixed Bag

Brusheezy - Tons of patterns and high quality brushes. Lots to go through. Also check out Vecteezy - free vector downloads.

My Photoshop Brushes - Patterns, brushes, shapes, styles, gradients and tutorials.

Brushes Download - Really nice brushes (609 packages) and gradients (75 packages). Unfortunately there is not categorization system, so you have to browse brushes by page.

For more downloads, check out Deviant Art User’s Brushes, vbrush “search engine” (no longer updated it seems), Adobe’s Photoshop Exchange and Free Photoshop.

Also, some of my favorite brush sets are by what used to be 8nero.net. Unfortunately site is gone - but the brushes live on via bittorrent. I’m sure you can figure out how to find it yourself ;).

These are just a teeny tiny sample of what you can download for free and use for Photoshop to enhance any project that you are working on from a website, print job or just making an icon for your blog ;P.

CSS Sprites - Easily Use CSS To Replace Images

Lindsey — Wed, 28 May 2008 12:30:41 +0000

If you’re not using CSS Sprites (also known as the CSS Image Replacement Method) you should be. Many coders seem to fear this easy and basic way to use images with CSS and I’m not sure why.

The benefits of CSS Sprites are plentiful, but you (and your visitors) will benefit from this method ten-fold. For the coder it’s less slicing and cropping of images, and for the user it rids us of that annoying image loading flash when you use CSS to replace background images.

I’ll take you through some quick steps to get started with CSS Sprites.

First, fire up Photoshop (or your graphic editor of choice).

For this example we will start easy and make a background (and hover state) for one tab.

First Create a new document (CTRL + N) width a width of 100px and a height of 50px. Than fill in the background with the color of your choice. I’m using black (#000000).

Next, click on the shape tool and select the rounded rectangle (SHIFT + U). Drag the shape until you get a nice looking tab. Double click the shape’s color box and choose a color for your tab. I’ve chosen red (#ff0000). Now, choose the move arrow and drag the shape so the bottom half of the rounded rectangle is outside of the viewing box so it looks like this:

Now, let’s make sure our tab is centered in the box. Select all (CTRL + A) and make sure the tab’s layer is selected. Click on the arrow (move) tool again. Now on the top tool bar click the “Align horizontal centers” icon (see image below):

Now, we can style our tab a bit. I’ve added an inner shadow to give the tab some depth (double click shape layer to have layer styles dialog appear):

Great. Now, the next step is up to you. You can leave the tab blank and have text overlay it through the HTML, or you can use a stylized text. I’ve chosen to use a font that isn’t available through CSS/HTML so I’ve added that to image. (To make sure your font is centered repeat the step above and “align horizontal centers”):

Great, so we have our first tab. Now we need to create our hover state for this tab. Duplicate your tab by right-clicking the title bar and selecting “Duplicate”.

Now on the duplicated tab I’ve changed the background color to a light blue (#00a8ff) (double click shape color box again to have color dialog appear).

Now, back to the original red tab I am now going to merge the two tabs together. For this example I am going to place the two tabs side by side, but that’s a preference left up to you. You can also stack the images on top of each other - or put them in any order you prefer.

So, right click on your original tab’s title bar and select “Canvas Size…” from the drop down. Click the LEFT arrow, and change the width to 200px (increase your canvas size by the width -or height if you are stacking) of your tabs).

Now, to the right of your image you will have an extra 100px. Now, go back to your hover state image. Select all three layers and press CTRL + G. This will group all three layers into a folder. Now select the move tool (black arrow) and drag the image into the first image. Now adjust the grouped layer so it sits EXACTLY next to the original with the same height and width (you won’t see any of the transparent background if you do this correctly).

You should then have an image that looks similar to this:

And that’s it for the photoshop work!

Now, fire up your text editor.

Here is the HTML:

Home

And here is the CSS:

a.home { background:url(tabs.gif) no-repeat; float:left; text-indent:-9999px; height:50px; width:100px; } a.home:hover { background-position: -100px 0; }

Also if you want to use this as your “current” style (highlight the current page) you can add that class to the CSS so it would look like this:

a.home:hover, a.active { background-position:-100px 0; }

See the demo.

Not so hard right?? Check out the HTML and CSS for CSSgirl and you will see that for my main nav “images” I am using CSS Sprites. For this site though I used one large image that contained all the images for both the original nav and the hover states. So my HTML looks like this:

id="navi">class="home" href="http://cssgirl.com">Home class="about" href="http://cssgirl.com/about">About CSSgirl class="portfolio" href="http://cssgirl.com/portfolio">Portfolio class="contact" href="http://cssgirl.com/contact">Contact class="free" href="http://cssgirl.com/free">Free Resources

And my CSS looks like this:

#navi { float:left; width:520px; height:48px; } #navi a:hover {border:none;} #navi a { background:url(images/navigation.gif); height:48px; display:block; float:left; text-indent:-9999px; } #navi a.home { background-position:0 0; width:94px; } #navi a:hover.home { background-position:-425px 0; } #navi a.about { background-position:-95px 0; width:91px; } #navi a:hover.about { background-position:-520px 0; } #navi a.portfolio { background-position:-186px; width:128px; } #navi a:hover.portfolio { background-position:-611px; } #navi a.contact { background-position:-314px; width:107px; } #navi a:hover.contact { background-position:-739px; } #navi a.free { background-position:-852px; width:98px; } #navi a:hover.free { background-position:-953px; }

Get out there and try it! Show me how it turns out. I’d love to see what you guys can do with this. :)

Using IE Conditionals For Cross Browser Compatibility

Lindsey — Tue, 27 May 2008 19:46:37 +0000

What’s worse than spending a week coding a brand new design to realize that your site looks like a bloody mess in IE6? Luckily we have a valid way to fix these problems without having to use hacks in our CSS and destroy the completed design that looks good in all other browsers.

IE Conditionals are an easy and awesome (and valid!!) way to insert any IE specific styles* into your code. You can specify styles for just IE6, just IE7 or for both. Not only that you can specifiy styles to affect all versions of IE below any version number. (*actually these conditionals can be used for anything that you want to display to IE specifically)

For example, say you have some margin adjustments to make that effect only IE6, in the head of your HMTL document you could put this:

Or, say you need it to affect IE6 and all previous versions:

The above code tells the browser to apply these styles to IE6 and any version LESS THAN it.

You can also use the and/or syntax (& / |) if you need the styles just applied to certain versions:

You can also use the & symbol to combine styles for one browser ex: [if (IE 6) & (IE 5)].

If you have a substantial amount of styles (or aren’t using a templating system where the header is isolated) I recommend using the conditional to link to a seperate IE stylesheet:

See more examples and the complete variable list over at Microsoft’s Developer Network.

I Broke My Site in IE. Oops ;)

Lindsey — Tue, 20 May 2008 15:59:22 +0000

I don’t know how or what I did ;O but after messing with some stuff this morning I ended up breaking this site in IE6/IE7. I’m sorry for any IE users I don’t have the time to fix it either. Guess you will just have to wait 2 weeks for the new CSSgirl to emerge (possibly sooner)!

So just because I feel bad I’ll throw out another (scaled down) sneak peak of the new design:

Give Images Polaroid Style Treatmeant

Lindsey — Tue, 20 May 2008 14:36:50 +0000

I’m a big fan of polaroid’s. I love the fact that you can snap a photo and the camera will spit out a photo for you instantly. I love the style so much in the new version of CSSgirl (to be released within the next two weeks!!!) has incorporated their style in the new design. I thought I’d share how I went about creating the image and the HTML/CSS behind it!

First, you will need to decide what size you want your polaroid images to be. I’ve decided on a simple 100×100 space for the actual image. If you want your images bigger/smaller just increase your polaroid size as needed. Create a New Document (CTRL + N) with a height and width of 100px.

Next, fill the entire document with black.

Now, right click on the title bar of the document so the drop down appears and select “Canvas Size”. A window will pop up - first click on the arrow that points up. Now for height fill in 130.

Your document will add the 30 pixels to the bottom of the image. Next, right-click the title bar again and select “Canvas Size” again. This time just fill in the width as 120 and click “OK”.

Ok, once more! When the Canvas Size window is opened this time click the bottom arrow, and fill in 140 for the height. You will now have 10px added to the top of the image.

Next, on your layers palette CTRL + Click Layer 1, which will have just your black square on it. When you do this the black square will become selected.

Now, press CTRL + SHIFT + I. This will inverse your selection so instead of your black square being selected the area surrounding it will become selected. Now, press CTRL + SHIFT + N. This will create a new layer, which we will use the paint bucket and fill with white.

Great! So we are almost done. I like my polaroid images to have a little bit of “realistic” feel to them, so I’m going to add some shadowing. You will need to drag Layer 2 (our white layer) beneath Layer 1 (black fill).

Next, double click on Layer 1, the black fill layer so that the layer styles window pops up. Choose “Outer Glow” and set the blend mode to “Multiply”. Then click on the color box and change it to black (#000000). Take the Opacity down to about 30%, than click ok. It’s a very subtle change, but I think it gives it a better look.

One last step - first, I create another new layer CTRL + SHIFT + N. Then I moved the new layer beneath the layers that we already had. Next, fill that layer with whatever background color you’re polaroid style images will be resting on. I’m using a white background. Now, right click the title bar and choose “Canvas Size”. Add 10px to both the height and width - you will end up with a width of 130 and a height of 150.

Now, double click layer 2 (the white frame layer). Your layer styles window will pop up. Next, click on “drop shadow”. Take the opacity down to 30% and change the angle to 85 degrees. Next change the distance to 2px and the size to 4px. If you are using a background color other than white you will need to adjust these things as neccessary.

Next, click on stroke. Make sure the size is only 1px. Now click the color box and change the value to “#f8f7f7″.

Ok, so if you want to do some extra shadowing or styles you can have at it. Once you have it looking the way you want, save the images (CTRL + SHIFT + ALT + S). Save it as a .gif.

You can also download the .psd or .gif file.

So here is our finished product:

Now we need to write the CSS/HTML to have the images we choose use this background. It’s very simple. Choose the 100×100px image you would like to have use the polaroid style.

Here is the CSS:

img.polaroid { padding:10px 10px 30px 10px; background:#fff url(polaroid.gif) no-repeat;}

And the HTML:

class="kids.jpg" alt="My three babies!" />

Here is how it will look:

We can also go a bit fancier by adding a caption to the polariod by changing up our CSS/HTML a little:

.polaroid { width:130px; height:150px; background:url(polaroid.gif) no-repeat; color:#000; font:11px 'trebuchet ms', arial, sans-serif;} .polaroid img { padding:15px 15px 0 15px;} .polaroid p { margin:0; padding:0; margin:0 15px 0 15px;}

And the HTML:

class="polaroid"> src="kids.jpg" alt="My babies!" /> My babies on Easter 2008.

And the result:

Easter 2008.

What’s really great about this is that with just those few simple styles you can use this style on a whole gallery. Or for anything. For example on iheartswitch.com for the archives section I used a similar method to have the archive image and short description appear.

Style Your Code Samples Without Excessive Markup

Lindsey — Sun, 18 May 2008 19:25:14 +0000

I’ve noticed a lot of sites have a very complicated way of styling the code samples they provide, using multiple span classes and/or inline styles and many, many s. Other times the site just wraps the code in a attribute and doesn’t highlight the different syntaxes.
I’ve written some simple CSS styles to fix this problem. So if you are interested in having your code display as if it was in a text editor with syntax highlighting here is an easy way to do it. The first example is a sample of CSS code and how it can look when you apply these styles (***This is not the actual styles, just an EXAMPLE): /*Center Content Depending on screen size/resolution*/ #container { position:relative; width:800px; margin:0 auto; } /* LOGO, Searchbox, Product Links*/ #header { float:left; width:800px; clear:both; background:url(images/top-border.gif) bottom left no-repeat; padding-bottom:25px; } #header h1#logo { float:left; width:195px; height:65px; } By wrapping the code in a div I assigned the class “css” to and using strong and ems within I have a nice stylized version of my code. Here is an example with xhtml: class="sitenav"> href="product.html" class="first">Registry href="product.html">Innovative Community href="product.html">About Innovative Baby href="product.html">My Account href="product.html" class="last">Help class="email">href="product.html">email this to a friend

id="left">

	class="shop-by">
	src="images/shop-by-brand.gif" alt="Shop By Brand" />
	action="product.html" method="get">
	
	



Nice right? Here is the CSS that controls how the examples above look:

.entry .css, .entry .xhtml {
	border:1px dashed #ccc;
	float:left;
	padding:5px;
	font:12px 'courier mono", georgia, serif;
	display:block;
	margin:10px 0;
	clear:both;
	/*If you have a long line of code and don't want to to make the box expand outside
	of the elemnt you are putting your code in, set a width here and set the overflow to scroll
		   width:450px;
	       overflow:scroll;
	*/
	}

.entry .css em, .entry .xhtml em {
	color:#666;
	text-transform:uppercase;
	font:10px 'trebuchet ms', arial, sans-serif;
	}

.entry .css strong {
	color:#AF0038;
	}

.entry .css code strong {
	color:#4F4F4F;
	}

.entry .css code em, entry .xhtml code em {
	text-transform:none;
	font:inherit;
	color:#FF6FB8;
	}

.entry .xhtml code strong {
	color:#1DA4EF;
	}

.entry .xhtml code em {
	color:#FFB93F;
	}

.entry .xhtml code tt {
	color:#3F61FF;
	font-weight:normal;
	}



And here is the markup for the CSS example:

class="css">
/*Center Content Depending on screen size/resolution*/
    #container {
	position:relative;
	width:800px;
	margin:0 auto;
	}

/* LOGO, Searchbox, Product Links*/
#header {
	float:left;
	width:800px;
	clear:both;
	background:url(images/top-border.gif)
bottom left no-repeat;
	padding-bottom:25px;
	}

#header h1#logo {
	float:left;
	width:195px;
	height:65px;
	}





Not too bad right? We lose all the cluttery span classes, 
 and inline styles.
Some things to remember when using this process:
1. To have the comments styled and avoid using a span, what I have done is left comments outside of the  tags and wrap them in a em. So if you have a comment in the middle of your code sample you will need to end the  before the comment and restart it after.

2. If you have code samples that have long lines of code, either make sure you make a line return to shorten the width and drop it to the next line OR set a width in the CSS for the 
s that surround the sample to your max width, and set the overflow property to scroll.
I’ve created two different samples for you to check out. Feel free to download (right click “save as”) the pages and use the styles as you wish! Also, this isn’t just limited to CSS and XHTML, you can easily do this with PHP, ASP, Javacript - you name it.
CSS girl sample (the styles I’ve used here) | Dark theme



When Great Minds Think Alike!
Lindsey — Fri, 16 May 2008 14:13:46 +0000
Anyone who blogs consistently knows how hard it is to come up with fresh content all the time. And when you do, it can take hours and hours to perfect that article before it’s ready to go live.
Say you work on a post relentlessly for two or three hours one day, and a few days later you go back, make your final edits and set it up to publish next Monday. And then the Friday before you see that someone else has gone and posted their spin on the exact same idea that you worked SO hard on.
You run into a fork in the road - do I publish my article as is no amendments? Do I delete it and cry over the hours of hard work? If I publish it are people going to think that I saw XYZ’s blog post and copied the idea? Do I include a link to XYZ’s post to show camaraderie?
I’ll be honest, when I have experienced this (and it happens at least once every other week to me!) I get so angry at myself. I kick myself when I’m down. I scold myself and question why didn’t I just post it when I first had the idea. Why did I put SO much work into it, and not publish right away. Than I usually sit on the post for a few weeks before I put it live, unless I think it’s really, really good and want feedback and to share it right away. A few times I have gone back and reworked the post to be a little bit different that what XYZ published and often included a link or reference to XYZ’s post as well.
What would you do?



Your Ideal CMS: What’s In It?
Lindsey — Fri, 16 May 2008 01:31:07 +0000
We are never satisfied with our blog software or CMS - it’s almost like an unwritten rule. We are constantly awaiting new updates and features, and when they come they are never good enough. It’s why the age old debate of Wordpress vs. Movable Type exists, and why there is never one clear winner.
So what do we really want in our Content Management Systems? 
For myself I would love to see the following capabilities:

Sweet templating system (a la Wordpress)
Comments (preferably threaded, with an easy way to distinguish admins)
Statistics built in (post views, exit points, referrers, # of subscriptions
Kick ass spam management
Easy image uploading (multiple images) - (haven’t used WP 2.5 yet to test their version of this)
Category systems that allow you to better organize categories.
Better back-end user interface (no winners: Movable Type, Wordpress, Joomla, Expression Engine, Textpattern, etc all fail in some points)
Better draft and published posts editing panels
Better documentation
Multiple blog/site support

So, what do you want and/or need of your CMS? What doesn’t it do right now that you wish it did? What does it do, but you wish it did better?



17 Great Resources - Color Inspiration For Web Design
Lindsey — Mon, 12 May 2008 14:00:17 +0000
One of my favorite parts when creating a new design is the process of choosing a color scheme. There are times when the colors just fall into place after I have my main color, or when using a photo the colors just flow around it. But sometimes you need a little help. 
Whether your looking for a color scheme to base your design on or you need a little help picking out complimentary colors the generators, articles, color wheels and more below will assist and inspire your color creativity.

Color Generators / Wheels



colourlovers is one of my favorite websites to visit. Not only do I use it for inspiration but I just LOVE to tool around with their super cool COPASO palette software generating my own quirky palettes and naming colors that I have “discoverd”. Besides being able to create your own colors and palettes you have the ability to search other people’s colors and palettes (and patterns!) by color, keyword, newest published, tags and randomly! There’s no going wrong here (did that come off too fangirl?)


Adobe’s kuler is another favorite, although I admit I neglect to use it often as I’m such a big fan of colourlovers. Like colourlovers, kuler offers you the ability using a sweet little program to create and name your very own color palettes (sorry, no claiming and naming individual colors here). Also, when viewing a color palette created by another use you can edit their palette creating your own derivative work. I like kuler, but at times I find it depressingly slow, and a bit complicated.


colorjack doesn’t have the social aspects like colourlovers or kuhler but it does have options galore. View the color wheel and color selections by formula (analogous, triadic, six-tone, etc), vision (different forms of color vision), spectrum (full spectrum, web safe and web smart), and model (RGB or RYB).  You will get a palette of six colors which you can modify by moving around the color wheel as it auto-generates the matching colors based on the previous mentioned options. Many option on exporting your palette including Illustrator and Photoshop. (Also, check out Color Galaxy, predefined color selections, with names from popular color manufactures including Crayola!).


Colors on the Web - Color Wizard A sharp color wheel that allows you to choose a color on the wheel, or type in a hex value for the color, which then generates a palette (you can choose from six different types of palettes) for you of three to six colors based on your original entry. You can also modify your original color input by choosing the provided ajustments to the hue, saturation or tint and shade. Also, another cool feature is the “randomize” button which will pop up random color schemes for you.

Colors From Photos



BIG HUGE LABS - Palette Generator allows you several options of generating your palette from a photo - upload a photo, select from your recent uploads, link your flickr account and choose a photo, link from photobucket or a url from the web. Pretty standard - takes a good sampling of the colors in the photo and provides you a “harmonious color palette”. Also provides a adobe swatch (.ASE) and a textarea with the css for the colors (names included with comments).


Colorhunter is another great service that allows you to upload your photos, and it generates a five color palette based on the photo provided. One different and cool thing about Color Hunter is that is allows you to click (or enter a hex #) for a color to search for it, and provides you a list of all the palettes (and corresponding photos) that contain that color. Curious as to where those images come from that append each palette? Here’s an explanation from Color Hunter’s about page: “When you search for color palettes by tag, ColorHunter.com searches Flickr.com via Flickr’s API for images labeled with the tag you entered. The thumbnails of the Flickr images are used to create a color palette. ColorHunter.com uses the Flickr API but is not endorsed or certified by Flickr.”

Articles on Color Theory

Color Matters - Color Theory is a short, but informational article that breifly describes the basics of color theory and defines the main terms of color theory.
Color Theory on Wikipedia - Extensive information on color theory from the history, to the basics including a nice list of references and resources at bottom of article.

Color Psychology & Symbolism

Color Psychology
Color Meanings

Articles On Using Color In Design

Understanding Color In Design
Choosing Color Combinations
Finding Inspiration For A Color Scheme

Premade Color Scheme Inspirations
Because, sometimes you just need a jumpstart to find your perfect color scheme!

Daily Color Scheme is now defunct, but of the 20ish color schemes provided there is a lot of great inspiration to be found.
Color Blender - kinda like the palette generators mentioned above, but I don’t find their color matching, or generator to be as useful. Best part is browsing through palettes already created by other color blender users.

HTML Hex Codes

“Hex Hub” - extensive, extensive list of HTML hex codes sorted by related colors.
Ultimate Color Hex Code List - much like it says - a pretty exhaustive list of HTML hexidecimal codes.




Bad Coders VS. Lazy Coders
Lindsey — Sun, 11 May 2008 19:04:22 +0000
What’s the difference you ask? A lazy coder MUST be a bad coder! If you’re lazy then you’re not coding to best practices therefore you MUST be a bad coder.
While the above in part is true, there is an integral difference between someone who is a flat out BAD coder and one who is just a bit on the lazy side. If you’re looking to hire a coder there is a few key ways to tell the difference.
How to spot a bad coder vs. lazy coder


Tables -Ok people, tables are the WORST possible way you can realize all the hard work someone has put into a design. Are they more often then not cross browser compatible at face value? Eh, yes. But a good coder worth the time and money can translate practically ANY design into a cross browser compatible tableless version of all that hard work.

Bad Coder: Will resort to tables immediately. “CSS? That’s for styling my table background and link hovers, right? Right?”
Lazy Coder: Will resort to using a small table to contain things such as business hours (that’s close enough to tabular data), or forms.


DIVS, DIVS, DIVS and more DIVs! - Take a look at your prospective coder’s HTML. What’s in there?

Bad Coder: Is everything , ,  etc? Is EVERYTHING controlled by divs? This is bad, bad coding. If the coder knows what they are doing they will be able to control many elements on the page within the CSS by styling just the elements - like, heading tags, lists, paragraph tags, and any available HTML attribute.
Lazy Coder: Instead of using the paragraph tag the footer text is wrapped in and defining the styles on that element, a div is added surrounding it. 

Be careful not to judge to harshly as divs ARE a necessary part of coding any design, but if the ids, classes and styles mostly are related to divs, then chances are this particular coder isn’t quite up to par.

Unstructured CSS - Take a peek at a coder’s CSS, is it a mess?

Bad Coder - Does each section for the sidebar have the SAME look, but the coder has slapped a different class to each portion, and defined each separately in the CSS? Are CSS properties defined separately instead of combined for condensed shorthand? Are there many, many !important, declarations after elements? Chances are high then this coder isn’t a top notch CSS master.
Lazy Coder - Do they use a CSS reset method and not redefine more than half of the styles? Or do they use no reset at all? Are there a few too many !important declarations? Chances are this coder is taking the easy way out.


No alt="" attribute on img tags

Bad Coder - This really doesn’t need too much explaining. If you’re using XHTML images NEED an alt attribute to be defined for it to validate. Don’t care about standards compliancy? You should.
Lazy Coder - Generally will miss a few, but even lazy coders are pretty good about remembering a simple alt tag, even if it is just blank (alt="").


Images used in HTML where they could have been defined as background-images in the CSS

Bad and Lazy Coder - Example: A picture of flowers in a header. If that’s defined as an inline image in the HTML, it’s wrong. Example 2 - Perhaps there is a separator image between articles in your sidebar… this can and SHOULD be easily defined in the CSS as a background image.


INLINE STYLES!!!!! - Inline styles have their practical uses and are necessary at times.

Bad Coder - That said, if you are seeing repeated inline styles for simple things (like all h2’s in your content area have an inline style of a padding-left:20px) this is bad coding. This easily can be defined in the CSS. The same can be said for embedded stylesheets. The whole point of CSS is to have all your stylistic elements contained in a separate file where you can edit it once and make GLOBAL changes to your website. This is lost if every page has embedded styles when they can be easily put in a CSS file and linked to. 
Lazy Coder - The lazy coder will sparsely use inline styles. Perhaps on an img that needs to be floated right only a few pages, instead of having a predefined class for that purpose.

Please be sure not to confuse IE conditional statements with embedded styles (but even these styles can easily be contained in a separate IE targeted stylesheet.

Using javascript to control image hover states instead of CSS and text - For something so simple as switching the background on text when hovered over, there is no reason to resort to javascript when CSS can be used alternatively.

Bad Coder - Will gratuitously use javascript on things like navigation roll overs, buttons and more, when a few simple lines in the CSS will easily control the same action.
Lazy Coder - Even a lazy coder won’t resort to this. They will use CSS to control this, although the lazy coder will be less likely to use the faster loading (also prevents the loading flash on hovers) CSS Sprite method (check out the CSS for the navigation on CSSgirl - an example of using CSS Sprites).



Why is it important to define the differences between these two types of coders? Well, the short of it is - a bad coder is a bad coder plain and simple. Only time and experience will hopefully enhance their abilities. A lazy coder on the other hand is a decent coder in disguise. A lazy coder can easily become a good coder if someone lights the appropriate fire under their behind.



What could you do better as a web developer?
Lindsey — Thu, 08 May 2008 13:34:41 +0000
Nobody’s perfect, not even the best designers out there can claim perfection even as we fawn over their immaculate and beautiful design and code. Even for the design elite there’s always those few things we wish we could do better.
So, what’s your flaw? What do you think you need to work on? What elements in your design/code process do you wish you could do just a little bit better? And once you’ve defined that problem, how do you think you can make it better?
For each side of the web development process I want to improve one thing. From the design side, I want to broaden my “color imagination” and on the coding side I want to improve the readability of my source code for myself and other users.

Design
 I’d have to admit that one of my biggest flaws when I am in the design process is that I’m comfortable using a predfined set of color schemes, so I am less likely to experiment with new color schemes. I know the palettes I use work. I know they are functional, look great, and bring life to whatever design decided on. I tend to shy away from dull or muted colors- but as we know dull colors can be just as beautiful and exciting as bright/pastel/primary colors - if used in the right way.
That’s not to say I don’t work with clients if they have a color scheme already chosen, and a lot of times this pressures me to experiment with new colors/combinations, and I become comfortable with that palette after working with it for an extended period of time.
To fix this problem I need to sit down, and start designing something with a random color palette that I have no experience with. Maybe even one that I think is “ugly”. I think if this was an exercise I performed once a week, I could greatly extend my knowledge of color, and give me a broader range of “color imagination” before I start a design and fall back on one of my pet palettes.
A good way to put this exercise to work is to visit one of the many color palette generator sites (e.g Colour Lovers), randomly browse through palettes made and choose the fifth one that appears in the random search. Using those colors only, I would challenge myself to come up with a new design.
Coding
From the coding side of web development I could improve the commenting in my HTML/CSS from the start. I always code so fastly I don’t make the time to put in the simple comments that would let my clients/visitors peek at the source and know exactly what tag/class/id/etc is controlling which part of the page/design. So after the code is nearly done I have to go back through all the pages and add in comments.
I can improve this by putting this practice to work right from the start. Clearly label my HTML and CSS as I am coding, make it part of my steamline to save time and confusion for myself.
So, what can you do better? What is you’re biggest design/coding flaw? What do you think you need to do to improve it?