elWebmaster.com

CSS Love Child es una aplicación online gratuita que si bien no es muy útil, es bastante curiosa y puede resultar muy entretenida ya que nos permite ver cómo luciría nuestro blog o sitio web con el estilo CSS de otro sitio.

El experimento se trata de un script que nos da la posibilidad de combinar el cuerpo de una página con el CSS de otra, dando como resultados unas mutaciones bastante entretenidas y que pueden llegar a ser orientadoras a la hora de seleccionar el estilo de nuestra propia web.
Haz clic aquí para probar CSS Love Child.

Si eres fanático de la reducción de peso en los archivos de tu página web, seguramente tratarás de ofuscar el código de tus archivos lo más posible, no dejando espacios, tabulaciones ni saltos de línea. Pero el problema viene a la hora de trabajar con los archivos que comprimiste. Si bien siempre puedes guardar una copia del código indentado, hay una forma mucho más práctica de comprimir tu código.

Tomemos por ejemplo tu hoja de estilos CSS. Mucho más práctico sería que el código estuviera prolijamente indentado y por medio de PHP podríamos comprimirlo dinámicamente antes de que se cargue en el servidor. ¡Lograr esto es muy sencillo! Sólo tienes que seguir estos pasos. Seguir leyendo

Los links del tipo “ancla” <a> muestran por defecto una línea punteada cuando están activos o “en foco”. En Firefox 3 la línea toma el color del texto mientras que en otros navegadores o versiones directamente se muestra en color gris.

Esto no es una locura, por cuestiones de accesibilidad se muestra qué link está activo (piensa en personas que no puedan acceder a un sitio con una computadora con mouse. Presionando”tab” se desplazarán por los enlaces. Pero si te molesta ver esa línea en tu sitio por cuestión de estética o diseño, puedes seguir leyendo para enterarte cómo eliminarla. Seguir leyendo

El tema del posicionamiento correcto de los elementos mediante estilos CSS es algo que puede resultar muchas veces confuso y difícil de dominar por completo. Pero en el blog de Kilian Valkhof un artículo llamado “Comprendiendo el posicionamiento en CSS” nos da unos cuantos ejemplos que son de mucha ayuda.

A continuación les dejo algunos conceptos que van a resultar bastante útiles a la hora de trabajar sobre todo con las propiedades display y position de CSS. Espero que ustedes también lo encuentren tan interesante como yo. Seguir leyendo

Las Tag Clouds o nubes de tags han invadido la web. Su creciente popularidad se merece una breve guía de recursos, tips, tutoriales y sitios de inspiración.

Para los que no lo saben, las nubes de tags son una representación gráfica de los tags (palabras clave) que son utilizados en un sitio web para describir brevemente el contenido de una determinada página. Las palabras de mayor tamaño representan al contenido más popular de una web. Seguir leyendo

Rounded Cornr es una aplicación online que nos permite generar esquinas redondeadas para el contenido o botones de nuestro sitio web o blog. En pocos pasos obtendremos el código necesario para usar en nuestro HTML y en la hoja de estilos CSS.

Sólo hace falta definir ciertos parámetros como el color de fondo, el color de la caja, el tamaño del radio de la esquina, etc. y hacer clic en “Generate RoundedCornr”. Luego copiamos y pegamos el código ¡y listo! Seguir leyendo

Sin duda todo diseñador se encuentra en un inconveniente a la hora de realizar checkboxes y radio buttons ya que puede resultar bastante engorroso cambiar el diseño que viene por defecto, especialmente en los navegadores más antiguos, lo que le quita bastante estética al sitio.

FancyForm es un script realizado mediante CSS y Javascript, junto con distintas imágenes, que nos da la posibilidad de cambiar este tedioso formato que tienen los checkboxes por otros que poseen un diseño más interesante y bonito. Seguir leyendo

Lo natural en la web parece ser el flujo vertical de los elementos, cuanto más contenido hay en una página, más larga se vuelve la misma. Esto responde a criterios de usabilidad dado que estamos acostumbrados a leer líneas de texto cortas que, una debajo de otra, conforman los párrafos de un texto.

Pero ¿se pueden romper los estándares? La respuesta es: “depende de tu propósito”. Si lo que quieres es distinguirte, tu público tiene el ojo entrenado y el tipo de contenido de tu sitio amerita dinamismo ¡bienvenido sea el scroll horizontal! Entérate cómo conseguirlo y conoce los mejores ejemplos. Seguir leyendo

Muchos estaban preguntando cómo crear en un borde de su sitio web o blog una pestaña dinámica que al hacer clic en ella despliegue un panel con publicidad, un par de campos de login de usuario, enlaces, etc. Esto es muy sencillo de hacer si nos ayudamos con CSS y Javascript (via MooTools).

Y aquellos que se estén preguntando qué pasa si alguien desactiva Javascript en nuestro sitio pero no desactiva los estilos CSS, les cuento que también tenemos un truco para que no aparezca el panel en este caso. ¿Qué esperan para comenzar? Seguir leyendo

El buscador de Macintosh es muy popular por su estilo sofisticado que aparece en OS X, Safari y demás aplicaciones del entorno Mac. Tiene el ícono de una lupa a la izquierda que nos despliega algunas opciones de búsqueda y a medida que vamos escribiendo dentro del campo input aparece un ícono para limpiar el campo.

WebCore es un framework que incluye un motor de renderizado de HTML a Mac OS X. Mediante él podemos acceder a campos de búsqueda estilo OS X en Safari, usando atributos HTML específicos. ¡Entérate cómo lograrlo! Seguir leyendo