Utilidades online para CSS (optimizar, comprimir, crear menús)
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
Comprimir CSS
Generar menús y layouts CSS
- [listulike] CSS Generator
- Scriptomizer
- inknoise - Layout-o-Matic
- CSS Creator
- The Generator Form
- QrOne CSS Designer
Vía | Lifehacker
3 nuevos menús en CSS
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
Menu desplegable con CSS

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
Plantillas y diseños en CSS
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


Aplicación con Ajax y PHP 100% funcional

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
Evitando el spam con CSS
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
Menu con CSS y Prototype
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í: 
10 calendarios con PHP, CSS y Javascript
¿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.

- Monket Calendar
- Calendario usando AJAX y PHP
- Integrando Google Calendar a tu web
- Calendario con JavaScript
- Calendario con DHTML y JavaScript
- Calendario con CSS y listas (<ul> y <li>)
- Calendario con CSS
- Calendario con CSS (valida correctamente CSS)
- Calendario con PHP y Scriptaculous
- Calendario AJAX - Javascript, XML y PHP
- MySQL Calendar por Jamie McConnell
- acc_calendar: calendario accesible en javascript
- Swazz Javascript Calendar
- Scal - Javascript Calendar Control based on Prototype and Scriptaculous
¿Sabes de alguno más?...
Actualizado: 23/10/07
Google Code prettify, resalta sintáxis en HTML
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
- Descarga el Code prettify.
- 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> - Agrega onload="prettyPrint()" a la etiqueta body del código HTML.
- 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





