De manera similar a cómo hicimos la otra vez, lo que haremos ahora será superponer una capa con un color RGBA semitransparente usando :before. Realmente no tiene mucha ciencia, así que vamos allá con el primer ejemplo y con el código correspondiente.
Este sería el CSS:
.colorear {
position: relative;
/* Estas dos propiedades sólo sirven para centrar */
display: table;
margin:0 auto;
}
/* Y esta para evitar el margin automático de Blogger en los enlaces */
.colorear a {
margin: 0 !important;
}
.colorear:before,
.separator:before {
content: "";
display: block;
position: absolute;
/* Todas las posiciones a cero */
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,102,0, 0.5); /*Sepia*/
}
.colorear:hover:before {
background: none;
}
position: relative;
/* Estas dos propiedades sólo sirven para centrar */
display: table;
margin:0 auto;
}
/* Y esta para evitar el margin automático de Blogger en los enlaces */
.colorear a {
margin: 0 !important;
}
.colorear:before,
.separator:before {
content: "";
display: block;
position: absolute;
/* Todas las posiciones a cero */
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,102,0, 0.5); /*Sepia*/
}
.colorear:hover:before {
background: none;
}
La última declaración sirve para deshacer lo hecho al pasar el puntero por encima de la imagen. Si se desea que las imágenes permanezcan coloreadas permanentemente sólo hay que borrarla.
Con esto en nuestra plantilla sólo hay que añadir la clase colorear y ya tendremos una imagen con el tono indicado en el background (sepia en el ejemplo). Así es como está hecha la de Hitchcock del principio.
<div class="colorear">
<a href="URL_ENLACE"><img src="URL_IMAGEN" /></a>
</div>
<a href="URL_ENLACE"><img src="URL_IMAGEN" /></a>
</div>
¿Y que tal si podemos ir variando el color según se nos antoje? Pues para eso sólo hace falta incorporar al código anterior algunas declaraciones más y luego añadir una de esas nuevas clases al HTML:
.azul:before {
background: rgba(0,0,255, 0.5);
}
.verde:before {
background: rgba(0,255,0, 0.5);
}
.rojo:before {
background: rgba(255,0,0, 0.5);
}
.cyan:before {
background: rgba(0,255,255, 0.5);
}
.amarillo:before {
background: rgba(255,255,0, 0.5);
}
background: rgba(0,0,255, 0.5);
}
.verde:before {
background: rgba(0,255,0, 0.5);
}
.rojo:before {
background: rgba(255,0,0, 0.5);
}
.cyan:before {
background: rgba(0,255,255, 0.5);
}
.amarillo:before {
background: rgba(255,255,0, 0.5);
}
<div class="colorear azul">
<a href="URL_ENLACE"><img src="URL_IMAGEN" /></a>
</div>
<a href="URL_ENLACE"><img src="URL_IMAGEN" /></a>
</div>
<div class="colorear rojo">
<a href="URL_ENLACE"><img src="URL_IMAGEN" /></a>
</div>
<a href="URL_ENLACE"><img src="URL_IMAGEN" /></a>
</div>
Para Blogger una vez más podemos aprovechar que ya se inserta automáticamente la clase separator cuando subimos una imagen y así no tener que crear una nueva. Para ello sirve el anterior CSS cambiando el nombre colorear las cuatro veces que aparece, por el de separator.
Hay que tener en cuenta que si se hace así todas las imágenes de todas las entradas saldrán con el color que hayamos puesto como background. Luego si se quiere ir cambiando el color de alguna en concreto habrá que añadir manualmente, como hicimos antes, alguna de las clases con los colores adicionalmente definidos.
Se puede crear una que anule el efecto y que tendría que llevar un background: none;
<div class="separator amarillo" style="clear: both; text-align: center;">
<a href="URL_ENLACE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="URL_IMAGEN" width="500" /></a></div>
<a href="URL_ENLACE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="URL_IMAGEN" width="500" /></a></div>
<div class="separator cyan" style="clear: both;...
<div class="separator verde" style="clear: both;...
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Necesito ayuda para aplicar esto a cierta plantilla a todas las imágenes en la portada digamos no a una especifica y no lo logro. Me puedes ayudas?
ResponderEliminarPrueba con esto, pero cambiando las propiedades CSS por las de aquí.
EliminarNo lo puedo hacer, no hay caso, creo que serian .post img como deberian nombrarse pero no puedo hacer nada. Soy nuevo y no entiendo mucho de esto.
ResponderEliminarTendrías que usar lo que se explica en el enlace que te puse pero cambiando la palabra .grises por .post. Tal y como dices quedaría .post img y .post img:hover
EliminarTodo eso lo tienes que copiar y pegar antes de la etiqueta de cierre SKIN de tu plantilla. Para más detalle echa un vistazo a estos dos posts:
http://www.oloblogger.com/2010/05/blogger-estructura-basica-de-la.html
http://www.oloblogger.com/2008/05/blogger-para-torpes-html-y-css.html
Sí ya hice todo eso, pero ahí te pone el filtro color gris, yo quiero otro color como en esta entrada.
Eliminar¿Y probaste con SEPARATOR como se explica en la segunda mitad del post?
EliminarIntento hacer esto con una imagen del sidebar, pero no obtengo resultado :S he copiado los códigos tal y como los das, pero nada ¿no sirve para las imágenes del sidebar?
ResponderEliminarHola. Pues sí debería servir. Pásame tu dirección que lo vea.
EliminarMuy bueno lo que haces oloman, al compartir tus conocimientos.Soy un seguidor fiel a este blog.Saludos desde Argentina
ResponderEliminarAgradecido por tu comentario :)
Eliminarel error es porque tiene una "coma" al final si la quitan ya se ve normal ----> .colorear:before, {} <------
ResponderEliminarlo correcto seria asi .colorear:before {}
Oloman, estoy usando filtros similares a este, pero en blanco y negro, no usando este método en especifico, pero se asemeja, el css aplica a todas las imágenes automáticamente el efecto...
ResponderEliminarcss:
div.post-body.entry-content div img {
filter: grayscale(100);
la cuestión, es que quiero que ese css no se vea en la entrada misma, al entrar, valga la redundancia (que vuelva el color).
probé con el método de ocultar elementos en ciertas zonas del blog, pero no, nada pasa.
saludos
Hola Amovi. En ese caso lo que de ocultar elementos en ciertas zonas del blog no te sirve para nada. Lo que tienes que hacer es añadir ese estilo dentro de una condición, de manera que sólo se ejecute en todas las páginas menos precisamente en las entradas.
EliminarPara ello quita eso de dónde lo pusiste y en la plantilla, antes del </head> inserta esto otro:
<b:if cond='data:blog.pageType != "item"'>
<style>
div.post-body.entry-content div img {
filter: grayscale(100);
}
</style>
</b:if>
Resulto de inmediato, a cuantos miles ayudas así, gracias.
Eliminaraprendo lento, pero me eh estado fijando que arriba de < /head> están todos los < b:if, me gustaría aprender sobre esas
''condiciones'', (navegando por oloblogger en este momento :D )
Si escribes "condiciones" en mi buscador, encontrarás varios artículos sobre el tema; desde lo más sencillo hasta cosas más sofisticadas ;)
EliminarGenial, gracias!
ResponderEliminar