{"id":82137,"date":"2022-08-22T14:32:10","date_gmt":"2022-08-22T12:32:10","guid":{"rendered":"https:\/\/rmarketingdigital.com\/development\/como-utilizar-el-recorte-css\/"},"modified":"2020-09-16T14:52:53","modified_gmt":"2020-09-16T17:52:53","slug":"como-utilizar-el-recorte-css","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/dev\/como-utilizar-el-recorte-css\/","title":{"rendered":"How to use CSS clipping"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/como-utilizar-el-recorte-css\/#Compatibilidad-del-navegador\" >Browser compatibility<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/como-utilizar-el-recorte-css\/#Formas-basicas\" >Basic shapes<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/como-utilizar-el-recorte-css\/#inset\" >inset ()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/como-utilizar-el-recorte-css\/#circle\" >circle ()<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/como-utilizar-el-recorte-css\/#%C2%A1Cuidado-con-los-bordes-planos\" >Watch out for flat edges!<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/como-utilizar-el-recorte-css\/#ellipse\" >ellipse ()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/como-utilizar-el-recorte-css\/#polygon\" >polygon ()<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/como-utilizar-el-recorte-css\/#Formas-a-partir-de-valores-de-caja\" >Shapes from cash values<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/como-utilizar-el-recorte-css\/#Usando-un-elemento-SVG\" >Using an SVG element<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/como-utilizar-el-recorte-css\/#Animando-el-area-recortada\" >Animating the cropped area<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p>\n          <time>September 14, 2020<\/time><\/p>\n<\/header>\n<p>All elements of web pages are defined within a rectangular box. However, that doesn&#039;t mean we have to make everything look like a box. You can use the CSS <code>clip-path<\/code> property to crop parts of an image or other element, to create interesting effects.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/clip-path?path=README.md&amp;previewSize=100\" title=\"clip-path on Glitch\" allow=\"encrypted-media\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<p>In the example above, the balloon image is square (<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/cdn.glitch.com\/5984697d-c5e8-4a63-a765-7e7ac3916fc0%2Fround-balloon.jpg?v=1597216988521\">source<\/a>). Using <code>clip-path<\/code> and the basic form value of <code>circle ()<\/code><br \/>\nthe extra sky around the globe is cut out leaving a circular image on the page.<\/p>\n<p>As the picture is a link, you can see some more about it <code>clip-path<\/code> property. Only the visible area of the image can be clicked, as events are not fired in hidden parts of the image.<\/p>\n<p>Clipping can be applied to any HTML element, not just images. There are a few different ways to create a <code>clip-path<\/code>, in this post we will see them.<\/p>\n<h2 id=\"browser-compatibility\"><span class=\"ez-toc-section\" id=\"Compatibilidad-del-navegador\"><\/span>Browser compatibility <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Apart from the values in the table as explained later in the post, the various values of <code>clip-path<\/code> proven to have <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/caniuse.com\/#feat=css-clip-path\">excellent browser support<\/a>. For legacy browsers, an alternative may be to allow the browser to ignore the <code>clip-path<\/code> property and display the image without cropping. If this is a problem, you can try it <code>clip-path<\/code> in a function query and offer an alternative layout for unsupported browsers.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token atrule\"><span class=\"token rule\">@supports<\/span><span class=\"token punctuation\">(<\/span><span class=\"token property\">clip-path<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">circle<\/span><span class=\"token punctuation\">(<\/span>45%<span class=\"token punctuation\">)<\/span><\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"basic-shapes\"><span class=\"ez-toc-section\" id=\"Formas-basicas\"><\/span>Basic shapes <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>the <code>clip-path<\/code> The property can take several values. The value used in the initial example was <code>circle ()<\/code>. This is one of the basic shape values, which are defined in the<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/css-shapes-1\/#basic-shape-functions\">CSS shape specification<\/a>. This means that you can crop an area and also use the same value for <code>shape-outside<\/code> to make the text conform to that shape.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/clip-path-with-shape?path=README.md&amp;previewSize=100\" title=\"clip-path-with-shape on Glitch\" allow=\"encrypted-media\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>Note that CSS shapes can only be applied to floating elements. the <code>clip-path<\/code> The property does not require the element to be floating.<\/p>\n<\/div>\n<p>The full list of basic shapes is:<\/p>\n<h3 id=\"inset()\"><span class=\"ez-toc-section\" id=\"inset\"><\/span><code>inset ()<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>the <code>inset ()<\/code> value inserts the clipped area from the edge of the element and values can be passed for the top, right, bottom, and left edges. A <code>border-radius<\/code> It can also be added to curve the corners of the cropped area, using the <code>round<\/code> keyword.<\/p>\n<p>In my example I have two boxes both with a class of <code>.box<\/code>. The first frame has no clipping, the second one is trimmed using <code>inset ()<\/code> values.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/clip-path-inset?path=README.md&amp;previewSize=100\" title=\"clip-path-inset on Glitch\" allow=\"encrypted-media\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<h3 id=\"circle()\"><span class=\"ez-toc-section\" id=\"circle\"><\/span><code>circle ()<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>As you have seen, the <code>circle ()<\/code> The value creates a circular cropped area. The first value is a length or a percentage and is the radius of the circle. A second optional value allows you to set the center of the circle. In the example below, I am using keyword values to set my cropped circle at the top right. You can also use lengths or percentages.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/clip-path-circle?path=README.md&amp;previewSize=100\" title=\"clip-path-circle on Glitch\" allow=\"encrypted-media\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<h4 id=\"watch-out-for-flat-edges!\"><span class=\"ez-toc-section\" id=\"%C2%A1Cuidado-con-los-bordes-planos\"><\/span>Watch out for flat edges! <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Note that with all these values the shape will be clipped by the element&#039;s margin box. If you create a circle in an image and that shape will extend outside the natural size of the image, you will get a flat edge.<\/p>\n<figure class=\"w-figure\">\n  <img alt='flat-edges-2833046' class=\"w-screenshot\" style=\"max-inline-size: 480px\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/flat-edges-2833046.jpg'><figcaption>The image used previously now has <code>circle (50%)<\/code> applied. Since the image is not square, we press the margin box at the top and bottom and the circle is cropped.<\/figcaption><\/figure>\n<h3 id=\"ellipse()\"><span class=\"ez-toc-section\" id=\"ellipse\"><\/span><code>ellipse ()<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>An ellipse is essentially a squashed circle, so it acts very similar to <code>circle ()<\/code> but it accepts a radius for x and a radius for y, plus the value of the center of the ellipse.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/clip-path-ellipse?path=README.md&amp;previewSize=100\" title=\"clip-path-ellipse on Glitch\" allow=\"encrypted-media\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<h3 id=\"polygon()\"><span class=\"ez-toc-section\" id=\"polygon\"><\/span><code>polygon ()<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>the <code>polygon ()<\/code> value can help you create quite complex shapes, defining as many points as you need, setting the coordinates of each point.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/clip-path-polygon?path=README.md&amp;previewSize=100\" title=\"clip-path-polygon on Glitch\" allow=\"encrypted-media\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<p>To help you create polygons and see what is possible, see <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/bennettfeely.com\/clippy\/\">Clippy<\/a>, a <code>clip-path<\/code> generator, then copy and paste the code into your own project.<\/p>\n<h2 id=\"shapes-from-box-values\"><span class=\"ez-toc-section\" id=\"Formas-a-partir-de-valores-de-caja\"><\/span>Shapes from cash values <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Also defined in CSS Forms are forms of <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Shapes\/From_box_values\">cash values<\/a>. These relate to the CSS box model: the content box, the fill box, the border box, and the margin box with keyword values of <code>content-box<\/code>, <code>border-box<\/code>, <code>padding-box<\/code>and <code>margin-box<\/code>.<\/p>\n<p>These values can be used alone or in conjunction with a basic shape to define the reference frame used by the shape. For example, the following would clip the shape to the edge of the content.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">.box<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">clip-path<\/span><span class=\"token punctuation\">:<\/span> content-box<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>In this example, the circle would use the <code>content-box<\/code> as a reference chart instead of <code>margin-box<\/code> (which is the default).<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">.box<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">clip-path<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">circle<\/span><span class=\"token punctuation\">(<\/span>45%<span class=\"token punctuation\">)<\/span> content-box<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Currently, browsers do not support the use of box values for <code>clip-path<\/code> property. Are compatible with <code>shape-outside<\/code> Nevertheless.<\/p>\n<h2 id=\"using-an-svg-element\"><span class=\"ez-toc-section\" id=\"Usando-un-elemento-SVG\"><\/span>Using an SVG element <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To have more control over the cropped area than is possible with basic shapes, use an SVG <code>clipPath<\/code> element. Then reference that ID, using <code>url ()<\/code> as the value of <code>clip-path<\/code>.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/clip-path-svg?path=README.md&amp;previewSize=100\" title=\"clip-path-svg on Glitch\" allow=\"encrypted-media\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<h2 id=\"animating-the-clipped-area\"><span class=\"ez-toc-section\" id=\"Animando-el-area-recortada\"><\/span>Animating the cropped area <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CSS transitions and animations can be applied to the <code>clip-path<\/code> to create some cool effects. In the example below, I am animating a circle by hovering over the transition between two circles with a different radius value.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/clip-path-animated?path=README.md&amp;previewSize=100\" title=\"clip-path-animated on Glitch\" allow=\"encrypted-media\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<p>There are many creative ways that animation can be used with clipping.<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/css-tricks.com\/animating-with-clip-path\/\">Animating with clip-path<\/a> on CSS Tricks goes through some ideas.<\/p>\n<p><em>Photo by <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/burst.shopify.com\/@matthew_henry\">Matthew henry<\/a> in Burst.<\/em><\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>14 de septiembre de 2020 Todos los elementos de las p\u00e1ginas web se definen dentro de una caja rectangular. Sin embargo, eso no significa que tengamos que hacer que todo&#8230;<\/p>","protected":false},"author":1,"featured_media":82138,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-82137","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>C\u00f3mo utilizar el recorte CSS - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"14 de septiembre de 2020 Todos los elementos de las p\u00e1ginas web se definen dentro de una caja rectangular. Sin embargo, eso no significa que tengamos que\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/how-to-use-clipping-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo utilizar el recorte CSS\" \/>\n<meta property=\"og:description\" content=\"14 de septiembre de 2020 Todos los elementos de las p\u00e1ginas web se definen dentro de una caja rectangular. Sin embargo, eso no significa que tengamos que\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/dev\/how-to-use-clipping-css\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-22T12:32:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-9813730.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/how-to-use-clipping-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/how-to-use-clipping-css\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"C\u00f3mo utilizar el recorte CSS\",\"datePublished\":\"2022-08-22T12:32:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/how-to-use-clipping-css\\\/\"},\"wordCount\":859,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/how-to-use-clipping-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-9813730.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/how-to-use-clipping-css\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/how-to-use-clipping-css\\\/\",\"name\":\"C\u00f3mo utilizar el recorte CSS - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/how-to-use-clipping-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/how-to-use-clipping-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-9813730.jpg\",\"datePublished\":\"2022-08-22T12:32:10+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"14 de septiembre de 2020 Todos los elementos de las p\u00e1ginas web se definen dentro de una caja rectangular. Sin embargo, eso no significa que tengamos que\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/how-to-use-clipping-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/how-to-use-clipping-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-9813730.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-9813730.jpg\",\"width\":1200,\"height\":360,\"caption\":\"hero-9813730-6523411-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo utilizar el recorte CSS - R Marketing Digital","description":"September 14, 2020 All elements of the web pages are defined within a rectangular box. However, that does not mean that we have to","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/en\/dev\/how-to-use-clipping-css\/","og_locale":"en_US","og_type":"article","og_title":"C\u00f3mo utilizar el recorte CSS","og_description":"14 de septiembre de 2020 Todos los elementos de las p\u00e1ginas web se definen dentro de una caja rectangular. Sin embargo, eso no significa que tengamos que","og_url":"https:\/\/rmarketingdigital.com\/en\/dev\/how-to-use-clipping-css\/","og_site_name":"R Marketing Digital","article_published_time":"2022-08-22T12:32:10+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-9813730.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/how-to-use-clipping-css\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/how-to-use-clipping-css\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"C\u00f3mo utilizar el recorte CSS","datePublished":"2022-08-22T12:32:10+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/how-to-use-clipping-css\/"},"wordCount":859,"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/how-to-use-clipping-css\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-9813730.jpg","articleSection":["Dev"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/how-to-use-clipping-css\/","url":"https:\/\/rmarketingdigital.com\/de\/dev\/how-to-use-clipping-css\/","name":"C\u00f3mo utilizar el recorte CSS - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/how-to-use-clipping-css\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/how-to-use-clipping-css\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-9813730.jpg","datePublished":"2022-08-22T12:32:10+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"September 14, 2020 All elements of the web pages are defined within a rectangular box. However, that does not mean that we have to","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/de\/dev\/how-to-use-clipping-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/how-to-use-clipping-css\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-9813730.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-9813730.jpg","width":1200,"height":360,"caption":"hero-9813730-6523411-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/82137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=82137"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/82137\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/82138"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=82137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=82137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=82137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}