SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

The general idea of SlickMap CSS is to streamline the web design process by automating the illustration of sitemaps while at the same time allowing for the predevelopment of functional HTML navigation.

SlickMap CSS

Published under: Utilities | License Free

This tutorial will show a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours.

The main idea is to create an easily configurable set of contextual slideouts. Each can be opened in one of four directions – bottom-right (default), bottom-left, top-left and top-right, and each can be in one of three colors – green (default), blue, and red.

Published under: Tooltips

How to Create a Realistic Looking Button with CSS3? The whole idea is to use a combination of subtle effects to create a three dimensional object. The idea is that: The button is set into the canvas. The texture of the button is different from the canvas and the surface is slightly raised. And the text of the button is pressed into it.

By going into the detail you can use these techniques in your designs. Think about your designs in 3D. It is less about using the specific border effects and more about using them together to achieve an overall look.

Published under: Buttons

Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers?

If so, Uniform is your new best friend.

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

Published under: Formatting | Forms

Nick La was trying to style CSS3 border-radius to image element and he realized that Firefox doesn’t display border-radius on images. The trick is very simple: wrap a span tag around the image element. Specify the original image as background-image. To hide the original image, specify opacity:0 or display:none. He find using the opacity method is a better approach because the image will remain available for copy or download.

To make things easier, we can use jQuery to automatically wrap a span tag around the image, Darcy Clarke has written a piece of  jQuery code which does the magic tag wrapping automatically. You can view the tutorial on CSS3 Rounded Image With jQuery.

Published under: Information

Retweet buttons are all over the internet now.  They are a handy for giving visitors a quick way to share a post.   Most of the retweet buttons out there come from just a few places:

These all work great and are easily recognizable.  Sometimes we have wanted to add a button that matches a site a little better.  The topsy button has some customization, but not much.  It just allows you to change color schemes.

Ideally, it would be possible to put together completely custom markup and styling for a button.  That is the purpose of customRetweet plugin.

customRetweet allows you to build your own button and style it however you like from the ground up.

 

Published under: Social | License Free

jqDock Transform a set of images into a Mac-like Dock menu, horizontal or vertical, with icons that expand on rollover, and optional labels.

 

Published under: Animation | Menu | License Free

Using jQuery and CSS we will create an incremental layout size adjuster that can make our whole website become either larger or smaller depending on the users preference.

In professional templates for blogs especially you will see an icon with a large A and a small A, by clicking on each you can either increase or decrease the font size of the page. What if you took that a step further and increased or decreased the size of the whole website.

This tutorial: jQuery/CSS Incremental Layout Size Adjuster will go over a concept we have not seen before that can make your website very unique. This will more or less imitate the browser zoom you may be accustomed to.

Published under: Code | License Free

Providing supplementary information about potentially complex elements of a user interface is a central part of any website designer or developer’s workflow in creating usable and accessible websites.

One of the most common mechanisms for providing extra details beyond what you can see on the page is the tooltip (a design pattern for showing tips about a particular element on a screen).

While many innovative solutions exist using CSS and JavaScript (with and without JavaScript frameworks like jQuery), it’s sometimes useful to look towards new technologies to examine the impact they may have on our current techniques.

Thus, this tutorial: Sexy Tooltips with Just CSS is going to show how using the evolving CSS standard to enhance some lovely cross-browser tooltips.

 

Published under: Tooltips | License Free

Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius? Well, with Modernizr you can accomplish just that!

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.

Additionally, Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate true and if not, it will be false.

Published under: Formatting | MIT License