domingo, 9 de noviembre de 2014

CSS - Efecto marca de agua

Buenas amigos, hoy os traigo algo que seguramente os resulte muy útil.
Mediante unos estilos CSS vamos a conseguir un efecto de marca de agua, esto no es seguro, pero si muy disuasorio, ya que si alguien quiere robarnos la imagen, va a ver nuestro logo, o la imagen que definamos sobre la imagen en cuestión y en mas del 90% de los casos no intentara cogerla.

Os explico, para conseguirlo necesitamos un Div que lo contenga todo y 2 imagenes, una que se va a utilizar como marca de agua y la otra que es la que mostraremos, algo similar a esto
<div class="marca-de-agua">
<img alt="" src="URL-IMAGEN" /></div>
 y los siguientes estilos CSS:

.marca-de-agua {
    background-image: url("../img/rogamaLogo.png");
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: auto;
    margin: auto;
}
.marca-de-agua img {
    padding: 0;
    width: 100%;
    height: auto;
    opacity: 0.7;
}
El código LESS:
@import 'variables.less';
.marca-de-agua {
   background-image: url("@{ruta-img}@{img-marca-agua}");
   background-repeat: no-repeat;
   background-position: center;
   width: 100%;
   height: auto;
   margin: auto;
   img{
        padding:0;
        width:100%;
        height: auto;
        opacity: @opacity-img;
        &:hover{
            opacity: 1;
            transition: 1s;
        }
   }
}
//**************variables.less**********//
@opacity-img: .7;
@ruta-img: '../img/';
@img-marca-agua: 'rogamaLogo.png';

quedaría algo así:

todo Android Gratis
Os dejo todo el código en el siguiente repositorio
https://github.com/rogama/ejemplos-HTML5-CSS3