CSS3 kulislerde konuşula dursun, tasarımcılar CSS3′ün getirdiği yeniliklerle gelen kolaylıkları kullandıkları günü hayal etmeye devam ediyorlar. Gerçi CSS ve tasarımcı dostu tarayıcımız Firefox bazı yeni özellikleri şimdiden getirmiş olsa da (örneğin: CSS3 ile gelecek olan border-radius özelliğini moz-border-radius olarak Firefox’ta şimdiden kullanabiliyoruz), en azından sorunlu ‘tarayıcımız’ Internet Exporer’ın da bu özellikleri anlayabileceği gün için biraz daha beklememiz gerekiyor.
Peki nedir bu yeni özellikler? Aslında hepimiz bir çoğunu uzun zamandan beri kullanmamıza rağmen, kullanabilmek için ‘bin dereden su getiriyoruz’. Haydi, ileriki günlerde sahip olacağımız bu özelliklerden bazılarına beraber göz atalım.
Resimleri kenar olarak atama (border-image)
CSS3 ile öğelere atadığımız kenarlıklara (border) pek güzel yenilikler geliyor. Bunlardan biri ‘border-image’. Bu yeni ve hoş özellik ile istediğimiz herhangi bir resmi öğelere kenarlık olarak atayabiliyor, yüksekliklerini belirleyebiliyoruz.
Yukarıdaki örnekte olduğu gibi, CSS’in 3. versiyonu ile istediğimiz bir resmi herhangi bir öğeye kenarlık olarak atayabileceğiz.
Kenar köşelerini ovallaştırma (border-radius) CSS3 ile gelen muazzam yeniliklerden biri de öğenin kenarlıklarını ovallaştırma özelliği. Bu özellik ile herhangi bir öğenin istediğimiz bir kenarını ovallaştırma şansına sahip olacağız
Tarayıcımız Firefox, bu özelliğe şimdiden alışmamız için şimdiden kısmen destekliyor bile. Özelliği aşağıdaki gibi kullanmamız mümkün:
Gördüğünüz gibi, CSS3′ün farklı ve pek yararlı bir özelliği de, örneğin 8 piksellik bir kenarın her pikseline istediğimiz rengi verebilmemiz. Bu özelliğin yardımıyla rengarenk kenarlar oluşturabileceğiniz gibi, rengi pikselden piksele açarak artalan efektli kenarlar oluşturabilirsiniz.
Tarayıcımız Firefox ile bu özelliği aşağıdaki kullanım şekliyle şimdiden kullanmanız mümkün;
CSS3 ile gelen yenilikler tabii ki sadece kenarlık cephesinde değil. Yeni ve yararlı özelliklerden bir diğeri ise arkaplan boyutunun belirlenebilmesi.
Bu yararlı özelliğin yardımı ile, örneğin 100×100 piksel boyutlarındaki bir resmi, 50×50 pixel boyutlarında arkaplan olarak atamanız mümkün olacak.
Kullanabilmek için biraz beklememiz gerekecek olan özelliği ileriki zamanlarda şu şekilde kullanacağız;
Bu pek güzel özellik ile, herhangi bir öğeye birden fazla arkaplan öğesi ekleyebilme şansına sahip olacağız. Arkaplanları ise arada virgül (,) kullanarak belirleyeceğiz.
Diğer bir muazzam özellik ise, herhangi bir öğeye atadığımız rengin transparanlık oranını belirleyebilmemiz.
Özelliğin yardımıyla, herhangi bir grafik işleme programında bolca kullandığımız ‘Alpha’ veya ‘Transparency’ özelliğini CSS üzerinden istediğimiz öğeye atayabileceğiz.
Metinleri birden fazla sütuna paylaştırma
Bu muazzam özelliğin yardımıyla, herhangi bir metni birden fazla sütuna paylaştırabileceğiz
.isim { width:300px; -moz-column-count: 2; -moz-column-gap: 10px; }
.isim2 { width:300px; -moz-column-width: 140px; -moz-column-gap: 10px; }
Yukarıdaki örnek kodlarda dikkatinizi çekmiş olan ‘-moz-column-gap’ ile sütunların arasındaki boşluğun genişliğini belirliyoruz.
3. versiyon CSS’in getireceği bazı güzelliklerden bahsettik. Bu özelliklerin ne zaman gelecekleri ve tarayıcıların (özellikle Internet Explorer’ın) ne zaman tam olarak destekleneceğini tam olarak bilemesek de, geldikleri zaman işe yarayacak olan özellikler olacaklarını görmüş olduk.
Çerezler küçük bilgi verici metinlerdir, bizim veya iş ortaklarımızın tarayıcınız aracılığıyla size ulaşmamızı sağlar.
Tarayıcınızdaki ayarları değiştirerek istediğiniz zaman çerez kullanımını engelleyebilirsiniz.
Genel Veri Koruma Yönetmeliği ile uyumlu aşağıdaki çerezleri kullanıyoruz:
- Temel çerezler: Web sitesinin tam olarak işlevsel olması için kesinlikle gereklidir.
- Opsiyonel Çerezler: İsteğe bağlı çerezlerdir ve web sitesini geliştirmemize yardımcı olur, ör. sizi kişisel olarak tanımlamadan web sitesindeki kullanım davranışınızın analiz edilmesi gibi.
Gizlilik politikamızdan daha fazla bilgiye ulaşabilirsiniz.