CSS karmaşık bir dil olmasa da, öğrenmeye başladığımda bazı kısımları benim için bir muammaydı. Örneğin, birden çok kutu gölgesi veya arka plan görüntüsü niteliğini birleştirmek. Bu yüzden bu oyun alanlarını(playgrounds) CSS ile çalışmayı daha kolay ve verimli hale getirmek için tasarlandı.
İmleç özelliği
İmleç özelliği için farklı değerleri kontrol edebilirsiniz. Her kutunun üzerine gelin ve imlecin tarayıcınızda nasıl görüneceğine bakabilirsiniz.
Filter property playground
Bu playground, farklı filtre değerlerinin ne yaptığını görselleştirmeye yardımcı olur. Farklı filtreleri yığınlayabilir, değerlerini değiştirebilir ve CSS kodunu kullanıma hazır hale getirebilirsiniz.
Transform property playground
Her bir değer sonraki dönüşüm değerlerini etkilediğinden, bu CSS özelliğinin yönetimi kafa karıştırıcı olabilir. Bu oyun alanıyla bir dizi dönüşüm ekleyebilir, dönüşüm kaynağını ayarlayabilir ve CSS kodunu alabilirsiniz.
Box shadow generator
Doğru yapılırsa tasarımınızda gölge kullanmak harika bir seçenektir. Kutu gölge oluşturucunun yaptığı budur. Bir yığın kutu gölgesi ekleyebilir ve ardından oluşturulan CSS’yi alabilirsiniz.
:nth-selector
CSS, belirli öğeleri hedeflemek için harika seçici seçenekleri sunar. Bu şu durumlarda geçerlidir: n’inci seçiciler (n’inci çocuk ve n’inci tür). Çoğu durumda son derece yararlı olsalar da, kullanımlarını anlamak biraz zor. nthmaster.com/ web sitesi, bunların nasıl kullanılacağına dair harika örnekler sunar, ancak görseller o kadar iyi değildir. Farklı seçicilerin nasıl canlı çalıştığını görmek için bu kalemi kullanın.
Border radius generator
border-radius özelliğini ilk bakışta kavramak zor değildir. Ancak 4 yerine 8 değer kullanıldığında kafa karıştırıcı olabilir. Neden bahsettiğimden emin değil misin?! Bu kalemi inceleyin ve basit modu devre dışı bırakın.
Gradient generator
Gradyan yapıcıda sıkıntısı yoktur, ancak hiçbiri tek duraklı gradyan yapıcısı değildir. Bazıları iyi bir kullanıcı arayüzünden yoksundur veya yeterli seçenek sunmamaktadır. Bu araç, sezgisel ve “eksiksiz” bir jeneratör sağlar. 500’den fazla ön ayarı vardır ve renkler, boyut, şekil, tür ve hatta birden fazla degradeyi yığın gibi neredeyse tüm gradyan yönlerini kontrol edebilirsiniz. Araç ve nasıl kullanılacağı hakkında daha fazla bilgi almak için bilgi düğmesine tıkladığınızdan emin olun.
Palette generator
Bu araç, bir CSS özelliği için değerler üretmez, bunun yerine renk kombinasyonlu varlıklar için tamamlayıcı bir araçtır. Bu jeneratör, mevcut palet üreticilerinin eksikliklerini giderir. Renk kombinasyonunun canlı görünümü ile güzel bir kullanıcı arayüzüne sahiptir. Ayrıca tasarımcıların renk eşleştirmenin nasıl çalıştığını anlamalarına yardımcı olmak için bir renk teorisi bölümü içerir. İşlemi sorunsuz ve kolay hale getirmek için bir dizi klavye/fare kısayolu da sağlar.
Kaynak: https://github.com/kalimah-apps