Archive for the ‘CSS’ Category
Un div con fondo traslúcido – png transparente como fondo.
March 29th, 2010 | 
Author: 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.
Posted in CSS, Diseño, Dreamweaver | 
Tags: CSS, fondo png, fondo transparente, maquetacion, web | 
2 Comments »
Galería CSS – Cssbarcelona.com
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! 
Optimizar hoja de estilo CSS
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:
Es rápida, intuitiva y muy efectiva; espero que os sea de mucha ayuda!
Posted in CSS, Diseño |
Tags: CSS, mejorar hoja de estilo, optimizador css, optimizar css, optimizar hoja de estilo |
No Comments »
Selectores avanzados: hijo
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.
Arreglando bugs de IE6: IE6 funcionando como IE7 …
Para solucionar muchos de los errores y problemas que internet explorer 6 suele dar… Mediate esta estupenda librerÃa desarollada por Dean Edwards podremos usar png trasparentes en IE6, aplicar :hover a todo tipo de ejementos de bloque (no solo a los “a”), y muchÃsimo más.
Lo mejor es que este nueva versión lo incluye todo en un solo js (ie7.js), y que además ni siquiere es necesario descargar, subir o bajar el js en cuestión, ya que puede enlazarse directamente a Google Code (hotlinking).
<!--[if lt IE 7]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" mce_src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script><![endif]-->
También existeotra vesión de la librerÃa, que añade varias funciones extras: la primera versión es más rápida y menos pesada (yo la recomiendo) pero pueden usarse ambas. La versión extendida se llama ie8.js... Para usarla:
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" mce_src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->
ÂÂ
Rollover CSS sin parpadeos ni precarga de imagenes !
Un rollover es muchas veces un elemento importante para un menú, ya que le confiere a éste un aspecto más trabajado y profesional… Sin embargo realizar un rollover mediante JS no es interesante, puesto que merece la pena evitar usar el JS para los enlaces (por ejemplo), siendo mucho más interesante el poder elaborar un menú a base de texto, con algo de estilos.
El problema al realizar un rollover mediante CSS es ese molesto parpadeo que se ocasiona entre una imagen y otra; como un salto a blanco entre el estado “hover” y el de reposo, y viceversa.
Éste es el tiempo que se tarda en cargar la imagen… Usar una imagen más pequeña no siempre es solución, ya que muchas veces sigue ocurriendo con imágenes de 1k.
Pues bien, aquà os proponemos una solución que nos parece “ideal”, a ver que os parece!! El código de nuestro menú serÃa el siguiente:
Â
 <div id="menu">
<ul>
<li><a href="quien.php" mce_href="quien.php" >Quienes somos</a></li>
<li><a href="donde.php" mce_href="donde.php" >Donde estamos</a></li>
<li><a href="catalogo.php" mce_href="catalogo.php" >Nuestro catálogo</a></li>
<li><a href="contacto.php" mce_href="contacto.php" >Contacto Online</a></li>
</ul>
</div>
y nuestra hoja de estilo serÃa la siguiente:
Â
#menu ul{
list-style:none;
padding:0;
margin:0;}
#menu li {
margin:0;
padding:0;
float:left;
margin-right:3px;
color:#0048ff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
#menu li a {
display:block;
padding:5px;
padding-bottom:0;
padding-top:45px;
background:#d8cb61 url(img/bkg_menu1.jpg;
height:47px;
width:90px;
}
#menu li a:hover {
width:90px;
display:block;
margin-top:5px;
height:52px;
padding-top:40px;
background:#d8cb61 url(img/bkg_menu2.jpg);
} Vereis que en "#menu li a" definimos el estilo del enlace en reposo y en "#menu li a:hover" definimos el estilo del enlace "sobre" ("hover"), y lo hacemos mediante dos imágenes de fondo distintas... Pues lo mejor es hacerlo con la misma imagen, variando solo la posición del fondo, de la siguiente manera:
Vereis que en "#menu li a {
display:block;
padding:5px;
padding-bottom:0;
padding-top:45px;
background:#d8cb61 url(img/bkg_menu1.jpg) right;
height:47px;
width:90px;
}
#menu li a:hover {
width:90px;
display:block;
margin-top:5px;
height:52px;
padding-top:40px;
background:#d8cb61 url(img/bkg_menu1.jpg) left;
}
Antes tenÃamos éstas dos imágenes:
             
Ahora usaremos una sola que reune a ambas, asÃ:
Â
Lo que ocurrirá es que el fondo se desplazará, y puesto a que la imagen ya está cargada, evitaremos el parpadeo.
Podeis ver un ejemplo en acción AQUÃ!
Esperamos que vaya bien!!
Â
ENJOY!!!
OWERFLOW… Ojo con OPERA!!!
Bueno, vamos a hablar de la propiedad OVERLOFW y de como solucionar algun problemilla que ésta puede llegar a darnos con OPERA (si, con operta… Aún siedo reconocido como uno de los mejores navegadores, Opeta tb tiene sus pequeñas pegas).
Usamos la propiedad OFERFLOW para poder construir estructuras de aspecto idéntico a los IFRAMES, pero medainte CSS, sin tener que hacer uso de ningun FRAME, que como bien se sabe, entorpece enormemente al posicionamiento y a la accesibilidad.
Asà pues, si queremos tener algo muy similar a un IFRAME pero usando css, haremos lo siguiente:
__________________________________________________________________________________
<div style="width:180px; height:75px; overflow-y:auto; overflow-x:hidden;"><ul>Â <li>1</li>Â Â Â <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>
</ul>
</div>
__________________________________________________________________________________
Vereis que hemos introducido una lista dentro del div, para poder tener algun elemento dentro que "desborde" y poder ver el efecto del Overflow. El resultado es el siguiente: Vereis que hemos introducido una lista dentro del div, para poder tener algun elemento dentro que "desborde" y poder ver el efecto del Overflow.Vereis que hemos introducido una lista dentro del div, para poder tener algun elemento dentro que "desborde" y poder ver el efecto del Overflow.Vereis que hemos introducido una lista dentro del div, para poder tener algun elemento dentro que "desborde" y poder ver el efecto del Overflow.
Vereis que hemos introducido una lista dentro del div, para poder tener algun elemento dentro que "desborde" y poder ver el efecto del Overflow.Â
__________________________________________________________________________________Â
El resultado es el siguiente:
Â
Â
__________________________________________________________________________________
Como vereis, si estais navegando con IE o Firefox, el aspecto del DIV es identico a lo que podrÃa ser un IFRAME... Sin embargo, si lo intentais ver con OPERA, vereis que la cosa no va tan bien!!!
Lo que sucede es que OPERA no acepta las propiedades OVERFLOW-Y o OVERLOW-X (con las que podrÃamos dar una caracteristica distinta al SCRLOLL vertical y el horizontal). Asà que la única forma de que funcione es utilizar OVERFLOW: SCROLL; o OVERFLOW: AUTO; . Ésto tiene una pega, y es que la barra horizontal siempre se mostrará, ocupando su espacio, pero por el momento es la única forma para que ello funcione bien en todos los navegaores.
Además se tiene que tener en cuenta que, aún que actualmente el OVERFLOW-Y / OVERLOW-X funcionen en IE y en MOZILLA, no son caracterÃsticas CSS validables, al menos no para CSS 2.1 , aún que si lo serán para CSS 3 (que nos guarda muchas sorpresas!).
Y ahora, cuando parece que ya no queda nada mas que decir, hablemos de lo que pasa si un div con un OVERLOW contiene, por ejemplo, peliculas FLASH (como por ejemplo aquà www.npicasso.com/multimedia.php ). La cuestión es que, para que el comportamiento sea el mismo hay que añadir a cada pelÃcula el parámetro wmode="transparent" . De lo contrario os pararÃa esto: www.npicasso.com/multimedia_mal.php (seguimos hablando del comportamiento de OPERA).Y ahora si... ENJOY!
Â
Â
Â
Â
DIV alto 100%… ¿Es posible?
Bien , supongo que a muchos os habrá pasado este tipo de cosas… Teneis un DIV generalque contiene a otros dos DIV, probablemente dos columnas. Una de esas columnas crece y la otra se queda pequeña, y necesitais que ambas crezcan a la vez, ocupando el 100% del espacio vertical, pero claro… Height:100%; no funciona!!!
Â
En este caso por ejemplo, las dos columnas grises no llegan a ocupar el total del alto de la caja negra que las contiene… Nosotros quisiéramos conseguir que ambas columnas ocuparan siempre todo el espacio disponible, independientemente del contenido que alberguen. ESO ES POSIBLE.
Â
Â
Para hacerlo aplicaremos a ambas columnas las propiedades de “margin-buttom” y “padding-bottom” (ya sabreis que el margin es un margen exterior que no afecta al tamaño de lacaja y el padding es un margen interior que se suma al tamaño de la caja). Teniendo en cuenta que “margin” acepta valores negativos, daremos este estilo a las cos columnas:
#columna1, columna2Â {
     float: left;
     padding-bottom: 30000px;
     margin-bottom: -30000px;
}
El padding empujará a tope ambas columnas, y el margin las va a volver a cejar en su sitio… Para que ésto funcione necesita la “guinda final”. Al contenedor de ambas columnas de aplicaremos lo siguiente:
#contenedor {
     overflow: hidden;
}
De esta manera todo lo que sobre se esconderá, y las columnas irán creciendo a medida que crezca el contenedor.
Â
Espero que os sea útil.
Â