Comunidad de diseño web y desarrollo en internet online

CSS para degradados?

Foros de discusión > Javascript y jQuery

Citar            
MensajeEscrito el 05 Dic 2005 05:01 pm
Bueno otra duda mas.

Hace poco vi una pagina k estaba echa con HTML (o XHTML) y con CSS, lo que me sorprendio de su estilo es que el fondo de cada recuadro, ya pueda el encabezado donde estaba el titulo, o el menu con los enlaces en forma de lista, no eran de un color solido, si no que eran degradados. He intentado buscar informacion sobre el tema, pero no he encontrado nada que me diga como se puede hacer un fondo degradado en CSS asi que recurro a vosotros para ver si me podeis decir como es. porque laverdad es que queda bastante bien^^

Por noctam

Claber

197 de clabLevel



 

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 05 Dic 2005 05:29 pm
Un fondo degradado puede ser una imagen hecha con photoshop u fireworks. Asi no más con css no creo que se pueda lograr.

Saludos
The Ghost

Por The Ghost

44 de clabLevel



 

Envíale un mensaje privado     Web

Lima-Perú

firefox
Citar            
MensajeEscrito el 05 Dic 2005 06:03 pm
noctan, una de las ventajas de css es que, si lo has visto en otro sitio, lo puedes imitar perfectamente.

guarda el sitio en tu disco duro, así como el archivo de estilo y las imagenes, y empieza a experimentar. seguro lo sacas.

un saludo

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

Envíale un mensaje privado     Web

firefox
Citar            
MensajeEscrito el 05 Dic 2005 06:04 pm
El degradado en CSS2 se puede hacer perfectamente y ofrece varias posibilidades. Pero como solo funciona en IE, mejor que te vayas olvidando y utilices el .gif de siempre como fondo...
Si aun asi sigues queriendo el codigo avisa y te pongo un ejemplo :wink:

Por frenadoll

922 de clabLevel

6 tutoriales

Genero:Masculino  

Envíale un mensaje privado   Email   Web

Barcelona

firefox
Citar            
MensajeEscrito el 05 Dic 2005 09:59 pm
En la conferencia expliqué eso.

  1. Haces un degradado
  2. Recortas el degradado con alto de 1px
  3. Usas un bucle en el CSS


Código :

div#conDegradado {
    background-image: url(ruta/imagen/degradado.jpg);
    background-repeat: repeat-x;
}


El repeat se alinea de acuerdo a como y a donde quieres que se repita.

Si eliges repeat-x, se repetirá horizontalmente. Por el contrario si usas repeat-y, será verticalmente.

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

firefox
Citar            
MensajeEscrito el 06 Dic 2005 12:38 am
Capt.Mahou

agradeceria ese codigo de ejemplo aunke solo funcione en IE, nunca esta de mas saberlo.

y NEO JP gracias por el codigo lo probare para ver k tal va, la conferencia no la pude ver, por que breeze me echaba cada dos por tres y cuando estaba dentro el audio se escuchaba mal y se cortaba bastante asi que si vas a colgarla por ahi para que la podamos descargar te agradeceria que me dijeras donde

y en definitiva gracias a todos por los comentarios.

PD: weno una ultima pregunta, de momento solo IE acepta el codigo para hacer los degradados con CSS, sabeis si se tiene pensado que FireFox llege a aceptarlo en posteriores versiones o en alguna revision??

Por noctam

Claber

197 de clabLevel



 

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 06 Dic 2005 01:45 am
No no, no uses ese código del IE, no es bueno.
Mejor usa imagenes de fondo, es más fácil, más factible, rendeará más rápido e incluso funcionará en todos los navegadores actuales.

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

firefox
Citar            
MensajeEscrito el 06 Dic 2005 02:11 am

the_NEO_JP escribió:


Código :

degradado.jpg

Así que manejando transparencias en jpg,eh?? :roll:





:lol: :lol: :lol:

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

  Héroes

Envíale un mensaje privado     Web

firefox
Citar            
MensajeEscrito el 06 Dic 2005 02:38 am

Johnny escribió:

the_NEO_JP escribió:


Código :

degradado.jpg

Así que manejando transparencias en jpg,eh?? :roll:





:lol: :lol: :lol:

uh? nadie mencionó nunca una transparencia...

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

Envíale un mensaje privado     Web

firefox
Citar            
MensajeEscrito el 06 Dic 2005 03:03 am

fael escribió:

uh? nadie mencionó nunca una transparencia...

bueno, pero yo lo pensé :lol:

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

  Héroes

Envíale un mensaje privado     Web

firefox
Citar            
MensajeEscrito el 06 Dic 2005 05:28 am
*sighs*

Dejen de consumir Cristal Cannabis alterado por la oreja por favor, es malo para su salud mental.

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

firefox
Citar            
MensajeEscrito el 06 Dic 2005 12:24 pm

the_NEO_JP escribió:

No no, no uses ese código del IE, no es bueno.
Mejor usa imagenes de fondo, es más fácil, más factible, rendeará más rápido e incluso funcionará en todos los navegadores actuales.


Haz caso a neojp, en cualquier caso aqui tienes el enlace del tutorial http://www.cssboulevar.com.ar/articulos/?id=5 :roll:

Por frenadoll

922 de clabLevel

6 tutoriales

Genero:Masculino  

Envíale un mensaje privado   Email   Web

Barcelona

firefox
Citar            
MensajeEscrito el 06 Dic 2005 08:20 pm
bien gracias a todos por los comentarios, creo que lo mas rapido y compatible es lo descrito por NEO JP,aunque no me gusta porque al hacerlo asi tienes que tener pensado antes el tamaño de la zona a degradar, porque despues si lo modificas en altura tb teines que modificar la imagen, si es que funciona como yo creo...pero aun asi es la mejor opcion

En cuanto a lo dicho antes, sabeis si firefox y otros navegadores aceptaran los degradados por CSS en proximas actualizaciones?

Por noctam

Claber

197 de clabLevel



 

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 07 Dic 2005 08:42 am
Bien noctam, te explico algo rápido antes de irme.

Los gradientes por código son IE-only. Por si no sabes que significa esto, entonces te explico. Durante la guerra de los navegadores, IE creó mucho código propietario y no-estandar, lo cual sólo funciona en Internet Explorer, y no funcionará en ningún otro navegador.

IE es conocido, y odiado por eso. Además de gente que prefiere hacer algo fácil, y termina haciendo algo "malo".

Y para saber qué código es este, mira.
filter:

Código :

progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=white,endColorStr=Gainsboro);

Como puedes ver, usa el DirectX y algo sólo de Microsoft para hacerlo.

En otras palabras, apesta. Ese código también apesta, y no será implementado en otros navegadores, a menos que la W3C quiera, y honestamente lo dudo.

Un saludo, y a aprender.

PD: Probablemente IE7 no soporte esto.

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

firefox
Citar            
MensajeEscrito el 07 Dic 2005 08:35 pm
Bueno al decir que si lo implementarian en otros navegadores no me referia a que tomaran el codigo del IE si no a crear uno estandar y compatible para todos los navegadores, total ya que han implementado las CSS que me parece un acierto pordian ampliar su codigo para que hiciese degradados y ese tipo de cosas...pero una vez visto el codigo de IE y ver que echa manos de DirectX no veo muy posible que se vaya a hacer (aunque echasen mano a las OpenGL)

Bueno supongo que ya esta todo dicho sobre este tema^^

nos vemos en futuros temas.

Por noctam

Claber

197 de clabLevel



 

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 07 Dic 2005 09:03 pm
Bueno, en todo caso sigo sin creer que hagan ese código CSS para degradados, aunque quién sabe.. quizás en la versión CSS4 o CSS5.

CSS mejora cada vez e implementa muchas cosas.

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

firefox
Citar            
MensajeEscrito el 19 Dic 2005 09:08 am

noctam escribió:

bien gracias a todos por los comentarios, creo que lo mas rapido y compatible es lo descrito por NEO JP,aunque no me gusta porque al hacerlo asi tienes que tener pensado antes el tamaño de la zona a degradar, porque despues si lo modificas en altura tb teines que modificar la imagen, si es que funciona como yo creo...pero aun asi es la mejor opcion


Yo cuando tengo que hacer un botón lo que hago, por si luego varía algo el tamaño es crearme el degradado, alinearlo a la parte superior (pongamos que es degradado vertical) y le aplico como color de fonde el mismo que el píxel inferior... Es mi solución chapucera, ^^ jeje

Por rocenn

182 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado    

Zaragoza - España

msie
Citar            
MensajeEscrito el 19 Dic 2005 03:30 pm
de hecho, ésta última no es una "solución chapucera" sino como debería hacerse realmente.

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

Envíale un mensaje privado     Web

firefox
Citar            
MensajeEscrito el 05 Ene 2010 01:26 am

NEO_JP escribió:

No no, no uses ese código del IE, no es bueno.
Mejor usa imagenes de fondo, es más fácil, más factible, rendeará más rápido e incluso funcionará en todos los navegadores actuales.


No entiendo eso de decirle a otro que no use un código asi por así.
Si te parece malo deberías decirle el por que.
Para mi es lo mejor. Las imágenes ponen las páginas pesadas y eso lo sabe cualquiera.
Que solo se puede utilizar en IE, bueno que los demás creen algo mejor y listo.
Este es mi código: filter:ProgId:DxImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#DFEFFF,EndColorStr=#6689BB)
Espero les ayude

Por Robguter

0 de clabLevel



 

Envíale un mensaje privado     Web

2008

firefox
Citar            
MensajeEscrito el 05 Ene 2010 10:58 am
Claro, total los estándares están para gente que está en contra de Microsoft ¿cierto?.

Por DriverOp

Claber

2510 de clabLevel



 

Envíale un mensaje privado     Web

opera
Foros de discusión > Javascript y jQuery

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.