Vía CSSPlay una serie de 10 menus CSS horizontales, listos para descargar...

Una lista de utilidades o herramientas para optimizar y comprimir nuestras hojas de estilo (CSS, cómo también para crear layouts o menús.

Optimizar CSS

1. Clean CSS
2. Code Beautifier
   
3. CSS Cascading Style Sheet Optimiser
4. CSS Optimizer

Comprimir CSS

1. CSS Drive
2. CSS Compressor

Generar menús y layouts CSS

1. [listulike] CSS Generator
2. Scriptomizer
3. inknoise - Layout-o-Matic
4. CSS Creator
   
5. The Generator Form
6. QrOne CSS Designer
   

Vía | Lifehacker

Una lista de nuevos menús para todos los gustos! gracias a nuestros amigos de CSSPlay. 

1. Menú en forma hexagonal

2. Menú lista desplegable

3. Menú superior con sombras 

Encuentro esta interesante utilidad hecho en CSS: un menu desplegable muy interesante con una imagen de fondo (creo que si usamos PHP podemos hacer que esta imagen sea aleatoria...es una idea nada mas). Este menu trabaja sobre IE 5.5 o superior, Firefox, Opera, Safari (Windows) sin ningún problema.

Visto en CSSplay

Cuando iniciamos un proyecto web puede venirnos bien tener alguna inspiración visual para el diseño, por ello presentamos esta lista de algunos sitios web donde podemos encontrar plantillas y diseños elaborados con CSS. En algunos casos nos permite una demo del diseño.

1. CSSeasy

2. Open Source Web Design

A esto es lo que llamo el uso adecuado de la tecnología. Nuestro amigo Erik Blanco nos informa de una aplicación web desarrollada por su persona usando Ajax, PHP (orientado a objetos), MySQL, CSS y Javascript. Se trata de un mantenimiento de datos de una tabla MySQL: inserción, actualización, eliminación y consulta (paginada). Lo interesante es que no usa ningún librería Javascript para ello. Un buen ejemplo de como quedaría una aplicación si armamos nuestro propio objeto XMLHttpRequest para usar Ajax.  

Enlace | Catalogo Empleados 

Esto no es nuevo: tienes un formulario de contacto, por ejemplo, con el objetivo de que tus visitantes pueden comunicarse contigo para un asunto en especial, pero lamentablemente este formulario pierde su proposito debido al spam que llega y llena nuestro buzón de entrada con tontería y media. Existen muchos métodos para evitar el spam basado en Captcha, pero en modernblue encontramos un método con CSS.

¿Cómo trabaja? 

Pues es fácil, se basa en el hecho de que los spambots llenan "todos" los campos de un formulario. Así que teniendo eso en mente, mediante CSS ocultamos un campo.

.special {
  width:5px;
  visibility:hidden;
}

 <input name="info" class="special" type="text" />

Ya mediante el lenguaje servidor (PHP, ASP, etc) evaluarás si tal campo esta lleno entonces es un spambot. Sencillo.

Enlace | Fighting Span With CSS 

Un pequeño ejemplo que nos muestra como desarrollar un interesante menú con CSS y prototype.js (1.5.1).

index.html

 <div id="menu">
	<div id="m-top">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">F.A.Q.</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
	<div id="m-slider">
		<div id="slider"></div>
	</div>
</div>

helper.js

window.onload=function(){

	var offsetLeft=$('menu').offsetLeft;

	Event.observe('menu', 'mousemove', function(event){

		coordinateX=Event.pointerX(event)-offsetLeft;
		$('slider').style.marginLeft=coordinateX-20+'px';

	});

}

La hoja de estilos puedes descargarla desde aquí. El ejemplo quedaría así: 

Finalmente puedes descargas los archivos necesarios para este ejemplo desde Dragan's Blog.

¿Como no se me pasó por la mente implementar un tutorial sobre "Cómo armar tu propio calendario con PHP y AJAX"? Pero bueno, aqui una relación de algunos calendarios elaborados con CSS, Javascript y PHP listos para integrarlos a tu web o blogs.

1. Monket Calendar
2. Calendario usando AJAX y PHP
   
3. Integrando Google Calendar a tu web
4. Calendario con JavaScript
5. Calendario con DHTML y JavaScript
6. Calendario con CSS y listas (<ul> y <li>)
7. Calendario con CSS
   
8. Calendario con CSS (valida correctamente CSS)
   
9. Calendario con PHP y Scriptaculous
10. Calendario AJAX - Javascript, XML y PHP
11. MySQL Calendar por Jamie McConnell
12. acc_calendar: calendario accesible en javascript
13. Swazz Javascript Calendar
14. Scal - Javascript Calendar Control based on Prototype and Scriptaculous

¿Sabes de alguno más?...

Actualizado: 23/10/07 

Google Code prettify es un módulo que hace uso de Javascript y CSS para resaltar la sintáxis de código fuente en una página HTML. Si tu tiene un blog donde escribes códigos de diversos lenguajes (C, Basic, Javascript, Ruby, etc) puedes hacer uso de esta pequeña utilidad.

Configuración 

1. Descarga el Code prettify.
2. Agrega la referencia al archivo Javascript y CSS en tu página web de esta manera:

   <link href="prettify.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript" src="prettify.js"></script>

3. Agrega onload="prettyPrint()" a la etiqueta body del código HTML.
4. Puedes modificar la hoja de estilos para darle los colores que tu prefieras.

Uso

Coloca en el atributo class de las etiquetas pre y code "prettyprint": <pre class="prettyprint">...</pre> ó <code class="prettyprint">...</code>, así de manera automática se resaltara (ó coloreará) la sintáxis de nuestros códigos en nuestras páginas web.

Enlace | Documentación