A functional Mozilla menu roll-over effect - no preload necessary

Hi, I would like to write about preloading images in Mozilla. I faced this problem many times and for a while the long-used-trick with a display:none div worked very well. So I happily created roll-over effects in image-based menus until one day…

Now the old trick is not functioning on Mozilla. The good guy is Internet Explorer and the bad guy is suddenly Mozilla. Surprised? Me too…

THE SOLUTION - is not necessary original and brain-blowing - but it’s working beautifully and with no CSS/HTML crazy tricks.

Instead of having the menu background like this

and the roll-over image like this:

we will create the menu background like this:

You can see the menu has doubled the height and the roll-over image is above the normal one - and now has 78px instead 39px. The CSS code will then look like this:

a.menu_home {

height:39px;width:6.625em;color:#fff;text-decoration:none;float:right;

background: url(”images/home.jpg”) bottom left no-repeat;

}

a:hover.menu_home {

height:39px;color:#fff;text-decoration:none;

background: url(”images/home.jpg”) no-repeat top left;

}

this way the image will be loaded from the start and first we will display the bottom part and on mouse over we will display its top part. Simple, isn’t it?

You can see the working example and code here.

CSS and Ajax rating scripts

We need rating scripts for different situations in our webpages. For example we want visitors to rate a wallpaper in a wallpapers site, or a product in a shopping cart. For this we can use one of the rating scripts presented below:

Unobtrusive AJAX Star Rating Bar

The guys from masuga design made this script unobtrusive, configurable( you can set number of stars), and provide the backend too - which use PHP and MySQL. The js part is based on prototype/scrptacolous.

Creating an AJAX Rating Widget

Sadly i did not find a demo for this. The article is more a tutorial that covers all clientside part, and also shows how to implement the rating system using 4 major javascript frameworks ( dojo,mootools,prototype and jquery). for jquery it has a download archive too. It is good if you want to make your own rating script, and don’t know where to start from.

CSS Star rating redux

This is a CSS only solution. The ajax part or backend is not covered here.The technique is crossbrowser, permit multiple sizes (see demo on their site) and is linked to another two posts that teach you how to create this.

CSS: Star Rater Ajax Version

Author took previous presented solution and added the js and php part.As posted on site “not a beginners tutorial - and just follow the steps“, is presented in 5 short clear steps.

percentage based Star Rating

A minimal but complete rating system. This script i scapable to rate in percents, so you’ll have a more accuracy.To adapt it to your design you will need to dig into code and make changes needed.The stars are one sprite image as background, with variable background position.

AJAX Rating Stars

Based on prototype,the raw demo of the script shows it’s capabilities , like locking the staring, callbacks,external set, bindings to form elements.

Rabid Ratings v1.22

This script uses png with transparency,is animated, and has a ’snap’ configuration that allows you to set steps for rating. Is mootools based, and will send the rating to an url set when you create the instance of the rating class. It also provides a tutorial of theme skinning.

Starbox 0.3

“Starbox allows you to easily create all kinds of rating boxes using just one PNG image.” It uses prototype and for effects scriptaculous.

 jQuery Ajax Rater Plugin

This can have variable number or sizes of stars - starting from 1 like gmail starring system. Is based on jquery.

Please let me know if you know other rating scripts/techniques.

css shadows - images and boxes

As we said in a previous post, we’ll try to bring here some resources related to css shadows applied to images or boxes.

CSS shadow kerfuffle

“… in addition to just the plain old img element, an enclosing div plus four additional divs to handle the corners”.

CSS Drop Shadows

This technique uses an outer div for images, or 2 for text. For text basically is building a box around text, then is treated as block element - like image.

Drop shadow CSS

The author of this one, make uses of 3 overlapped boxes, with different backgrounds.It has Two methods, one pure css, one using images.

Also it provides a solution for text-shadow.

yDSF - Robust CSS Drop Shadows

from the site: “yDSF is comprised of some lightweight structural (non-semantic) XHTML markup and a few CSS classes.”

CSS Drop Shadow Tests

Here is presented a way to allow multiple block level elements under same dropshadow box. It separate the border and the shadow in 2 separate wrappers, and use position:relative.

Flexible drop shadowed boxes using CSS

This one uses 2 divs, the holder, with background set to shadow image(gif or png), and a wrapper div, inside the holder, positioned relative, with some negative margins.

Those above are pure css techniques. In a following post, we’ll try to add some resources that use javascript for this.

Update

Cssnewbie - 5 CSSriffic Treatments to Make Your Images Stand Out

added in comment#2 his technique.

The  markup get another wrapping div, and can be used with css border or a png image for browsers that allows alpha channel.

css shadows - text

Shadows are graphical improvements for design or usability. We may want to create a design with shadows under images or boxes, But shadows also can improve usability for text positioned over images.

In this post we’ll try to present some css techniques for text shadows, and in a future posts, we’ll try to gather some css image/box shadows, continued with javascripts that do this for us.

Text shadows:

Creating Cross Browser Compatible CSS Text Shadows

This technique use different browsers behaviour ( for example use filter for ie , or text-shadow for safari).

Shadow

This one makes use of “content” attribute in css. You will have to create an id for every item u want shadowed and set the content attribute the same with the text displayed.

CSS Drop Shadows

This one use same “content” attribute, but also it uses selectors so you can setup a class for this. Instead for every shadowed item, you’ll have to set “title”attribute. Is not working in IE 6.

Drop Shadow

” Use absolute positioning to make a duplicate block of text. Then offset the first text block and use a dark gray color for the text. ”

Let us know if we missed something.

Rounded cornes - CSS

Rounded corners are a challenge for every coder that want to make a modern design. If the layout of the page is liquid, a simple image is not enough anymore. in this part we’ll present some css resources for rounded corners.

Nifty Corners: rounded corners without images

CSS and Round Corners: Build Boxes with Curves

Rounded corners in CSS

“Bullet-Proof” Rounded Corners

More Rounded Corners with CSS

CSS Mojo: Adding Visual Polish To Your Pages

CSS Round Corners

CSS - Single Image Fluid/Fixed Rounded Bordered Corners walkthrough

Rounded Corners for Fixed width (css only)

Curved boxes in CSS

Lean and Clean CSS boxes

Mountaintop Corners

CSS Liquid Round Corners

CSS Design: Creating Custom Corners & Borders

Simple Rounded Corner CSS Boxes

Round Corners

CSS teaser box revisited

CSS forms formating

Forms are the base of interactivity in webpages. Formating forms can bring a good usability to a page, easing the user’s experience.

Styling forms in CSS

Tableless forms

Designing a form using CSS layouts

Creating Funky Forms with CSS

Fun with forms customized input elements

Style Web Forms Using CSS

Accessible, stylish form layout

FORM(s) and Function

Tableless forms using CSS

Css menus - navigation

Navigation is an important part in a webpage. Done it right will help user to find what he needs in your pages. Some resources for navigation are below:

Webpages navigation

Sliding Doors of CSS - Sliding Doors of CSS, Part II

Vertical CSS menu with flyout submenu

Inverted Sliding Doors tabs

Bulletproof Slants

CSS Tabs 2.0

CSS Tabs with Submenus

Free Menu Designs

Mini-Tab Shapes

CSS navigation menu

Nifty Navigation Using CSS

List-O-Matic

CSS horizontal navigation list

CSS font syling

We’ll try to present some resources for font styling in webpages

Font styling

Sane CSS Sizes

CSS Design: Size Matters

Power To The People: Relative Font Sizes

How to size text using ems

Fonts

CSS Font Styling

CSS list formating

List formating - some resources related to this aspect of css design.

Nested lists - For building outline-like lists, nesting uls makes for a structurally sound — and easily styled solution.
Listutorial - takes you through the basics of building background image lists, rollover lists, nested lists and horizontal lists.
Lisatamatic2 - vertical and horizontal nested lists
Taming Lists - CSS to bring unwieldy lists under control.
Format Bullet Lists - How To Format Bullet Lists (<ul>) Using CSS
Uberlink -Uberlink CSS List Menus

CSS positioning

In previous articles we presented some resources for learning and layouts. Today we’ll present positioning:

Positioning

Differences between absolute and relative positioning

Float Tutorial

Containing Floats

Horizontally Centered Absolute Positioning

Floating Thumbnails

Vertical Centering