Borchani.COM – Blog

Desde thinkwasabi conocemos, Simplecss un editor de de hojas de Estilo para que bajes de forma gratuita a tu ordenador. Simplecss te facilitara un poco la creación de tu hoja de estilo, la cual la vas generando seleccionando las referencias desplegadas en la lista que figura a la izquierda , luego solo vamos introduciendo los parámetros que deseamos obtener en cada una de ellas, colores, anchos, tipografías, etc. Con este pequeño programita podrás visualizar todo lo que vayas haciendo y dependiendo tu ordenador lo encontraras disponible para Mac, Windows y Linux.

Descarga para Mac OS X
2.32 MB .dmg file
Universal Binary

Descarga para Windows
1.45 MB .zip file
Compatible tambien con windows Vista

Descarga para Mac OS 9
3.14 MB .hqx file

Descarga para Linux

Real Editor un editor CSS online, enfocados para los usuarios MySpace, lo que significa que si tienes un servicio en MySpace, podrás mediante Real Editor editar bastante tus plantillas de de forma muy fácil. Pero obvio solo es para usuarios de MySpace, ya que utiliza una página de este servicio para ir aplicando los cambios.

Enlace Realeditor

Al hacer rollovers en Css con imágenes, dos, tres, o más imágenes deben ser cargadas. Por lo tanto tenemos una imagen para cada estado (normal, al poner el Mouse sobre el, y al visitarlo). Al poner todos los estados en una imagen realizamos los cambios dinámicos más rápidos y no requiere mas de una carga. Generalmente para el rollovers con CSS, lo haríamos utilizamos 3 imágenes de fondo diferente para cada estado y lo hariamos mediante CSS de esta forma.

CSS:

#menu a {
…
background: url(“button.gif”) top left no-repeat;
}
#menu a:hover {
…
background-image: url(“button-over.gif”);
}
#menu a:active {
…
background-image: url(“button-active.gif”);
} 

/* etc… */

Pero también existe una manera fácil de evitar utilizar una imagen de fondo para cada estado que es utilizando una misma imagen que contendrá todas las instancias necesarias. Lo bueno que esta imagen se cargara solo una vez y se desplazara lo necesario para cada diferente estado, por ejemplo que al pasar el Mouse por encima el fondo se mueva 157px a la izquierda y al hacer click sobre ella se mueva unos 314px.

Para ello nuestro CSS seria el siguiente:

CSS:

#menu a {
display:block;
width:120px;
margin: 1em 0; padding:7px 0 10px 20px;
font: bold 14px/1 sans-serif;
color:#569BE3;
background: url(“link.jpg”) 0 0 no-repeat;
text-decoration: none;
}
#menu a:hover {
background-position: -157px 0;
color: #ED5446;
}
#menu a:active {
background-position: -314px 0;
color:#000;
}

Imagen: