CSS

Der Inhalt ist erst nach dem Einloggen sichtbar

Themen:


Introduction ⇑
a ⇑
animation_keyframes ⇑
background ⇑
blank ⇑
border-radius ⇑
border ⇑
box-sizing ⇑
calc ⇑
child ⇑
clear ⇑
clip-path ⇑
content ⇑
cursor ⇑
display ⇑
div ⇑
filter ⇑
flexbox ⇑
float ⇑
font ⇑
form ⇑
grid ⇑
hover ⇑
hyphens ⇑
img ⇑
important ⇑
is ⇑
li ⇑
margin ⇑
menue_hover_horizontal ⇑
menue_hover_vertical ⇑
not ⇑
of-type ⇑
opacity ⇑
optional ⇑
outline ⇑
overflow ⇑
padding ⇑
position ⇑
responsive ⇑
selection ⇑
selektoren ⇑
span ⇑
target ⇑
transform ⇑
transition ⇑
var ⇑
viewport ⇑
where ⇑
z-index ⇑
zoom ⇑

Anzahl an Themen: 51

Aktuell geöffnete Datei: 'clip-path'

Zum Wechseln des Themas einfach ein neues Thema eingeben

CSS_clip-path

clip-path

Formen aus Bildern sichtbar machen mit clip-path.
Es wird dazu ein Bild benötigt, aus dem nur ein bestimmter Bereich/ Form sichtbar sein soll.
Die Form erstellt man ganz einfach durch das Setzen von Punkten auf dem Bild über px oder % und man beginnt idR. mit dem 1. Punkt oben links und dann im Uhrzeigersinn. Jeder Punkt besteht aus 2 Punkten, zuerst mit der X-Achse dann die Y-Achse.
clip-path: polygon(Punkt 1 X-Achse Punkt 1 Y-Achse, Punkt 2 X-Achse Punkt 2 Y-Achse, Punkt 3 X-Achse Punkt 3 Y-Achse);
Hinweis: Schatten oder Umrandungen sind parallel zum clip-path nicht möglich.

Das ist das Originalbild.

Es ist möglich, von außen etwas vom Bild abzuschneiden, wobei der Platz noch vom Gesamtbild benutzt wird.
clip-path: inset(Abstand oben Abstand rechts Abstand unten Abstand links);

Man kann einen Kreis sichtbar lassen.
clip-path: circle(Radius at Mittelpunkt auf X-Achse Mittelpunkt auf Y-Achse);

Man kann eine Ellipse sichtbar lassen.
clip-path: ellipse(Radius X-Achse Radius Y-Achse at Mittelpunkt auf X-Achse Mittelpunkt auf Y-Achse);

Hier ist ein nur ein Dreieck des Bildes zu sehen.

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

Hier kommen weitere Formen...

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);

clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);

clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);

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(35% 0%,65% 0%,65% 35%,100% 35%,100% 60%,65% 60%,65% 100%,35% 100%,35% 60%,0% 60%,0% 35%,35% 35%);

clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

clip-path: polygon(0% 0%,0% 100%,25% 100%,25% 25%,75% 25%,75% 75%,25% 75%,25% 100%,100% 100%,100% 0%);

clip-path: polygon(25% 0%,70% 0%,40% 35%,95% 35%,20% 100%,40% 55%,0% 55%);

clip-path: polygon(0% 5%,100% 5%,100% 25%,0% 25%,0% 40%,100% 40%,100% 60%,0% 60%,0% 75%,100% 75%,100% 95%,0% 95%);

clip-path: polygon(50% 0%,70% 15%,70% 2%,90% 2%,90% 30%,100% 40%,100% 100%,65% 100%,65% 65%,35% 65%,35% 100%,0% 100%,0% 40%);