JMiur [E]

Última parte de este tema. Opacidad, transparencias, filtros, herramientas que vale la pena conocer.

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. En Internet Explorer, es filter:alpha(opacity=valor) y en Firefox es opacity:valor
filter:alpha(opacity=valor) un valor entre 0 (transparente) y 100 (opaco)
opacity: un valor entre 0.0 (transparente) y 1.0 (opaco)
Si el elemento contiene otro elemento, ambos son afectados

Sería lógico que todos los navegadores usaran el mismo juego de instrucciones y que los resultados fueran los mismos, pero eso no es así ¿Se debe elegir entre uno y otro? En este caso no hace falta, basta incluir ambas propiedades en el estilo. Si un navegador encuentra un código que no puede interpretar, simplemente lo ignora y continúa adelante. El siguiente ejemplo debería verse igual en ambos:


NOTA POST EDICIÓN:
Esto es cierto pero, por razones que escapan a mi entendimiento, Blogger se rehusa a dejar algunos filtros cuando se edita un post. Se pueden escribir pero desaparecen cada vez que se guarda. Por ejemplo, si uso Firefox desaparecen los de Internet Explorer. Los únicos que permanecen ajenos a esta censura son los que están incluidos en una rutina JavaScript.

Cansado de buscar una explicación resolví cortar por lo sano y creé una serie de clases que incluí en la plantilla. Mi método primitivo fue el siguiente:
.trans25 {opacity:0.25; filter:alpha(opacity=25);}
.......
.trans50 {opacity:0.50; filter:alpha(opacity=50);}
Puse tantas como necesitaba y seguí adelante, tal vez alguien pueda darme alguna solución más razonable. Fuera de Blogger, el uso de clases es optativo y las propiedades pueden agregarse directamente en el atributo STYLE de cualquier elemento.

Vencido y un poco harto, continúo con el tema.

La forma usual de usar estos filtros es anidando bloques. Por ejemplo:
<div ....... [ 1 ] ....... >
<div ....... [ 2 ] ....... >
<div ....... [ 3 ] ....... >
....... cualquier código HTML .......
</div>
</div>
</div>
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
En todos los casos, se agregó lo siguiente:
style="filter:alpha(opacity=40);opacity:.40;"
y en Blogger
class="trans40"
En el primer ejemplo se agregó en DIV [ 1 ], por lo tanto, todos los demás elementos se vuelven transparentes ya que están incluidos en él. En el segundo ejemplo se agregó en DIV [ 2 ] con lo que su contenedor, DIV [ 1 ] permanece opaco. En el tercer caso en DIV [ 3 ], por lo tanto, sólo su contenido se hizo transparente.

También es posible combinar imágenes con fondos de algún color para cambiar la tonalidad:







La estructura del código es la siguiente:
<div style="width:ancho; height:alto; background:color;">
<div style="width:ancho; height:alto; background:url(URL_imagen);
filter:alpha(opacity=75); opacity:.75;">
</div>
</div>
y en Blogger
<div style="width:ancho; height:alto; background:color;">
<div class="trans75" style="width:ancho; height:alto; background:url(URL_imagen);">
</div>
</div>
Como aplicación práctica, este filtro puede ser interesante para crear un efecto rollover.





¿Cómo funciona? Inicialmente, establecemos que la imagen tenga una cierta transparencia (en el ejemplo está al 40%) y luego, utilizamos dos de los llamados eventos para detectar cuando el cursor del ratón está sobre la imagen. Si es así, eliminamos la transparencia (opacidad = 100%) y por último, cuando detectamos que el puntero ya no está sobre la imagen, volvemos a hacerla transparente.

Los eventos están asociados a algún tipo rutina JavaScript y estos se ejecutan sobre casi todos los elementos HTML:
onmouseover="... instrucciones ..."
el puntero del ratón está sobre el elemento

onmouseout="... instrucciones ..."
el puntero del ratón salió del elemento

onclick="... instrucciones ..."
se hizo click sobre el elemento
ondblclick="... instrucciones ..."
se hizo doble click sobre el elemento

onmousedown="... instrucciones ..."
se oprimió el botón del ratón sobre el elemento

onmouseup="... instrucciones ..."
se soltó el botón del ratón sobre el elemento

onmousemove="... instrucciones ..."
el puntero del mouse se mueve sobre el elemento
¿Pero es necesario saber JavaScript? No, basta saber que una rutina que permita cambiar una propiedad de estilo del elemento se escribe con este formato:
this.style.propiedad='valor';
por ejemplo:
this.style.opacity='1';
y si queremos cambiar dos o más, las separamos con un punto y coma:
this.style.opacity='1'; this.style.filter='alpha(opacity=100)';
el valor siempre debe ir entre comillas simples
Por ejemplo, para cambiar la opacidad al pasar el cursor hay que agregar:
onmouseover="this.style.filter='alpha(opacity=100)'; this.style.opacity='1';" 
El código completo para una de las imágenes del ejemplo sería:
<img width=valor height=valor src="URL_imagen"
style="cursor: pointer; filter:alpha(opacity=40);opacity: 0.4;"
onmouseover="this.style.filter='alpha(opacity=100)'; this.style.opacity='1';"
onmouseout="this.style.filter='alpha(opacity=40)'; this.style.opacity='0.4';" />
Una forma menos engorrosa sería crear un clase e incluirla en la hoja de estilo de la plantilla:
a.efecto img {
filter:alpha(opacity=40);
opacity: 0.4;}

a.efecto:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
}
Y en su forma más simple la deberíamos usar así:
<a class="efecto" href="URL_vinculo">
<img src="URL_imagen" />
</a>

IMÁGENES EN BLOGGER
  • Introducción

  • Bordes

  • Posicionamiento


  • REFERENCIAS
  • w3.org HTML

  • w3.org CSS

  • 17 comentarios:

    JAMESEE-ST-SMILE  

    life just good

    Responder
    CaTa  

    Respuesta:
    有什么 有么网址 有什新闻 有什么博客 有什, asi que mas te vale!
    Firma:&%$)(·:D

    Responder
    JMiur  

    Pués nadie podría haber expresado mi pensamiento mejor que tú.

    Adhiero calurosamente a esas palabras. Aunque tal vez, debería disentir con eso de ??? ya que personalmente creo que es mejor ??. Una sutileza de mi parte que no hace al fondo de la cuestión.

    Responder
    Ca什a  

    Se acepta la sutiliza, creo que le da mas profundidad al planteo. La verdad es que ??? suena un poco rudo,lo defines mejor asi ??, de tal manera que 有么+??.considerando que ??? no es = a 什么, se explica perfectamente. Clarísimo :D

    Responder
    Nico  

    Los signos de interrogación son de que estaba preguntando cordialmente si era posible introducir un poco de SPAM sin que ello causara molestia :D

    Jamesee-st-smile: Yes, life just good, and your blog is awesome!!

    Responder
    CaTa  

    Nico,Nous sommes très internationaux, cela est très bon!alors

    Responder
    N?co  

    Jajaja, Google Translate è impressionante troppo xD

    Responder
    CaTa  

    Google Ist ein Gott :)

    Responder
    JMiur  

    ¿El relajo no era en otro blog?

    PD: aprovechemos el spam

    PDD: Google no es para tanto:
    Google povi ne traduki de esperanto :D

    Responder
    Claudio - Poca Tinta  

    Hola Jmuir, se podra crear algo como unas viñetas o bocadillos tipo comics en una imagen, osea con bordes ovalados... se veria interesante el efecto transparente.

    Saludos

    Responder
    JMiur  

    Imagino que es posible, debería ver un modelo aunque sea preliminar de lo que quieres hacer para entenderlo claramente.

    Responder
    Claudio - Poca Tinta  

    Algo asi como lo que hice en este post, como te daras cuenta lo hago en la misma imagen (viñetas o bocadillos) con un procesador grafico, seria interesante poder hacer algo similar con lo que indicas en este post...

    Me parece haber visto en un blog de diseño que le perdi el rastro.

    Saludos

    Responder
    JMiur  

    No sé si esto responderá la pregunta pero, un esquema básico sería:

    el primer bloque tiene la imagen de fondo
    <div style="background: transparent url(imagenFondo)
    repeat;width:anchopx;height:altopx;">

    el segundo bloque el globo o cualquier otra imagen que se superponga a la anterior
    <div style="background: transparent url(imagenGlobo) no-repeat;
    position:relative;left:valorpx;top:valor0px;
    width:anchopx;height:altopx;">

    el último bloque es el texto
    <div style="position:relative;left:valorpx;top:valor0px;">
    EL TEXTO
    </div>

    </div>
    </div>

    Responder
    CHIC-HANDSOME  

    comment tu vas?
    -jamesee-st-smile

    Responder
    Admin  

    Oje jmiur tengo una duda que quiero hacer en mi blog como le ago para que por ejemplo que este una imagen y que al momento de pasar el mouse por ella cambie a otra imagen, lo quiero poner una imagen en el footer de la pagina pero al momento de pasar el mouse cambie por otra? se puede ?

    Responder
    JMiur  

    Hay muchas formas; la tradicional es la explicada acá. Otro método interesante es utilizar sprites.

    Responder

    ¿Quiere dejar un comentario?

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

    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