Snippets

Crear Marca de Agua con solo CSS

Sin Comentarios

Hola, en este nuevo tips para CSS, te enseñare como hacer una “Marca de Agua” que se sobre pondrá en cualquier elemento HTML del documento. La técnica es muy sencilla, veamos.

body:after {
  content: "©"; 
  font-size: 15em;  
  color: rgba(52, 166, 214, 0.4);
  z-index: 9999;
 
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
    
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  -ms-pointer-events: none;
  -o-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

Simplemente utilizamos los Pseudo-elementos para insertar la marca, la posicionamos en el centro del documento gracias a las propiedades de flexbox, le damos un color por medio del método RGBA para aplicar colores y asi darle opacidad al texto, le damos un z-index alto para que este por encima de los demas elementos y desactivamos por css los eventos de puntero  que pueda realizar el usuario.

See the Pen Marca de agua con CSS by frontend (@tutosytips) on CodePen
20550

Y listo, en este caso lo aplicamos al body que sobre pondrá todo, aunque lo podemos aplicar a cualquier otro elemento.

Comentar

avatar