DGLibre - Diseño gráfico, desarrollo web y software libre. » CSS

40 plantillas HTML/CSS gratuitas y de alta calidad.

Oswal — Thu, 17 Feb 2011 17:39:24 +0000

Esta es una lista de 40 plantillas HTML/CSS de alta calidad y gratuitas. Muy útiles para usarlas como base para nuevos proyectos, inspirarse con nuevas ideas o aprender observando como están hechas. Algunas son HTML5, el estándar de la web del futuro.

La mayoría también incorporan archivos .psd con capas para modificar los gráficos, aunque es un formato de Photoshop deberían poderse abrir con Gimp.

Airlines

Art of Business

Big City

Black Fox

Business Time

Cafe & Bakery

Calliope

Christmas Night

Christmas Red

Chrome 3D

Creative Studio

Cyanspark

Dark Pro

Eco Green

Free Facebook

Global Connect

Eco Design

GeoForce

Green Planet

Greeny

Holiday

Ice Media

Lawyer and attorney

Light House

Orange Blog

Paper Blog

Particle

PhotoBusiness

Politics

Real Estate Agency

Estate

Red Blog

Shalom

Sifiso

Skipopia

Sky Blue

Valentine’s Day

Around the World

Wedding

Xtreme

Fuente: webdesignish.com

3 estupendas herramientas online para crear menús con CSS.

Oswal — Tue, 23 Jun 2009 02:21:02 +0000

Crear un menú con estilos CSS es relativamente sencillo pero no siempre tenemos el tiempo o los conocimientos necesarios para hacer el menú que buscamos. Como ayuda existen 3 herramientas online que nos pueden resultar útiles:

izzymenu.com: Impresionante, para empezar nos da bastantes opciones para personalizar cada menú. Pero es que además cuenta con cientos de diseños predefinidos de muy buena calidad, tanto creados por los editores como por los propios usuarios. Incluso podemos generar menús animados con Jquery.

Su peor defecto es la forma exagerada de mostrar la publicidad, hasta en los archivos que descargamos aparece publicidad de su CMS (que por supuesto podemos eliminar). Otra desventaja es tener que registrarse para poder usar todas las opciones.

cssmenubuilder.com: Otra estupenda herramienta que además genera código bastante más “limpio”. Su galería de menús predefinidos en mucho más corta pero a cambio podemos modificarlos totalmente sin necesidad de tocar el código.

La única desventaja que le encuentro es que no podemos generar la estructura de enlaces desde la propia herramienta. Aunque tampoco es ningún drama pues la propia herramienta nos permite crearla a mano.

cssmenumaker.com: Una opción más simple, contamos con una galería de unos 80 diseños predefinidos pero que no podemos modificar estéticamente. Como ventaja si podemos generar la estructura sin salir de la herramienta, incluyendo submenús. Es interesante, aunque mucho menos potente que las 2 anteriores.

Por supuesto, una vez tenemos el código del menú aun nos queda adaptarlo a nuestro sitio web. En la mayoría de los casos el único cambio necesario será cambiar la ruta de las imágenes en el código CSS, a menos que nos guste tenerlas mezcladas con los demás archivos.

Igualar la altura de capas CSS mediante Javascript.

Oswal — Sun, 14 Dec 2008 07:41:40 +0000

Maquetar páginas web con estilos CSS es una maravilla, creo que a estas alturas todos conocemos las múltiples ventajas frente a maquetar con tablas en HTML. Pero también es cierto que tiene sus inconvenientes, diseños que con tablas eran muy sencillos de realizar mientras que con CSS hay que buscar soluciones estrafalarias.

Un ejemplo lo tenemos en las páginas web de varias columnas, cuando deseamos que todos los bloques tengan la misma altura independientemente de su contenido. Algo que muchas veces es difícil de conseguir solo con estilos CSS.

Un truco que he encontrado hace poco y funciona bastante bien es usar JavaScript, en concreto jQuery, para igual la altura. El código a usar es el siguiente:

function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".column"));
})

Obviamente también hay que cargar las librerías de jQuery en la página en cuestión y señalar que capas queremos que se ajusten en altura, añadiendo el siguiente parámetro a cada DIV:

class="column"

Sencillo y eficaz. Aunque espero que en futuras versiones de CSS esto se pueda hacer directamente sin recurrir a trucos.

Fuente (inglés): cssnewbie.com

Libro sobre diseño con CSS gratis.

Oswal — Wed, 26 Nov 2008 02:09:59 +0000

Sitepoint ofrece de forma gratuita y solo durante unos días (luego volverá a costar 29.95$) el libro: The Art & Science of CSS, donde grandes expertos en la materia explican, entre otras cosas, como:

Dar formato a calendarios, menús y tablas con contenido usando CSS.
Crear sistemas de navegación horizontales, verticales y con pestañas mediante CSS.
Crear bordes redondeados usando CSS.
Diseñar cabeceras modernas y visualmente atractivas.
Poner fondos a una página web divertidos y llamativos.
Usar CSS para mejorar la apariencia de cuotas, fechas y listas.

Solo quedan 7 días para que termine la promoción, asi que si os interesa el libro descargadlo cuanto antes entrando en el siguiente enlace:

Promoción: The Art & Science of CSS

Y poniendo vuestra dirección de email en el campo correspondiente, en unos minutos recibiréis un correo electrónico con un enlace para descargar el libro gratis.

Tripoli, mejora tus páginas web CSS-HTML

Oswal — Mon, 03 Nov 2008 10:25:55 +0000

Tripoli es una hoja de estilos en cascada (CSS) diseñada para servir de base para un sitio web. Básicamente lo que hace es “resetear” los estilos por defecto que los navegadores aplican al representar una página web.

Es decir, cuando tú creas un sitio web modificas la apariencia de los distintos elementos que lo componen mediante estilos CSS. Pero los navegadores a su vez también aplican unos estilos por defecto a todas las páginas, lo cual provoca que entre distintos navegadores haya diferencias visibles en la colocación de los elementos o en el formato del texto. Pues Tripoli es un archivo CSS que sustituye en lo posible esos estilos por defecto por otros comunes a todos los navegadores y optimizados para que la página web se vea correctamente y el texto sea legible. Eso nos da varias ventajas:

-La principal es que nuestro sitio web se vera igual en todos los navegadores.
-También mejoraremos la lectura de los textos.
-Y nos ayuda a separar el contenido de los estilos visuales.

Existen alternativas a Tripoli, como por ejemplo Blueprint, pero para mi gusto Tripoli es el más austero y sencillo. Os animo a probarlo, en algunos proyectos puede resultar muy útil.