Portada » CSS Avanzado » CSS Hacks » Página 7

sin miniatura

Sistema de puntuación con CSS

Podemos crear un sistema de puntuación hecho mediante CSS, usando simplemente las listas de HTML para determinar la puntuación y la propiedad background-position para precargar las imágenes del rating cuando pasemos el ratón por encima de ellas. Para ello deberemos seguir estos pasos:

sin miniatura

Varios trucos con CSS3

CSS3 está empezando a usarse. CSS3  amplia las posibilidades de personalización de nuestra página web. Lástima que estos efectos solo puedan verse si usas Firefox o Safari. En el salto de la página te mostraremos algunos ejemplos:

sin miniatura

Deshabilitar scroll mediante CSS

Si deseamos deshabilitar el scroll, para que no aparezca las barras de navegación en una página web, usaremos la propiedad overflow. Esta propiedad hace que la barra lateral se oculte. Para realizar este “truco”, deberemos añadir el código CSS como sigue:

sin miniatura

3 tablas fluidas con CSS

Si deseas crear 3 tablas con CSS que ocupen el ancho de tu container  (div), solo debes seguir estos pasos. Mediante CSS, la propiedad float y overflow, podremos crear 3 tablas “fluidas” (se dice por la referencia a float).

sin miniatura

Degradar texto con una imagen y CSS

Existe un truco para poder crear un texto degradado, con texturas u otra decoración, sin tener que usar Photoshop para crear la letra, solo el degradado que queramos hacer, la ventaja de degradar un texto o decorarlo por este método, sería que no usaríamos imágenes para crear el texto (sí la decoración), lo que nos … Lee más!

sin miniatura

Efecto de degradado en el bottom con una imagen

Fade out bottom es un efecto interesante que hará que nuestros contenidos se degraden al llegar al bottom de la página. El truco está en una imagen .png de degradado que tiene un valor z-index muy elevado para asegurarse que siempre se situará por encima del texto. Existe un fix de arreglo de PNG para … Lee más!

sin miniatura

Difuminar texto con CSS

Si deseamos obtener un resultado parecido al de la imagen de arriba, es decir, que el texto quede difuminado, solo debemos aplicar ese texto a una imagen que cree un degradado transparente para que el texto “parezca” que esté difuminado.

Pedro Corchero Murga

¿Qué es CSSBlog ES?

Hola, soy Pedro Corchero Murga. Mi objetivo es ayudarte a aprender sobre CSS, tanto a nivel básico, medio, como avanzado, de forma amena, sencilla y gratuita. Todo ello para ayudarte a empezar a crear tus proyectos o mejorarlos, encontrando la inspiración necesaria.

Puedes contactarme o anunciarte en el blog.

¡Espera! ¡Un regalo por tu visita!

Como muestra de gratitud te enviaremos gratis los últimos freebies, sabios consejos y valiosos cupones de descuento sobre materiales de diseño web a tu correo si te registras abajo.