Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Opacidad en imágenes

Usando unas cuantas propiedades CSS en un código podemos conseguir grados de opacidad muy diversos y que después podemos aplicar a imágenes en nuestras entradas, en la barra lateral o en zonas del blog.

En esta entrada explicaré tres formas distintas de conseguir opacidad en imágenes.

Los ejemplos haremos uso de esta imagen (la cual no tiene opacidad)


Opacidad normal

A continuación te mostraré los principales grados que podemos obtener aplicando distintos porcentajes pero ten en cuenta que podrás editarlos.

Opacidad en imágenes


Estos son los códigos necesarios para aplicar la opacidad de los ejemplos. Puedes colocar el código tanto en una entrada, en la pestaña de Edición de HTML...


Como en un elemento html-javascript (gadget) del apartado de Diseño.

Opacidad 60%:

<img style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);filter:alpha(opacity=60);-moz-opacity:0.6;opacity: 0.4;-khtml-opacity: 0.6;" src="URL DE TU IMAGEN"/>

Opacidad 50%:

<img style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;-khtml-opacity: 0.5;" src="URL DE TU IMAGEN"/>

Opacidad 40%:

<img style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40);-moz-opacity:0.4;opacity: 0.4;-khtml-opacity: 0.4;" src="URL DE TU IMAGEN"/>

Opacidad 30%:

<img style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);filter:alpha(opacity=30);-moz-opacity:0.3;opacity: 0.3;-khtml-opacity: 0.3;" src="URL DE TU IMAGEN"/>

Opacidad 20%:

<img style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);filter:alpha(opacity=20);-moz-opacity:0.2;opacity: 0.2;-khtml-opacity: 0.2;" src="URL DE TU IMAGEN"/>

Opacidad 10%:

<img style="-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);filter:alpha(opacity=10);-moz-opacity:0.1;opacity: 0.1;-khtml-opacity: 0.1;" src="URL DE TU IMAGEN"/>

Pero como esto no es todo lo que se puede hacer con la opacidad en imágenes, vamos a ver otra forma de utilizar este truco: la creación de un efecto al pasar el cursor.

"Toca" las siguientes imágenes con el cursor para comprobar el resultado:


¿Te gusta? Aquí tienes los códigos necesarios:

Imagen normal y opaca al pasar el mouse:

<img style="opacity:1.0;filter:alpha(opacity=100)" onmouseover="this.style.opacity=0.3;this.filters.alpha.opacity=30" onmouseout="this.style.opacity=1.0;this.filters.alpha.opacity=100" src="URL DE TU IMAGEN"/>

Imagen opaca y normal al pasar el mouse:

<img style="opacity:0.3;filter:alpha(opacity=30)" onmouseover="this.style.opacity=1.0;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.3;this.filters.alpha.opacity=30" src="URL DE TU IMAGEN"/>

Al igual que anteriormente, estos códigos también pueden utilizarse en entradas o gadgets (elementos de página) de la barra lateral.

Nota:
En cada código debes reemplazar URL DE TU IMAGEN por la dirección de tu icono o imagen [+].

Espe dice...

que de cosas nos enseñas...he puesto lo de los comentarios

La gata sobre el tejado dice...

Hola Jaime,te acabo de conocer por otro blog y me parece que el tuyo es muy interesante,veo que te gustan los animales,eso ha sido decisivo para empezar a seguirte,yo tengo dos gatas,alguna sugerencia para que se hagan amigas? La nueva no puede ni ver a la otra,las tengo que tener separadas y es un infierno la convivencia,bueno si sabes algo y me puedes orientar te lo agradecería.
Besos

Aurora dice...

Sigo experimentando con esto de las imágenes... ^_^

Aurora dice...

Perdona, mira, aparte de la idea del menú con enlaces a las etiquetas, he visto una barra lateral que no tengo la más remota de cómo hacerla. Es la de esta página (la barra que aparece a la derecha) http://www.gurusblog.com/archives/guardado-datos-buscadores-google-ilegal/03/03/2010/. Si puede serte útil como idea, me alegro :)

Jaime Trujillo Escobedo dice...

¡Magnífico Espe! Esa nube queda espectacular y veo que, como indiqué en la entrada, la pusiste al final de la barra lateral para evitar que el blog se demore al cargar ;).

Jaime Trujillo Escobedo dice...

¡Cierto La gata sobre el tejado! acabo de leer el artículo que escribió acuruxamai (¡mil gracias!) y leí tu comentario.

Así es, me encantan los animales. En cuanto a lo de tus gatas... creo que es mejor explicarlo en un artículo (podré darte más detalles y estará mejor explicado). Además, voy a reformar todas las categorías durante este verano por lo que agregaré nuevas entradas en la categoría "Gatos" :D.

¡Abrazos!

Jaime Trujillo Escobedo dice...

Aurora, en breve añadiré a la entrada el como personalizar los porcentajes de opacidad para facilitarte la experimentación.

Si necesitas ayuda en algo dímelo.

La gata sobre el tejado dice...

Muchas gracias Jaime,estaré encantada de leer tus entradas,sobre todo las de los gatos.
Mil gracias

Fuentecillas dice...

Hola Jaime.
Anda tu pica que te pica, y claro yo que no controlo pues ya la he mangado¡¡¡¡.
En otra cosa, que esta no la he probado, pero miedo me da.
¡¡ Ah¡¡ que chiquillo .
Bueno pero nos enseñas mucho , claro la mayoría de las veces acierto, aunque sea un poco la torpe .
Ya te lo cuento en el post referente a la que he preparado.ja...ja.
Gracias por todo .
Fuen

Jaime Trujillo Escobedo dice...

Y yo estaré encantado de tenerte por El Balcón, La gata sobre el tejado ;).

Jaime Trujillo Escobedo dice...

¡AAAAAy Fuentecillas! ¡Pero pregúntame! De veras, si deseas hacer algo en especial, aplicar opacidad a tus imágenes, editar el porcentaje de opacidad, crear un botón para tus lectores, cualquier cosilla... solo dímelo y te ayudaré con las más sencillas indicaciones.

¡Un abrazo!

Cocofansclub dice...

Jaime!y a mi no me ayudas???:(
ya te he dejado varias preguntas y nada....
besitoss
todo bien,se que no tienes mucho tiempo!
claudia

Fuentecillas dice...

Hola Jaime
¡¡ qué estrés te pillarías¡Yo por hacer todo y todo.
Pero , el tiempo es limitado, iré poco a poco.Además del peligro que tengo con esto del Internet.
Por cierto, como mamá que soy ¡¡ Esos exámenes gordos qué tal van¡¡

Jaime Trujillo Escobedo dice...

Hola Fuentecillas! Seguro que poco a poco conseguimos solucionar todas tus dudas y ya verás como consigues el blog que deseas. ¿Los exámenes? Acabo de terminar! Todo ha ido de maravilla y por suerte vuelvo con vosotr@s.

Jaime Trujillo Escobedo dice...

Claudia, por supuesto que intento ayudarte pero acabo de terminar los estudios y aún estoy respondiendo correos antiguos.

Desde que tenga un ratito te ayudo en todo lo que pueda ;).

Jaime Trujillo Escobedo dice...

Mil gracias Aurora! Lo tendré muy en cuenta ya que la sidebar dividida en secciones usando tabs o pestañas nos permite ahorrar mucho espacio y tiempo en cargar en el blog. Es muy probable que veas pronto una entrada al respecto.

Roger Casco dice...

estimado Jaime necesito su consejo.

¿Como instalada este truco para realizar el efecto en sus seguidores, podria por favor enseñarnos?

Quiero hacerlo en mi blog a mis seguidores de google y tambien la Faces de FACEBOOK, por favor enseñenos como aplcia este efecto, gracias

http://visiondeprofetas.blogspot.com

Jaime Trujillo Escobedo dice...

Hola Roger. Para aplicar el efecto opacidad al gadget de seguidores accede a esta entrada. Encontrarás la correspondiente explicación en el comentario número 14.

Con respecto a la segunda petición, debo decirte que aún no he publicado ningún truco para incluir los emoticones de facebook en blogger.

¡Saludos!

Roger Casco dice...

WOW!!!!! me dio por ver el blog otra vez y me sorprende que rapido atendio mi respueta, le agradezco esto.

Quiero decirle que http://visiondeprofetas.blogspot.com mi blog, todo lo que ve ha sido con su apoyo, no sabia nada de nada sobre blogs y ahora todo lo que se y lo que he logrado ha sido solo mediante su apoyo por medio de este blog y algunas otras colaboraciones del blog el escaparate de rosa, gracias

Jaime muchas Gracias, Dios le ama y le necesita, espero tenga a J3esucristo en su corazón, gracias por estos aportes tan geniales.

Gracias

Jaime Trujillo Escobedo dice...

Roger Casco, me llena de entusiasmo poder ver tantos artilugios en un blog asi de bonito. Felicitaciones por el esfuerzo que estás haciendo.

Gracias por el comentario y por tanta amabilidad y valoraración de los artículos que publico.

¡Recibe un fuerte abrazo!

Carol dice...

Hola Jaime, esto es lo que estaba buscando, aunque me falta algo, ¿sabes cómo hacer que esas imágenes lleven a un enlace? O sea, hacer que una imagen al pasar el cursor por encima se vuelva normal y al hacer clic lleve a un enlace, es la idea de los cuadritos de este blog: www.letrasyescenas.com está en la barra lateral

Muchas gracias

Jaime Trujillo Escobedo dice...

Lo que buscas es muy fácil de conseguir, Carol.

En esta entrada explico como hacer que una imagen actúe como botón para acceder a cualquier sitio web.

En el caso de este truco, utiliza este código:

<a href="DIRECCION">CODIGO IMAGEN OPACIDAD</a>

Reemplaza DIRECCION con la URL de la página web o el blog que deseas vinculat y CODIGO IMAGEN OPACIDAD con el código de la imagen translúcida.

Gracias a ti por comentar.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo