İn this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We’ll also use jQuery to handle the effects and add the finishing touches for us.
Nettuts’ta yer alan jQuery, CSS ve HTML5 ile Navigasyon – Dropdown menü dersi bulunmakta. İncelemenizde ve kendinize örnek kod oluşturmakta fayda sağlar diye paylaşmak istedim. Continue reading
CSS pseudo-classes bazı seçicilere özel efekt vermemizi sağlayan bir sınıftır. Bu verilen adın Türkçe açıklaması olmadığı ya da tam karşılanmadığı için orjinal ismini yazdım.. CSS içerisinde bazen özel efektlere ihtiyac duyarız.. Bunlar pseudo sınıfları içerisinde XHTML’e atayacağımız bazı seçicilerin kendi özelliklerinin dışına vurulmuş halidir.
pseudo-classes söz dizimi şu şekilde oluşturulur;
seçici:pseudo-class {özellik:değer;}
Merhaba arkadaşlar.. Bu CSS dersimizde de CSS Align olarak birkaç bölüme ayıracağım Yüzey alanı parametresini daha önce gördüğümüz CSS margin özelliği ile birlikte kullanıp, backgorund – color özelliklerini göstereceğim.
CSS içerisinde bazı özellikler yatay elemanları hizalamak için kullanılır. Align bunlardan biridir.
Blok elemanlarından kastımız sayfa boyunca ilerleyen ve Default ayarlarında herhangi bir kısıtlama ya da hizalama kullanmayan elemanlardır.Bunlara örnek verecek olursak;
gibi elamanlardır. Text align (yazı hizalama) özelliği için CSS Yazı başlığımızı inceleyebilirsiniz. Continue reading
Merhaba arkadaşlar.. CSS Advanced kategorisinde CSS Floating adındaki WordPresste bir nevi Thumb olarak da adlandırılabilecek olan resimlerimizi yazılarımız ile bir kullanabileceğimiz ve bununla da sınırlı olmayan birkaç CSS float özelliğini göstereceğim.
CSS Float özelliği ile birlikte, bir elemanı diğerlerinden bağımsız olarak sağ ya da solda gösterip, elemanın gerisinde kalan alanları (aşağı ya da yukarı gibi) boşluk olarak değerlendirip oaralarıda kullanabileceğimiz sayfalar yapabiliriz. Continue reading
CSS Display özelliği, bir nesneyi görünürken gizlemek yada görünmez durumdayken ortaya çıkarmak (visibility) işlevini görür.
Bir elemanı Gizlemek, display:none veya visibility:hidden
CSS’te eğer bir nesneyi görünmez yapmak istersek bunu css özelliklerinden display:none ya da visibility:hidden ayarları ile yaparız.Aralarındaki fark ise visibility:hidden özelliğini kullanırsak gizlenen elemanın bulunduğu alan boşlukla belirlenirken, display:none özelliğinde ise elemanı görünmez yaptığımızda artık o eleman hiç kullanılmamış gibi olur ve bulunduğu yerde boşluk olmaz. Continue reading
CSS Derslerimizin, CSS içerisinde bir değer atayarak istediğimiz nesnenin boyutlandırması nasıl yapılır bunu göstereceğim
Bu konuyu ayrıca açmamın sebebi birkaç örnek göstererek boyutlandırma kavramını daha iyi anlamıya sağlamaktır.
CSS boyutlandırma özelliği width ve height değişkenlerine değer atama sonucu oluşur.Hemen bir örnek yapalım;
img.normal
{
height:auto;
}
img.buyuk
{
height:120px;
}
p.ex
{
height:100px;
width:100px;
}
Merhaba arkadaşlar.. CSS Stilleme ve CSS Kutu Modelleme derslerinden sonra son şimdi de CSS İleri Seviye derslerine başlıyoruz..
İlk konumuz CSS içerisinde kullanabileceğimiz yuvalama ve gruplama işlemidir..İlk önce grup seçicilerinden bahsedelim
CSS derslerimiz boyunca aşağıda gördüğünüz şekilde CSS stil kodlarıını oluşturuyorduk; Continue reading
CSS Margin e bir alternatif olarak düşünülen fakat aslında bambaşka bir özellik olan padding ise kullanımı margin gibi olan fakat bu çerçevede ayıracağımız boşluğu, çerçeve, başka bir katmandan uzaklaşma, bir nesneye olan uzaklık olarak değer katılır.. Padding özelliği ile, örneğin; bir yazınınza çerçeve eklediyseniz yada background color özelliği verdiyseniz, bu background’unuzu ya da çerçeveyi dilediğiniz kadar uzatma, ya da o belirlediğiniz çerçeveyi yazıdan uzaklaştırma işlevi gibi düşünülebilir.
| Değer | Açıklama |
|---|---|
| length | pixex, pt, em gibi değerler kullanılır. |
| % | Değer % olarak kullanılır. |
Margin özelliğini çoğunuz duymuş olmalısınız.. Bilindiği gibi margin bir elementin etrafını temizlemeye yarar.. Bu ne demek? Şöyle bir örnek ile açıklayalım; eğer bir katman ya da her hangi bir objeniz mevcut.. Bu objeyi diğer objelerden ayrı tutmak, yukarı da yada aşağıda boşluk bırakmak yada diğer bir elementten uzaklaştırmak için kullanılır..
top, right, bottom, ve left Margin özellikleri, sizin isteğinize göre dıştan, içten, sağ ve soldan belirleyeceğiniz alanları destekler.. Ayrıca margin özelliğinde negatif değerler kullanılarak boşluk verme özelliğini tam ters fonksiyonda gerçekleştirebilirsiniz..İlk olarka olası değerlere bir göz atalım; Continue reading
CSS Border özelliğinden sonra ufak bir bilgi daha vermek istiyorum.. Bu aşamada, CSS içerisinde aslında border gibi kullanabileceğimiz bir örnek daha mevcut ki buna da outline diyoruz.
Outline özelliği içerisinde; border‘da kullandığımız gibi, style, color ve width ayarlarını kullanarabiliriz.Örnek;
p
{
border:1px solid red;
outline:green dotted thick;
}