[Ovillo] DEGRADADOS CON CSS
Hola, Me gustaría saber si se pueden hacer degradados simplemente utilizando CSS, y si es posible cómo puedo hacerlo. Un saludo y gracias. -- Gema Masegosa. Web personal: http://gmasegosa.sytes.net Un optimista ve una oportunidad en toda calamidad; un pesimista ve una calamidad en toda oportunidad. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] DEGRADADOS CON CSS
Me gustaría saber si se pueden hacer degradados simplemente utilizando CSS, y si es posible cómo puedo hacerlo. Técnicamente no, pero puedes utilizar una imagen con un degradado y utilizar propiedades CSS para dar estilo a los elementos de la web y lograr algunos efectos interesantes con el degradado. ¿Qué es exactamente lo que quieres conseguir? -- Jaime Gómez Obregón Director Comercial ([EMAIL PROTECTED]) ITEISA - www.iteisa.com 942 544 036 - 662 256 006 ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] DEGRADADOS CON CSS
Hola Aquí unos links para degradados con CSS sin emplear imágenes: http://slayeroffice.com/code/gradient/ http://www.designdetector.com/2005/09/css-gradients-demo.php Espero que sean lo que buscabas. Suerte! On 4/7/06, Jaime Gómez Obregón [EMAIL PROTECTED] wrote: Me gustaría saber si se pueden hacer degradados simplemente utilizando CSS, y si es posible cómo puedo hacerlo. Técnicamente no, pero puedes utilizar una imagen con un degradado y utilizar propiedades CSS para dar estilo a los elementos de la web y lograr algunos efectos interesantes con el degradado. ¿Qué es exactamente lo que quieres conseguir? -- Jaime Gómez Obregón Director Comercial ([EMAIL PROTECTED]) ITEISA - www.iteisa.com 942 544 036 - 662 256 006 -- Alex Folch [EMAIL PROTECTED] ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] DEGRADADOS CON CSS
El vie, 07-04-2006 a las 11:12 +0200, alex escribió: Hola Aquí unos links para degradados con CSS sin emplear imágenes: http://slayeroffice.com/code/gradient/ http://www.designdetector.com/2005/09/css-gradients-demo.php H creo que esas soluciones no son técnicamente una buena idea. El primer enlace utiliza un javascript que modifica el DOM para insertar cientos de nuevos elementos que cargan el navegador de manera innecesaria. El segundo método es más de lo mismo pero sin javascript. Fíjate que [1] es una hoja web con ¡más de 500 div! Sólo el gradiente ocupa más de 50 Kb. Además no es semántico y arruina totalmente un código limpio. No veo un motivo para no utilizar imágenes para un gradiente. Es un fondo de elemento, como otro cualquiera; es estilo y como tal debería ir con CSS, dejando el (X)HTML jústamente para lo que es: marcado. [1] http://www.designdetector.com/demos/css-gradients-demo-2.php -- Jaime Gómez Obregón Director Comercial ([EMAIL PROTECTED]) ITEISA - www.iteisa.com 942 544 036 - 662 256 006 ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] DEGRADADOS CON CSS
Yo la técnica que suelo usar, es la que más he visto (solo funciona para degradados lineales) es hacer el degradado en tu editor gráfico, lineal no radial y una vez echo (de la anchura altura que te interese) dejas un imagen de 1 x tu anchura lo pones de background con css backround: url(la ruta del archivo) repeat-y left/right color principio/color final del degradado; o de tu anchura x 1 pixel i las reglas de css las mismas pero reperat-x top/boton, quizás aya algún fallo semántico ya que lo hago de memoria, no recuerdo ninguna pagina ahora mismo con algún manual o algo así, por que yo lo aprendí cotilleando las css de http://www.macromedia.com (creo que aun lo usan), un consejo para aprender todas las técnicas fíjate en diversas web (esta lista es una mina de direcciones con css muy buenos) y empieza a ver como hacen las cosas los demás, *csszengarde*.com http://csszengarde.com/y muchas iniciativas del estilo son especialmente recomendables ya que ves muchas veces los efectos que quieres (o parecidos) y varias formas de plantearlo, por lo que al final acabas haciendo una media entre todas las que ves y lo que te dicta tu propia lógica/experiencia. Y en cuanto a lo de hacerlos mediante cientenas y cientenas de elementos en css, no lo consideraría una solución valida, simplemente un buen experimento. Un saludo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Corrección Re: [Ovillo] DEGRADADOS CON CSS
Corrección: Incorrecto http://csszengarde.com/ Correcto http://csszengarden.com/ Miguel Flores Franco Pixelperu Arte, Diseño, Web y Teletrabajo http://www.pixelperu.com http://www.pixelperu.net Telf.: +511 567 7475 MSN: [EMAIL PROTECTED] VoipBuster: pixelperu SKYPE ID: pixelperu - Original Message - From: Coke Delta8 [EMAIL PROTECTED] To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Sent: Friday, April 07, 2006 6:27 AM Subject: Re: [Ovillo] DEGRADADOS CON CSS Yo la técnica que suelo usar, es la que más he visto (solo funciona para degradados lineales) es hacer el degradado en tu editor gráfico, lineal no radial y una vez echo (de la anchura altura que te interese) dejas un imagen de 1 x tu anchura lo pones de background con css backround: url(la ruta del archivo) repeat-y left/right color principio/color final del degradado; o de tu anchura x 1 pixel i las reglas de css las mismas pero reperat-x top/boton, quizás aya algún fallo semántico ya que lo hago de memoria, no recuerdo ninguna pagina ahora mismo con algún manual o algo así, por que yo lo aprendí cotilleando las css de http://www.macromedia.com (creo que aun lo usan), un consejo para aprender todas las técnicas fíjate en diversas web (esta lista es una mina de direcciones con css muy buenos) y empieza a ver como hacen las cosas los demás, *csszengarde*.com http://csszengarde.com/y muchas iniciativas del estilo son especialmente recomendables ya que ves muchas veces los efectos que quieres (o parecidos) y varias formas de plantearlo, por lo que al final acabas haciendo una media entre todas las que ves y lo que te dicta tu propia lógica/experiencia. Y en cuanto a lo de hacerlos mediante cientenas y cientenas de elementos en css, no lo consideraría una solución valida, simplemente un buen experimento. Un saludo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] DEGRADADOS CON CSS
Según entiendo también es necesario utilizar JavaScript, al margen de ello, muy interesante resultado. Miguel Flores Franco Pixelperu Arte, Diseño, Web y Teletrabajo http://www.pixelperu.com http://www.pixelperu.net Telf.: +511 567 7475 MSN: [EMAIL PROTECTED] VoipBuster: pixelperu SKYPE ID: pixelperu - Original Message - From: alex [EMAIL PROTECTED] To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Sent: Friday, April 07, 2006 4:12 AM Subject: Re: [Ovillo] DEGRADADOS CON CSS Hola Aquí unos links para degradados con CSS sin emplear imágenes: http://slayeroffice.com/code/gradient/ http://www.designdetector.com/2005/09/css-gradients-demo.php Espero que sean lo que buscabas. Suerte! On 4/7/06, Jaime Gómez Obregón [EMAIL PROTECTED] wrote: Me gustaría saber si se pueden hacer degradados simplemente utilizando CSS, y si es posible cómo puedo hacerlo. Técnicamente no, pero puedes utilizar una imagen con un degradado y utilizar propiedades CSS para dar estilo a los elementos de la web y lograr algunos efectos interesantes con el degradado. ¿Qué es exactamente lo que quieres conseguir? -- Jaime Gómez Obregón Director Comercial ([EMAIL PROTECTED]) ITEISA - www.iteisa.com 942 544 036 - 662 256 006 -- Alex Folch [EMAIL PROTECTED] ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] DEGRADADOS CON CSS
Jaime Gómez Obregón escribió: El vie, 07-04-2006 a las 11:12 +0200, alex escribió: Hola Aquí unos links para degradados con CSS sin emplear imágenes: http://slayeroffice.com/code/gradient/ http://www.designdetector.com/2005/09/css-gradients-demo.php H creo que esas soluciones no son técnicamente una buena idea. El primer enlace utiliza un javascript que modifica el DOM para insertar cientos de nuevos elementos que cargan el navegador de manera innecesaria. El segundo método es más de lo mismo pero sin javascript. Fíjate que [1] es una hoja web con ¡más de 500 div! Sólo el gradiente ocupa más de 50 Kb. Además no es semántico y arruina totalmente un código limpio. No veo un motivo para no utilizar imágenes para un gradiente. Es un fondo de elemento, como otro cualquiera; es estilo y como tal debería ir con CSS, dejando el (X)HTML jústamente para lo que es: marcado. [1] http://www.designdetector.com/demos/css-gradients-demo-2.php Bien dicho Jaime, no veo tampoco el problema de usar imagenes, una imagen de 1px de ancho puede pesar menod de 500 bytes, asi que cual es el problema. Por otro lado, la idea principal de css es separar contenido y presentacion, poder modificar la presentacion sin tocar el html, usando esas cosas se pierde eso. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] DEGRADADOS CON CSS
Hola amigos Yo siempre uso la técnica de una imagen de fondo, tal como exponeis vosotros, pero al ver el mensaje he recordado que hace poco vi estas técnicas y he publicado los enlaces, habré entendido mal la preguna. Estoy totalmente de acuerdo con vuestros planteamientos. Saludos :) On 4/7/06, Ramon Lapenta [EMAIL PROTECTED] wrote: Jaime Gómez Obregón escribió: El vie, 07-04-2006 a las 11:12 +0200, alex escribió: Hola Aquí unos links para degradados con CSS sin emplear imágenes: http://slayeroffice.com/code/gradient/ http://www.designdetector.com/2005/09/css-gradients-demo.php H creo que esas soluciones no son técnicamente una buena idea. El primer enlace utiliza un javascript que modifica el DOM para insertar cientos de nuevos elementos que cargan el navegador de manera innecesaria. El segundo método es más de lo mismo pero sin javascript. Fíjate que [1] es una hoja web con ¡más de 500 div! Sólo el gradiente ocupa más de 50 Kb. Además no es semántico y arruina totalmente un código limpio. No veo un motivo para no utilizar imágenes para un gradiente. Es un fondo de elemento, como otro cualquiera; es estilo y como tal debería ir con CSS, dejando el (X)HTML jústamente para lo que es: marcado. [1] http://www.designdetector.com/demos/css-gradients-demo-2.php Bien dicho Jaime, no veo tampoco el problema de usar imagenes, una imagen de 1px de ancho puede pesar menod de 500 bytes, asi que cual es el problema. Por otro lado, la idea principal de css es separar contenido y presentacion, poder modificar la presentacion sin tocar el html, usando esas cosas se pierde eso. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo -- Alex Folch [EMAIL PROTECTED] ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] DEGRADADOS CON CSS
Nas, De entrada, muchas gracias a todos por las molestias. La pregunta sobre el degradado viene porque tenía una pequeña curiosidad por saber si se podía hacer simplemente con CSS sin utilizar una imagen, que es lo que suelo hacer, como Coke o todos imagino. Y ahora aprovecho la oportunidad - aunque no viene al caso - para solventar otra curiosidad ¿Qué diferencia hay entre el nivel A, nivel AA y nivel AAA? Si tú web cumple la A ¿No debería de cumplir la doble A? ¿Y la triple A? No entiendo el porqué de tantas As. El día 7/04/06, Mikercito [EMAIL PROTECTED] escribió: Según entiendo también es necesario utilizar JavaScript, al margen de ello, muy interesante resultado. Miguel Flores Franco Pixelperu Arte, Diseño, Web y Teletrabajo http://www.pixelperu.com http://www.pixelperu.net Telf.: +511 567 7475 MSN: [EMAIL PROTECTED] VoipBuster: pixelperu SKYPE ID: pixelperu - Original Message - From: alex [EMAIL PROTECTED] To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org Sent: Friday, April 07, 2006 4:12 AM Subject: Re: [Ovillo] DEGRADADOS CON CSS Hola Aquí unos links para degradados con CSS sin emplear imágenes: http://slayeroffice.com/code/gradient/ http://www.designdetector.com/2005/09/css-gradients-demo.php Espero que sean lo que buscabas. Suerte! On 4/7/06, Jaime Gómez Obregón [EMAIL PROTECTED] wrote: Me gustaría saber si se pueden hacer degradados simplemente utilizando CSS, y si es posible cómo puedo hacerlo. Técnicamente no, pero puedes utilizar una imagen con un degradado y utilizar propiedades CSS para dar estilo a los elementos de la web y lograr algunos efectos interesantes con el degradado. ¿Qué es exactamente lo que quieres conseguir? -- Jaime Gómez Obregón Director Comercial ([EMAIL PROTECTED]) ITEISA - www.iteisa.com 942 544 036 - 662 256 006 -- Alex Folch [EMAIL PROTECTED] ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo -- Gema Masegosa. Web personal: http://gmasegosa.sytes.net Un optimista ve una oportunidad en toda calamidad; un pesimista ve una calamidad en toda oportunidad. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] DEGRADADOS CON CSS
Gema Masegosa escribió: Nas, De entrada, muchas gracias a todos por las molestias. La pregunta sobre el degradado viene porque tenía una pequeña curiosidad por saber si se podía hacer simplemente con CSS sin utilizar una imagen, que es lo que suelo hacer, como Coke o todos imagino. Y ahora aprovecho la oportunidad - aunque no viene al caso - para solventar otra curiosidad ¿Qué diferencia hay entre el nivel A, nivel AA y nivel AAA? Si tú web cumple la A ¿No debería de cumplir la doble A? ¿Y la triple A? No entiendo el porqué de tantas As. Enlace sobre niveles de accesibilidad: http://www.sidar.org/recur/desdi/wai/logos.php#nivel ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] DEGRADADOS CON CSS
Gema Masegosa escribió: Y ahora aprovecho la oportunidad - aunque no viene al caso - para solventar otra curiosidad ¿Qué diferencia hay entre el nivel A, nivel AA y nivel AAA? Si tú web cumple la A ¿No debería de cumplir la doble A? ¿Y la triple A? No entiendo el porqué de tantas As. Al revés, si cumple triple A cumple doble A y A Cada A indica un nivel más de accesibilidad. http://www.eurielec.etsit.upm.es/~chema/accesibilidad/wai-a.html http://www.eurielec.etsit.upm.es/~chema/accesibilidad/wai-aa.html http://www.eurielec.etsit.upm.es/~chema/accesibilidad/wai-aaa.html -- Saludos -=stripTM=- ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] DEGRADADOS CON CSS
Vale, ahora lo entiendo jeje.. es al revés. Gracias. El día 7/04/06, stripTM [EMAIL PROTECTED] escribió: Gema Masegosa escribió: Y ahora aprovecho la oportunidad - aunque no viene al caso - para solventar otra curiosidad ¿Qué diferencia hay entre el nivel A, nivel AA y nivel AAA? Si tú web cumple la A ¿No debería de cumplir la doble A? ¿Y la triple A? No entiendo el porqué de tantas As. Al revés, si cumple triple A cumple doble A y A Cada A indica un nivel más de accesibilidad. http://www.eurielec.etsit.upm.es/~chema/accesibilidad/wai-a.html http://www.eurielec.etsit.upm.es/~chema/accesibilidad/wai-aa.html http://www.eurielec.etsit.upm.es/~chema/accesibilidad/wai-aaa.html -- Saludos -=stripTM=- ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo -- Gema Masegosa. Web personal: http://gmasegosa.sytes.net Un optimista ve una oportunidad en toda calamidad; un pesimista ve una calamidad en toda oportunidad. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://ovillo.org/mailman/listinfo/ovillo
