Stylify Me offers an easy way to generate a very light style guide. It will show you a site’s background colors, Typography (fonts, sizes, colors and text samples) and a screenshot of the home page. It also shows sample image dimensions, but it looks like it only pulls a few images from the home page, so that’s kind of confusing. Also if your type is white, it doesn’t show since the page background is white.

May be good for very basic use, but it doesn’t replace a detailed style guide by any means.

This is a new feature for my blog, I’ll try to make sure it really is a ‘weekly’ one… This week’s wrap-up includes a few notable posts about recent web design trends – and what’s no longer trendy! Enjoy.

  1. Stephanie Hamilton writes about 10 Beautiful Website Color Palettes That Increase Engagement at The Daily Egg. Nice palette choices; I just finished a design with a palette very similar to The Big Top.

  2. Paul Feakins writes about the flat color trend he’s observed recently in Web Design Trends: Flat Color.
  3. Chris Brown writes about The What, Why and How of Textures in Web Design for Web Design Tuts+.
  4. Joshua Johnson writes about 5 Former Design Trends That Aren’t Cool Anymore (So Stop Using Them) at Design Shack.

 

Coda Slider has been around for awhile, originally released back in 2007. But on a recent project, a client specifically requested we use it in a redesign. It’s actually really simple to customize and works well down to IE7 (although IE7 would require some CSS adjustments that I didn’t do for this tutorial. IE8 looked fine).

Coda Slider screenshot

The nicest thing about this slider is that it is basically a sliding wrapper for your HTML. You can add forms, text, images, anything you need into each panel. Other features:

  • Links and buttons are clickable.
  • You can use previous/next graphical arrows or text links.
  • You can use dynamic tabs, which is what I’ve modified in the demo.

The demo linked below shows the version of the slider I made for my client, and you can also get my customized CSS file. Download Coda Slider 3 from Github.

View Demo Get CSS Download Source

Installation

Installation is really simple, just add this to the ‘head’ section (it does need to be in the head, the slider didn’t work when I put it in the footer).

I’ve turned off arrows and turned on Dynamic Tabs; view the other advanced settings here: http://kevinbatdorf.github.com/codaslider/.

Customizing the Dynamic Tabs

The HTML element with class=”title” is used for the dynamic tabs. I used h2 and then hid this element in CSS so it won’t appear within the panel content. Then in coda-slider.css I modified .coda-nav like this to put the nav links down in the bottom right corner:

This is a very simple slider but the fact that you can use HTML in it is a big plus. It’s easy to customize too. Enjoy!

Today I was looking for ideas for displaying tooltips on a client’s new site… This is what I ran across, I hope it’s helpful.

Tooltip Scripts and Extensions

Top 30 jQuery tooltip plugins (using #13, Simpletip, for my project).

I like Tipsy and have used it before a few times, it creates Facebook-like tooltips.

Prototip uses Prototype and Scriptaculous to create a variety of AJAX tooltip styles. Old-school, some use images.

The successor to Prototip, Tipped uses Canvas and jQuery to create some very nice-looking and more complex tooltips; also has an API for custom cases.

A collection of 12 plugins for creating tooltips with jQuery, Mootools and Prototype.

Some tooltip extensions for Joomla.

Tooltip Tutorials

Chris Coyier’s nice tutorial on Bubble Point Tooltips With CSS3 and jQuery.

50+ Scripts With AJAX, Javascripts, CSS & Tutorials.

Tutorial on making Sexy Tooltips with Just CSS.

Tute on creating animated tooltips with CSS3.

Pure CSS Tool Tips Revisited.

How to create link tooltips with CSS3 and jQuery.

Another tutorial on CSS3-only tooltips.

Mobile-friendly CSS and jQuery tooltip tutorial.