Breaking

Post Top Ad

Your Ad Spot

viernes, 10 de mayo de 2019

Introducción a Clipping usando el clip-path en CSS

clip-path es una propiedad muy interesante que permite recortar la porción visible de elementos SVG, imágenes o cualquier elemento HTML en realidad.
En este momento, la ruta del clip aún debe tener el prefijo -webkit- para que funcione en Safari.

Definiendo Formas Básicas Con Recorrido De Clip

clip-path facilita el recorte de formas básicas con cualquiera de las palabras clave de polígono , elipse , círculo o inserción , que forman parte del módulo de exclusión de CSS .

Polígono

Polygon es la forma más flexible de todas las formas disponibles porque le permite especificar cualquier cantidad de puntos, un poco como una ruta SVG . Los puntos proporcionados son pares de coordenadas X e Y que pueden ser de cualquier unidad (p. Ej., Píxel o porcentaje). Debido a que es el más flexible, también es el más complejo y probablemente querrá usar una herramienta para definir sus puntos.
Vamos a ilustrar con un ejemplo. Primero verá nuestra imagen de inicio, luego nuestra imagen con un trazado de clip aplicado para obtener una forma de triángulo, seguida de una forma de X más compleja y, finalmente, una forma de estrella:
/* Triangle */
.polygon1 {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/* X */
.polygon2 {
  -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
/* Star */
.polygon3 {
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
Nuestra imagen de inicio Un triángulo con clip-camino.
Forma de x Forma de estrella

Circulo

Los círculos se definen con esta sintaxis: círculo (radio en posX posY) . La posición es opcional y por defecto será 50% 50% . Aquí hay dos ejemplos para ilustrar:
Circulo Circulo 2
.circle {
  -webkit-clip-path: circle(50%);
  clip-path: circle(50%);
}
.circle2 {
  -webkit-clip-path: circle(70% at 70% 20%);
  clip-path: circle(70% at 70% 20%);
}

Elipse

Las elipses se definen utilizando esta sintaxis: elipse (radiusX radiusY at posX posY) . Una vez más, la posición es opcional y por defecto será 50% 50% . Aquí hay dos ejemplos:
Circulo Circulo 2
.ellipse {
  -webkit-clip-path: ellipse(50% 35%);
  clip-path: ellipse(50% 35%);
}
.ellipse2 {
  -webkit-clip-path: ellipse(50% 65% at 70% 50%);
  clip-path: ellipse(50% 65% at 70% 50%);
}

Recuadro

Con el recuadro se puede definir un rectángulo interior y todo lo exterior se recortará. Esto facilita recortar efectivamente una imagen o un elemento directamente en el navegador. También puede hacer que el rectángulo se redondee con la palabra clave de ronda y un valor de radio de borde:
Recuadro Recuadro 2
.inset {
  -webkit-clip-path: inset(20% 25% 20% 10%);
  clip-path: inset(20% 25% 20% 10%);
}
.inset2 {
  -webkit-clip-path: inset(45% 0% 33% 10% round 10px);
  clip-path: inset(45% 0% 33% 10% round 10px);
}

Animaciones y transiciones

Las animaciones y transiciones también se pueden aplicar con una ruta de clippara crear efectos interesantes. Solo asegúrate de que todos los pasos en tu animación contengan la misma cantidad de puntos. Vamos a demostrar con un ejemplo:
Animando el clip de ruta
Aquí están las reglas de CSS usadas para crear esta animación:
img.animate {
  animation: magic 4s infinite;
}

@keyframes magic {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  20% {
    -webkit-clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%);
    clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%);
  }
  40% {
    -webkit-clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%);
    clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%);
  }
  60% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
    clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
  }
  80% {
    -webkit-clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%);
    clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}
Ah, y en caso de que esté interesado en el pequeño script para hacer que el botón de inicio / parada funcione. Es tan simple como agregar o eliminar la clase animada en nuestra imagen:
let toAnimate = document.querySelector('.trigger');
let button = document.querySelector('.trigger-btn');

button.addEventListener('click', function() {
  if (toAnimate.classList.contains('animate')) {
    toAnimate.classList.remove('animate');
    this.innerText = 'Start';
  } else {
    toAnimate.classList.add('animate');
    this.innerText = 'Stop';
  }
});

Formas SVG personalizadas

También puede definir cualquier forma SVG arbitraria para que actúe como el valor de la ruta del clip. Obviamente, querrá comenzar en una herramienta como Sketch para crear su forma y luego copiar el marcado SVG en un editor de texto. En su marca SVG, simplemente envuelva su forma en un elemento clipPath y envuelva la clipPath en un bloque defs .
Algo como esto por ejemplo:
<svg width="0" height="0">
  <defs>
    <clipPath id="my-shape">
      <path d="M89.6342913,129 C86.6318679,137.611315 85,146.865086 85,156.5 C85,200.767808 119.448105,236.989829 163,239.821749 L163,300 L300,300 L300,163 L251.750745,163 C251.915896,160.855015 252,158.687329 252,156.5 C252,110.384223 214.615777,73 168.5,73 C146.712501,73 126.873981,81.3445721 112.006052,95.0121046 L64.5,0 L0,129 L89.6342881,129 Z">
      </path>
    </clipPath>
  </defs>
</svg>
Y ahora puede aplicar la forma definida como el valor de la ruta del clip usando la palabra clave url y el id de la forma SVG:
.svg-shape {
  -webkit-clip-path: url(#my-shape);
  clip-path: url(#my-shape);
}Recorte con una forma SVG

📐 ¡Diviértete creando diferentes formas en tus diseños! Ah, y compruebe Clippy , una gran herramienta que lo ayuda a definir los valores de su trayectoria de recorte.

... y gracias a ian dooley por una foto increíble!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas