JMiur [E]

Mucho se habla del CSS3 y claro, ¡cómo no hacerlo! Decenas de entradas muestran detalles, ejemplos de aplicación y, por lo general aclaran: estro no funcionará en IE etc etc etc.

Es verdad pero, hay ciertas cosas que sí funcionarán y para ser justos, habría que decir que en realidad, hay ciertas cosas que ya existían en Internet Explorer, desde su versión 5.5 y que recién ahora, los otros navegadores están incorporando. Obviamente, no se trata más que de alguna clase de casualidad pero, bienvenida sea ya que, con las limitaciones del caso, podemos aprovecharnos de ellas.

Ese es el caso de las gradientes, una forma excelente de usar el CSS para generar degradados y reemplazar el uso de ciertas imágenes.

Las gradientes pueden ser utilizadas en la mayoría de los navegadores y entre otras cosas, nos permiten generar botones de aspectos "sofisticados". Vamos a los ejemplos más sencillos donde la clave está en el uso de estas tres propiedades:

-moz-linear-gradient(); en Firefox
-webkit-gradient(); en Safari y Chrome
DXImageTransform.Microsoft.Gradient(); en Internet Explorer

Cada navegador tiene su regla y en este caso, son muy diferentes así que vamos a hacerlo de la manera más sencilla posible para que no haya diferencias. En IE, como se trata de un filtro que ya tiene muchos años de existencia, las posibilidades son menores así que nos basamos en ese modelo y creamos un botón, por ejemplo:
<a href="#" class="boton">mi botón</a>
.boton {
color: #FFF;
display: block;
font-family: Tahoma;
font-size: 40px;
height: 50px;
line-height: 50px;
position: relative;
text-align: center;
text-decoration: none;
width: 300px;
}

No se ve nada más que el texto así que vamos a ponerle un fondo usando gradientes y hacer que cambie al poner el cursor del ratón encima:
<a href="#" class="boton demo1">mi botón</a>
.demo1{
background-image: -moz-linear-gradient(100% 100% 90deg, #222222, #BBBBBB);
background-image: -webkit-gradient(linear, 0% 100%, 0% 0%,from(#222222), to(#BBBBBB));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#BBBBBB', EndColorStr='#222222');
}
.demo1:hover{
background-image: -moz-linear-gradient(100% 100% 90deg, #222222, #DDDDDD);
background-image: -webkit-gradient(linear, 0% 100%, 0% 0%,from(#222222), to(#DDDDDD));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#DDDDDD', EndColorStr='#222222');
}
En los tres casos, la gradiente es horizontal (en IE sólo hay dos tipos disponibles) y los valores hexadecimales indican los colores desde #222222 (el color más oscuro) hasta #BBBBBB (el color más claro) y lo que hacemos en el efecto hover es que ese color final sea aún más claro lo que lo "ilumina".

Ahora, lo mismo pero con otros colores:
<a href="#" class="boton demo2">mi botón</a>

.demo2 {
background-image: -moz-linear-gradient(100% 100% 90deg, #220000, #FF0000);
background-image: -webkit-gradient(linear, 0% 100%, 0% 0%,from(#220000), to(#FF0000));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF0000', EndColorStr='#220000');
}
.demo2:hover {
background-image: -moz-linear-gradient(100% 100% 90deg, #220000, #FF8800);
background-image: -webkit-gradient(linear, 0% 100%, 0% 0%,from(#220000), to(#FF8800));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF8800', EndColorStr='#220000');
}

Y algo similar pero con una gradiente en el otro sentido:
<a href="#" class="boton demo3">mi botón</a>

.demo3 {
background-image: -moz-linear-gradient(100% 100% 135deg, #FF3300, #FFFF00);
background-image: -webkit-gradient(linear, 100% 100%, 0% 0%,from(#FF3300), to(#FFFF00));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#FFFF00', EndColorStr='#FF3300');
}
.demo3:hover {
background-image: -moz-linear-gradient(100% 100% 135deg, #FFFF00, #FF3300);
background-image: -webkit-gradient(linear, 100% 100%, 0% 0%,from(#FFFF00), to(#FF3300));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#FF3300', EndColorStr='#FFFF00');color:#000 !important;
color: #000;
}

15 comentarios:

Manfenix  

Efecto simple, práctico y elegante. Probando... :)
Gracias

Responder
Graciela  

Una beleza! sospecho que estás utilizando en el blog algo así?

Buen día Jmiur :D

Responder
JMiur  

Sí, es algo que también estoy usando :D

Responder
Garabato  

Gracias, simplificaste y justificaste mis días de esta semana. Léase: ¡¡sacaste un par de conejos de mi galera vacía!! GRACIAS DE NUEVO!!

¡¡Sigo en carrera, gentesssssssss!!

Responder
Raul  

Tengo un problema, me funciona en Firefox y en Chrome (los dos navegadores que tengo instalados) pero no me funciona en IE (me vino con mi XP) no sé que hago mal he revisado el código mil veces y no sé porque en IE no funciona, pongo esto:
.Div{
background-image: -moz-linear-gradient(100% 100% 90deg, #222222, #BBBBBB);
background-image: -webkit-gradient(linear, 0% 100%, 0% 0%,from(#222222), to(#BBBBBB));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#BBBBBB', EndColorStr='#222222');
}
todo eso después de y antes de ]]>

Responder
Nena  

Hola! muy buen post, en verdad que muy sencillo :)
es pla primera ves que visito tu blog y en verdad quede fascinada :P
Felicidades por el blog y gracias por los consejos.

Responder
Los peque de la BiBliO  

Buen día, sólo quiero decir: "que al que madruga dios lo ayuda" NO ES CIERTO

Martes malo, malo... Bye JMiur, probaré con otra cosa

Responder
JMiur  

:D

Responder
LuzdeLuna  

Hola JMiur! mi blog con los gradientes que explicas, quedó hecho una pinturita!! :) claro que si lo veo con firefox, porque me pasa lo mismo que Raúl, en el IE no se ve nada! jaja un asquete y eso que tengo el IE8. Los acepta en un post como fondo, pero no en los botones de la sidebar o en cuadritos que por ahi pongo.
Lo mismo que los bordes a pesar que escribo todo el código.
Qué bronca! tendré que sacar estos colores tan bonitos?
Un abrazo

Responder
JMiur  

Luz:
habría que ver caso por caso. En la sidebar, veo que lso títulos sestán perfecto. En los posts, vero, por ejemplo, que en un recuadro llamado ejemplo1, lo que hay es un error de sintaxis; dice:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#660000;, endColorstr=#1e0000;);

y allí, hay dos puntos y comas erróneos después de los colores; debería ser:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#660000, endColorstr=#1e0000);

Así, en generla, en IE, los filtros se aplican sólo a elementos de bloque es decir, que tengan una dimesión; eso puede ser otro problema en ciertas etiquetas.

Responder
LuzdeLuna  

Arreglado! me deberias prestar la lupa que usas para encontrar esos errores!!jaja Muchas gracias! ahora el cuadro se ve.
Con respecto a la sidebar con sus botones, debería verse si el código esta bien, no es así? porque el menú de arriba si se ve sin problemas y es el mismo de la sidebar! |O
El IE es...:X

Responder
JMiur  

Como los filtros funcionan sólo en ciertas condiciones, hay que verificar bien la sintaxis pero, también es posible que cierta etiqueta requiera que se coloque width height o bie position:relative. Son limitaciones importantes pero ... es lo que hay :-)

Responder
JMiur  

Luz:
Agrego algo al comentario.
El blog se ve fantástico :-D

Responder
LuzdeLuna  

:D aisss JMiur, siempre tan bondadoso!! ese fantástico vale lo que mil comentarios para cualquier bloguero!:P
naaaa en serio, tus explicaciones y los truquitos que nos enseñas hace q nuestros blog esten cada día más vistosos y funcionales!... jaja eso cuando blogger nos deja en paz! (o el IE q es una...:X )
bue, al final los botones los hice con una imagen, sino IE no me lo aceptaba, y eso q la pelee eh! y aproveche tu consejito de position y valores (alto y ancho) para ordenar mis cajitas!! Gracias!!!

Responder
JMiur  

Perfecto, Liz; cualquier método es válido.

Nada que agradecer; ese blog es el resultado del buen gusto y punto; el resto sólo son técnicas y poco más que eso :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR