Custom Properties, CSS kodlarında erişilebilir ve yeniden kullanılabilir değişkenler oluşturarak daha düzenli ve hızlı bir kodlama sağlayan bir özelliktir CSS kodlarında yer alan sabit değerleri etkili bir şekilde değiştirmeye olanak tanır Custom Properties ile, birden fazla kod bloğunda kullanılabilecek değişkenler oluşturulabilir ve kod tekrarları engellenerek yer tasarrufu sağlanabilir Değişiklikler tek bir dosyada yapılabildiği için CSS dosyalarındaki karmaşıklık azaltılır ve hata oranı düşürülür Custom Properties kullanarak, CSS kodları daha düzenli hale getirilir ve tasarım değişiklikleri daha kolay yapılabilir
Custom Properties, CSS kodları içinde erişilebilir ve yeniden kullanılabilir değişkenler oluşturmaya yarayan bir CSS özelliğidir. CSS'de önceden tanımlı değişkenler yerine, CSS kodlarını daha kolay yönetebileceğiniz ve daha hızlı bir şekilde değişiklik yapabileceğiniz bir yapı sunar. Custom Properties sayesinde CSS kodlarındaki sabit değerleri kolayca değiştirebilirsiniz.
Bir diğer avantajı, birden fazla kod bloğunda kullanılabilecek değişkenler oluşturarak, tekrarlayan kod yazma zorunluluğunu ortadan kaldırmaktır. Bu sayede kod karmaşıklığı azaltılır ve web sayfanızın çalışma hızı arttırılır. CSS kodlarında gerekli değişiklikleri Custom Properties kullanarak tek bir dosyada yapabilirsiniz, böylece CSS dosyalarında karmaşıklık azalır ve web sayfalarındaki hata oranı düşer.
Custom Properties Nasıl Kullanılır?
CSS'te Custom Properties kullanımı oldukça kolaydır. Öncelikle bir Custom Property tanımlamak için, -- önekini kullanıp bir isim belirtmeniz gerekir. Örneğin, bir arkaplan rengi Custom Property'si tanımlamak isterseniz şu şekilde bir kod yazabilirsiniz:
:root { --arkaplan-renk: #ffffff;}Yukarıdaki kodda, :root seçicisi tüm belgeyi kapsar ve --arkaplan-renk isimli bir Custom Property tanımlar. Değer #ffffff, yani beyaz bir arkaplan rengi olacaktır.
Tanımlama yapıldıktan sonra, bu Custom Property'leri istediğiniz yerde kullanabilirsiniz. Örneğin:
body { background-color: var(--arkaplan-renk);}Yukarıdaki kodda, body öğesi için arkaplan rengi belirtilirken Custom Property kullanılmıştır. Bu şekilde, tüm belgede kullanılan arkaplan rengi aynı anda değiştirilebilir.
Custom Properties kullanarak, CSS kodlarını daha düzenli hale getirebilirsiniz. Örneğin, tüm renkleri tanımlamak yerine, birkaç Custom Property tanımlayarak tüm renkleri bu Değişkenler ile değiştirebilirsiniz.
Değer Atama
Custom Properties, CSS'de değişkenler oluşturma amaçlı kullanılan bir özelliktir. Değişkenlerin tanımlanması için "--" kullanılır. Değişken, birden fazla yerde ve farklı değerlerde kullanılacağı zaman kullanışlıdır. Custom Properties'de değer atama da oldukça kolaydır.
Değerleri atamak için, ilk olarak değişken adı belirlenir ve ardından değer belirtilir. Örneğin, footer rengi için "--footer-renk" değişkeni tanımlanabilir ve "red" değeri atanabilir. Bunun için aşağıdaki kod kullanılabilir:
```:root { --footer-renk: red;}```
Değişkenin değeri atandığında, herhangi bir yerde kullanılabilir. Örneğin, footer rengi için atanan değeri kullanmak isteyen bir örnek:
```footer { background-color: var(--footer-renk);}```
Bu kodda "var" fonksiyonu kullanılarak "--footer-renk" değişkeni kullanılmış ve footer arka plan rengi olarak belirlenmiştir. Bu şekilde, footer rengi ile ilgili tüm değişiklikler sadece tek bir yerde yapılabilir ve diğer yerlerde otomatik olarak değişiklikleri gösterebilir.
Değer atama konusunu daha iyi anlamak için aşağıdaki örnek kodlar da incelenebilir:
```:root { --tablo-renk: #f7f7f7; --baslik-renk: #333; --yazi-renk: #666; --buton-genislik: 100px;}
.tablo { background-color: var(--tablo-renk);}
.tablo th { color: var(--baslik-renk);}
.tablo td { color: var(--yazi-renk);}
.buton { width: var(--buton-genislik); background-color: orange; color: white; padding: 10px; border: none;}```
Yukarıda bir tablo rengi, bir başlık rengi, bir yazı rengi ve bir buton genişliği değişkenleri tanımlanmıştır. Ardından sırasıyla bir tablo, tablo başlıkları, tablo yazıları ve bir butonun genişliği özetlenmiştir.
Değer atama ile çeşitli değişkenler oluşturularak sayfa tasarımı üzerinde geniş bir kontrol elde edilebilir. Bu sayede, herhangi bir değişiklik yapıldığında, tek bir yere yapılması sayesinde tasarımın tümüne yayılması mümkün olur.
Değer Kullanımı
Custom Properties kullanılarak oluşturulan değişkenlerin değerleri CSS içerisinde açıklanabilir ve tekrar kullanılabilir hale getirilebilir. Değer atama işlemi, CSS içerisinde tanımlanan, önceden belirlenmiş custom property ismi ile gerçekleştirilir. Bu ismin başında iki çizgi, yani -- sembolü bulunmalıdır.
Örneğin, bir web sayfasının tasarımında kullanılacak ana renk için custom property oluşturulabilir. Renk kodu #3399cc olarak belirlenmiş olabilir ve custom property ismi "--ana-renk" olarak atanabilir. Değer ataması, bu ismin kullanılması ile gerçekleştirilir:
```:root { --ana-renk: #3399cc;}```
Daha sonra, sayfa içerisinde istenildiği kadar bu renk kodu kullanılabilir. Değer kullanımı, bu ismin kullanılması ile gerçekleştirilir:
```h1 { color: var(--ana-renk);}```
Bu örnekte, h1 etiketi içerisindeki yazı rengi custom property'den belirtilen renk kodu ile değiştirilmiştir. Değer kullanımı, var() fonksiyonunun kullanılması ile gerçekleştirilir.
Custom Properties'in en büyük avantajlarından biri, değerlerin tekrar kullanılabilir hale getirilmesi ile kodun daha temiz hale gelmesidir. Bu sayede, sayfanın ön yüzünde daha az kod kullanılarak tasarım değişiklikleri yapmak mümkün olur.
Özetle, custom properties kullanılarak oluşturulan değişkenler, değer atama işlemi ile CSS tarafında tanımlanır ve daha sonra istenilen yerlerde kullanılabilir hale getirilebilir. Bu özellik, kodun daha temiz hale gelmesini sağlar ve tasarım değişikliklerinin daha kolay yapılmasını mümkün kılar.
Custom Properties ile Sayfa Tasarımı Nasıl Geliştirilir?
Custom Properties, geleneksel CSS'de kullanılmayan farklı bir yapıdır ve CSS değişkenleri olarak da bilinir. Custom Properties, CSS açısından büyük bir yenilik olarak kabul edilir. Sayfa tasarımı geliştirmek için Custom Properties kullanmak oldukça faydalıdır. Bu yapının en büyük avantajı, daha okunaklı ve bakımı daha kolay bir CSS kodu oluşturabilmesidir.
Custom Properties kullanarak sayfa tasarımındaki renkler, yazı tipleri ve boyutları gibi değişkenleri tanımlayabilirsiniz. Bu sayede sayfaya daha derin bir yapı ve okunaklılık kazandırabilirsiniz. Bu yapının kullanımı oldukça basittir. Custon Properties kullanmak için -- karakterleriyle başlayan bir değişken oluşturmanız yeterlidir. Değişkeni oluşturduktan sonra, istediğiniz değeri atayabilirsiniz. Örnek olarak, --text-color: #333 şeklinde bir değişken oluşturabilirsiniz ve bu değişkeni istediğiniz yerde kullanabilirsiniz.
Bunun yanı sıra, Custom properties ile sayfa tasarımında gece/modu yapmak da mümkündür. Bu özellik sayesinde sayfa tasarımı daha modern bir görünüm kazanabilir ve kullanıcılara daha iyi bir deneyim sunabilirsiniz. Custom Properties'in kullanımı sayesinde tasarımınızı geliştirmek ve daha profesyonel bir görünüm elde etmek oldukça kolay hale gelir.
- Not: Custom Properties henüz tüm tarayıcılar tarafından desteklenmemektedir. Bu nedenle, bu özelliği kullanmadan önce sayfa tasarımının nasıl göründüğünü kontrol etmeniz önerilir.
CSS Renkleri ve Değişkenleri
CSS ile sayfa tasarımı yaparken, renkler önemli bir rol oynar. Custom Properties ile CSS renklerine değişkenler de atanabilir. Bu sayede, bir sayfada kullanılan aynı renk kodlarının defalarca yazılması yerine tek bir değişkende verilerek tasarımda tutarlılık sağlanabilir.
Custom Properties kullanarak CSS renkleri belirlemek oldukça kolaydır. Örneğin, " --renk: #000000; " şeklinde bir değişken tanımlandığında, bu renk kodu sayfa genelinde her yerde kullanılabilir. Bu kodu bir öğeye uygulamak için ise " color: var(--renk); " gibi bir kod yazılabilir. Bu sayede, bir renk kodunun birden çok kez kullanıldığı bir tasarımda renklerin değiştirilmesi oldukça kolay bir hale gelir.
Ayrıca, CSS renkleri belirlerken sadece standart renklerin kullanımı da mümkündür. Örneğin " --renk: fuchsia; " gibi bir kod, sayfada "fuchsia" renginin kullanımını sağlayacaktır. Custom Properties kullanarak CSS renklerini, tasarım sürecini kolaylaştırarak daha tutarlı bir tasarım elde etmek mümkündür.
Gece Modu Tasarımı
Gece modu tasarımları son zamanlarda oldukça popüler hale geldi. Kullanıcıların göz yorgunluğunu azaltmak amacıyla tasarlanan gece modu, aynı zamanda modern bir tasarım öğesi olarak da görev yapabilir. Custom Properties kullanarak, sayfanızdaki renkleri dilediğiniz gibi ayarlayarak kullanıcılara hoş bir gece modu deneyimi sunabilirsiniz.
Öncelikle, gece moduna geçiş yapabilmek için bir buton veya bir anahtar tasarlamanız gerekiyor. Ardından, sayfadaki elementlere Custom Properties ile renk tanımlamaları yaparak, bu butona basıldığında renklerin otomatik olarak değişmesini sağlayabilirsiniz. Aşağıdaki kod örneğinde bu işlem nasıl yapılır, açıklamalarıyla birlikte verilmiştir.
body { --tema-arkaplan-rengi: #ffffff; --tema-yazi-rengi: #000000;}body.gece-modu { --tema-arkaplan-rengi: #2c3e50; --tema-yazi-rengi: #ecf0f1;}
.buton { background-color: var(--tema-arkaplan-rengi); color: var(--tema-yazi-rengi);}
.switch { position: relative; display: inline-block; width: 60px; height: 34px;}
.switch input {display:none;}
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s;}
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;}
input:checked + .slider { background-color: #2196F3;}
input:focus + .slider { box-shadow: 0 0 1px #2196F3;}
input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);}
.slider.round { border-radius: 34px;}
.slider.round:before { border-radius: 50%;}
Yukarıdaki kod bloğunda, sayfanın genel özellikleri olan arka plan rengi ve yazı rengi tanımlanmıştır. Gece modunda bu özelliklerin değişmesi için 'body.gece-modu' sınıfı tanımlanmıştır. Buton örneği için, Custom Properties ile tanımlanan arka plan rengi ve yazı rengi kullanılmıştır. Gece moduna geçildiğinde ise bu renkler 'body.gece-modu' özellikleri ile değiştirilir.
Son olarak, gece modu anahtarının tasarımı yapılmalıdır. Yukarıdaki tasarım örneğiyle uyumlu çalışacak bir anahtar tasarlanarak, JavaScript yardımıyla bu anahtara basıldığında sayfada 'gece-modu' sınıfının eklenip çıkarılması işlemi gerçekleştirilir.
Custom Properties ile gece modu tasarımı yapmak oldukça basit bir işlemdir. Sadece birkaç CSS kodu ve temel bir JavaScript işlevi yardımıyla, kullanıcılara kullanımı kolay bir gece modu sunabilirsiniz.
Örneklerle Custom Properties Kullanımı
Custom Properties veya diğer adıyla CSS değişkenleri, CSS kodlarında tekrar eden değerleri daha kısa ve anlaşılır hale getiren bir özelliktir. Bu özellik sayesinde birçok farklı tasarım öğesi için ortak renkler, boyutlar ve stiller oluşturulabilir.Özellikle büyük projelerde, CSS kodları karmaşık hale gelebilir ve değişiklik yapmak zaman alıcı hale gelebilir. Custom Properties kullanarak, değerleri önceden oluşturulmuş bir değişkene atayarak kolayca değiştirilebilir ve herhangi bir uygulama sırasında tek bir yerde güncelleme yapılabilir.Örneğin, bir butonun bileşenlerinin önceki rengi #007bff iken, bu rengi önceden tanımlanmış bir değişkene atayabilirsiniz;:root { --button-color: #007bff; }
button { background-color: var(--button-color); }
Buton Tasarımı Örneği
Butonlar web tasarımlarında oldukça önemli bir yere sahiptir. Genellikle bir işlem yapmak için kullanılan butonlar, kullanıcıları diğer sayfalara yönlendirmek, formlar doldurmak veya sipariş vermek gibi işlemleri gerçekleştirmelerine olanak sağlar. Bu sebeple, butonların tasarımı üzerinde durmak oldukça önemlidir.
Custom Properties ile buton tasarımı yapmak oldukça kolaydır. Öncelikle, bir buton oluşturup, üzerine özellikler atamak gerekmektedir. Örneğin, butonu açık mavi bir renge boyamak için şu kod parçası kullanılabilir:
```cssbutton { --bg-color: rgb(0, 153, 255); background-color: var(--bg-color); color: white; padding: 10px 15px; border-radius: 5px;}```
Yukarıdaki kod bloğunda `--bg-color` adlı değişken, butonun arka plan rengini belirlemek için kullanılmaktadır. Değişken isminin başındaki çift tire (-) işaretleri, bu değişkenin custom property olduğunu belirtir. Butonun arka plan rengini `background-color` özelliğiyle belirtmek yerine, `var(--bg-color)` şeklinde kullanarak `--bg-color` custom property'sinin değerini kullanabiliriz.
Bu örnekte, butonun arka plan rengi `rgb(0, 153, 255)` ve `color` özelliği ile de yazı rengi beyaz olarak belirtilmiştir. Butonun kenar yuvarlama özelliğini de `border-radius` ile 5 piksel olarak belirledik. Bu sayede, butonumuzun tasarımında custom properties kullanarak butonun kolayca değiştirilebilir özelliklerini kullanmış olduk.
Butonlar çok sayıda özellikle özelleştirilebilir. Örneğin, butonun kenar kalınlığını, yazı tipini, yazı büyüklüğünü vb. de custom properties ile belirleyebiliriz. Bu sayede, butonlarımızı kolayca özelleştirebilir ve tasarımlarımızda daha fazla estetik unsur kullanabiliriz.
Menü Tasarımı Örneği
Menü tasarımı, web sayfalarının önemli bir parçasıdır ve birçok farklı şekilde kullanılabilir. Custom Properties kullanarak menü tasarımını geliştirmek, web sayfalarının daha modern ve kişiselleştirilmiş görünmesini sağlar. Menü tasarımında Custom Properties kullanarak sayfaya renk, boyut ve arka plan özellikleri gibi özellikler eklemek mümkündür.
Örneğin, bir menünün arka plan rengini ayarlamak için custom properties kullanabilirsiniz:
| Değişken adı | Değer |
|---|---|
| --menu-bg-color | #f2f2f2 |
Bu kod, menü öğelerinin arka plan rengini "#f2f2f2" olarak ayarlar. Bu değişken, istenilen herhangi bir menü öğesi için geçerlidir ve sayfada birden fazla menü kullanıyorsanız çok yönlüdür.
Ayrıca, menü öğelerinin boyutunu ve yuvarlak köşeler gibi diğer özelliklerini ayarlamak için de custom properties kullanabilirsiniz:
| Değişken adı | Değer |
|---|---|
| --menu-item-width | 120px |
| --menu-item-height | 40px |
| --menu-item-border-radius | 5px |
Bu kod, menü öğelerinin boyutunu 120 piksel genişliğinde ve 40 piksel yüksekliğinde, köşeleri 5 piksel yuvarlak şeklinde ayarlar.
Menü tasarımında Custom Properties kullanarak sayfanızın görünümünü daha kişiselleştirilmiş ve modern hale getirebilirsiniz. Özellikle renkler ve boyutlar gibi özelliklerde kullanımı oldukça yaygındır ve sayfalarınızın daha hoş görünmesini sağlar.