Custom HTML Form Elements

This JavaScript and CSS will allow you to use custom images for checkboxes, radio buttons and select lists.

Custom Form Elements

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Simple Menu Fx – Mootools

Um efeito simples para menu usando o Morph do mootools v1.2.3.

Primeiro criamos o menu:

<ul id="menu">
	<li><a href="#">Menu Link</a></li>
	<li><a href="#">Menu Link</a></li>
	<li><a href="#">Menu Link</a></li>
	<li><a href="#">Menu Link</a></li>
</ul>
;

E um pouco de css pra ficar mais visivel:

<!--
* {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
ul#menu {
	width: 200px;
	list-style: none;
}
ul#menu li{
	border-bottom:1px solid #fdfdfd;
	height:20px;
	background:#F9F9F9;
}
ul#menu a {
	text-decoration: none;
	color: #993300;
}
-->

Em seguida o script para o menu funcionar:

window.addEvent('domready', function(){
	//Menu
	var menu  = document.getElementById('menu');
	var li = menu.getElementsByTagName('li');
	for(x=0;li.length>x;x++){
		el = $(li[x]);
		el.addEvents({
			mouseenter:
			function(){
				mouseEnterFx = new Fx.Morph(this,{fps:85,unit:'px',duration: 250, transition: Fx.Transitions.linear.easeOut,link: 'cancel'});
				mouseEnterFx.start({paddingLeft:'10'});
			},
			mouseleave:
		function(){
				mouseLeaveFx = new Fx.Morph(this,{fps:85,unit:'px',duration: 250, transition: Fx.Transitions.linear.easeOut,link: 'cancel'});
				mouseLeaveFx.start({paddingLeft:0});
			}
		});
	}
});

Repare no loop “for” muito útil para atribuir o efeito a todos os elementos do menu. Neste exemplo foi utilizado o Morph para ‘trocar’ o padding da Li que contém o link do menu, fazendo com que ocorra um efeito de movimento.

Code:menu.html

Mapas vetorizados

“Free vector world maps”:

http://www.webresourcesdepot.com/free-vector-world-maps-collection/

CSS3 module: Multi-column layout

Resumindo, o Modulo “Multi-column” do CSS3 serve para separar o conteúdo de um elemento em multiplas colunas.

O Módulo Multi-Column é parte das específicões  do CSS3 propostas pela W3C.

This extension to the CSS Box Model opens a new range of possibilities in terms of web design. Multi-column layouts that are so pervasive in the print media (think newspapers, magazines) can now become a reality on the web

http://www.csscripting.com/css-multi-column/example1.php

47+ Excellent Ajax CSS Forms

Forms needs a solid visual structure, a profound hierarchy of form elements (Fields and Labels), powerful techniques and Functionality (AJAX) to make the form look and work creatively. There is a great bunch of creative, outstanding and individually designed from scratch forms.Thanks to AJAX, we can provide real-time feedback to our users using server-side validation scripts and eliminate the need for redundant validation functions and processing data.

Let’s take a look, hopefully you’ll find new ideas you can develop further on your own.

http://www.noupe.com/css/47-excellent-ajax-css-forms.html