Tasarım ve CSS

Bir kod parçacığını tarayıcınızda söz dizimi vurgulu bir görsele dönüştürün; 20'den fazla dil, özel temalar ve arka planlar, satır numaraları ve PNG veya SVG dışa aktarma ile.

Metin ve arka plan rengi arasındaki WCAG 2.1 kontrastını ve APCA Lc puanını denetleyin, AA, AAA ve 3:1 rozetlerini görün ve en yakın geçen rengi uygulayın.

İki HEX rengi seçtiğiniz oranda RGB veya Lab renk uzayında harmanlayın ve ortaya çıkan ara rengi örnek ve kopyalanabilir HEX değeri olarak okuyun.

Tek bir temel HEX rengini ayarlanabilir adımlar, adım başına WCAG kontrast ipuçları ve CSS, Tailwind, JSON dışa aktarımıyla OKLCH, HSL veya RGB ölçeğine dönüştürün.

Bir görsel yükleyin ve protanopi, döteranopi, tritanopi veya tam renk körlüğünde nasıl göründüğünü önizleyin, ardından simüle edilmiş sonucu indirin.

Eliptik yatay ve dikey yarıçaplar dahil sekiz border-radius köşe değerinin tümünü ayarlayın, kutunun canlı önizlemesini görün ve kısaltılmış CSS'i kopyalayın.

Ofset, bulanıklık, yayılma, renk ve inset kontrolleriyle çok katmanlı bir CSS box-shadow oluşturun, canlı önizlemeyi görün ve kullanıma hazır özelliği kopyalayın.

Minimum ve maksimum yazı tipi boyutu ile minimum ve maksimum görünüm alanı genişliğini, kesme noktası gerektirmeyen tek bir CSS clamp() akışkan tipografi ifadesine dönüştürün.

Daire, elips, çokgen, inset veya yuvarlatılmış inset ön ayarlarından sayı girişleriyle bir CSS clip-path oluşturun, canlı önizleyin ve kullanıma hazır özelliği kopyalayın.

Tutamaçları sürükleyerek bir CSS cubic-bezier veya steps() yumuşatmasını düzenleyin, canlı animasyonla önizleyin ve üretilen değeri kopyalayın.

CSS Flexbox veya Grid'i kapsayıcı ve öğe başına denetimleri, özel parça boyutlandırma ve grid-template-areas düzenleyicisiyle görsel olarak oluşturun, sonra CSS'i kopyalayın.

Bulanıklık, saydamlık, doygunluk, kenarlık ve gölge denetimleri ile bir ton rengi kullanarak buzlu cam CSS'i oluşturun, bir arka plan üzerinde önizleyin ve backdrop-filter tabanlı CSS'i kopyalayın.