{"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\/de\/dev\/como-utilizar-el-recorte-css\/","title":{"rendered":"Verwendung von 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\">Inhalt<\/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=\"Inhaltsverzeichnis umschalten\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Umschalten<\/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\/de\/dev\/como-utilizar-el-recorte-css\/#Compatibilidad-del-navegador\" >Browser-Kompatibilit\u00e4t<\/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\/de\/dev\/como-utilizar-el-recorte-css\/#Formas-basicas\" >Grundformen<\/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\/de\/dev\/como-utilizar-el-recorte-css\/#inset\" >Einschub ()<\/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\/de\/dev\/como-utilizar-el-recorte-css\/#circle\" >Kreis ()<\/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\/de\/dev\/como-utilizar-el-recorte-css\/#%C2%A1Cuidado-con-los-bordes-planos\" >Achten Sie auf flache Kanten!<\/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\/de\/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\/de\/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\/de\/dev\/como-utilizar-el-recorte-css\/#Formas-a-partir-de-valores-de-caja\" >Formen aus Barwerten<\/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\/de\/dev\/como-utilizar-el-recorte-css\/#Usando-un-elemento-SVG\" >Verwenden eines SVG-Elements<\/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\/de\/dev\/como-utilizar-el-recorte-css\/#Animando-el-area-recortada\" >Animieren des zugeschnittenen Bereichs<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p>\n          <time>14. September 2020<\/time><\/p>\n<\/header>\n<p>Alle Elemente von Webseiten werden in einem rechteckigen Feld definiert. Das bedeutet jedoch nicht, dass wir alles wie eine Kiste aussehen lassen m\u00fcssen. Sie k\u00f6nnen das CSS verwenden <code>Clip-Pfad<\/code> Eigenschaft, Teile eines Bildes oder eines anderen Elements zuzuschneiden, um interessante Effekte zu erzielen.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/clip-path?path=README.md&amp;previewSize=100\" title=\"Clip-Pfad auf Glitch\" allow=\"encrypted-media\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<p>Im obigen Beispiel ist das Ballonbild quadratisch (<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/cdn.glitch.com\/5984697d-c5e8-4a63-a765-7e7ac3916fc0%2Fround-balloon.jpg?v=1597216988521\">Quelle<\/a>). Verwenden von <code>Clip-Pfad<\/code> und der Grundformwert von <code>Kreis ()<\/code><br \/>\nDer zus\u00e4tzliche Himmel rund um den Globus wird ausgeschnitten und hinterl\u00e4sst ein kreisf\u00f6rmiges Bild auf der Seite.<\/p>\n<p>Da das Bild ein Link ist, k\u00f6nnen Sie mehr dar\u00fcber sehen <code>Clip-Pfad<\/code> Eigentum. Es kann nur auf den sichtbaren Bereich des Bildes geklickt werden, da Ereignisse nicht in versteckten Teilen des Bildes ausgel\u00f6st werden.<\/p>\n<p>Das Ausschneiden kann auf jedes HTML-Element angewendet werden, nicht nur auf Bilder. Es gibt verschiedene M\u00f6glichkeiten, eine zu erstellen <code>Clip-Pfad<\/code>, in diesem Beitrag werden wir sie sehen.<\/p>\n<h2 id=\"browser-compatibility\"><span class=\"ez-toc-section\" id=\"Compatibilidad-del-navegador\"><\/span>Browser-Kompatibilit\u00e4t <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Abgesehen von den Werten in der Tabelle, die sp\u00e4ter in diesem Beitrag erl\u00e4utert werden, sind die verschiedenen Werte von <code>Clip-Pfad<\/code> bewiesen zu haben <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/caniuse.com\/#feat=css-clip-path\">Hervorragende Browserunterst\u00fctzung<\/a>. Bei \u00e4lteren Browsern kann eine Alternative darin bestehen, dem Browser zu erlauben, das zu ignorieren <code>Clip-Pfad<\/code> Eigenschaft und zeigen Sie das Bild ohne Zuschneiden. Wenn dies ein Problem ist, k\u00f6nnen Sie es versuchen <code>Clip-Pfad<\/code> in einer Funktionsabfrage und bieten ein alternatives Layout f\u00fcr nicht unterst\u00fctzte Browser.<\/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-Pfad<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">Kreis<\/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>Grundformen <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>das <code>Clip-Pfad<\/code> Die Eigenschaft kann mehrere Werte annehmen. Der im ersten Beispiel verwendete Wert war <code>Kreis ()<\/code>. Dies ist einer der Grundformwerte, die in der definiert sind<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/css-shapes-1\/#basic-shape-functions\">CSS-Formspezifikation<\/a>. Dies bedeutet, dass Sie eine Fl\u00e4che zuschneiden und denselben Wert f\u00fcr verwenden k\u00f6nnen <code>Form au\u00dfen<\/code> um den Text an diese Form anzupassen.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/clip-path-with-shape?path=README.md&amp;previewSize=100\" title=\"Clip-Pfad mit Form auf 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>Beachten Sie, dass CSS-Formen nur auf schwebende Elemente angewendet werden k\u00f6nnen. das <code>Clip-Pfad<\/code> F\u00fcr die Eigenschaft muss das Element nicht schwebend sein.<\/p>\n<\/div>\n<p>Die vollst\u00e4ndige Liste der Grundformen lautet:<\/p>\n<h3 id=\"inset()\"><span class=\"ez-toc-section\" id=\"inset\"><\/span><code>Einschub ()<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>das <code>Einschub ()<\/code> value f\u00fcgt den abgeschnittenen Bereich vom Rand des Elements ein und Werte k\u00f6nnen f\u00fcr den oberen, rechten, unteren und linken Rand \u00fcbergeben werden. EIN <code>Randradius<\/code> Es kann auch hinzugef\u00fcgt werden, um die Ecken des zugeschnittenen Bereichs mithilfe von zu kr\u00fcmmen <code>runden<\/code> Stichwort.<\/p>\n<p>In meinem Beispiel habe ich zwei Boxen mit einer Klasse von <code>.Box<\/code>. Der erste Frame hat kein Clipping, der zweite wird mit getrimmt <code>Einschub ()<\/code> Werte.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/clip-path-inset?path=README.md&amp;previewSize=100\" title=\"Clip-Path-Inset auf 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>Kreis ()<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Wie Sie gesehen haben, die <code>Kreis ()<\/code> Der Wert erstellt einen kreisf\u00f6rmigen zugeschnittenen Bereich. Der erste Wert ist eine L\u00e4nge oder ein Prozentsatz und ist der Radius des Kreises. Mit einem zweiten optionalen Wert k\u00f6nnen Sie den Mittelpunkt des Kreises festlegen. Im folgenden Beispiel verwende ich Schl\u00fcsselwortwerte, um meinen zugeschnittenen Kreis oben rechts festzulegen. Sie k\u00f6nnen auch L\u00e4ngen oder Prozents\u00e4tze verwenden.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/clip-path-circle?path=README.md&amp;previewSize=100\" title=\"Clip-Pfad-Kreis auf 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>Achten Sie auf flache Kanten! <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Beachten Sie, dass bei all diesen Werten die Form durch das Randfeld des Elements abgeschnitten wird. Wenn Sie einen Kreis in einem Bild erstellen und diese Form au\u00dferhalb der nat\u00fcrlichen Gr\u00f6\u00dfe des Bildes liegt, erhalten Sie eine flache Kante.<\/p>\n<figure class=\"w-figure\">\n  <img alt='flache Kanten-2833046' class=\"w-screenshot\" style=\"max-inline-size: 480px\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/flat-edges-2833046.jpg'><figcaption>Das zuvor verwendete Bild hat jetzt <code>Kreis (50%)<\/code> angewendet. Da das Bild nicht quadratisch ist, dr\u00fccken wir oben und unten auf das Randfeld, und der Kreis wird zugeschnitten.<\/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>Eine Ellipse ist im Wesentlichen ein gequetschter Kreis, daher verh\u00e4lt sie sich sehr \u00e4hnlich <code>Kreis ()<\/code> Es akzeptiert jedoch einen Radius f\u00fcr x und einen Radius f\u00fcr y plus den Wert des Mittelpunkts der Ellipse.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/clip-path-ellipse?path=README.md&amp;previewSize=100\" title=\"Clip-Pfad-Ellipse auf 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>das <code>Polygon ()<\/code> Mit value k\u00f6nnen Sie recht komplexe Formen erstellen, so viele Punkte definieren, wie Sie ben\u00f6tigen, und die Koordinaten f\u00fcr jeden Punkt festlegen.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/clip-path-polygon?path=README.md&amp;previewSize=100\" title=\"Clip-Pfad-Polygon auf Glitch\" allow=\"encrypted-media\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<p>Weitere Informationen zum Erstellen von Polygonen und zum Anzeigen der M\u00f6glichkeiten finden Sie unter <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/bennettfeely.com\/clippy\/\">Clippy<\/a>, ein <code>Clip-Pfad<\/code> Generieren Sie dann den Code und f\u00fcgen Sie ihn in Ihr eigenes Projekt ein.<\/p>\n<h2 id=\"shapes-from-box-values\"><span class=\"ez-toc-section\" id=\"Formas-a-partir-de-valores-de-caja\"><\/span>Formen aus Barwerten <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In CSS-Formularen werden auch Formen von definiert <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Shapes\/From_box_values\">Barwerte<\/a>. Diese beziehen sich auf das CSS-Box-Modell: das Inhaltsfeld, das F\u00fcllfeld, das Rahmenfeld und das Randfeld mit den Schl\u00fcsselwortwerten von <code>Inhaltsfeld<\/code>, <code>Rahmenbox<\/code>, <code>Polsterbox<\/code>y <code>Randbox<\/code>.<\/p>\n<p>Diese Werte k\u00f6nnen allein oder in Verbindung mit einer Grundform verwendet werden, um den von der Form verwendeten Referenzrahmen zu definieren. Im Folgenden wird beispielsweise die Form am Rand des Inhalts abgeschnitten.<\/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-Pfad<\/span><span class=\"token punctuation\">:<\/span> Inhaltsfeld<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>In diesem Beispiel w\u00fcrde der Kreis das verwenden <code>Inhaltsfeld<\/code> als Referenzdiagramm anstelle von <code>Randbox<\/code> (Dies ist die Standardeinstellung).<\/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-Pfad<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">Kreis<\/span><span class=\"token punctuation\">(<\/span>45%<span class=\"token punctuation\">)<\/span> Inhaltsfeld<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Derzeit unterst\u00fctzen Browser die Verwendung von Box-Werten f\u00fcr nicht <code>Clip-Pfad<\/code> Eigentum. Sind kompatibel mit <code>Form au\u00dfen<\/code> Jedoch.<\/p>\n<h2 id=\"using-an-svg-element\"><span class=\"ez-toc-section\" id=\"Usando-un-elemento-SVG\"><\/span>Verwenden eines SVG-Elements <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Verwenden Sie ein SVG, um mehr Kontrolle \u00fcber den zugeschnittenen Bereich zu haben, als dies mit Grundformen m\u00f6glich ist <code>clipPath<\/code> Element. Verweisen Sie dann mit auf diese ID <code>url ()<\/code> als der Wert von <code>Clip-Pfad<\/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 auf 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>Animieren des zugeschnittenen Bereichs <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CSS-\u00dcberg\u00e4nge und -Animationen k\u00f6nnen auf die angewendet werden <code>Clip-Pfad<\/code> um ein paar coole Effekte zu erzeugen. Im folgenden Beispiel animiere ich einen Kreis, indem ich den Mauszeiger \u00fcber den \u00dcbergang zwischen zwei Kreisen mit einem anderen Radiuswert bewege.<\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/clip-path-animated?path=README.md&amp;previewSize=100\" title=\"Clip-Pfad-animiert auf Glitch\" allow=\"encrypted-media\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<p>Es gibt viele kreative M\u00f6glichkeiten, wie Animationen mit Clipping verwendet werden k\u00f6nnen.<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/css-tricks.com\/animating-with-clip-path\/\">Animieren mit Clip-Pfad<\/a> auf CSS Tricks geht einige Ideen durch.<\/p>\n<p><em>Foto von <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. September 2020 Alle Elemente der Webseiten sind in einem rechteckigen Kasten definiert. Das bedeutet jedoch nicht, dass wir alles machen m\u00fcssen ...<\/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\/de\/dev\/how-to-use-clipping-css\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\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\/de\/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\":\"de\"},{\"@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\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/how-to-use-clipping-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@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\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@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":"So verwenden Sie CSS-Clipping - R Marketing Digital","description":"14. September 2020 Alle Elemente der Webseiten werden in einem rechteckigen Feld definiert. Das hei\u00dft aber nicht, dass wir m\u00fcssen","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\/de\/dev\/how-to-use-clipping-css\/","og_locale":"de_DE","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\/de\/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":"de"},{"@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":"So verwenden Sie CSS-Clipping - 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. September 2020 Alle Elemente der Webseiten werden in einem rechteckigen Feld definiert. Das hei\u00dft aber nicht, dass wir m\u00fcssen","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/de\/dev\/how-to-use-clipping-css\/"]}]},{"@type":"ImageObject","inLanguage":"de","@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 Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | 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":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@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\/de\/wp-json\/wp\/v2\/posts\/82137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=82137"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/82137\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/82138"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=82137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=82137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=82137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}