Una de las ventajas del CSS3 es porder aplicar bordes redondeados sin complicarnos la existencia, siempre y cuando quien vea la página use un navegador moderno, porque ya sabemos que en navegadores antiguos muchos estilos no son reconocidos.
Y una forma de poder usar estos bordes es con las imágenes de las entradas, a las que les podemos aplicar algunos efectos al pasar el cursor tales como sombreado y bordes redondeados acompañados de transiciones.
La declaración del borde redondeado es border-radius, y en ella podemos aplicar el borde redondeado a las cuatro esquinas de la imagen, o sólo a algunas de ellas.
A continuación verás unos ejemplos de estos bordes y cómo se comportan las imágenes al pasar el cursor sobre ellas.
Puedes usar el que más te guste, sólo copia el código, luego entra a la Edición HTML de la plantilla y pega dicho código antes de ]]></b:skin>
.post-body img {
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0% 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
.post-body img {
border-radius: 50% 0; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius:0; /* Con esto quitamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
.post-body img {
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
.post-body img {
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0; /* Con esto eliminamos la sombra */
border-radius: 0; /* Con esto eliminamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
.post-body img {
border-radius: 45% / 20%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0; /* Con esto eliminamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
Estos efectos se aplicarán a todas las imágenes de las entradas. Si quiseras usarlo sólo para las que tú elijas entonces cambia .post-body img por .redondeado y .post-body img:hover por .redondeado:hover
Luego en el código de tu imagen agrega la clase:
<img class="redondeado" src="URL de la imagen" />
Esos son sólo unos ejemplos, y a partir de ellos cada quien puede modificarlo tanto como quiera agregando o eliminando más estilos, eso como siempre ya depende de cada quien. Pero como has podido ver, podemos conseguir que las imágenes de las entradas se vean más atractivas, que interactúen con el lector, y tan sólo ha sido añadiendo un poco de CSS.
Ciudad Blogger
#1
ResponderEliminarBueno antes que nada, muy buen post
y en segunda, psss felicidaes x los 3 años (ya que no me avia tocado felicitarte y siempre paso por aqui)
Suerte!!
Gracias DJCosplay, aun se aceptan regalos de aniversario ¡eh! :D
EliminarFijate que conisidencias yo tambien :D
EliminarMuchas Gracias potro. Estan bien las border radius. Estan muy bien. Sabrias donde podemos encontrar mas shapes? Gracias otra vez. Felicidades en los 3 anos y que se cumplan mas.
ResponderEliminar¿Más formas para las imágenes? En sí sólo es jugar con los bordes, por ejemplo:
Eliminarborder-radius: 10px 50px 15px 80px;
Cada valor corresponde a una esquina de la imagen. En ese ejemplo sería que:
10px es el borde de la esquina superior izquierda.
50px el borde de la esquina superior derecha.
15px el borde de la esquina inferior derecha.
80px el borde de la esquina inferior izquierda.
Hola Potro, muy buen truco, pero quisiera saber si se puede aplicar para todas las imágenes del blog, y como, ha y ¡FELICIDADES CiudadBlogger! Ya son 3 años ayudando a nosotros los bloggeros..!Gracias Potro.!
ResponderEliminarGracias, gracias, el mero día nadie me felicitó :( jajaja
EliminarSí, se puede aplicar a todas las imágenes del blog, en ese caso cambia .post-body img por img
Y .post-body img:hover por img:hover
Saludos :)
Esto es SUUUUUUUPER!!!!
ResponderEliminarEstaba pensando hacer un lindo menú a partir de imágenes con enlaces (lo mio tiene que ser práctico sino el blog se tilda jaja) y esto me viene estupendo porque es super lindo y le da un detalle muy especial! ♥
De verdad MUUUUUUUCHAS GRACIAS simpre por traer cosas tan buenas!
Quería hacerte una petición muy importante ^^
Yo tengo Tumblr y me gustaría poder hacer esto que publicó Vagabundia en su Blog.
Es que de verdad ese blog me da dolor de cabeza por lo oscuro que es y no le entiendo nada ='(
No quiero ofender a la persona ni mucho menos, pero no comprendo...
Será que ya estoy acostumbrada que acá hay explicaciones muy detalladas y a veces hasta con imágenes de paso a paso.
Ojalá puedas darme una mano con esto, es que el widget está estupendo!
Bueno ya dejo acá que esto se hace muy largo.
Besos y que tengas una semana estupenda! ♥
Hola Hola! Ya no hará falta lo de Tumblr, me senté con un té de tilo y todo el cerebro despejado de cualquier otra cosa y me salió. Ahora entendí como se hacía y como es que esta personita explica sus post.
EliminarGracias de todas formas porque sé que siempre de todos modos encuentras el modo de ayudar a todos! ^^
Pues qué bueno que pudiste saber cómo hacerlo, porque nunca he usado Tumblr así que estoy perdido en ese tema, ya tendrás que enseñarme :P
EliminarPor las imágenes qué bueno que te han gustado, seguro en algún que tenga principalmente imágenes en sus entradas se verá bien :)
Que tengas también una semana estupenda!
esta increible este efecto muy util es.. gracias
ResponderEliminarAnda!!...Qué chulada!! :)
ResponderEliminarVaya Potro..esto es increíble por el efecto "oculto" que contiene cada imagen..Ves una imagen con bordes determinados, y vale...pero...pero!!..te acercas y .....O L A L A H!!!! ...tienen vida propiaaa jajajajajaja.
Siento este entusiasmo..pero caramba que es estupendo el truco..claro que sí.
Muy bueno Potro, y Felicidades por estos 3 años ya..ainss como pasa el tiempo.
Recibe un fuerte abrazo, y mucha suerte para lo que necesites.
Me alegra que te entusiasme Angie, a mí también me encanta la idea de que tenga un plus de sorpresa al pasar el cursor, y creo que a la mayoría de los usuarios les agrada encontrarse con esa clase de efectos en un sitio.
EliminarOtro abrazo para ti, y que tengas buen inicio de semana!
Mmmm parece interesante GRAIAS POTRO COMO SIEMPRE XD
ResponderEliminarGrance Potro, estan geniales
ResponderEliminarMe alegro que te hayan gustado :)
EliminarPotro, gracias por responderme mira lo que te comentaba en el mensage (ya leei la respuesta) que te envie es que como pongo un menu de listones en ese caso era parte de la cabezera pero por ejemplo en esta web como seria?:(me refiero menu rojo )
ResponderEliminarhttp://www.bloggingtips.com/forums/showthread.php?t=1055
Osea el liston lo hago con photoshop pero como ago para que sobre salga y sea menu como en la web esa ?
Deja después preparo un tutorial sobre ello, porque es algo extenso como para decirlo por comentarios. Sólo dame unos días a que saque otras entradas que traigo pendientes ;)
EliminarOoo gracias espero inpaciente esa entrada
EliminarProcuraré no hacerte esperar mucho ;)
EliminarQuedo muy bueno, se puede poner en la imagen del "Header" y agregarle un borde de color? (La plantilla esta hecha con el Diseñador)
ResponderEliminarClaro que sí 3-M-i-L-i-0, también se puede aplicar a la cabecera, aunque los resultados pueden variar de plantilla en plantilla.
EliminarSupongamos que quieres el 5º ejemplo entonces el código sería así:
.header-outer {
border-radius: 45% / 20%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
border:6px solid #819FF7; /* Borde de color */
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.header-outer:hover {
border-radius: 0; /* Con esto eliminamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
No me funciono... no se que sera, acá te dejo la pagina "http://www.arg-wallpapers.com.ar/", de ultima si esto no sale quisiera saber como hacer para darle el mismo estilo de los gadget (bordes, sombras) a la imagen de la cabecera.
EliminarNo veo los códigos en esa plantilla 3-M-i-L-i-0.
EliminarYa esta agregado y sigo sin verlo...
EliminarArriba del .header-outer { dejaste un text-align:center; suelto que parece no pertenecer a nadie y que hace que invalide los estilos que hay debajo de ello. Corrígelo.
EliminarPotro, Potro, Potro.......que te digo....gracias, gracias, gracias!!!
ResponderEliminarKary, Kary, Kary.... de nada, de nada, de nada :D
Eliminarexcelente aport ^^
ResponderEliminarGracias Brenda :)
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarBuenísimo Potro, ya lo tenemos en nuestro blog. Cada día nos sorprendes un poco más. Espero que ya te hayas mejorado de la gripa, un saludo.
EliminarGracias amisetasjgalan, un saludo!
EliminarDe nada potro, lo único que el nombre de nuestro blog es camisetasjgalan la c de nuestro logotipo puede confundir un poco jejeje. Desde spain un abrazo, y felicidades por los 3 años... ¡¡que sean muchos más!!.
EliminarTienes toda la razón, eso me pasa por escribir a las carreras :P
EliminarGracias por las felicitaciones, ¡un abrazo!
Me encanta Potro, pero algo me falla que no me da RESULTADO
ResponderEliminarhttp://lascositasdemeri.blogspot.com/
Hola Meri, estaba viendo que dentro de tus estilos tienes una condicional:
Eliminar<b:if cond='data:comment.author == data:post.author'>
Esa no debe ir dentro de los estilos:
http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
Qué códigos tan sencillos, y qué resultado tan sorprendente...
ResponderEliminarEstoy aprendido mucho de HTML, hasta me he creado una página web sin usar Blogger en HTML solamente, jaja. Está entretenido :P
Si quieres verla: http://htmlcw.comyr.com/
un saludoo
Pues vaya que sí estás aprendiendo, me da gusto eso!
EliminarTienes razón, son códigos sencillos que la mayoría podemos aplicar, y el resultado es visualmente muy bueno :)
Potro no me queda mas que agradecer el excelente aporte! Es una gran forma de darle mejor vista a nuestros blogs.
ResponderEliminarSaludos y buena vibra!!
Gracias Fando, es grato saber que ha sido del gusto de ustedes. Saludos.
EliminarPOTRO quiero poner estos botones mas abajito tantito asi como muestro en la imagen!!
ResponderEliminarhttp://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash4/s720x720/397132_374398175919021_100000465260022_1431487_1513022478_n.jpg
y es en este blog: http://www.peliculasyseries.org/
Podrías encerrar los tres botones dentro de:
Eliminar<div style="float:left; margin-top:25px;"> y </div>
Pero es posible que al hacerlo los datos del post-footer se hagan más abajo. Así que si eso sucede lo mejor será meter todo dentro de una tabla para que quede alineado.
Hola Potro:
ResponderEliminarOK, Gracias
Gracias a ti por tu visita FRANCISCO :)
EliminarPotro muchas gracias, realmente es de utilidad ya que le da un aspecto elegante y moderno al blog gracias de ante mano... solo que tuve un pequeño problema. te dejo mi blog: http://japanese-music-kei.blogspot.com/ . quise agregar este efecto a las imagenes de los post pero realmente me lo agrego al bloque que contiene las entradas. al entrar en una entrada o simplemente al cambiar a cualquier otra parte que no sea inicio me aparece esto: http://japanese-music-kei.blogspot.com/search/label/Alice%20Nine . lo mismo. y finalmente al entrar a una entrada esto: http://japanese-music-kei.blogspot.com/2012/02/alice-nine-zekkeishoku.html . si te das cuenta solo aplica este efecto al bloque y no al contenido de la entrada. realmente no se ve mal pero no se si habria manera de que me ayudes. el codigo "post img" no existe en mi plantilla entonces al aplicarlo no pasa absolutamente nada, así que modificando el codigo pasa lo anterior... en mi caso que código cres que tenga que poner para dirigirme al contenido de la entrada?... muchas gracias, espero no ser una molestia
ResponderEliminarPD.lo mismo me paso al querer agregar el efecto de opacidad en las imagenes... no pude así que tuve que modificar entrada por entrada y agregar el codigo individualmente :/
EliminarHola 死 Yuuki Natsuno 生,
EliminarEn las plantillas que no son originales de Blogger puede ser normal que este tipo de cosas pasen, ya que no conservan los nombres originales de los contenedores.
Prueba cambiar el .post img por .contP-ed img
Y el .post img:hover por .contP-ed img:hover
Saludos.
Muy bueno... estoy muy agradecido contigo, de ante mano muchas gracias. mucho de lo que publicas aquí es realmente bueno, espero con ancias la próxima entrada. se te agradece la ayuda potro. Saludos
EliminarPor nada ;)
EliminarSaludos.
Pero si están geniales :O!!
ResponderEliminarAhora mismo los pondré!! sí o sí!!
Y Potro, necesito tu ayuda T^T
Es que cuando me dejan comentarios y pasan de 5, en los siguientes coments la imagen de su avatar se sustituye por una imagen en blanco D:!
Porfa puedes decirme que va mal? es éste:
literatura-ficticia.blogspot.com
Gracias de antemano U-U
Es extraño, ¿has hecho alguna modificación al área de los comentarios?
EliminarMmm... sí Potro es rarísimo O_O Se soluciona cuando yo comento D:! Supongo que responderé algunos comentarios para que no pase eso xD
EliminarGracias por tu ayuda!
Sin tu página mi blog no sería lo que es *--------*
Besitos!
Rizel
Eso está mejor todavía, responder comentarios no le cae mal a ningún blog ;)
EliminarQue genial, me gusto mucho, haber si lo pongo en mi blog
ResponderEliminarGracias Potro!!!
Ojalá que te animes, aunque sea para experimentar :)
EliminarLindo ¿no? :)
ResponderEliminarGracias por pasar a comentar!
excelente
ResponderEliminarGracias!
EliminarWOW no sabía que se podía hacer eso con puro HTML, todo lo que ví con ese efecto fue con JS incluído. ¡Esto es el cielo!
ResponderEliminarSe puede con JS aunque ya es un tanto innecesario cuando casi todos los navegadores pueden leer el border-radius. Quizá sólo habría que recurrir al JS cuando queremos que los que usan Internet Explorer puedan apreciar estos bordes.
Eliminar¡Destacable! de seguro lo aplicaré en varios de mis artículos. Me pregunto si también habrá la posibilidad de aplicarlo en mi logo (header), o al menos algún efecto similar. Cuanto te sea posible échale un ojo por favor, no es la gran cosa, pero al menos quiero que se vea más bonito ;)
ResponderEliminarUn abrazo!
Claro que sí Marcelo, aunque en el caso de tu blog sería más conveniente aplicar el efecto de "zoom" al logotipo, quizá ese te interese más para esa área :)
Eliminarhttp://ciudadblogger.com/2011/11/aumentar-el-titulo-del-blog-o-imagen-de.html
Otro abrazo para ti.
Gracias Potro mi sitio esta hecho a base de tus consejos y tutoriales y me han mandado mensajes de que esta muy bonito, gracias a ti y les he dicho, gracias muy bueno el post como siempre:
ResponderEliminarhttp://www.itimetux.com/
Mi blog por si les interesa como es y como quedo con este tutorial.
Gracias hackloper. Me alegra que tus lectores estén contentos con el trabajo que estás realizando, y sobre todo que tú encuentres más chulo tu blog por la forma como lo estás personalizando :)
Eliminar¡Saludos!
Un truco maravilloso Potro. Hace el blog mucho más dinámico y con sorpresas. Se me plantean algunas dudas que seguro serán absurdas para muchos de vosotros pero no tengo idea de html. La verdad es que siempre he conseguido usar tus trucos puesto que lo explicas de maravilla. Eres un maestro estupendo. Ahí va mi pregunta:
ResponderEliminarEn edición html y antes de ]]> pegaría el siguiente código (junto con el otro que ofreces para la imagen de la entrada elegida)si quisiera que el efecto se aplicase a una determinada imagen y no a todas las de las entradas del blog:
.redondeado {
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
.redondeado:hover {
border-radius: 0% 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
Supongo que con esto las imágenes tendrían el efecto que has puesto como primer ejemplo (el que yo he usado en el ejemplo). ¿Sería posible que en unas imágenes se pudiese aplicar un efecto y en otras otro distinto? Me imagino que eso resulta imposible pero ¿habría alguna forma de aplicarlo de otro modo para elegir distintos efectos en distintas imágenes y entradas?. Espero que no te comas el coco mucho y te doy de antemano las gracias. Eres una maravilla para todos nosotros.
Hola María José Fano,
EliminarMuchas gracias por tu comentario.
Lo que planteas no es nada absurdo, por el contrario, es interesante saberlo porque seguro que muchos preguntarán eso más adelante.
Sí, puedes aplicar varios estilos a distintas imágenes, por ejemplo, supongamos que quieres que unas tengan el efecto del primer ejemplo, en ese caso el código sería así:
.redondeado {
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.redondeado:hover {
border-radius: 0% 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
Y en tu imagen pondrías la clase class="redondeado"
Ahora bien, si quieres que haya otras imágenes con otros efectos haces algo parecido, supongamos que ahora quieres el efecto del segundo ejemplo, en ese caso también pegarías esto:
.redondeado2 {
border-radius: 50% 0; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.redondeado2:hover {
border-radius:0; /* Con esto quitamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
Y en el código de la imagen a la que se lo quieras aplicar le pondrías la clase class="redondeado2"
¿Te fijas? Lo que ha cambiado es el nombre de la clase, la primera le pusimos .redondeado y a la segunda le pusimos .redondeado2
Y así si quieres usar más sólo vas agregando los códigos y cambiando el nombre de la clase. De esa forma puedes tener varios efectos en los bordes y podrás aplicárselos a tus imágenes por separado.
Saludos :)
Que buena pregunta María José Fano =)
EliminarAhora cuando quiera hacer algo así en una entrada por algo especial podré ponerlo!!!
Estupendo!
(Es bueno leer siempre los comentarios de otros jijiji)
Saludos!
*Adoro esto de los comentarios con lo de respuestas. Vas buscas tu comentario y abajo está tu respuesta! ^^
Jaja, a mí también me encanta. Lástima que en Internet Explorer no funcionan los comentarios anidados en este blog :(
EliminarFantástico Potro, eres único. Pensé que sería una pregunta sin solución, pero no se te resiste nada. Ya lo he utilizado y en mi siguiente entrada aplicaré otro efecto, a ver si todo va bien (es decir, si lo he entendido bien, que soy un poco burra para el html).
EliminarTiene razón Miss Varieté, esto de las respuestas es fantástico. Ayer me pasé más de media hora leyendo preguntas y respuestas por si a alguien se le había planteado la duda.
Y lo del explorer es una lástima, no haré más comentarios.
Ya te contaré cómo me ha ido y nuevamente muchíiiiiiiiiiiiisimas gracias.
Ojalá que todo salga bien María José, ¡saludos!
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarPotro, como siempre genial !!
ResponderEliminarUn abrazo.
Gracias victor, otro abrazo para ti.
EliminarSe supone que muchas propiedades del CSS3 las soporta IE9, y también se supone que acepta los bordes redondeados, pero al parecer sólo los de los contenedores DIV porque las imágenes, al menos estas no les hace nada. Por suerte cada vez son menos los que usan IE.
ResponderEliminarExcelente aporte Potro.....Felicidades por su aniversario....Saludos
ResponderEliminarGracias Templario, ¡saludos!
EliminarEstán super cheveres esos efectos Potro :)
ResponderEliminargraciela ;D
De Nadia :)
EliminarExcelente post, ya lo implemente en mi blog. Saludos desde Costa Rica!! :D
ResponderEliminar¡Saludos hasta Costa Rica!
EliminarGenial Potro... Lo tendré en cuenta para después; no quiero saturar mi blog de código HTML!
ResponderEliminarSiempre lo mejor!
Mil Saludos!
Cuando gustes ahí estará ;)
EliminarHola, Potro. ¿Serías tan amable de indicarme cómo podría eliminar los bordes de las imágenes que aparecen por defecto con el diseñador de plantillas en las entradas de mi blog?
ResponderEliminarHola Fran,
EliminarElimina esta parte de la plantilla, con eso se irán los bordes:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
Disculpa Potro se pueden usar las condicionales con este truco? para poner 2 trucos de estos en diferentes partes del blog.
ResponderEliminardesdeluego se donde esta el post de las condicionales jeje. Bye....!!!
Sí, sólo encierra los estilos entre <style> y </style>, luego enciérralos en una condicional y ponlos antes de </head>
EliminarEn IE9 se supone que se puede, pero sólo se supone :)
ResponderEliminargek gek gek gek cool hover ;)
ResponderEliminarIt's cool, isn't? :)
EliminarGracias Potro por responderme, pero estoy más perdía que el barco del arroz ¿donde pongo esa condicional? no me atrevo por si lo mando todo al traste jeje. Por tu enlace es aquí donde debo poner esa condicional? antes de o después de < head > Si es ese el error ¿antes o despues?.¡Qué trasto soy!
ResponderEliminarSaludos y GRACIASSSSSSSSS
Antes de </head>
Eliminar;)
Precioso todo lo que desarrollas sobre imágenes. Lo tendré en cuenta. Saludos.
ResponderEliminarTodo es gracias al CSS3 :)
EliminarImpresionante esta entrada. Estás en todo y a la última que sale, Potro.
ResponderEliminarMuchas gracias.
Un beso
Pues ya tiene rato la propiedad border-radius, sólo pensé que talvez podríamos combinarlas con sombras y transiciones; parece que el resultado ha sido bueno :)
EliminarUn beso.
Hola Potro, gracias por estos tips, excelentes, ya puse el que me gusto y quedo chevere mi blog.
ResponderEliminarQueria consultarte, si tu sabes como hago para correr hacia la izquierda los anuncios de adsense, porque al dividirlos, me quedaron hacia la derecha de la pantalla, los quiero mas a la izquierda.
Gracias de antemano maestro
Bendiciones abundantes,
Iglesia Cristiana Evangelica
Hola Gilberto,
EliminarEncierra el código de AdSense entre:
<div style="margin-left:-30px;"> y </div>
Ese -30px es un margen izquierdo negativo, puedes variarlo hasta conseguir que se coloque en la posición que deseas.
Saludos.
Gracias maestro.
EliminarG E N I A L :D
ResponderEliminarhace mucho que estaba buscando ésto para las imágenes, ¡gracias!
Ahora, tengo una pregunta para hacer, yo vi que en muchos blogs en vez de color tienen una imagen alrededor de las fotos, me gustaría saber como se hace :)
Gracias otra vez n.n
Mira esta entrada de Oloblogger, ahí explican cómo hacer eso:
Eliminarhttp://www.oloblogger.com/2012/01/formato-imagenes-con-css-padding.html
Saludos.
Hola, me gustaria hacerle un par de preguntas potro.
ResponderEliminarTengo un programa que incrementa las visitas a mi web automaticamente, eso no es bueno a la hora del posicionamiento en google verdad?
Y otra cosas es que quisiera saber como hacer una mini tienda en html, es decir, vender algo en html.
Gracias
Google no acepta ninguna práctica de ese tipo, así que no sólo afecta el posicionamiento, sino que puedes ser eliminado de los resultados de búsqueda.
EliminarPara lo otro, hay una plantilla que tiene incorporado un sistema para comprar:
http://javatemplates.com/2011/blogger-store-v2/
Saludos.
Que significa eso de que Incrementa las visitas a tu web?
EliminarNo sé, habrá que preguntarle qué se supone que hace ese software.
EliminarGENIAL EL TRUQUILLO POTRO!!!
ResponderEliminarFUNCIONANDO PERFECTAMENTE
GRACIAS!!!
Gracias a ti por tu visita!
EliminarQ zarpado q está!! He puesto uno en mi blog y me encanta como queda, te lo dejo x si quieres ver cómo quedó ^^
ResponderEliminarhttp://llavedetinta.blogspot.com/
Gracias por el truquito!! :D
Me ha encantado el resultado en tu blog Annie :)
Eliminarme da un error al cambiarlo de sitio: El tipo de elemento "b: if" debe terminar con la correspondiente etiqueta final "< / b: if >"
ResponderEliminar¿hago esto? < b:if cond='data:comment.author == data:post.author'< / b: if >
pues tampoco porque ya he probado
ResponderEliminarDebes buscar desde <b:if cond='data:comment.author == data:post.author'> hasta el siguiente </b:if>
EliminarNada de esos códigos deben estar antes de ]]></b:skin> de lo contrario suceden esos problemas que los estilos no surgen efecto.
Pues creo que se queda asi porque el < / b:if> esta donde el señor perdió la zapatilla y todavía no la ha encontrado jeje. No me atrevo, que soy capaz de liarla jej
EliminarSaludos y como siempre GRACIASSSSSSSSS
Bueno, sino quieres liarte más con eso pon los estilos arriba de esa línea, la del error, como los estilos estarán antes de ella deberá tomarlos como válidos ;)
EliminarSaludos.
Muy buen efecto!!! Tus tutoriales son un vicio para mi! jajaja!
ResponderEliminarLo aplique a uno de mis blogs y me encanto :)
Potro te quiero hacer una consulta, perdón porque no tiene nada que ver con este tema. Cree un nuevo blog con una plantilla que descargue. La direccion es http://www.cerquitamioweb.com.ar/ , la pregunta es: Se pueden cambiar el color de fondo de las pestañas? y de los enlaces de los titulos? Si te fijas vas a ver que todo es en color rojo, me gustaria otro color pero del diseñador no puedo cambiar nada y como es la primera vez que no uso una plantilla del diseñador desconozco si se pueden realizar modificaciones. Gracias desde ya si me podes dar una mano. Ya me diste tantasss!!! Un abrazo!
No te creas que para mí también se ha vuelto un vicio esto de los blogs, jaja.
EliminarEl color de fondo de ese menú (al pasar el cursor) es una imagen, aunque desconozco por qué lo hicieron así. En fin, sólo busca esta URL, la verás dos veces:
http://4.bp.blogspot.com/-2XXQwhBH8QM/TxSCk2OJy9I/AAAAAAAAAKk/3CivMDyAjWg/s000/menu-secondary-bg.png
Cámbiala por la de la imagen del color que quieras.
El color de los enlaces se cambia en esta parte:
.menu-secondary li a{color:#555; padding:12px 15px 11px 15px;text-decoration:none;font:12px 'Oswald',sans-serif;text-transform:uppercase}
Excelente!!! Sos mi idolo ! ya lo pruebo! La imagen tiene que tener un tamaño especial? Y la letra de las pestañas de donde la cambio? Chan! Como te quierooo Potrooo!
EliminarYo lo que quiero es cambiar Todos los enlaces que hay en rojo: Las etiquetas, las pestañas de arriba, la palabra "Comments", es mucho lio? Es un codigo distinto para cada cosa no?
EliminarPues no parece haber un tamaño específico para la imagen, de todas forma prueba primero con algo muy pequeño, o si quieres intenta poner sólo el código de un color para no liarte mucho.
EliminarPara cambiar el color de todos los enlaces se hace en esta parte:
a:link,a:visited{color:#F70413;text-decoration:none;outline:none;}
a:hover{color:#C93204;text-decoration:underline;outline:none;}
Aquí hay una entrada que habla sobre ese tema:
http://ciudadblogger.com/2009/04/personalizar-links.html
Gracias por tanto cariño :)
Potro de verdad q no se que haria sin vos! pude cambiar los colores como queria, me quedaron 2 cositas en rojo que no encontre de donde cambiar. Los puntitos (cuadraditos) de los titulos de los gadgets, y el bordecito de "leer mas" cuando pasas por arriba con el mousse ; me ayudarias a encontrarlos? ;)
EliminarEl cuadrito de los títulos de los gadgets puedes quitarlo eliminando esta parte en negrita:
Eliminar.sidebar h2{background:#F2F2F2 url(http://1.bp.blogspot.com/-faUgKbavGNk/TxSClu0xu5I/AAAAAAAAALU/UEdXOVKvUOY/s000/widgettitle-list.png) 4px center no-repeat ;margin:0 0 10px 0;padding:9px 0 9px 20px;border:1px solid #E0E0E0;color:#666;font-size:16px;line-height:16px;font-family:'Oswald',sans-serif;text-decoration:none;text-transform:uppercase;}
Y lo del Leer más eliminando esta parte:
.readmore a:hover{color:#FFF;text-shadow:0px 1px 0px #000;background:#E0A3A3;border:1px solid #BE010E;text-decoration:none}
Mil gracias Potro! Ya hice las modificaciones que queria ;) yo no queria eliminarlos, solo queria cambiar el color :P
EliminarUna ultima cosita y no te hincho mas (por hoy :P)
Me quedan los gadgets del pie o footer creo que se llama no? quiero ponerle el mismo color que los de la sidebar. Me ayudasss?? :D Un beso grande
¿El color del título de los gadgets? Ese se modifica aquí:
Eliminar#footer-widgets h2{ color:#333333; font-family:'Oswald',sans-serif;font-size:16px;line-height:16px;text-decoration:none;text-transform:uppercase;background:url("http://1.bp.blogspot.com/-faUgKbavGNk/TxSClu0xu5I/AAAAAAAAALU/UEdXOVKvUOY/s000/widgettitle-list.png") no-repeat scroll 4px center #F2F2F2;border:1px solid #E0E0E0;margin:0 0 10px;padding:9px 0 9px 20px;font-weight:normal;margin-bottom:16px;}
Gracias por el beso :)
Geniallll!!!! Gracias a vos!!! (Igual te sigo molestando). Cambie el color de las pestañas pero cuando pasas el cursor se sigue viendo el color rojo que no quiero, esto de donde lo cambio? Y otra cosita: Si quiero sacar esas pestañitas que dicen "tags" "Popular" y "Blog archives" se puede?
EliminarY para poner una imagen de fondo en todo el blog? Espero no volverte loco con tantas preguntas (para vos debe ser pan comido) jeje! espero tu respuesta y mil mil gracias como siempre :D
Pues tanto como pan comido, no.
EliminarBusca este color #D50512 ese es el color rojo que aparece.
Lo otro no sé, es un tabview pero ignoro qué método usaron, supongo que tendrás que preguntar en la página del autor de la plantilla.
La imagen de fondo que aparece (los cuadritos) es esta:
http://2.bp.blogspot.com/-borwMQ9B0zM/TxSCken8mYI/AAAAAAAAAKM/_DaJTiTG-Ps/s000/background.png
Saludos.
ok, Potro te agradezco muchisimo tu buena onda y tu ayuda de siempre♥
EliminarAhora como hago para que la imagen que ponga de fondo no se desplaze con la pagina? Que quede fija...ya que queda muy fea asi! help!
El fondo tendría que quedar así:
Eliminarbackground: url(URL de la imagen);
background-attachment : fixed;
Mil gracias Potro...Y mi mas profunda admiración. Un Beso gigante y agradecido
EliminarGracias Bren :)
EliminarSaludos.
Chulisimo, me ha costado que funcione, como de costumbre por la cosa más insignificante y a la vez más importante, no puse los dos puntos antes de hover ;) ... este efecto quedará perfecto en alguna que otra entrada, hasta lo apliqué en un gadget :)
ResponderEliminar¿me permites una pregunta? ... ¿ya no es necesario poner
-webkit-border-radius:
-moz-border-radius: ?
muchisimas gracias :)))
Se supone que no. Esas propiedades se ponían porque no todos los navegadores aceptaban el border-radius, pero ahora, al menos en las últimas versiones de cada navegador ya las aceptan.
EliminarSaludos :)
está genial Potro. Muchas Gracias, ya lo apliqué a mi blog :)
ResponderEliminarUna pregunta. Tengo un botón "Ver Mas" que es una imagen. Si quiero que aplique para todas las imágenes de las entradas menos para ese botón ver mas. Probé metiendoló en otra clase, pero algo debo haber hecho mal que no me funcionó. Es para evitar tener que meterle a todas las imagenes de las entradas una por una el class="xxxx" ya que solo la imagen de ver mas es la que no quiero que aplique ese estilo.
Te dejo por las dudas la url de mi blog: www.tomandofotos.com
Gracias, Saludos!
Hola Marcos,
EliminarPara excluir esas imágenes del Leer más, agrega en los estilos los siguiente:
.rmlink img, .rmlink img:hover {
border-radius: 0 !important;
box-shadow: 0 !important;
}
Saludos.
Muchas Gracias Potro!
EliminarYa no me mostraba el redondeo pero si la sombra. Lo soluciné modificando el codigo de la siguiente manera:
.rmlink img, .rmlink img:hover {
border-radius: 0% 0% !important;
box-shadow: 0px 0px 0px !important;
}
Saludos!
¡Bien!
EliminarHola Potro!
ResponderEliminarPues con la novedad que no me funciono :( sospecho que me pasa algo similar a lo que le has comentado a Meri (comentario 48), porque ademas, mirando algunos pequeños detalles en mi plantilla, hay partes que no cambiaron aun aplicandoles un estilo, pues creo que es eso, la cuestion es que no lo se por seguro y no sabria donde meter mano, si me puedes orientar un poco te lo agradecere realmente :)
http://ssydd.blogspot.com
Saludos!
Tus sospechas son ciertas Syd. Mira el enlace que le di a Meri, verás los errores que se comenten al poner los códigos CSS, y que en tu caso es la forma como has puesto los comentarios (anotaciones) de los códigos.
EliminarSaludos.
Eso me pasa por no llevar un orden decente en la plantilla jaja, ya me lo decia mi madre "Syd, se mas ordenado en tus cosas", debi hacerle caso antes!
EliminarTe agradezco y te felicito por el bien merecido premio que te otorgaron, aunque si hubiera que premiar tu paciencia, entonces te deberian pagar el viaje a Madrid.
Un abrazo Potro!
Ahhh las madres siempre tienen la razón, sí señor.
EliminarGracias por la felicitación :)
Un abrazo.
Potro, mi dominio caduco ayer, Hoy intente renovar y me rechaza el pago, despues de caducar el dominio puedo volverlo a registrar?
ResponderEliminarNota: el dominio lo compre en blogger me costo 10 $USD
Sí puedes renovarlo, pero si lo dejaste caducar tienes que esperar un poco, los dominios se bloquean cuando caducan, pero después de ciertos días (no recuerdo cuántos) se puede volver a registrar.
EliminarHola Potro, se que esto no va aquí pero estoy desesperada. Mi blog no se actualiza en el blog de mis seguidores, lo he intentado casi todo. Y no hay manera, solo se actualiza en un blog de un seguidor y es desesperante.
ResponderEliminarTe dejo la direccion por si quieres echar un vistazo.
http://www.triatlonenfamilia.com/
Hace poco cambié a .com antes era blogspot.com no se si tendra algo que ver.
Te doy las gracias de antemano.
Ana
mail contacto anabailon2@gmail.com
Hola ANA,
EliminarEl feed de tu blog está trabajando bien:
http://www.triatlonenfamilia.com/atom.xml
Si acabas de cambiar de dominio es normal que algunas cosas no funcionen por el momento, pero con el paso de los días todo se irá normalizando, sólo es cuestión de que los robots actualicen toda la información para que todo esté como antes, sólo eso, un poco de tiempo ;)
Saludos.
¡¡Ganadores Potroo!! Jaja, aunque mi blgo no haya ganado en 20blogs, tu blog es ¡el numero 1! me siento hasta afortunado de que hayas ganado, aun no siendo este mi blog, jaja. ¡Sabia que ganariais!
ResponderEliminarYo no podre ir a Madrid a la entrega de premios, ya me diras si el jurado me ha elegido o no :3
Un saludo muy enormee!!!
Debes sentirte así, porque este blog no es sólo mío, es tuyo y de todos, así que el premio lo ganamos todos :)
EliminarMe parece que alguien más tendrá que decirnos quién ganará los otros premios, porque desde casa hasta Madrid hay 9.428,03 km de distancia :P
Enhorabuena Potro.
ResponderEliminarEres el "puto amo" ;)
Felicidades.
Gracias por esa efusividad Tapestryworkerman :)
Eliminar¡¡¡¡eres ganador, potrooo!!!...¡¡¡¡por fin hay algo de justicia!!!!
ResponderEliminar¡¡¡¡¡FELICIDADES!!!
Gracias, gracias, gracias :)
EliminarMuy buenos los efectos, y todos los contenidos por lo interesante. Y mi enhorabuena por el premio, bien lo mereces.
ResponderEliminarTe agradezco mucho el comentario Josep. Saludos.
EliminarPotro, ¡Felicitaciones por el premio!, ¡más que merecido!
ResponderEliminarTe quería mostrar como jugando un poco con CSS3 (gracias a que publicaste esta entrada) hice modificaciones sobre las imágenes de la galería que está debajo del título, las entradas relacionadas de linkwithin y sobre las imágenes del gadget Entradas Populares. Me gusta mucho como quedó. Saludos! www.tomandofotos.com
Un trabajo impecable Marcos, me encantó cómo dejaste el de LinkWithin. Dentro de poco tendré que contratarte como diseñador :)
Eliminarjaja, Gracias :)
EliminarMuy bueno, de una lo puse en mi blog, gracias Potro!
ResponderEliminarPotro una pregunta... Por qué sólo me funciona con el primer ejemplo? con los demás bordes no me funciona nada :s
ResponderEliminarNo lo sé, habría que ver en cuál blog lo has puesto para ver qué sucede.
EliminarSaludos.
El blog es http://cdalianzapetrolera.blogspot.com
EliminarYo lo veo funcionando bien, mira:
Eliminarhttp://i39.tinypic.com/2zggphd.png
hola potro un pregunta hay alguna forma de que los bordes se vean igual tanto en firefox como en google chrome como puedes ver en el chrome los bordes de las imagenes no se ven los radios con el borde de ese color q seleccionamos checa bn tus ejemplos y sabras de q hablo por si no me hice entender saludos
ResponderEliminarNo. Esas son cosas de los navegadores y cómo cada uno interpreta los códigos. Saludos.
Eliminarun gustazo hablar contigo Potro... sabes? tengo un problema con el que estoy lideando varios dias ya... el asunto es el siguiente: tengo una academia preuniversitaria y con los alumnos estamos en comunicacion constante através del facebook, y hay alumnos que nos envian sus ejercicios para solucionarlos, pero tienen problemas a la hora de enviarmelos... en una pagina vi que uno se puede crear una cuenta en 4shared y ponerlo en el blog para que desde ahi nomas envien facilmente sus archivos... ahi te paso la direccion de la pagina http://denoizer.com/envie_sus_remix.html
ResponderEliminarporfavor ayudeme con esto y le quedare eternamente agradecido...
Hola Espinoza Melgarejo, Erick, en realidad no es nada complicado insertar la pantalla de 4shared, si ya tienes cuenta ahí sólo ingresa, y en el menú de arriba haz click en "Compartir", ahí selecciona "Incrustar carpeta actual", copia el primer código y pégalo donde quieras que aparezca, si quieres puede ser en una entrada, o bien, en un elemento HTML/Javascript.
EliminarSaludos.
Muy bueno, estupendos efectos. Ya los estoy poniendo en el blog.
ResponderEliminarGrandes aportes los tuyos.
¡¡Muchas gracias!!
Me alegra que te hayan gustado Frannoe, saludos!
Eliminaramigo Potro, gracias por la ayuda, pero aun sigo con un problema, cuando yo cierro sesion de 4shared, desaparece el cuadro de subidas.. me puede decir donde esta el problema??? gracias por anticipado
ResponderEliminarVerifica en las opciones de la Configuración, ahí debe haber algo que debas activar o desactivar. A decir verdad nunca he usado ese hosting, ahora abrí una cuenta sólo para poder saber cómo ayudarte, pero desconozco todas las opciones que pueda tener.
Eliminarque paisaje es el de la montaña?
ResponderEliminarNi idea, es un wallpaper público algo conocido.
EliminarQué tal, consulta: se pueden tener más de un efecto a la vez? Si por ejemplo, a una imagen en una entrada quiero aplicarle un efecto pero a otras otro, entonces, cómo las puedo combinar? o sólo puedo tener una cargada en el blog y aplicarla a las imágenes que quiero? Se entiende mi consulta? Yo ya agregué uno de los efectos en mi plantilla pero sin aclarar a qué imágenes lo aplico para cuando lo quiera usar, agrego a la imagen lo de class='redondeado' y listo, pero si agrego otro tipo de efecto, entonces cómo lo tengo que colocar en la plantilla para usar una vez uno y otra vez otro? gracias.
ResponderEliminarHola Ernie,
EliminarSí puedes tener más de un efecto a la vez. Mira el comentario #29.1, ahí encontrarás las indicaciones para hacerlo.
Saludos.
gracias amigo potro... a tanta insistencia pude dar con la solucion de mi problema, quedo eternamente agradecido por sus consejos que me ayudaron mucho, seguiremos en contacto, cuidese un abrazo a la distancia.
ResponderEliminarMe alegra que lo hayas resuelto. Otro abrazo para ti.
EliminarHay que expandir artilugios?
ResponderEliminarHola Potro, saludos!
ResponderEliminarTengo una duda, quería poner los bordes del ejemplo 2 pero no me sale en el blog, el único que me funciona bien es el borde del ejemplo 1 y ese fue el que dejé pero insisto en colocar el ejemplo 2. Que tengo que hacer?
Mi blog es http://latinosxatytv.blogspot.com
Cualquier respuesta le estaré agradecido.
Hola Latinos, Chat y TV. Pon el código que quieres, aunque no funcione déjalo puesto para que pueda entrar a ver por qué no te ha funcionado.
EliminarSaludos.
Listo Potro, puse el código del ejemplo 2, para que le eches un vistazo y me diga qué sucede en mi caso, gracias.
EliminarEs porque arriba, en el código de la paginación, has puesto comentarios que no deben ir dentro del CSS. Mira esta entrada para que veas de qué hablo:
Eliminarhttp://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
Muchas gracias Potro, al fin lo logré y todo gracias a usted.
EliminarPotro otra consulta... Usted tiene algun truco para que las entradas sólo se vean un poco del contenido y el resto se vea cuando se le de clic al título de la entrada? Perdone la molestia.
EliminarEste es un ejemplo de lo que me refiero:
Eliminarhttp://www.vanguardia.com/santander/barrancabermeja
Sí, mira esta entrada:
Eliminarhttp://ciudadblogger.com/2010/03/leer-mas-automatico-con-imagenes-en.html
Gracias Potro, eres grande!!
Eliminarhola una consulta por que cuando yo ingreso el codio ya bacan se ve bonito en mi google chrome pero cuando quiero entrar desde otro internet no puedo ver el efecto por fis ojala puedan ayudarme
ResponderEliminarHola Fabilumacakes. Quizá el navegador con el que lo estás viendo no reconoce esas propiedades que sólo leen los navegadores modernos.
EliminarEjelí para poner en mi blog el segundo truco que mostras, y nosé que pasa, copie todo y no me sale, queda la imagen cuadrada sin ningun efecto. Que hice mal? o que tengo que hacer?
ResponderEliminarEn mi blog ahora tengo un marco como ese para las fotos, pero lo hice con otra pagina y todo bien, pero no tiene ningun efecto. Quiero ese efecto, el segundo, pero tengo que hacerlo bien, y nosé que hice mal.
Gracias.
Hola daiana. Cuando has puesto el código de los estilos has eliminado una llave de cierre del código que está justo arriba de ese. Mira esta entrada para que veas a qué me refiero:
Eliminarhttp://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
Yee! esa es la que yo queria ! hace mucho.. gracias :)
ResponderEliminarQué bueno que te ha gustado Stephany ت :)
EliminarHola Potro! Es un gusto saludarte.
ResponderEliminarEste truco se ve genial y sobre todo, parece simple. Muchas gracias por compartirlo.
Quisiera preguntar lo siguiente: es que ya tengo el efecto push-botom como hover en todos los enlaces de mi blog (sean texto o sean imágenes). Y como casi todas mis imágenes en las entradas las tengo que se abran en ventana aparte, entonces todas ellas son enlaces con efecto push-botom.
Por eso quisiera saber si puedo agregar este efecto border-radius sin perder el efecto push-botom que ya tengo, porque también me gusta así.
Y de paso, vi en comentarios más arriba que algunos han puesto este efecto redondeado en imágenes de los gadgets. ¿Cómo sería en ese caso? porque no he conseguido hacerlo.
Por ejemplo, en mi página home tengo un gadget (en el main sobre los posts) que tiene varias imágenes con links y quisiera aplicarles ese efecto.
¿Me podrías orientar al respecto porfa, si no es mucha molestia?
Muchas gracias de antemano por toda tu ayuda.
Ah, mi blog es www.alabadora.com
Saludos mil.
Hola Vicky, el gusto en saludarte es mío :)
EliminarPuedes usar ambos efectos en las imágenes, sólo aplica los estilos de los dos efectos dentro de la clase de las imágenes, por ejemplo:
.post-body img:hover {
/* Estos son los efectos de los bordes */
border-radius: 0% 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
/* Estos son los efectos del pushbutton */
position: relative;
top: 1px;
left: 1px;
}
Para los demás gadgets es más o menos igual, sólo que los estilos los aplicarías para el ID del gadget que quieres, en este caso:
#HTML27 img:hover {
...Aquí los estilos que quieras...
}
En ambos ejemplos es para que se tome el efecto al pasar el cursor, por supuesto que también lo puedes aplicar a la imagen en su estado natural, sólo hay que quitar el :hover
Saludos.
Graciassssss...
EliminarLe apliqué el estilo solo a las imágenes del gadget principal sobre las entradas y me salió bien. Creo que lo aplicaré para las imágenes de los post, pero más adelante.
Lo revisé en el Crhome y Mozilla y se ven bien. En el IE solo se ve el efecto push-botom, pero no así los bordes redondeados. Bueno, al menos en el IE 8, que es el que tengo. Supongo que en las versiones posteriores sí se verá bien.
Muchas gracias por toda tu ayuda.
Bendiciones para ti!
El CSS3 sólo lo admite IE9 y aun así lo lee con ciertas trabas, por ejemplo, los bordes redondeados los interpreta cuando son aplicados a DIVs pero no a imágenes, al menos con las pruebas que yo he hecho no parece que los tome.
EliminarBuen fin de semana!
Estuve intentando colocar este codigo en mi blog, de la manera en que lo especificas, y no puedo hacer que funcione.
ResponderEliminarYa revise los errores comunes y no puedo notar ninguno.
A que otro factor puede deberse?
Hola Nicolás, cambia las dos partes que dice .post-body por .post
EliminarGenio, muchas gracias!
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarHola Christian,
EliminarSi quieres que de forma automática, todas las imágenes de tus entradas tengan una imagen de fondo, entonces agrega en los estilos esto:
.post-body img {
background: url(URL de la imagen);
padding:30px;
}
Ahí pon la URL de la imagen que estará de fondo, y ese 30px es todo el ancho que se verá como "borde" de la imagen.
Si quieres que sólo se aplica a las imágenes que tú elijas entonces lo que deberás agregar será esto:
.borde-img {
background: url(URL de la imagen);
padding:30px;
}
Y dentro del código de tu imagen pondrías lo que est´en negrita:
<img class="borde-img" src="URL de la imagen" />
Sigo teniendo problemas, ahora se ven la sombra y eso, pero cuando paso el mouse no cambia a cuadrada la imagen. Como te había dicho, hice un marco para la foto con otra pagina, el marco negro. Pobre en sacarselo, al codigo y quedo el margo de la imagen negro, pero cuadrado y no cambiaba de forma, nada. Que tengo que hacer? u.u
ResponderEliminar