Css İle Gradyan Renkler Nedir , Nasıl Yapılır ?
İçindekiler
Photoshop programında çok kolay bir şekilde yapılan gradyan renk sistemini css kodları ile yapmak istiyorsanız yazımız tam size göre. Yazımızda css ile gradyan renkler nedir ve nasıl yapılır konusunda bilgiler bulabilirsiniz. Gradyan renkleri yapmak için güzel bir site üzerinden anlatmaya çalışacağım.
Css Gradyan Nedir?
Bir renk tonundan diğer renk tonuna geçiş şeklindeki renklendirmeye gradyan denir. En az iki ve daha çok renk tonu kullanılabilir. Bu renk geçişlerini web sitenizde zemin rengi ya da bir div içerisinde kullanmak istiyorsanız sizin için güzel bir site tanıtacağım. https://cssgradient.io/
Tanıtımını yapacağım ve kullanımını anlatmayı planladığın çok basit ve kullanışlı bir sitedir. Cssgradien sitesinde yaptığınız düzenlemeleri direk css kodu olarak bize hazırlıyor ve bu sayede sitemize ekleyip kullanabiliyoruz. Css Gradyan Renkler nedir kavramlarını açıkladığımıza göre siteyi tanıyalım ve nasıl kullanabileceğimizi resimlerle anlatalım.
Css İle Gradyan Renkler Nasıl Yapılır ?
https://cssgradient.io/ sitesine girdiğimizde anlaşılır ve basit bir site bizi karşılıyor.
Resimde görülen özellikleri maddeler halinde açıklayacak olursak ;
- Yaptığımız renklendirmeleri gördüğümüz bir bölüm.
- Renk geçiş mesafesi ayarı.
- Secilen rengin alt renklerinin görüldüğü ve seçilebileceği ekran.
- Dilerseniz renk kodunu RGB yada Hex kodu olarak girme seçeneği.
- Mesafelerde değişecek renklerin kodlarının girildiği bölüm.
- Grandyan rengin yapısı secimi yatay yada dairesel.
- Renk geçiş yönü ayarı.
- Renk geçiş türleri.
- Hazırladığımız gradyan renk düzenlemesinin css kodunu bulacağımız bölüm yer almaktadır.
Biraz siteyi incelediğimiz zaman farklı farklı renk kombinasyonları için css kodlarının çok rahat hazırlanmakta olduğu görülmektedir. Hazır gradyan renk paletlerini kullanmak isterseniz bir çok örneğin bulunduğu swatches sayfasını inceleyebilirsiniz.
Bu sayfaya üst menüde giriş yapabilirsiniz. Sayfada bulunan bir çok renk paletlerinden birini beğendiniz ve kullanmak istiyorsanız yapmanız gereken tek şey sağ alt köşesinde bulunan kopyala butonuna tıklamak ve gradyan css renk kodunu almaktır.
Bir diğer hazır renk kodlarını bulup düzenleyebileceğiniz bölüm ise https://cssgradient.io/gradient-backgrounds/ sayfası burada da güzel gradyan renk kombinasyonlarını bulup çok rahat bir şekilde düzenleyip sol üst köşesinde bulunan kopyala butonu ile kopyalayıp sitenizde kullanabilirsiniz.
Daha fazla ayrıntı ve özellik için sitesini ziyaret edebilirsiniz. Umarım faydalı bir yazı olmuştur.
