Diseño de páginas web | Ayudas a diseñadores | CSS

Posts Tagged ‘CSS’

Un div con fondo traslúcido – png transparente como fondo.

Hace poco llegó a mis manos un nuevo proyecto web para maquetarlo (css+ xhtml); esta vez el reto residía en el fondo del DIV central dispuesto para recibir todo el contenido de la página. Éste era de fondo blanco traslúcido, por lo que tenía que mostrar parte del fondo del body.

Enseguida pensé en la posibilidad de usar un PNG transparente (con un blanco a opacidad 70%) como fondo del DIV: la verdad es que nunca lo había probado antes, así que no estaba seguro de su efectividad. Lo comenté en una comida, con un buen amigo (@cssbarcelona, responsable de http://www.cssbarcelona.com – Un saludo tío!-) y él, como no, se me adelantó haciendo el TEST: la idea era buena, funcionaba correctamente en versiones de IE7 y superiores (para versiones anteriores tendréis que echar mano de los trucos que os explicábamos en el post “ arreglando bugs de IE6 “) .

Hasta aquí, el truco: ahora un experimento que realicé sin mucho éxito… Todos sabéis que si el fondo que utilizamos es muy pequeño y pesa poco, pues mejor: agilizamos la página, la hacemos más rápida y ligera. Así que creé el PNG transparente, haciéndolo de 1X1 px y lo coloqué de tal forma que se repitiera. Pues bueno, no fue buen idea: nuestro programa de edición (DW cs4) se volvía lelo, era imposible moverlo cuando estabas pre visualizando la página, todo era leeeeento. La pregunta es ahora ¿Es un bug de DW o en realidad una imagen de 1X1 px transparente repetida es una idea pésima?

Seguiré investigándolo.

Recientemente, a través de twitter, conocimos una estupenda galeria css, CSS BARCELONA.

En ella podemos encontrar una amplia recopilación de páginas web creadas mediane hojas de estilo CSS; la galería puede ser una práctica fuente de ideas para el diseño de tu página web, así como una forma efectiva de dar a conocer tu trabajo como maquetador de websites.

La peculiaridad es que todas las páginas que incluye la galería tiene que estar, como mínimo, en uno de estos idiomas: castellano ,català, euskera, bable, valencià.

Esperamos que la disfruteis!

Es importante que una hoja de estilo, además de válida, esté optimizada al máximo: en definitiva, evitar cosas inútiles y hacer que “pese” lo mínimo posible.

Sin embargo ya es bastante complicado el saber crear una buena hoja de estilo como para tenerla que repasar a fondo encontrando todo aquello que sobra (a veces por descuido); por suerte exixte una gran gama de herramientas online, gratuitas, que nos ayudarán mucho.

Podría publicar una larga lista, pero prefiero limitarme a aconsejar la herramienta que yo mismo uso:

http://www.cleancss.com/

Es rápida, intuitiva y muy efectiva; espero que os sea de mucha ayuda!

Tal vez estos sean selectores CSS poco utlizados, pero en ocasiones muy utiles.

El primero que vamos a abordar es el selector “HIJO”. Este nos servira para dar una propiedad a todos aquellos elementos que se encuentren dentro de otro (igual que un selector “descendente”) pero sin extenderse a elementos sub-anidados; ose que solo se extendera a los descentes inmediatos de ese elemento. Estos selectores se fefinen con el simbolo “ >”. 

Explicado asi suena complicado, pero no lo es… Pongamos un ejemplo:

Codigo CSS:
#menu >li {color:#green; }

Codigo HTML:
<ul id:”menu”>
<li>Inicio</li>
<li>Servicios
<ul>
<li>Reparaciones</li>
<li>Venta</li>
</ul></li>
<li>Otros</li>
</ul>

En este caso todos los elementos del menu se veran de color verde (#green) pero los elementos del submenu “Servicios” se veran de color negro (o el predeterminado para el texto generico de la hoja de estilo.