Css/XHtml/W3C

Blog yazarken beni en çok motive eden yazdığım/paylaştığım konuların birilerine faydalı olduğunu bilmek. Gelen epostalardan görüyorum ki yıllar önce (9 yıl olmuş) yazmış olduğum yTelefon uygulamasından hala faydalanan programlama meraklısı kişiler bulunmakta. Ben de bir haftasonu projesi olarak bu uygulamayı günümüz teknolojileri ile (Bootstrap, jQuery, AJAX vs.) yeniden (sıfırdan) yazdım. Programlama öğrenmek isteyen başlangıç ve orta seviyeye kullanıcılara armağanım olsun.

Bilişim alanında yazı yazarken yazılara başlık atmak oldukça zor olabiliyor. Bu yazıya İngilizce bir başlık bulmak isteseydim “How to overwrite Bootstrap’s navbar CSS” gibi bir şeyler yazardım ve tam da amacına hizmet ederdi. Bunu Türkçe’ye çevirmenin (Bootstrap’in navbar CSS’inin ya da seçicisinin üzerine yazmak gibi bir şey.) pek hoş olmayacağını düşündüm. Konuyu gereksiz yere uzattığımın farkındayım ancak içimde kalmasın dedim :)

Bootstrap’i artık duymayan web developer bulmak mümkün değil sanırım. Bununla birlikte Bootstrap’in en önemli özelliklerinden birisinin de hazır CSS kodları ile bir çok öğenin önceden şekillendirildiğini biliyoruz, aynı Bootstrap navbar (navigasyon menüsü)’da olduğu gibi. Söz konusu navbar’a istediğiniz şekli vermek için Bootstrap’in kullanmış olduğu şablonu az çok bilmek gerekir. Burada tüm seçicilerden bahsetmem zor ancak en azından navbar’ı dilediğiniz gibi şekillendirebilmeniz için oluşturduğum şablonu paylaşabilirim.

CSS’te kutu modelinin en temel özelliklerinden birisi borders yani kenarlıklar (sınırlardır). CSS3 ile kenarlıklar daha da canlandırılmak istenmiştir. Bu amaçla da düz çizgi halinde kenarlıklar yerine görsel kullanımına başlanılmıştır. Böylece eskisine ziyade çok daha canlı ve güzel kutular elde edebiliyoruz.

CSS3 ile gelen en önemli yeniliklerden birisi de görsel kullanmadan yuvarlak köşeler oluşturabilmemize imkan sağlayan border-radius özelliğidir. Eskiden hatırlıyorum da basit bir yuvarlak köşe oluşturmak için hem köşeler için görseller kullanır hem de bu yuvarlak köşeleri nesnemize eklemek için iç içe satır satır kod yazmak zorunda kalırdık. Neyse ki standartlar zamanla çok daha yaygın hale geliyor. Bu sayede böyle çok kullanılan teknikler için her gün daha pratik çözümler üretiliyor.

CSS3 Başlangıç yazısında CSS3 ile beraber artık modül kavramının geliştirildiğinden bahsetmiştim. Bu yazımda da Color yani renk özelliklerinden bahsederek modüllere yavaştan giriş yapalım istedim. Burada yazacaklarımdan bir kısmı CSS2 ve öncesinde de mevcuttu ancak hiç sürüm karmaşasına girmeye niyetim yok. Biz en güncel haliyle CSS3’ün renk özelliklerini nasıl kullanacağımızı inceleyelim.

CSS3 Renk Modülü

Css ile nesnelerin rengini belirlemek için “color” özelliğini (attribute) kullanmaktayız. Mevzu bahis tasarım olduğundan renk konusunun sanırım ne kadar önemli ve temel bir konu olduğunu belirtmeme gerek yok. Bu nedenle “color”‘ın kullanımını anlatarak modül konusuna başlamayı uygun buldum.

CSS3 “color” modülünü nesnelere renk verirken kullanmaktayız. Mantık olarak kırmızı, mavi ve yeşil (Red, Green, Blue – RGB) renklerinin kombinasyonları kullanılarak, istenilen renkler üretili. Bu renklendirme işini 6 farklı şekilde yaparız. Bu kullanım şekillerinden hangisini kullanacağınız tamamen sizin tercihinize kalmıştır.