I just have to point out what a lovely, simple, black and white blog template this is (not to mention, sex-ay, teh hot!). Made by Blogger Templates, where you can also pick up a nifty trick for getting rid of the top navigation bar on your Blogger blog (I hate that thing).
And another new pattern set today. This one reminds me of ancient mosaics, so I've named it What Remains. I made an example box using a couple of these patterns, but then I liked the look so much that I decided to expand it into a full-fledged layout. Since I wanted to keep the box idea, I decided to use our faux IFrame idea again, to create this nice page. I also did a version with a colored scrollbar for IE6, though the validator is not at all happy about that idea. Pretty, though. (Of course, as always, anyone is completely free to use this layout if they would like.)
Here's an update on some more cool example pages using our tiles from headsfromspace: This page shows an example of a vertical text script, viewable in IE, and I love these new I-frame mimic pages using Chinaberry and Chrysanthemum Storm, plus there's this nice "sidewinder" gallery layout, which is neat way to handily fit a series of images onto a single page, and our heads was kind enough to go ahead and do the CSS on that "over the orient" layout .gif I showed you the other day: go take a look.
Well yes, yet again I have to admit I love me (is that so wrong?). And these warm, warm feelings because I made this new pattern, which is quite simply wonderlicious. Here's a .gif of a page layout idea using the lighter version (though I think the darker is my favorite). In case you want the colors on that, the background of the text area is #DDDDCC; the border between the background area and the text area is #776677; the bottom bar is #666666; the main page heading is #886611; the section headling is #888888; the text is #777799, and the menu text links are #DDDDDD. I would probably use #889999 or #888899 as the background color behind the pattern.
For lots more page layout ideas and actual templates you can use (because not everybody is as lazy as I am), go dip into the delicious stuff at Kitty's Fullmoon Graphics, then have a look-see at all the fun things from Liz at Migraine Designs, a site I found via the kind and lovely Ethereal Code.
Update: You can have a look at that example page laid out in CSS by our dear headsfromspace here.
Hello, and welcome to your Monday! I Have a couple little things to cheer the gray, cold passionless drear of the M-word day, and the first is my new absolutely-love-it ravefave pattern "cocktail hour". I'm just mad about this one, so I used it along with another spiffy new pattern, to make one more tabbed example set. On this one I gave the series an opening title page and used two .gifs with transparency on the corners to give the opening page box rounded corners. Just peruse the source to see how I set that up. What I really wanted to do was to figure out how to make the actual tabs on the inner pages rounded, but once I got started I realized that it will take more time than I have to play around with it. We'll save that little treat for another Monday. Unless one of you figures out a way to do it first. That would be cool.
And one more thing to add a little distraction to your day: 20 Questions to a Better Personality . I really like this quiz - probably because it concluded that I am "a WRCL--Wacky Rational Constructive Leader. This makes you a golden god." Any quiz that recognizes that I am a golden god is okay in my book. Here's my arithmetic:
Next up, the "You're Too Sexy For Your Blog" quiz. Okay, not really. I just made that up. (But it would be fun to make the link graphics for that one, eh?)
Remember back in the Paleolithic era when we could design sites using percentages and know that they would work in any resolution? Remember that fabled time before CSS? Before we had to make tiny static designs that float pea-sized on great big screens? Well I guess we can still do such things, but these days we feel guilty about it and hide our heads in shame if we use tables instead of CSS positioning. Okay, but guess what I did. I took yesterday's layout, changed it up for variety, and recoded it (keeping the CSS) using percentages. Yes, really! Here it is! Of course I had to do a couple of strange things, didn't I? Because a day without strange is a day without sunshine.
The first strange thing is using percentages at all, but after that, I couldn't give the top tabs specific lengths, could I? I had to use a percentage - four tabs, 25%, right? But of course, again, this isn't going to work, because it doesn't take the borders into account, so I did something I've never done before, the second strange thing - I gave them a percentage with a fraction: 24.85 percent, to be exact. Which, of course means that there is still a nasty hole on the right in IE, but I handled that like any stalwart girl should - cosmetically. I gave the container a background color to match the "off-state" background pattern, then, in the htm of the only page where it matters (the last, gallery, page), I gave the menu list a background color to match the "on-state" background pattern. And just because I felt like it, I put the whole CSS-positioned contraption in a table so it could be centered on the page. And then, just for fun, I gave the scrollbar colors for IE. (Here's a nice generator for doing that.) It's not perfect, because in IE you can see that there's a slight shortfall on the bottom border of the "on" tab when you are on the last page, but for the convenience and pleasure of having a dynamic layout, it's not a bad deal. I've checked this in IE6 and 5, Mozilla, and Firefox, and they all look fine to me. If anybody sees anything goofy, though, please let me know!
Sorry I was gone so long, but, look! I've brought you back something smashing: all-CSS tabbed page layouts with background patterns on the tabs, one and two! I began with Kalsey Consulting's CSS Tabs with Submenus when putting these together, but I removed the submenus and added a footer. My goal was to make a version with the tabs taking up the entire top of the box, and this is where I ran into trouble - it took me a whole day to overcome the problem with the difference between how IE and Mozilla interpret the box size. Here's the solution I finally used. I think this makes a really pretty, (deceptively) simple, tidy page design. I know I can never really read the instructions to get my information on CSS and HTML, I just have to view the source and parse out what is doing what to what on the page, but I've included some information here for those things that might be a little bit tricky to understand. Continue on, intrepid explorer, to discover more.
So, this is what you need to know about these layouts:
So there you go - have fun with it. I'll make you another example tomorrow if I have the time...
You know what? I really liked my old link color, it was a great sort of slightly smoky rose color that I love (it's now the hover color). You know what else? It was just about perfectly indistinguishable from the surrounding text to someone with color blindness, and that's estimated to be at least one in 20, or as high as one in 12. If you want to check out your pages to see if they are useable to someone with a color deficiency, or if you want to plan a new site with this consideration in mind, there are some really good tools and tips on the web.
This color vision page will show you how color charts look to people with different types of color blindness, and so does this special colorlab palette. And there's a great 216 color web palette showing an approximation of the hues seen by colour deficient dichromats at Exact Technologies, along with a PDF guide to designing for color-blind users. Really, really helpful is this Vischeck site that allows you to run simulation color checks on web pages or files on your own drive. It also offers downloadable Vischeck plugins. Finally, here's another great page that lets you check pages on the web, with a sticky menu that allows you to toggle between the various types of color problems; here's an applet that lets you enter hex colors for text and background and see how they would be perceived by people in three different groups of color deficiency; and here's a good page about designing with the color blind in mind.
I think designers who give away template designs with all the graphics and colors in place are web angels, and I've seen some amazingly lovely things offered, but do you know what I really, really like? Sites that give you good, clear ideas about how to put together a design on your own Adam Polselli offers just such a generous gift with his "Get the Look" section outlining palette, font, and key element choices for different styles. Very nice.
I found Adam's site via a resource I can't gush enough about: forty.something's ultrawonderful Etc., a brilliant spot for web design resources. Do you have a favorites folder called "2 good 2 B true"? Go ahead and put this one there.
Ooh! Pretty! I love the color-bar idea on the opening page of Barbelith, and the way the section posts carry through the category color schemes. This looks really interesting... maybe I'll beg for a membership.
Also... I've just uploaded a nice new pattern I made a couple of days ago. Very "Night of the Iguana". Or something.