Este efecto de opacidad queda muy bien tanto en los posts del blog como en alguna imagen en la sidebar, se trata de crearle opacidad a una imagen pero al pasar el cursor sobre ella recupera el color original. Esta es una forma distinta y original de mostrar nuestras imágenes, o incluso de crear un menú.
Para lograr este efecto entra a Plantilla | Edición de HTML y antes de ]]></b:skin> pega lo siguiente:
/* OPACIDAD EN IMAGENES
----------------------- */
a.opacidad img {
filter:alpha(opacity=50);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: 0.5;
}
a.opacidad:hover img {
filter:alpha(opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity: 1.0;
}
Ahora cuando quieras usar este efecto en una imagen dentro del post o en un elemento HTML/Javascript, usa este código:
<a class="opacidad" href="URL del enlace" src="URL de la imagen"><img src="URL de la imagen"></a>
Sólo agrega la URL del enlace si es que lo tiene, sino elimina esta parte: href="URL del enlace"
Como ves, la URL de la imagen va dos veces, esto es porque una es para mostrar la imagen con la opacidad y la otra es para mostrar la imagen con el color normal.
Ciudad Blogger
buen truco
ResponderEliminarpero ¿que baners vas a retirar el 5 de septiembre?
¿todos o solo algunos?
¿el mio esta entre los que vas a retirar?
Hola el venado,
ResponderEliminarSe van a retirar todos los banners, pero en un par de meses se podrán publicar nuevamente.
Saludos.
Muy buen efecto, se agradece.
ResponderEliminarSubido a http://www.enlazala.com
Vamos a votarla para que sea promocionada a la portada del sitio!
Hola Grangonzo,
ResponderEliminarMuchas gracias por la promo.
Saludos.
hola!!!!! te queria preguntar como hacer los banners cambiantes como los que tenes arriba con efecto de desbanesido...
ResponderEliminarBuen truco. Da un buen efecto y "vida" al blog.
ResponderEliminar¿Porque retiras los banners?
Saludos.
Jpz.-
Hola Ivan,
ResponderEliminarPara saber cómo crear los banners rotatorios visita este post:
http://ciudadblogger.com/2009/04/banner-cambiante.html
Saludos.
Hola Jpz,
ResponderEliminarA mí me gusta mucho ese efecto, sobre todo me gusta cómo se ve en los menús.
Los banners los quitaré momentáneamente, Google me sancionó el PageRank por subir varios links seguido así que tendré que moderarme un poco con el tema de los banners.
Saludos.
hola, disculpa, no sabes si feedburner funciona correctamente? disculpa la molestia, saludos
ResponderEliminarHola Ezequiel,
ResponderEliminarEstá trabajando perfecto, al menos los feeds a los que estoy inscrito están funcionando muy bien.
Saludos.
muchas gracias por responder tan rapido, la verda exelente tu sitio, lo estoy revisando todo ahora que tengo un poco mas de tiempo libre por la facultad jaja
ResponderEliminarla ultima pregunta y no te molesto mas, cuanto tarda en aparecer el nuevo posteo en la bandeja de entrada de la persona que se suscribio?
deesde ya muchas gracias
Hola Ezequiel,
ResponderEliminarNo es ninguna molestia, para estamos =)
El tiempo que tarda en distribuirse el contenido de tu feed depende de la configuración que tengas.
Entra a tu cuenta de Feedburner y haz click en la ficha Publicize, luego click en Suscripciones por Email y luego en Delivery Options.
Ahí selecciona el horario en el que deberá ser enviado el contenido, si lo programas (por ejemplo) que se entregue de 9 a 11 entonces dentro de ese horario se enviará por correo el contenido de tu blog a las personas que estén suscritas.
Por otro lado también es bueno que uses un servicio de ping para que avise a todos los servicios de feed (incluyendo Feedburner) que tienes contenido nuevo, eso puedes hacerlo en TotalPing.com de este modo agilizarás el proceso de tu feed.
Saludos.
muchisimas muchisimas gracias, ya hice todo, incluyendo el ping, en algunos no se pudo conectar con el servidor, pero en feefburner que es el que tengo si, bueno, mañana te confirmo si me envio el posteo a los mails, el tema es que me aprecia raro xq hice 2 suscripciones de mails mios para probar, llegan los mensajes de activacion, los active, pero en feedburner me aparecia como que no habia suscripciones, vamos a ver que pasa mañana:)
ResponderEliminarte agradezco mucho, saludoss
Ya verás que sí llega.
ResponderEliminarQue no conecte con el servidor en algunos servicios es común, pero como dices lo importante es que conecte con Feedburner.
Saludos.
Hola Potro:
ResponderEliminarNecesito que me ayudes (nuevamente).
Deseo poner "hover" en algunos botones de mi blog... Como lo hago?
Son para el botón "Buscar" (en el buscador) y "Enviar" (suscripción e-mail).
Saludos.
Jpz.-
Hola Jpz,
ResponderEliminarUsa esta propiedad:
input:hover {
background:#ccc;
}
Ahí cambiará el color del botón por uno gris al pasar el mouse, tú puedes agregarle el efecto que quieras.
Saludos.
OK Potro.
ResponderEliminarGracias y saludos.
Jpz.-
Potro:
ResponderEliminarNo me resultó.
Quizá no lo inserté donde corresponde.
Me ayudas?
Saludos.
Jpz.-
No veo que hayas añadido el código, debes pegarlo arriba de:
ResponderEliminara:hover {
Saludos.
Hola Potro.
ResponderEliminarEl código ya lo eliminé.
No se que #@$&% pasa, creo que estoy pegándolo en cualquier parte, menos donde corresponde. Dame una ayuda "a prueba de..."
Saludos.
Jpz.-
Hola Jpz,
ResponderEliminar¿Qué efecto le quieres dar al pasar el mouse?
Potro:
ResponderEliminarAl pasar el mouse que cambie sólamente el background del botón.
Eso.
Donde y cómo agrego el código?
Saludos.
Jpz.-
Hola Jpz,
ResponderEliminarSi estás batallando con el CSS entonces hazlo con Javascript. En el caso del botón de búsqueda tienes este código:
<input id='searchsubmit' type='submit' value='Buscar'/>
Ese cámbialo por este:
<input id='searchsubmit' onmouseover="this.style.background = '#FFFFFF';" onmouseout="this.style.background= '#70a600'" type='submit' value='Buscar'/>
Sólo cambia el código #FFFFFF por el código del color que tendrá al pasar el mouse.
Para el otro botón cambia esto:
<input id="rssboxsubmit" value="Enviar" type="submit"/>
Por esto:
<input id="rssboxsubmit" onmouseover="this.style.background = '#FFFFFF';" onmouseout="this.style.background= '#70a600'" value="Enviar" type="submit"/>
De igual forma cambia el color que te mencioné antes.
Saludos.
Hola Potro:
ResponderEliminarExcelente dato.
Pero sólo funcionó para el "rssboxsubmit".
En el "buscar", al modificarlo, no se muestra el efecto.
¿Que será?... Dále una mirada.
Saludos y gracias.
Jpz.-
Hola Jpz,
ResponderEliminarNo veo que le hayas agregado el código al otro =S
Cuando no funciona lo elimino y lo dejo como estaba (originalmente).
ResponderEliminarEn este momento lo inserté para que le des una "mirada".
Que hago?
Saludos.
Jpz.-
En el de 'Buscar' tienes este código:
ResponderEliminaronmouseout='this.style.background= '#70a600'' onmouseover='this.style.background = '#aeb916';'
Si te fijas al inicio tienes comillas simples cuando deben ser comillas dobles.
Debes ponerlo tal cual como este:
onmouseover="this.style.background = '#aeb916';" onmouseout="this.style.background= '#70a600'"
Saludos.
Lo hago, pero al guardar los cambios y volver a verlos, cambia a 1 comilla.
ResponderEliminarNo entiendo.
???
Saludos.
Jpz.-
Intenta con este:
ResponderEliminaronmouseover="this.style.background = '#aeb916';" onmouseout="this.style.background= '#70a600'"
funciono perfecto... muchas gracias..
ResponderEliminarhttp://www.bajaloaca.wordpress.com
Me alegro que te haya servido.
ResponderEliminarSaludos =)
Bueno y si quiero que el enlace se abra en una nueva venta donde agrego el Target blank
ResponderEliminarEn cualquier parte dentro del enlace, por ejemplo antes de class="opacidad"
ResponderEliminarPotro ese código donde agregamos dentro del post o en un elemento HTML/Javascript, solo permite entrar a la misma pagina sin salir, pero habra un codigo que al hacer clic salte a una pagina nueva saliendo de la pagina? gracias!
ResponderEliminarUsando el atributo target='_blank' como siempre se hace, sólo agrega después de la URL del enlace esto:
ResponderEliminartarget='_blank'
gracias Potro!
ResponderEliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarSi quieres que se aplique a todas las imágenes de las entradas entonces usa este código:
ResponderEliminar.post img:hover {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
.post img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
La opacidad se verá al pasar el cursor sobre las imágenes de las entradas.
Vengo por aquí de nuevo y con el mismo tema. Te comento: he aplicado este código y si pongo .widget img. en vez de .post img. se aplica el efecto en todas las imágenes del blog y también en la cabecera, quiero evitar esto si hay alguna forma. Tambien te digo que he creado una pagina estática como portada y el widget de las ultimas entradas lo tengo añadido debajo de la cabecera y hace la función de portada con las imágenes de las ultimas entradas. Es para que lo sepas, si quieres entra en el blog lo veras. Haber como lo puedo solucionar. Por si no ves la otra pregunta, mi pregunta era como puedo añadir este efecto solo en un gadget concreto (el mio HTML8).Gracias !!!!
EliminarHola, ¿específicamente dónde lo quieres poner y dónde no? si es sólo al HTML8 entonces es como te comentaba hace un momento en el otro comentario que dejaste. Saludos.
EliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarEs igual un efecto de desvanecimiento, con el código que te he dado será parecido sólo que sin la imagen del "play" pues no funciona en todos los casos.
ResponderEliminarHola si por fabor yo te doy mi contraseña y todo y me lo haces vos. ? porque la verdad no entiendo. Si leisto esto entra a mi blogger y firmame.
ResponderEliminarwww.verybeautifulwoman.blogspot.com
Lo siento Berenice, puedo orientarte si en algún paso te quedas atorada pero no puedo hacerlo por nadie.
ResponderEliminarSaludos.
Queria saber como se hace para cambiar la barra de desplazamiento en el blogger, porque yo vi unas bonitas en las que se le agregan imagenes y esas cosas. Seria de mucha ayuda :)
ResponderEliminarTan personalizadas como con imágenes no sé si se pueda, pero en Vagabundia puedes ver una manera de personalizarlas con jQuery:
ResponderEliminarhttp://vagabundia.blogspot.com/2011/03/cambiar-las-barras-de-desplazamiento.html
Holaa tengoo una duda yoo lo puse el codigo justo como explicas pero no se porque noo me saleee alguna idea? ayudamee sii porfis :D tengo la plantilla personalizada pero en base LA tercera del grupo FANTASTICO, S.A :D
ResponderEliminarHola Ṃια Pσяcεʟαп, ¿a cuál imagen se lo pusiste?
Eliminarpues no se lo puse a ninguna imagen en especifico yoo pense que era a todas las imagenes de todas las entradas del blog
ResponderEliminarNop, por eso dice la entrada que se agregue el otro código a las imágenes donde se quiera aplicar.
EliminarPero, si quieres que esté de forma automática en todas las imágenes de las entradas mira el comentario #38
hey gracias pero x'( waaa no se por que extraña razon no me funcionoo!!!
ResponderEliminarsera por que pege ese codigo en lugar del original? alguna idea?
Pues yo sí lo veo funcionando.
EliminarMuy buenas el Potro.
ResponderEliminarQuería hacer una pregunta acerca de un pequeño (en realidad insignificante) problema fruto de este efecto más una transición con los valores (-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;) para que se vea mejor.
Resulta que cuando pasa el cursor por encima de la imagen (concretamente iconos de 50x50) ésta se reduce en calidad mientras la transición se efectúa, volviendo a su ser cuando ésta ha terminado y creando una sensación visual "desagradable". Aunque, como ves, no es nada grave, quería preguntarte si podía solucionarse pues en otras imágenes de mi Blog en las que tengo puesto el mismo efecto no ocurre lo mismo.
Muchas gracias por tu respuesta.
Hola Franciscojrg. Sucede eso porque tu imagen es pequeña, por eso pierde calidad. Es como cualquier imagen pequeña, si la agrandas se verá mal, pero eso depende del tamaño de tu imagen en sí.
EliminarSaludos.
Te agradezco la respuesta, El Potro, pero no entiendo... La imagen no varía su tamaño en la ejecución del "script". Simplemente varía su opacidad con una "transición" que haga más agradable a la vista la variación... Eso no debería ser razón para la pérdida de calidad momentánea de la imagen, ¿no?
EliminarTienes toda la razón Franciscojrg, he sido yo el que se ha equivocado, creí que la entrada era sobre el aumento del tamaño de la imagen al pasar el cursor.
EliminarTe explico porqué sucede. Las transiciones usan medidas de tiempo, estas medidas pueden hacer que el efecto sea más rápido o más lento en cambiar de un estado a otro.
Cuando el valor es lento y el cambio que tiene que hacer es muy corto entonces se da lo que mencionas. Por ejemplo, si a una imagen de 100 x 100px yo le pongo una transición para que ésta se agrande a 120px y si en el valor indico que éste cambio sea lento entonces cuando se agrande se verá como si diera "saltos", algo así como cuando a las películas les quitas cuadros. Pero si a esta misma imagen, con el mismo valor de lentitud le indico que aumente hasta 300px entonces ahí no se verán esos "saltos" porque tiene suficiente espacio para efectuarse.
Pues lo mismo sucede con el ícono que tienes.
Lo que puedes hacer es cambiar el valor de la transición de 0.5s a 1s aunque eso afectará de igual forma a las imágenes grandes, así que tal vez sea mejor dejarlo como está.
A ver si no te confundí más :P
Tu respuesta la comprendo pero sigo sin entender qué tiene que ver con el problema que se me da. Ruego perdones la cerrazón :3
EliminarYo sólo deseo un cambio en la opacidad de la imagen, no en su tamaño. Por lo tanto, no hay cambio alguno en la resolución de esa determinada imagen y no debería haber una pérdida de calidad mientras se produce el efecto de transición de opacidad... Pero este sigue produciéndose y esa razón es la que no discierno.
Lo del tamaño era sólo para ejemplificar y comprendieras porqué suceden esas deformaciones.
EliminarAun sí, ¿ya has verificado en otros ordenadores? porque a veces lo que no se ve bien es por la resolución del monitor, el navegador, etc.
¿En cuál blog tienes el problema y cuáles son esas imágenes? Porque si tampoco tengo esos datos sólo puedo darte teorías :/
Discúlpame, El Potro.
EliminarTambién tienes razón, yo aquí explicando el problema con la tontería de no mostrar el Blog ni nada.
http://tinyurl.com/d8aolra
Me refiero a las imágenes para recomendar el blog de arriba en la columna de contenidos de la izquierda. El navegador que personalmente uso es Google Chrome.
Veo que además de la opacidad tiene otro efecto, como si se moviera un poco, ¿qué estilos agregaste para eso? Porque he copiado tu código (el de la opacidad), copié las imágenes tal como las tienes y en lo absoluto se ve ese ligero pixeleo, cambia con la misma calidad que en su estado normal, por lo que me hace pensar que si tuvieras otro estilo para las imágenes entonces ese estilo podría ser el responsable.
EliminarPues no tengo absolutamente ningún otro, ¡esa es la cosa! Y es lo que hace tan raro el pixeleo que se produce en las imágenes, así como el pequeño movimiento de las mismas pero... ¿Sabes qué? Al final lo he arreglado.
EliminarResulta que construyendo la web me di cuenta de que las imágenes no tenían ese problema en el efecto de la opacidad cuando éste se "ejecutaba" fuera de la página principal de inicio, lo que me llevó a pensar que era algo relacionado con ésta lo que producía esa aberración en el efecto.
Y al final encontré la causa: un reproductor de música "añadible" de una página llamada Soundcloud que, estando fuera de la entrada de inicio, lo arregló todo.
En resumen: cuando se añade el código de ese reproductor a la web y aparece en pantalla el efecto se "corrompe". En el momento en que no está, funciona como siempre. Así que algo "gráfico" deberá ser. Aquí puede constatarse: http://tinyurl.com/d8aolra
Muchas gracias de todas formas y nuevamente ^^
Pues vaya manera de ese reproductor de afectar elementos que no debería de tocar, pero no sería el único elemento que hace eso, otros gadgets lo hacen de igual manera :/
EliminarLo importante es que has sabido detectar el problema y solucionarlo :)
Pues sí, le echaré un ojo al reproductor a partir de ahora y ya está, ya he podido arreglar la cuestión :D
EliminarMuchas gracias por la ayuda, de igual manera ^^
Hola Potro, me gustaria saber si a este efecto de le puede añadir texto en el centro de la imagen, gracias
ResponderEliminarhola Potro, me gustaria saber si a este efecto se le puede añadir texto en el centro de la imagen, con la opacidad incluida.
ResponderEliminargracias.
No melissa, eso ya es algo un poquito más complejo, a ver si después hago un tutorial sobre ello.
EliminarOtra pregunta Potro, has publicado una entrada sobre este tema.Estaba buscando una entrada sobre este tema en tu blog y no la encuentro, es para saberlo si la tienes publicada ya que a mi también me interesa este tema. Gracias.
EliminarAlgo similar es esto que publiqué hace algunas semanas (mira el último ejemplo del post), quizá sólo tengas que hacer unos cambios para dejarlo como quieres:
Eliminarhttp://ciudadblogger.com/2014/04/pie-de-foto-con-fondo-y-sobre-la-imagen.html
Hola Potro !!!
ResponderEliminarComo puedo añadir este efecto en el gadget "Ultimas entradas", o en cualquier tipo de gadget con imágenes. Gracias.
Hola, sólo cambia donde dice a.opacidad por el ID de tu gadget al que se lo quieras aplicar. Saludos.
EliminarEs lo que estoy haciendo y no hay manera, en todo caso gracias por la respuesta. Un saludo !!!
EliminarHola !! Vengo solo para comentarte que lo he conseguido !!! Le he añadido al widget por delante el signo de # y lo he conseguido. Es que yo ponia .HTML8 y no había manera. Saludos !!!
ResponderEliminarBueno, ya ves lo que he tardado en escribirte :) Tengo otra pregunta sobre este tema. Mira, yo tengo instalado el efecto de opacidad en las imágenes en mi blog, pero de tal forma que la imagen se vuelve opaca cuando pasas con el cursor sobre la misma. Y lo tengo instalado con css para todas las imágenes de las entradas. Te quiero preguntar, ¿como hago para evitar o eliminar este efecto en alguna imagen? Ya que en ciertas imagenes quiero aplicar otro efecto. Gracias !!!
ResponderEliminarYa empezaba a creer que no escribirías ;)
EliminarSólo agrega otros estilos nuevos:
.sin-opacidad {
opacity: 1;
filter:alpha(opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
Luego, en el código de tu imagen agrega la nueva clase que creaste, en este caso:
class='sin-opacidad'
Eso hará que esa imagen no tenga ninguna opacidad por defecto.
Lo tengo !!!! Disculpa las molestias, un saludo !!!
ResponderEliminarYo lo he conseguido de otra forma. Le añado un style de opacidad de 1.0 directamente a la imagen, y no he tocado el css para nada. Y de esta forma también he conseguido eliminar el efecto de opacidad. Al ver tu comentario te pregunto, ¿que es más correcto?, está bien tal y como lo he hecho yo?
EliminarUn saludo !!!
Ambas formas son válidas y correctas ;)
Eliminar