CSS – Diego Castiblanco

Aveces necesitamos que una imagen o un grupo de imagenes a color se vean en Blanco y Negro, aquí te mostraté como convertir una imagen a color en Blanco y Negro usando CSS, cabe aclarar que seguramente hay muchas más formas de llegar a resultados similares, pero te mostraré la forma que uso y que me parece más conveniente.

[wp_ad_camp_1]

Sin más preambulo, la solución que tenemos aquí es básicamente usar este estilo CSS que se puede aplicar a un solo elemento, o también a una clase para ser usado por cualquier imagen o grupo de imagenes. En este caso creé un estilo para una clase llamada blanco-negro, la cual al ser usada en cualquier imagen cambiará los todos a una escala de grises que es lo que necesitamos.

.blanco-negro {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

Procedo a aplicar dicho estilo al logo de mi blog, sin embargo lo aplicaré directamente sobre el HTML de la imagen porque posteriormente editaré esta clase para adicionar más cosas. Por lo que el logo del blog con el estilo anterior luce de la siguiente forma.

Imagen Blanco y Negro usando CSS, Hover

Sin embargo, lo que en realidad necesitaba era desarrollar la página de “Clientes” dentro del sitio web de un cliente, lo que él quería era que al cargar dicha página se cargaran las imagenes de sus clientes en blanco y negro, pero que al pasar el cursor sobre cada imagen (hover) se vieran los colores originales del logo de cada uno de sus clientes. En este caso usé el estilo anterior pero adicionalmente añadí el hover, donde le quitamos la escala de grises para que quede la imagen original.

.blanco-negro {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

.blanco-negro:hover {
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
}

En este caso sí usaré la clase blanco-negro sobre la imagen y el resultado será.

Si tienes una forma más rápida o eficiente de lograr el mismo objetivo no dudes en comentar.

Una petición muy común que tienen los clientes es la implementación de una página de testimonios, tener testimonios en la página de inicio o algo similar, si estamos trabajando con WordPress podríamos hacer uso de algún plugin de testominios, sin embargo, para efectos de velocidad y optimización de una página todos sabemos que es recomendable evitar al máximo el uso de plugins, por esto, me vi en la obligación de encontrar un método para poder tener testimonios sin plugins. Cabe resaltar que si no estás trabajando con WordPress te servirá igualmente.

[wp_ad_camp_1]

Este método para tener testimonios CSS usa los pseudo-elementos CSS :before y :after, también algunas propiedades simples de CSS3 para hacer lucir mejor a los testimonios.

Resultado Testimonios CSS

Esto no es un testimonio falso de esos que nos encontramos todos los días en Internet, esto es un testomonio falso con un agradable estilo CSS!

Alan Turing | Computer scientist

Como podemos apreciar, básicamente tenemos un blockquote con fondo de color B7EDFF, en la esquina superior izquierda e inferior derecha tenemos unas comillas y por último en la parte inferior del bloque tenemos el nombre del autor y un título de profesión o algo similar.

Cómo implementar los testimonios CSS

En esta sección voy a asumir que estás trabajando con WordPress, sin embargo si quieres tener testimonios con CSS usando otro CMS o una página que estés desarrollando desde cero lo puedes hacer sin ningún problema.

Básicamente tenemos que hacer dos cosas

Desde nuestro escritorio de administración vamos a Apariencia y editamos nuestra Hoja de estilo (style.css). Aunque también se puede incluir el CSS en cada elemento es recomendable hacerlo en la hoja de estilos que esté cargardo nuestro sitio. Incluimos el siguiente código CSS:

.autor-testimonio {
    margin: 0 0 0 25px;
    font-family: Arial, Helvetica, sans-serif;
    color: #999;
    text-align:left;
}
.autor-testimonio span {
    font-size: 12px;
    color: #666;
}
.fecha-abajo {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #B7EDFF;
    margin: 0 0 0 25px;
}
.testimonio {
    margin: 0;
    background: #B7EDFF;
    padding: 10px 50px;
    position: relative;
    font-family: Georgia, serif;
    color: #666;
    border-radius: 5px;
    font-style: italic;
    text-shadow: 0 1px 0 #ECFBFF;
    background-image: linear-gradient(#CEF3FF, #B7EDFF);
    text-align: justify;
}

.testimonio:before, .testimonio:after {
    content: "\201C";
    position: absolute;
    font-size: 80px;
    line-height: 1;
    color: #999;
    font-style: normal;
}

.testimonio:before {
    top: 0;
    left: 10px;
}
.testimonio:after {
    content: "\201D";
    right: 10px;
    bottom: -0.5em;
}

Lo único que nos falta es agregar el código HTML en el lugar donde queremos mostrar nuestro testimonio.

<blockquote class="testimonio">Aquí debes poner lo que quieras que salga en el testimonio.</blockquote>
<div class="fecha-abajo"></div>
<p class="autor-testimonio">Nombre del Autor del Testimonio | Profesión o título del personaje anterior</p>

Una vez que realicemos estos dos pasos tendremos testimonios usando CSS como lo mostré al inicio de este artículo en Resultado Testimonios CSS, si deseas cambias el color de fondo deberás cambiar el atributo background en .testimonios, también podrás cambias bordes, tipo de letra, la alineación del texto, etc.

Si tienes sugerencias para hacer que los testimonios luzcan incluso mejor espero comentarios.

Category: CSS

Imagen en Blanco y Negro usando CSS

Imagen Blanco y Negro usando CSS, Hover

Testimonios CSS

Resultado Testimonios CSS

Cómo implementar los testimonios CSS