CSS Oluşturucu

21 araç içeren hepsi bir arada CSS oluşturucu: üçgen, ok, degrade, kutu gölgesi, cambiçimlilik, neumorfizm, yükleyici, araç ipucu, klip yolu, filtre, dönüştürme, animasyon, esnek kutu, ızgara ve değişkenler - canlı önizleme, kopyalama ve indirme, ücretsiz.

Üçgenler, oklar, şeritler, araç ipuçları, yükleyiciler, degradeler, kutu ve metin gölgeleri, cammorfizm, nemorfizm, kenar yarıçapı, şekiller, klip yolları, filtreler, dönüşümler, animasyonlar, perspektif, esnek kutu, ızgara ve CSS değişkenleri gibi 21 oluşturucu içeren görsel, hepsi bir arada CSS araç seti; her biri canlı önizleme, rastgele ve kopyalamaya veya indirmeye hazır koda sahiptir.

Share
Kategori
Geliştirici Araçları
İçerir
7'nin özellikleri
Erişim
Özgür · Kayıt yok
Mahremiyet
Tarayıcınızda çalışır
CSS Oluşturucu

Calibrating CSS Forge Studio......

Please wait a moment

Nasıl kullanılır

CSS Oluşturucu nasıl kullanılır?

  1. 01

    Bir jeneratör seç

    Şekiller, Bileşenler, Efektler veya Düzen arasından seçim yapın — Hızlı erişim için gruplandırılmış 15 CSS oluşturucu.

  2. 02

    Kontrolleri ayarlayın

    Kaydırıcıları sürükleyin, renkleri seçin ve seçenekleri değiştirin. Canlı önizleme anında güncellenir, böylece tam görünümü seçebilirsiniz.

  3. 03

    CSS'yi kopyalayın

    Gerektiğinde ana kareler ve satıcı önekleri de dahil olmak üzere temiz, yapıştırmaya hazır CSS'yi almak için kod panelindeki kopyala düğmesine basın.

  4. 04

    Projenize bırakın

    Parçacığı stil sayfanıza veya bileşeninize yapıştırın. Bağımlılık yok, derleme adımı yok, ilişkilendirme gerekli değil.

Kullanım örnekleri

Yaygın kullanım durumları

  • Araç ipuçları ve açılır menüler için saf CSS üçgenleri ve okları oluşturun
  • Kitaplık olmadan yükleme döndürücüler ve iskelet animasyonları oluşturun
  • Esnek kutu ve ızgara düzenlerinin prototipini oluşturun ve tam CSS'yi dışa aktarın
  • Kahraman bölümleri ve kartlar için özel klip yolu şekilleri oluşturun
  • Görüntü filtrelerine ve 3D dönüşümlere görsel olarak ince ayar yapın
  • CSS değişkenleriyle tasarım belirteci paletini tanımlayın ve yönetin
Genel Bakış

Tek bir görsel stüdyoda 21 CSS oluşturucu

CSS Forge, sürekli olarak eriştiğiniz ön uç parçacıklarını (üçgenler, oklar, şeritler, araç ipuçları, yükleyiciler, degradeler, kutu gölgeleri, metin gölgeleri, cammorfizm, nötrorizm, kenar yarıçapı, özel şekiller, klip yolları, filtreler, dönüşümler, animasyonlar, 3B perspektif, ızgara oluşturucular, flexbox ve ızgara oyun alanları ve bir CSS değişken yöneticisi) tek ve tutarlı bir arayüzün arkasında birleştirir. Bir oluşturucu seçin, kaydırıcıları sürükleyin, canlı önizlemenin anında tepki vermesini izleyin, ardından tek tıklamayla üretime hazır CSS'yi kopyalayın veya indirin.

Görsel olarak tasarlayın, gerçek kodu gönderin

Her kontrol doğrudan bir CSS özelliğine eşlenir, böylece ince ayar yaparken temel kuralı öğrenirsiniz. Oluşturulan çıktı temiz, standartlarla uyumlu CSS'dir (önemli olan yerlerde -webkit- yedekleriyle birlikte) doğrudan stil sayfanıza düşer. Önizleme arka planını değiştirin, fikirleri keşfetmek için rastgele tuşuna basın veya varsayılanlara sıfırlayın. Hiçbir şey yüklenmez; oluşturma işlemi yerel olarak tarayıcınızda gerçekleşir, dolayısıyla hızlı ve özeldir.

Özellikler
01
Tek stüdyoda 21 CSS oluşturucu
02
Değiştirilebilir arka planlarla gerçek zamanlı canlı önizleme
03
Üretime hazır CSS'nin tek tıklamayla kopyalanması ve indirilmesi
04
Her jeneratördeki kontrolleri rastgele ayarlayın ve sıfırlayın
05
Degrade, kutu gölgesi, cammorfizm ve neumorfizm oluşturucular
06
Flexbox ve CSS Grid etkileşimli oyun alanları
07
Önce yerel — tarayıcınızdan hiçbir şey çıkmıyor
SSS

Sık sorulan sorular

Hangi CSS oluşturucuları dahildir?+

Yirmi bir: Üçgen, Ok, Şekil, Klip Yolu ve Kenar Yarıçapı oluşturucuları; Şerit, Araç İpucu ve Yükleyici bileşen oluşturucuları; Gradyan, Kutu-Gölge, Metin-Gölge, Cammorfizm, Nömorfizm, Filtre, Dönüştürme, Animasyon ve Perspektif efekt düzenleyicileri; artı Grid Builder, Flexbox Playground, Grid Playground ve CSS Değişken oluşturucu — hepsi bir arada arayüzde.

Oluşturulan CSS üretime hazır mı?+

Evet. Çıktı temiz, standartlarla uyumlu CSS'dir ve doğrudan herhangi bir stil sayfasına veya bileşene yapıştırabilirsiniz. Önemli olduğu yerde (klip yolu, filtreler), satıcı tarafından ön ekli geri dönüşler dahil edilir ve animasyon araçları tam @keyframes bloğunun çıktısını alır.

CSS üçgenini nasıl yaparım?+

Üçgen oluşturucuyu açın, bir yön seçin (yukarı, aşağı, sol, sağ), kaydırıcılarla boyutu ve rengi ayarlayın ve kenarlık tabanlı CSS'yi kopyalayın. Her tarayıcıda çalışan klasik sıfır genişlik/sıfır yükseklik kenarlık numarasını kullanır.

Anahtar kareler yazmadan CSS animasyonları oluşturabilir miyim?+

Evet. Animation Builder, süre, gecikme, zamanlama işlevi ve yineleme sayısı kontrolleriyle birlikte ön ayarlar (sıçrama, solma, içeri kaydırma, döndürme, sallama, patlama) sunar. Sizin için animasyonun tamamının kısaltmasını ve @keyframes kuralını oluşturur.

Flexbox ve grid oyun alanı gerçek kodu dışa aktarıyor mu?+

Evet. Yönü, içeriği hizalamayı, öğeleri hizalamayı, sarmayı, boşlukları ve öğe sayılarını görsel olarak ayarlayın; araç, kapsayıcınız için tam CSS'nin çıktısını alır. Her bir özelliğin düzeni nasıl etkilediğini öğrenmek ve işe yarar bir başlangıç ​​noktası yakalamak için idealdir.

Verilerim bir sunucuya mı gönderiliyor?+

Hayır. Her şey tarayıcınızda yerel olarak çalışır; önizlemeler istemci tarafında oluşturulur ve CSS cihazınızda oluşturulur. Hiçbir şey yüklenmediğinden araç hızlı ve tamamen özeldir.