Easiest Tooltip and Image Preview Using jQuery | Css Globe

What this script does is adds an element to the body when you roll over a certain object. That element’s appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When cursor is moved over he object, element moves with it and when cursor roll out, the element is deleted.

CSS Dock Menu

If you are a big Mac fan, you will love this CSS dock menu that I designed. It is using Jquery Javascript library and Fisheye component from Interface and some of my icons. It comes with two dock styles - top and bottom. This CSS dock menu is perfert to add on to my iTheme. Here I will show you how to implement it to your web page.

jQuery Tutorials for Designers

This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery. In case you don’t know about jQuery, it is a “write less, do more” Javascript library. It has many Ajax and Javascript features that allow you to enhance user experience and semantic coding. Since these tutorials are focused on jQuery, I’m not going to get into the details of the CSS.

Panic - Coda - One-Window Web Development for Mac OS X

So, we code web sites by hand. And one day, it hit us: our web workflow was wonky. We’d have our text editor open, with Transmit open to save files to the server. We’d be previewing in Safari, running queries in Terminal, using a CSS editor, and reading references on the web. “This could be easier,” we realized. “And much cooler.”

About | Nitram+Nunca

Nitram+Nunca presents the thoughts and the products of designer Kei Sasaki covering human interface design, interaction design, graphic design and information technology.

30 Free CSS Based Navigation Menus

After 20 Popular CSS Online Tools and Generators, this is a new full list of CSS based navigation menus collection, it includes 30 various styles of navigation menus, vertical menus, Javascript powered menus and tab menus. Navigation menus is one of important elements for web design. SmashingMagazine has already published a great post to showcase all modern and beautiful CSS based styling menus, check it out here to see what other expert designers did. And below is the list of usable and free CSS menu techniques and resources that you can use for your blogs or websites. Probably some of them you have already seen before, but it is an round-up and can be your further reference. Cheers.

25 Rounded Corners Techniques with CSS

Rounded corners is one of the most popular and frequently requested CSS techniques even the father of internet Google also launch the rounded corners style markup with her Google Adsense and let users to custom their ads recently. Actually, there are a lot of methods and techniques to create rounded corners with Cascading Stylesheets. Some are quite simple just need pure CSS, and a part of them need 2 to 4 background corner images and Javascript. So i select some quality and usable rounded corners with CSS techniques for you to have the best choices.

Top 71 CSS Menus Navigation Tabs : Web Developer Lists : eConsultant

Top 71 CSS Menus Navigation Tabs

A List Apart: Articles: Sliding Doors of CSS

The Sliding Doors Technique

Beautifully crafted, truly flexible interface components which expand and contract with the size of the text can be created if we use two separate background images. One for the left, one for the right. Think of these two images as Sliding Doors that complete one doorway. The doors slide together and overlap more to fill a narrow space, or slide apart and overlap less to fill a wider space, as the diagram below shows:

[Diagram shows two sets of doors. The first set is pushed together to take up less space. The second set is spaced apart to occupy a wider space.]

With this model, one image covers up a portion of the other. Assuming we have something unique on the outside of each image, like the rounded-corner of a tab, we don’t want the image in front to completely obscure the image behind it. To prevent this from happening, we make the image in front (left-side for this example) as narrow as possible. But we keep it just wide enough to reveal that side’s uniqueness. If the outside corners are rounded, we should make the front image only as wide as the curved portion of the image:

[Diagram shows an isolated narrow left-side image with rounded top-left corner, then repeats that same image placed in front of a right-side image with a rounded right-side corner.]

If the object grows any larger than the width shown above, due to differing text or type size changes, the images will get pulled apart, creating an ugly gap. We need to make an arbitrary judgment about the amount of expansion we’ll accommodate. How large do we think the object might grow as text is resized in the browser? Realistically, we should account for the possibility of our tab text increasing by at least 300%. We need to expand the background images to compensate for that growth. For these examples we’ll make the back image (right-side) 400×150 pixels, and the front image 9×150 pixels.

Keep in mind that background images only show in the available “doorway” of the element to which they’re applied (content area + padding). The two images are anchored to the outside corners of their respective elements. The visible portions of these background images fit together inside the doorway to form a tab-like shape:

[Diagram shows both images with extra height added to the bottom. The right-side image also has extra width added to the left. The only portions which remain visible fit together perfectly to form the illustion of a tab-like shape.]

If the tab is forced to a larger size, the images slide apart, filling a wider doorway, revealing more of each image:

[Diagram shows the two images pulled apart slightly to create a wider tab, as well as a slightly taller vertical height to reveal more of each image. Since both background images have allowances for expansion, the the illusion is that the tab itself expanded naturally with the text contained inside.]

For this example, I used Photoshop to create two smooth, slightly three-dimensional, custom tab images shown at the beginning of this article. For one of the tabs, the fill was lightened and the border darkened — the lighter version will be used to represent the “current” tab. Given this technique’s model for left and right tab images, we need to expand coverage area of the tab image, and cut it into two pieces:

[Left- and right-side images]

The same thing needs to happen with the lighter current tab image. Once we have all four images created, (1, 2, 3, 4) we can jump into the markup and CSS for our tabs.

Dynamic Drive DHTML Scripts- Chrome CSS Drop Down Menu

Version 2.0 adds the following new
features:

• Ability to “left”, “center”, or “right” align the menu items
  easily, just by modifying the CSS property “text-align”.
• Added an optional “swipe down” transitional effect for
  revealing the drop down menus.
• Menu items change color (via background image change) when the
  mouse rolls over them.
• Support for multiple Chrome menus on the same page.
• HTML for Chrome menu streamlined, by removing the
  onMouseover/out event handlers in favor of the HTML attribute “rel” instead.