03 EYLÜL 2017
PAZAR
10.26
Youtube
Youtube kanalım açıldı! Daha detaylı ve güncel konu anlatımları için takip etmeyi unutmayın.
Mini Proje: Mükemmel CSS Gradient Oluşturucu: GRADIEND

Gradiend, özellikle front-end tasarımcıların bir çalışma hazırlarken ihtiyaç duyduğu gradient yapısını online olarak görüntüleyerek hazırlama imkanı sunan bir web aracıdır. Hazırladığım bu araç hakkında birkaç ipucu eklemek ve sizlere sunmak istedim.

 

Gradiend Nedir?

Gradiend bir css gradient oluşturucudur. Bu oluşturucu, seçtiğiniz iki renk arasındaki geçişi sizlere anlık olarak gösterir ve projenizde kullanacağınız gradient yapısını görüntüleme ve düzenleme imkanı sunar. Oluşturduğunuz geçişe ait kodları kopyalamanıza olanak sağlar.

Gradiend Neler Sunuyor?

Tam sayfa geçişi görüntüleme imkanı

Hazırladığınız geçiş minik bir pencerede sizlere sunulmuyor. Site arkaplanı üzerinde gerçekleştirilen geçiş, daha iyi sonuçlar üretebilmenize olanak tanıyor.

Linear ya da Radial arasında hızlı geçiş

Eklenen minik butonlar yardımı ile bir yerden başka bir yere veya dıştan içe doğru bir gradient oluşturabilirsiniz.

Linear alt seçimleri

  • Eğer bir yerden başka bir yere doğru bir geçiş uygulamak isterseniz, , 45°, 90°, 135°, 180°, 225°, 270° ve 315° gibi temel açıları hızlı bir şekilde seçebilirsiniz.
  • Mousewheel'i kaydırarak açıyı 5'er derece oynatabilirsiniz.
  • Doğrudan açı belirtebilirsiniz.

Renk Tekerleri

Renk seçerken renk tekerlerini kullanabilirsiniz. Bu tekerlerde yaptığınız değişiklikler anlık olarak arkaplanda görüntülenecektir.

Renk Seçiciler

Sayfanın en altında yer alan renk seçicilerde toplam 20 ana renk ve 200 alt renge kadar günümüzde popüler material renklerini seçebilirsiniz.

Kod Alanı

  • Kod alanı açık bir şekilde çalışma yapabilirsiniz. Kodda anlık değişiklikleri görüntüleyebilirsiniz.
  • Kodlar özel olarak renklendirilmiştir.
  • Kod içerisindeki renklerin yanında seçili rengin düz olarak görünmesi sağlanmıştır.
  • Kodu kopyala butonu sayesinde kodu alt alta kopyalama imkanı tanır. (5 satır)
  • Kodu tek satır kopyala butonu sayesinde ise kodu tek bir satırda kopyalama imkanınız vardır. Bir kısım geliştiriciler her div için tek satır ayırdıklarından bu sayede işlerini hızlandırabilirler.

Ekstra

Proje hakkında geliştirilmesini veya değiştirilmesini istediğiniz alanları bana mail olarak, bu makalenin altından, sosyal platformlardan veya menüdeki iletişim alanından gönderirseniz güncellemelerde eklemeler yapacağım :) Olumlu veya olumsuz yorumlarınızı bekliyorum. İyi çalışmalar dilerim

YORUMLAR 3
0
Faik Yılmaz
20 OCAK 2022 - 16.30
Kullanım ve sadelik olarak her kitleye hitap etmesi bir yana, mükemmel bir araç. Tasarım ve göze gelen esneklik harika ! Tebrikler...
CEVAPLA
1
Mert Topuz
06 EYLÜL 2017 - 00.55
@Ahmet, teşekkürler Ahmet, yorumunu bekliyorum :)
CEVAPLA
1
Ahmet
05 EYLÜL 2017 - 09.42
Başarılı bir projeye benziyor, kullanırım ve eksikleri test edip bilgilendiririm dostum ;)
CEVAPLA
YORUM BIRAK
Şuanda bu yoruma cevap yazıyorsunuz:
İptal Et