Ingredients: sprites, unorderdered lists, Mootools knowledge.
Cooking time: 1 hr
Result:
Can be seen on our website – Rborn Web development – mouse-over the top menu.

Preparation of the Mootools glowing menu

The menu is a list containing an A tag for each menu item. We are using sprites and text-indent:-5000px for accessibility purposes. The trick is that we use the image positioned top for LI and bottom for A HREF

Step 1: cook the HTML code

<ul id="mainnav">
<li><a href="/">home</a></li>
<li><a href="#">products</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="/blog/">news</a></li>
<li><a href="#">contact</a></li>
</ul>

Step 2: add the CSS code

li.home {background:url("../img/home.png") top left;}
li.home a {width:29px;background:url("../img/home.png") bottom left;}

This is the positioning of the background image I was talking about earlier.
Now the magic of the glowing is made with few lines of code using MooTools.

Step 3: spice with MooTools code

$('mainnav').getElements('li a').each( function(item){
    if ( !item.hasClass('clicked') ) {
        item.setStyle('opacity',0.01).addEvent('mouseenter', function() {        
this.fade(1)}).addEvent('mouseleave',function(){this.fade(0.01)});
}
})

The code is triggered either on domready event, or put inside a script tag just before the body ends so have the dom loaded and ready to be accessed by javascript.

Basically all we are doing is to get all the A tags inside the menu, set the opacity to 0.01 because if you set it to 0 MooTools will add display:none to the style and the links won’t be visible anymore.

Further we play with the fade method to increase the opacity to 1 or decrease back to 0.01 on the mouseenter and mouseleave event.

We also check if the menu is active or not – we are on the menu page or not –  verifying if the item has a class ‘clicked’, set by the backend. If the item contains this class we simply leave it alone and the item is ‘on’ all the time.

That’s it. Let me know your thoughts.

Check the Spanish version of this post:
Cómo hacer un menú brillante con MooTools en 3 pasos

Very simple problem with a pretty complicated solution, mostly because IE is ignoring the box-shadow CSS3 property. Instead progid:DXImageTransform.Microsoft.Shadow is doing the trick for it and an equivalent can be found.

box-shadow: 4px 4px 8px #000;

for the white shadow is visually-similar to

progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=90,strength=8)

because box-shadow has the parameters:

horizontal-offset, vertical-offset, blur-radius, color

and progid:DXImageTransform.Microsoft.Shadow:

color, 
direction (90 for right bottom, it can also be 0, 45, 135, 180, 225, 270 and 315 )
strength (the distance, in pixels, that a filter effect extends - more like the combination of 4px 4px in the box-shadow)

What it doesn’t have is the blur-radius. Altough progid:DXImageTransform.Microsoft.Blur exist, it will blur the content of the box too, making the text unreadable.

The result is quite similar, with some small differences in how IE displays the corners. As you can see the top-right corner and the bottom-right corner are a mess (the bottom-left doesn’t feel very well either), but let’s be grateful they exist…

You can check the demo link if you want to play with other browsers.
The complete CSS code for all browsers is:

.black-shadow { 
-moz-box-shadow: 4px 4px 8px #000;
-webkit-box-shadow: 4px 4px 8px #000;
box-shadow: 4px 4px 8px #000;
 
filter: progid:DXImageTransform.Microsoft.Shadow (color=#000000,direction=90,strength=8)
        progid:DXImageTransform.Microsoft.Shadow (color=#000000,direction=180,strength=8)
}

Check the Spanish version of this post:
Sombras CSS en múltiples navegadores

I am sure you all know about Mictosoft’s IE9 Testdrive. Its main target was, for now, the developer – in an attempt to showcase the improvements in IE9 and maybe make us be more nice to them and forget how much time we waste with IE6.

What I was interested as a frontend developer was the the compatibility tables for features like SVG, CSS3 and DOM. And the test results, as per Microsoft’s page, are all gorgeous.

A more detailed list of supported features can be seen by checking their website but long story short, everything is green for them and not so green for the other browsers, except CSS3 :nth-child selector and CSS comments

and DOM level 2 style @import inside of @media

Another very interesting source of information regarding the present and future features supported by the browsers is When can I use… that also includes HTML5 elements – I notice IE9 testdrive page is not mentioning anything about HTML5 altough IE9 is expecting to support it in a certain percentage. They have also calculated the support that past and future browsers have for some features and their numbers are like this:

But you’d better check their website to see the features they worked with cause there are some differences that worth being taking into account.

We salute Microsofts initiative, altough we would love to see some of these CSS3 borders, backgrounds and selectors embedded in an IE8 update…cause we all check our statistics….

Styling a form is never an easy thing to do, but adding CSS3 on a HTML5 form is a task that shows a large variety of results when it comes to testing on different browsers. Check the test link.

When it comes to CSS3 not much can be done: but adding rounded corners, gradients and dropshadows is still more than nothing anf the overall aspect of the form is waaaaaaaaay better. But HTML5 is supported by few browsers (this HTML form only by Opera) and CSS3 also by few broswers – but different from the one supporting HTML5.

The result: impossible to see the result on one browser only: the rounded corners can be seen on Mozilla/Chrome/Safari and the HTML5 elements on Opera.

Internet Explorer? Better don’t ask. No support whatsoever.

So the results:

1. Mozilla 3: rounded corners + / HTML 5 elements
   
2. Chrome: rounded corners + (they look weird) / HTML 5 elements -
   
3. Safari: rounded corners + / HTML 5 elements -
   
4. Opera 9: rounded corners – / HTML 5 elements +
   
5. IE (doesn’t matter which one): rounded corners – / HTML 5 elements -
   

It seems we have to wait a little longer till we can drop Javascript from styling the forms 

UPDATE

Ric Ferrer sent us a screenshot with the behavior of Mobile Safari from his Ipod. Thank you

Check the Spanish version of this post:
Usando CSS3 para dar estilo a formularios escritos en HTML5

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.

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 provided 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, permits 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 solutions 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.

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.

Shadows are a graphical improvements for design or the website’s usability. We may want to create a design with shadows under images or boxes, but shadows also can improve usability and accesibility for the text positioned over the images.

Text shadows

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 can do this for us.

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.

If you don’t have the time, tools, knowledge or simply not in the mood to code there are some tools that can help you make your rounded corners:

RoundedCornr

CSS Rounded Box Generator (Beta)

Spiffy Corners

Spanky Corners

Cornershop

Rounded Corners Generator

Rounded Corner Generator – css portal -

Rounded corners are a challenge for every coder that wants to make a modern design. If the layout of the page is liquid a simple image is not enough anymore. In this article 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