Degradados con CSS y JavaScript

Citar

Escrito el 06 Dic 2006 08:36 pm

Hace un tiempo hice una prueba de degradados con CSS y JavaScript, y quedó así: ver prueba
Hace un rato estaba viendo el tutorial de los degradados en CSS, en el cual se usan imágenes PNG Alfa.
Este método no requiere ningún tipo de imágen, y no tienes el problema de los tamaños, ya que el degradado se adapta a la div, así que se me estaba ocurriendo una cosa: se puede utilizar una div con ese sistema, añadiéndole los filtros de transparencia css, dentro de otra div con un background de algun color o imágen y el efecto quedaría similar.
Qué os parece, dudo que hayáis entendido mucho (por mi explicamción barata), pero si os gusta la idea puedo hacer una guía o un mini-tutorial.
Comentado y me decís...
Saludos.

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 07 Dic 2006 02:52 am

mmm, lo bueno de hacerlo con las imagenes y no en javascript es q no requiere tratamiento extra en el cliente, y sobre todo si el browser tiene desabilitado el js, estamos fritos... si lo queres hacer por codigo hacelo por php, q trabaje el servidor, para eso esta, o no?

Por alfathenus

833 de clabLevel

5 tutoriales

Envíale un mensaje privado Web

buenos aires || Argentina

Citar

Escrito el 07 Dic 2006 03:06 pm

Me parece bien que hagas un minituto para eso, es bueno tener alternativas.

Por Wanaya

Claber

1115 de clabLevel

4 tutoriales

Envíale un mensaje privado

La Unión Sovietica U_U

Citar

Escrito el 07 Dic 2006 03:53 pm

El script me pareció divertido, pero hay algo que no me gusta mucho, y es usar clases para cada value del script. No digo que es malo, pero no me gusta la idea de poner eso en todos lados.

Preferiría hacer algo como esto en mi <head> (con jQuery).

Código :

$('.gradient').gradient({
  start: 'B8DEFD',
  end: '4086BD',
  type: 'vertical'
});

O en todo caso, como una función normal.

Código :

$('.gradient').gradient('B8DEFD','4086BD','vertical');

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado Web

Front-end Developer en Washington, DC

@neojp

Citar

Escrito el 07 Dic 2006 04:52 pm

en cualquier caso usando jquery seguirias usando js, si esta desactivado el js tendrias el mismo problema, por otro lado si usas imagenes, tambien hay quien desactiva las imagenes, asi que de las dos formas te arriesgas a que el efecto no se vea, pero al menos yo creo que es un riesgo que puedes tomar, si no se ve el efecto, no afecta en nada no es una cueestion de que si no funciona el js la pagina no funcionara correctamente, entonces, yo preferiria usar el js o el jquery, ya que las imagenes, segun el tuto, deven ser del mismo tamanio que el elemento alq ue se le aplicara el degradado, una imagen distinta para cada tipo de degradado, y una distinta para cada tamanio.... con el js o el jquery no es asi,

Por buzu

163 de clabLevel

Envíale un mensaje privado Web

Los Angeles, California

Citar

Escrito el 07 Dic 2006 05:26 pm

Hola

Lo del tamaño no es del todo cierto, una misma imagen de degradados la podes usar para muchos tamaños.

Hay q hacer una imagen del alto del degradado y de ancho 1 px, colocas la imagen de fondo del elemento html y la repetis sobre el eje x unicamente y ademas colocas el fondo del elemento html del color inferior del degradado y listo.... podes usar la imagen en muchos elementos htmls de diversos tamaños...

saludos!

Por alfathenus

833 de clabLevel

5 tutoriales

Envíale un mensaje privado Web

buenos aires || Argentina

Citar

Escrito el 07 Dic 2006 05:52 pm

alfathenus escribió:

Hola

Lo del tamaño no es del todo cierto, una misma imagen de degradados la podes usar para muchos tamaños.

Hay q hacer una imagen del alto del degradado y de ancho 1 px, colocas la imagen de fondo del elemento html y la repetis sobre el eje x unicamente y ademas colocas el fondo del elemento html del color inferior del degradado y listo.... podes usar la imagen en muchos elementos htmls de diversos tamaños...

saludos!

Se a lo que te refieres, pero definitivamente: no.
La razón es que eso no soluciona el problema, ya que si tu imágen tiene la altura de 600px y la quieres poner en una div de altura 40px, no se va a ver entera, por tanto no queda el mismo degradado de alpha 100 a alpha 0, sino uno de alpha 100 a alpha X <> 0.

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 07 Dic 2006 08:12 pm

adems que pasa si quieres hacer un degradado de una esquina a otra.... lo que alfatheuns dice es, como el dice, no del todo cierto, hay ocaciones en que podra ser usado de esa manera, pero otras donde no....

Por buzu

163 de clabLevel

Envíale un mensaje privado Web

Los Angeles, California

Citar

Escrito el 08 Dic 2006 12:38 am

buzu escribió:

adems que pasa si quieres hacer un degradado de una esquina a otra.... lo que alfatheuns dice es, como el dice, no del todo cierto, hay ocaciones en que podra ser usado de esa manera, pero otras donde no....

supongo que te refieres a esquinas que se encuentren en la misma diagonal,no?? el problema (o la virtud, segun quien lo vea), es que el único sistema que funciona en ese aspecto es el del tutorial ya mencionado. Los demás son uniformes respecto a la horizontal o la vertical.

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

Héroes

Envíale un mensaje privado Web

@jmunozherrero

Citar

Escrito el 08 Dic 2006 05:08 am

Estuve viendo un poco más a fondo el script y me causó gracia cómo hizo el efecto, fue muy sencillo en realidad, pero sorprendente. Hizo un algoritmo matemático para calcular la cantidad de colores usados para el degradé de un color a otro, calcula el tamaño y los aplica según el tamaño especificado.

Si se tiene un bloque de 10 pixeles, considera al div original como padre y le pone posición relativa, luego le agrega 10 divs con 1px de altura y un color de fondo diferente hasta lograr el degradé entre color y color, muy ingenioso (aunque nada nuevo). Habia visto este efecto en un degradé con ActionScript (creo que fue por kadazuro), de cualquier modo, me gustó mucho la idea. Luego copia el contenido y lo agrega en otro div del mismo tamaño que el padre y un posición absoluta con un z-index mayor al resto de divs. Cool.

Me gustó la idea, pero me sigue pareciendo incómodo tener TANTOS divs dentro de mi DOM. Lo cual no cambia el hecho que como experimento es genial.

Gracias por el script Johnny muchacho.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado Web

Front-end Developer en Washington, DC

@neojp

Degradados con CSS y JavaScript

Escribe una respuesta rapida