Cómo utilizar el recorte CSS

Todos los elementos de las páginas web se definen dentro de una caja rectangular. Sin embargo, eso no significa que tengamos que hacer que todo parezca una caja. Puedes usar el CSSConcepto de CSS¿Qué es el CSS?CSS es un lenguaje de programación que se usa para definir el estilo y el aspecto de un documento que se ha escrito mediante de un lenguaje de etiquetas, como HTML. Conocido además como hojas de estilo en cascada, es el que se emplea para dar colores, indicar tipos de letra o inclusive resaltar aspectos como el espacio entre items para dotar de estilo a más clip-path propiedad para recortar partes de una imagen u otro elemento, para crear efectos interesantes.

En el ejemplo anterior, la imagen del globo es cuadrada (fuente). Utilizando clip-path y el valor de forma básica de circle()
el cielo adicional alrededor del globo se recorta dejando una imagen circular en la página.

Como la imagen es un enlaceConcepto de Dominio¿Qué es un Enlace?En Internet, un link, además conocido como enlace o hipervínculo, es cualquier texto o imagen que se encuentra en una página web y en la que el usuario puede pulsar o clicar para ser dirigido a otro contenido distinto. Es el principal medio de “desplazamiento” en la red, puesto que se encuentra presente en prácticamente cualquier portal que visites a día de hoy, inclusive en más, puede ver algo más sobre el clip-path propiedad. Solo se puede hacer clic en el área visible de la imagen, ya que los eventos no se activan en las partes ocultas de la imagen.

El recorte se puede aplicar a cualquier elemento HTMLHTML (Hypertext Markup Language) se usa para estructurar el contenido de texto de un documento web. No sólo se marca el contenido, sino además la meta-información que describe este contenido. Las páginas HTML se almacenan normalmente en el directorio raíz del servidor. Cómo se creó En la era digital, a los usuarios les resulta difícil hallar su camino en las webs y hacer un seguimiento de las estructuras de las más, no solo a imágenes. Hay algunas formas diferentes de crear un clip-path, en este postConcepto de Post¿Qué es un Post?Un Post es todo aquel contenido, sea post, opinión, noticia u otro género, que un autor publica en un blog. Este puede ser de carácter corporativo o meramente ocioso; pero siempre tiene como meta arrojar información o reflejar una idea, al mismo tiempo de facilitar que los usuarios encuentren la web donde se recoge por medio de de buscadores y demás plataformas online.Generalmente, se han más los veremos.

Compatibilidad del navegadorUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los más

Aparte de los valores del cuadro como se explica más adelante en la publicación, los diversos valores de clip-path demostrado tener excelente soporte de navegador. Para los navegadoresConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet más heredados, una alternativa puede ser permitir que el navegador ignore la clip-path propiedad y mostrar la imagen sin recortar. Si este es un problema, puede probarlo clip-path en una consulta de funciones y ofrecen un diseño alternativo para navegadores no compatibles.

@supports(clip-path: circle(45%) {
}

Formas básicas

los clip-path La propiedad puede tomar varios valores. El valor utilizado en el ejemplo inicial fue circle(). Este es uno de los valores de forma básicos, que se definen en el
Especificación de formas CSS. Esto significa que puede recortar un área y también usar el mismo valor para shape-outside para hacer que el texto se ajuste a esa forma.

La lista completa de formas básicas es:

inset()

los inset() value inserta el área recortada desde el borde del elemento y se pueden pasar valores para los bordes superior, derecho, inferior e izquierdo. UNA border-radius También se puede agregar para curvar las esquinas del área recortada, utilizando el round palabra clavePor definición, una palabra clave, (keyword en inglés), es una palabra informativa utilizada en un sistema de recuperación de información para indicar el contenido de un documento con la expectativa de un resultado de búsqueda coincidente. Herramientas de palabras clave La búsqueda de palabras clave para proyectos web individuales se ve enormemente facilitada por útiles herramientas. Al mismo tiempo, las herramientas de palabras clave ayudan mucho en la optimización del más.

En mi ejemplo tengo dos cajas ambas con una clase de .box. El primer cuadro no tiene recorte, el segundo se recorta usando inset() valores.

circle()

Como has visto, el circle() El valor crea un área circular recortada. El primer valor es una longitud o un porcentaje y es el radio del círculo. Un segundo valor opcional le permite establecer el centro del círculo. En el siguiente ejemplo, estoy usando valores de palabras clave¿Qué son las palabras clave?Término o conjunto de términos que un usuario introduce en un buscador como Google cuando quiere localizar información y que este último utiliza para identificar los resultados y los anuncios que mejor se ajustan a la búsqueda. Así, elegir palabras clave que coincidan con las expresiones o frases que los usuarios emplean se ha convertido en una pieza básica tanto para el posicionamiento orgánico como para la más para configurar mi círculo recortado en la parte superior derecha. También puede utilizar longitudes o porcentajes.

¡Cuidado con los bordes planos!

Tenga en cuenta que con todos estos valores la forma será recortada por el cuadro de margen del elemento. Si crea un círculo en una imagen y esa forma se extenderá fuera del tamaño natural de la imagen, obtendrá un borde plano.

ellipse()

Una elipse es esencialmente un círculo aplastado, por lo que actúa de manera muy similar a circle() pero acepta un radio para x y un radio para y, más el valor del centro de la elipse.

polygon()

los polygon() value puede ayudarlo a crear formas bastante complejas, definiendo tantos puntos como necesite, estableciendo las coordenadas de cada punto.

Para ayudarlo a crear polígonos y ver qué es posible, consulte Clippy, una clip-path generador, luego copie y pegue el código en su propio proyecto.

Formas a partir de valores de caja

También se definen en CSS Formas son formas de valores de caja. Estos se relacionan con el modelo de cuadro CSS: el cuadro de contenidoEl contenido puede ser muy difícil de definir con precisión. Es una definición que se refiere a las declaraciones contenidas en un documento o publicación de cualquier tipo y puede incluir las tecnologías de la información y la comunicación. Esto cubre todos los tipos de medios como imágenes y texto. A parte de esto, en el campo de la optimización de motores de búsqueda, los términos duplicar contenido, contenido único, más, el cuadro de relleno, el cuadro de borde y el cuadro de margen con valores de palabra clave de content-box, border-box, padding-boxy margin-box.

Estos valores se pueden usar solos o junto con una forma básica para definir el cuadro de referencia utilizado por la forma. Por ejemplo, lo siguiente recortaría la forma al borde del contenido.

.box {
clip-path: content-box;
}

En este ejemplo, el círculo usaría el content-box como cuadro de referencia en lugar de margin-box (que es el predeterminado).

.box {
clip-path: circle(45%) content-box;
}

Actualmente, los navegadores no admiten el uso de valores de cuadro para clip-path propiedad. Son compatibles con shape-outside sin embargo.

Usando un elemento SVG

Para tener más control sobre el área recortada de lo que es posible con formas básicas, use un SVG clipPath elemento. Luego haga referencia a esa ID, usando url() como el valor de clip-path.

Animando el área recortada

Las transiciones y animaciones CSS se pueden aplicar al clip-path para crear algunos efectos interesantes. En el siguiente ejemplo, estoy animando un círculo al pasar el mouse por la transición entre dos círculos con un valor de radio diferente.

Hay muchas formas creativas en las que la animación se puede utilizar con el recorte.
Animando con clip-path on CSS Tricks pasa por algunas ideas.

Foto por Matthew Henry en Burst.