✂️

css clip-path generator,

CSS clip-path Oluşturucu

Sürükle ve bırak ile CSS clip-path şekilleri oluşturmak için sezgisel bir araç.

🖱️

Sürükle ve bırak ile sezgisel clip-path oluşturun

⭐

Hem standart CSS hem de Tailwind'i destekler

✨

Otomatik olarak üzerine gelme (hover) animasyon kodu oluşturur

Editor

Ön Ayarlar

Nokta eklemek için tıklayın. Taşımak için sürükleyin. Silmek için sağ tıklayın.

#	X %	Y %

Önizleme Ayarları

Arka Plan Rengi

Görüntü Yükle

Üzerine Gelme Animasyonu

Etkinleştirilirse, üzerine gelme (hover) için CSS kodu oluşturulur. Nokta sayısının aynı olduğundan emin olun.

Hover efektini etkinleştir

Süre 0.4s

Easing

Oluşturulan Kod

-webkit- öneki ekle

Bunu da beğenebilirsiniz

✨

CSS View Transition Oluşturucu

🎨

Renk Dönüştürücü

🎨

Görüntü Renk Seçici

about,

Oluşturucu Hakkında

Sürükle ve bırak yöntemiyle clip-path özellikleri oluşturun.

Tek tıklamayla CSS kodunu oluşturun.

Çeşitli şekilleri ve animasyonları destekler.

how to,

Nasıl Kullanılır

STEP 1

1️⃣ Şekil Seçin

Bir ön ayar seçin.

STEP 2

2️⃣ Ayarlayın

Noktaları sürükleyin.

STEP 3

3️⃣ Kodu Kopyalayın

Kopyalayıp CSS'inize yapıştırın.

property,

Özellik Kılavuzu

Fonksiyon açıklamaları:

■ polygon() — Çokgen

clip-path: polygon(x1 y1, x2 y2, x3 y3, ...)
Herhangi bir sayıda koordinat belirtin. En az 3.

■ circle() — Daire

clip-path: circle(yarıçap at merkezX merkezY)
Yarıçap ve merkez.

■ ellipse() — Elips

clip-path: ellipse(rx ry at merkezX merkezY)
Elips çizer.

■ inset() — Dikdörtgen Kesit

clip-path: inset(üst sağ alt sol round yarıçap)
İçeri doğru keser. Yuvarlak köşeleri destekler.

faq,

SSS

Q.clip-path SEO'yu etkiler mi?: Hayır. Yalnızca görsel sunumu değiştirir.
Q.CSS ve SVG farkı?: CSS stil sayfalarında kullanılır. SVG daha karmaşık yollar içindir.
Q.Hover animasyonu yapabilir miyim?: Evet, köşe sayısı tam olarak aynıysa mümkündür.
Q.Dış kısımlar tıklanabilir mi?: Hayır. Tıklama olayları kırpılmış bölgenin dışında tetiklenmez.
Q.Güvenlik riski var mı?: Hiç yok. Her şey yerel olarak tarayıcınızda çalışır.

use cases,

Kullanım Örnekleri

🎨

Çapraz Kesimler

Dinamik başlık bölümleri oluşturun.

👤

Profil Görselleri

Avatarları altıgen veya yıldız şeklinde kırpın.

✨

Hover Animasyonları

Görüntüyü fare üzerine geldiğinde büyütün.

İlgili Araçlar

CSS OluşturucularTümünü gör

✨

CSS View Transition Oluşturucu

View Transition API animasyonlarını simüle edin ve SPA ve MPA için kod oluşturun.

🎨

Renk Dönüştürücü

HEX/RGB/HSL/CMYK kodlarını dönüştürün ve renk paletleri oluşturun.

🎨

Görüntü Renk Seçici

Görüntülerden renkleri çıkarın ve renk kodlarını alın (HEX/RGB)

↔️

CSS Clamp Oluşturucu

Duyarlı tasarım için akıcı clamp() işlev değerlerini otomatik olarak hesaplar.

📦

CSS Container Query Oluşturucu

Canlı önizleme ve dönüşüm ile görsel olarak container sorguları oluşturun.

🖼️

CSS Filtre ve Karışım Oluşturucu

Filtreleri görsel olarak birleştirin, kod oluşturun ve görüntüleri kaydedin.

🎨

CSS Degrade Oluşturucu

Doğrusal, radyal, konik degradeleri ve desenleri sezgisel olarak oluşturun.

📐

Flexbox/Grid Düzen Oluşturucu

Görsel GUI ile düzen kodu oluştur

☁️

Box-Shadow Oluşturucu

Sezgisel şekilde güzel çok katmanlı gölgeler oluştur

Tüm Kategoriler

Web & Geliştirici Araçları CSS Oluşturucular Görüntü ve Fotoğraf Araçları Video ve Ses Araçları SEO & Pazarlama Ağ & Altyapı Metin Analizi ve İşleme Finans ve Maaş Araçları Tarih ve Takvim Araçları Belge ve İş Araçları Oyunlar ve Etkinlikler Yaşam ve Sağlık Ana Sayfa

Geri Bildirim Gönder

Aracı geliştirmemize yardımcı olmak için lütfen düşüncelerinizi bize bildirin.

CSS clip-path Oluşturucu

Editor

Önizleme Ayarları

Üzerine Gelme Animasyonu

Oluşturulan Kod

CSS View Transition Oluşturucu

Renk Dönüştürücü

Görüntü Renk Seçici

Oluşturucu Hakkında

Nasıl Kullanılır

1️⃣ Şekil Seçin

2️⃣ Ayarlayın

3️⃣ Kodu Kopyalayın

Özellik Kılavuzu

■ polygon() — Çokgen

■ circle() — Daire

■ ellipse() — Elips

■ inset() — Dikdörtgen Kesit

SSS

Kullanım Örnekleri

Çapraz Kesimler

Profil Görselleri

Hover Animasyonları

İlgili Araçlar

CSS View Transition Oluşturucu

Renk Dönüştürücü

Görüntü Renk Seçici

CSS Clamp Oluşturucu

CSS Container Query Oluşturucu

CSS Filtre ve Karışım Oluşturucu

CSS Degrade Oluşturucu

Flexbox/Grid Düzen Oluşturucu

Box-Shadow Oluşturucu

Tüm Kategoriler

Geri Bildirim Gönder

Geri bildirim geçici olarak askıya alındı

Sorumluluk Reddi