JMiur [E]

Aunque hay algunas referencias al tema de las transparencias en otro post, esta es una explicación rápida tratando de contestar a varias consultas sobre el tema.

La transparencia (o su opuesto, la opacidad) de un elemento puede ser modificada mediante el uso de una propiedad especial que difiere según sea el navegador que utilizamos. Por eso, porque cada uno las trata de manera diferentes es que debemos usarlas todas si queremos que nuestro blog se vea correctamente.

Hay dos propiedades básicas, hacen lo mismo pero cada uno es exclusiva de un navegador:

opacity: valor (valores entre 0 y 1) es el standard aceptado y funciona en Firefox, Safari y Opera.
filter:alpha(opacity=valor) (valores entre 0 y 100 es la propiedad a usar en Internet Explorer.

Este sería un ejemplo del uso de la propiedad para obtener una transparencia del 50%:
.tranparente {
filter:alpha(opacity=50);
opacity: 0.5;
}

El uso de esta propiedad depende de cada uno de nosotros. Lo más común es hacerlo en los enlaces, utilizando el evento onmouseover:
Podemos hacerlo de dos maneras, incluyendo el estilo en la plantilla:
a:link, a:visited { /* el enlace tiene cierta transparencia */
filter:alpha(opacity=70);
opacity: 0.7;
}
a:hover { /* que desaparece al pasar el mouse */
filter:alpha(opacity=100);
opacity: 1;
}
O bien lo podemos hacer directamente en un enlace específico:
<a href="direccionURL">
<img src="URLimagen" 
style="filter='alpha(opacity=70)'; opacity='0.7';" 
onmouseover="this.style.filter='alpha(opacity=100)'; this.style.opacity='1';" 
onmouseout="this.style.filter='alpha(opacity=70)'; this.style.opacity='0.7';" />
</a>

15 comentarios:

Marcos  

Que buen truco, vamos a ver si me sale.

Oye Jmiur, alguna vez estuviste penalizado en posiciones?

Resulta que una vez publique como 60 entradas por dia, porque estaba haciendo mi web, que no era un blog. Y al poco tiempo me fui a los ultimos lugares.

No es conveniente hacer eso de publicar tanto creo.

Responder
Monoblock  

Tengo un blog y no se si me pasa solo a mi pero no me actualiza los Post y cuando creo uno nuevo no aparece pero si aparece en la seccion entradas.

Esto te pasa a vos o hay un problema con mi blog?

contestame please.

Responder
JMiur  

Marcos:
La verdad, nunca me ocurrió. Hay una limitación en la cantidad de entradas diarias, Blogger no permite que agreguemos más de 50 posts diarios. De cualquier manera, los robots de Google tienen reglas que sólo ellos entienden si es que tienen alguna.

Monoblock:
No he visto nunca ese problema.
¿Tienes algún mensaje de Bogger respecto a que tu sitio haya sido bloqueado? ¿Puedes editar y publicar pero no se muestran las entradas?

Responder
Monoblock  

No se muestran pero en la seccion entrada me dice que estan publicadas, las vuelvo a editar y todo pero no me aparece los cambios en mi blog y ya probe en otras CPU y hace lo mismo, insolito este problema.

Acabo de ver han hecho algunos cambios y actualizaciones en Blogger quiza es por eso pero no se.

Responder
JMiur  

La verdad, no tengo idea qué puede ser. También probaría crear un blog de pruebas con la misma cuenta a ver qué ocurre.

Responder
Fender Stratokaster  

¡Qué bonito!

Jejeje, me estoy volviendo adicto a estas cosas.

Thanks!

Responder
JMiur  

Jajaja, está bien, es bueno experimentar un poco y luego decidir qué nos sirve y que no nos sirve :D

Responder
Rosendo Ramírez Aquino  

JMiur lo he usado en "directamente en un enlace específico", pero como hago para que mi imagen aparezca opaca desde el inicio y no hasta que le paso el mouse por encima?...

Responder
Alicia  

Hola JMiur quería preguntarte una cosa sobre este tema, a los enlaces especificos junto a la opacidad ¿es posible ponerles una transición?

Por cierto, normalmente comento como Artemisa, me he quitado el nombre "Artístico" :D

Responder
JMiur  

Hola Alicia:

Sí, las transisicones pueden aplicarse a casi cualquier etiqueta así que si colocas la propiedad transition en el enlace y este tiene un efecto hover, se verá.

Responder
Alicia  

Muchas gracias JMiur, el problema es que no se de que manera colocarlo en este enlace.

onmouseout='this.style.opacity=0.2;this.filters.alpha.opacity=20' onmouseover='this.style.opacity=1.0;this.filters.alpha.opacity=100' src='URL' style='opacity:0.2;filter:alpha(opacity=20)' title='Título'

quería usar una imagen como enlace que aparezca al pasar el cursor pero que lo haga con una transición ¿me podrias decir como ponerlo?

Gracias.

Responder
Rosendo Ramírez Aquino  

JMiur me respondes el comentario #8 please :(

Responder
JMiur  

Rosendo Ramírez Aquino
Opaca significa que será visible de modo normal así que por defecto, siempre se verá de ese modo; si lo que quieres es lo inverso, que sea transparente (no visible) usas opacity:0 en la imagen y opacity:1 en el hover pero será difícil de entender para los usuarios.

Alicia
Si se trata de ponerlo inline, es decir, con ela tributo style en al misma etiqueta, se hace lo mismo pero será muy engorroso de escribir ya que deberás colocar todas las variantes de la propiedad para los distintos navegadores; por ejemplo:

&lt:a style="-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;-ms-transition:all 1s;transition:all 1s;opacity:0.2;filter:alpha(opacity=20)" ....

te conviene crear una clase y crear la regla de estilo:

&lt:a class='ejemplo' src='URL' title='Título'>

.ejemplo {
opacity:0.2;
filter:alpha(opacity=20)
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
-ms-transition:all 1s;
transition:all 1s;
}
.ejemplo:hover {opacity=1;filter:alpha(opacity=100);}

Tendría que ver tu ejemplo concreto para entender mejor la idea.

Responder
Alicia  

mil gracias JMiur, me has ahorrado estar escribiendo una y otra vez lo mismo.
Lo necesitaba para el menú de una plantilla que estoy modificando, las pestañas del menú son imagenes y necesitaba cada una en un enlace independiente.

Solucionado, ahora queda perfecto.

Responder
JMiur  

Ah, perfecto, Alicia, siendo así, lo mejor es eso, usar una clase ahorra tiempo.

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