Hace 17 años | Por tarkovsky a designdetector.com
Publicado hace 17 años por tarkovsky a designdetector.com

Un buen experimento: degradados con css sin tener que utilizar imágenes. Si miráis el código veréis que en realidad es muy simple (aunque laborioso)

Comentarios

tarkovsky

No sé, depende del tamaño que quieras para el degradado: si quieres que ocupe toda la pantalla, y con las pantallas tan enormes que hay ahora..., a una resolución grande tu degradado se va al carallo.

gallir

Bueno, estos bárbaros que proponen estas soluciones es que no tienen idea de cómo funciona el "parsing" de un XHTML/CSS, el árbol que hay que construir y los costos asociados de recorrer y dibujar árboles enormes (además de los problemas semánticos que ya se mencionaron).

tarkovsky

Te hago un copy-paste de una entrada en los comentarios:

"A few people don't get the idea behind this demo. It's not meant as a direct replacement for all background images. Nor a real-world example to use straight away. No, it is a demo. Why bother? Because it is dynamic. With simple code you can do anything you want with the gradients. Think about it. "

tarkovsky

sí, esa es la solución, rellenar el tope con el tono más bajo, pero ya no existe el degradado, ¿o no?

tarkovsky

Creo que no me explico bien #13, esta es la solución que propones:
http://www.solserpiente.net/pruebas.html

Es buena, pero pon tu pantalla a una resolución de 1600 x 1200px. El degradado se acaba por que la imagen no se estira, la solución sería poner abajo el morado... pero ya no sería el degradado que yo estaba buscando. O hacer un fondo de imagen de 1600 x 1200 px, pero entonces en las pantallas más pequeñas no sería tampoco mi degradado.

Lo que sería estupendo es que el degradado se comportara igual sea cual sea el tamaño de pantalla; y no sé si se podrá hacer, pero yo no sé hacerlo.

tarkovsky

Perdón, me refería al comentario #7: sí, lo estiras, hasta que alcance el tamaño máximo de la imagen. Después ya no hay más degradado (o peor aun, se repite, pero empezando desde el principio)

tarkovsky

Te equivocas #5, porque el div es elástico, pero la imagen de fondo no se puede estirar como una goma

tarkovsky

Tienes razón en lo último, también se perdería el degradado. Pero se me ocurre que podría estar curioso el efecto poniendo puntos de tipografía de colores diferentes en cada uno de los divs, salteándolos y tal...
Aunque puede ser como volver a inventar la rueda para fabricar un coche.

M

#5 con un diseño elastico, lease en porcentajes, una imagen con degradé repetida en X o Y no tiene porque perderes

rb3m

Por lo menos el degradado lo haces con php, así que no es realmente tan laborioso, pero el código resultante no es nada elegante. Espero que CSS3 tenga alguna manera de crear degradados.

Johan

Joder, menuda burrada. Llego yo a contratar un diseñador que me hace eso y lo echo a la calle a patadas, pero no sin antes tragarse los 255 divs.

Si quieres un degradado dinámico móntate un script cgi/python/perl/loquetedelagana que te monte la imagen dinámicamente, pero no hagas eso por dios...

guillem

Con gráficos se puede hacer lo mismo pero sin la salvajada. Y si usas SVG más. No, no me importan en absoluto los navegadores obsoletos que no pillan SVG.

angelitoMagno

#3 No, si como experimento es buena idea. Incluso se puede hacer que todos esos divs se generen mediante un javascript externo, con lo que el código del gradiente no estaría en el html, separando así contenido de diseño. Pero lo veo demasido follón la verdad.

Además habría que ver como quedaría en una página que se extienda en vertical, un blog, por ejemplo. En ese caso estaríamos ante el mismo problema que con una imagen, llegado a cierto punto se pierde el degradado.

J

Una chapuza en toda regla.
Una cosa es usar CSS en condiciones y otra usarlo para todo, y por tanto haciendo las virguerías necesarias para conseguir lo que sea. Y en este caso, es una virguería para conseguirlo sin usar una imagen que ocupa mucho menos que todo el tocho de código que se ha usado para conseguir el mismo efecto.

Y como dice #8, si tengo a un diseñador que me hace eso, no le echaría porque tiene valor hacer eso, pero le pongo a hacer todas las imágenes con css, para que continúe 'practicando'

D

tarkovsky, también se puede hacer un apaño creando un div para el fondo, el cual estaría fijo y, lógicamente, por detrás, con el degradado. Así no se perdería el diseño que tenga.

D

#15, no, precisamente esa es la que no propongo. La que yo digo es hacer el degradado mediante spans o divs insertados en un div fijo de fondo. Así, al poner la altura de los div interiores en porcentaje, se podría adaptar al tamaño de la pantalla. Quizás este método añadiría una pequeña sobrecarga, al tener que usar JS (en algunos navegadores) para ajustar la altura del div de fondo al tamaño de representación del navegador.

M

#10 uh, repitiendo en X con una imagen de 1px de ancho llega a todo lo largo del div, y en una vertical tiene un tope pero el resto lo llenas con el tono mas bajo del degrade

MarcosBL

Puestos a rizar el rizo (y siempre que sea un degradado de color a blanco) podemos hacer un png o gif que tenga un degradado de transparencia y ponerlo como frente cambiando el color de fondo... asi tendremos una imagen de todas formas, pero con todas las variaciones de color. He dicho. Creo.

cor3

Realmente prefiero poner una imagen

Algo chulo con css son las casita estas…

http://www.designdetector.com/tips/3DBorderDemo2.html
http://www.designdetector.com/demos/css-house-2.html

pero como curiosidad no para usarla en una pagina web..!

mudito

Amos no me jodas. Decir que eso es un degradado con CSS es como decir que una caja de cartón es una casa. (errr sí, técnicamente lo es, pero ¿vivirías en ella?)

r

Para utilizar CSS y terminar haciendo una gran chapuza,... mejor utilizar imágenes, como ya habéis dicho muchos por aquí.

D

Joder... pero vamos a ver, hoy en dia hay banda ancha ¿tanto supone poner una imagen de N x 1 pixeles que ocupará unos 4 o 5 k?