CSS Dersleri
-
CSS nth-child Seçicisi Kullanımı
CSS kodları ile belirli aralıklarla HTML elementlerinin nasıl seçileceğinden bahsedeceğim. Düzenli bir şekilde seçim yapabilmek için nth-child seçicisi kullanılmaktadır. Örnek olarak bir HTML yapısı oluşturalım ve belirli aralıklarla seçimi gerçekleştirelim. <style> .kapsa .secim{color:#fff;width:50px; padding:10px; margin:5px; float:left; background:red;text-align:center} </style> <div class="kapsa">…
-
CSS İle İpucu Baloncuğu(Tooltip) Yapımı
Tooltip, bir HTML etiketinin üzerine gelindiğinde, açıklama amaçlı bir metin gösterilmesi işlemidir. HTML etiketinin üzerine mouse ile gelindiğinde görünen metne yada yönlendirici ifadeye Türkçe karışılığı ile ipucu baloncuğu denilmektedir. Bu eğitimde, CSS kodlarını kullanarak mouse ile HTML etiketinin üzerine gelindiğinde…
-
CSS ile Geçişli Switch Checkbox Hazırlama
Web sitelerinde yer alan formlardaki checkbox etiketlerinin nasıl geçiş yapılarak aç-kapat formatına getirilebilineceğinden bahsedeceğim. Bu işlemi gerçekleştirmek için sadece CSS kodlarını kullanarak şekillendirme yapmış olacağız. Onay kutularına geçiş animasyonu ekleyerek açık yada kapalı gibi işlemin daha belirgin bir şekilde hazırlanmasını…
-
CSS ile Yükleme Animasyonu Hazırlama
Web sitelerinize ekleyeceğiniz yükleme animasyonları, geliştirdiğiniz projeler için oldukça kullanışlı bir unsurdur. Sayfa veya içerik yükleme sırasında yükleme animasyonu kullanarak kullanıcılara sayfanın hazırlığı için bilgi verebilirsiniz. Web sayfasının içeriğini getirmek yada işlemler yaptıldığında sonucun dönmesi için beklemek adına yükleme animasyonları…
-
CSS ile Sosyal Medya Butonları Hazırlama
Bu eğitimde, CSS ile sosyal medya butonlarının nasıl hazırlandığından bahsedeceğim. Hazırlayacağımız sosyal medya butonları, sayfanın belirli bir yanına yapışık olan ve mouse ile üstüne geldiğinizde detaylar sunan bir örnek olacak. Bu tarz işlevsel alanlar genellikle jQuery eklentileri ile hazırlanmaktadır. Fakat…
-
CSS ile Checkbox ve Radio Özelleştirme
Bu eğitimde, CSS ile Checkbox ve Radio butonlarının nasıl özelleştirileceğinden bahsedeceğim. Bildiğiniz gibi doğrudan CSS kullanımı ile bu alanlar özelleştirilememektedir. Özelleştirme için farklı bir yöntem kullanmak gerekiyor. Bu alanları özelleştirmek için yapılacak mantık şu şekildedir; radio yada checkbox alanları oluşturulur.…
-
CSS ile Site Rengini Siyah Beyaz Yapma
Geçtiğimiz 10 kasımda, web sitemin tüm renklerini gri tonlarına çevirerek günün anlam ve önemine ait bir şey hazırlamak istedim. Bunun için aklıma CSS kullanarak grayscale filtresi ile yapacağımı düşünüp uyguladım. Tam istediğim bir sonuç aldığımdan bunu sizinlede paylaşmak istedim. Sizin…
-
CSSGram İle Resimlere İnstagram Filtresi Uygulama
Günümüzde en çok kullanılan sosyal medya hesaplarından birisi de hiç şüphesiz ki Instagramdır. Instagramda yer alan yenilikler (hikayeler bölümü gibi) herkesin ilgisini çekmekte ve uygulamaya çalışmaktalar. Instagram denildiğinde akla gelen özelliklerinden birisi de fotoğraflara uygulanan filtredir. Çok güzel tonlarda hazırlanan…
-
Css ile Radio Butonlarını Şekillendirme
Birçok yerde ki bunlardan birisi de benim sitemdeki ankette olan radio butonlarının şekillendirilmesinin nasıl olduğunu göreceğiz. Eskiden bu tarz düzenlemeleri yapabilmek için bıktıran usandıran kodlar ile taklalar atardık. Şimdi ise Css3 ile gelen düzenlemeler ve kullanımlarla bu şekillendirmeyi çok kolay…
-
CSS İle Yazıya Gölge Efekti Vermek (Text Shadow)
Metinlere gölge vermek, site görselliği açısından her zaman tasarımcıların tercih ettiği yöntemlerden birisidir. Bir çok sitede bu durum ile karşılaşırız. Normalde bu gibi durumlarda gölge verilen alanlar resim olarak kesilip siteye eklenir. Bu durum anlamlı kodlama ve arama motorları için…
