Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Degradados en CSS de cualquier color
#1
Este es un truco que tal vez podría seros útil ya que permite utilizar degradados en la web sólo con CSS. Con esta técnica se obtienen cosas del estilo de lo siguiente:

[Imagen: degradados.jpg]

Generando las cajas:

Aqui pondrémos tres cajas, una con color de fondo rojo, otra azul y otra verde.

Cita:<div class="degradado" style="background-color: #ff0000;"></div>
<div class="degradado" style="background-color: #00ff00;"></div>
<div class="degradado" style="background-color: #0000ff;"></div>

El efecto funciona gracias a una imagen PNG con transparencia alfa como la siguiente:

[Imagen: degradado.png]

imagen con transparencia alfa

En Firefox la verás correctamente y en Internet Explorer como un cuadro blanco. Es una imagen con un degradado de blanco a transparente. El truco es poner el color de fondo que prefieras a la caja DIV y luego sobre éste color, sobreimprimir la imagen.

La clase CSS:

Cita:.degradado {
width: 60px; height: 80px;
background-position:center;
/* Mozilla ignores crazy MS image filters, so it will skip the following */
filter:progidGran sonrisaXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='degradado.png');
}
/* IE ignores styles with [attributes], so it will skip the following. */
.degradado[class] {
background-image:url(degradado.png);
}

Por supuesto si vas a usar cajas más grandes, usar una imagen más grande.
#2
Esta tecnica es muy util para darle elegancia a nuestras webs, gracias por compartir es de mucha ayuda Guiño
#3
Excelente metodo, lo utilizo mucho para diseños web.
#4
Exelente, lo utilizare para mi web Guiño


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Duda] Con respecto de cambiar color a una plantilla con seleccionador Hostingbir 0 125 21-09-2016, 03:04 PM
Último mensaje: Hostingbir
  [Duda] Abrir enlace al dar click en cualquier sitio Tamatsipatse 1 360 22-11-2014, 08:26 PM
Último mensaje: AbaddonOrmuz
  Diseñadora de Logos, Banners y Cualquier Imagen, Diseños al gusto. likeycomparte 0 242 30-09-2014, 08:30 AM
Último mensaje: likeycomparte
  Auto Like para cualquier Web Configurable mikl111 1 697 19-08-2013, 01:46 AM
Último mensaje: niqo
  Tutorial de como Poner rss de cualquier lugar de tu webweb Sergio Fg 8 1,711 01-12-2012, 04:09 PM
Último mensaje: Drod
  ¿Cómo cambiar color texto casilla tabla al hacer click encima con el ratón? LoboBlanco 9 3,404 09-11-2012, 02:24 PM
Último mensaje: Juliens
  Usa cualquier Fuente que quieras en tu web Taquion 9 1,540 03-07-2012, 04:01 PM
Último mensaje: ciberutilidades
  Cambiar color de texto con jQuery. Juliens 1 4,552 16-04-2012, 07:45 PM
Último mensaje: luis70043
  [TUTORIAL] Cambiar color de link al pasar el mouse sobre el Rodro 24 3,048 08-02-2012, 03:17 PM
Último mensaje: jmc007
  [Tutorial] C# Indizadores. Accedé a cualquier Archivo con este Tutorial Postteandox 0 1,250 21-11-2011, 01:13 AM
Último mensaje: Postteandox



Usuarios navegando en este tema: 1 invitado(s)