15 Adet Harika CSS Araçları

Bildiğiniz üzere Web, Grafik ya da Kod tasarım içerisinde Dünyanın önce gelen e-ticaret sitesi olan hem kazanıp hem de kazandıran şirketi envato içerisinde Codecanyon bölümü mevcut.. Codecanyonun içeriğini merak ediyorsanız şuraya tıklayın..

Bu yazımda bahsedeğim şey, Codecanyon içerisinde satışa sunulan 15 adet CSS aracıdır.. bunları satın almak için yazı başlıklarına tıklayıp üye olmalısınız. Daha sonra ödeme yaptıktan sonra satın al butonunu kullanarak size bir download adresi açılacaktır buradan indirebilirsiniz..

1. Griddler Pricing Grid I

Griddler Pricing Grid

“ HTML5 /CSS3Stili ile tüm browserlara uyum gösteren bir HTML5/CSS3 Plugini.”


2. CSS3 Buttons

CSS3 Buttons

“Birinden farklı ve güzel CSS Butonları, PSD değil CSS!”


3. Droplink

Droplink

“Envato ve içerisindeki bütün sitelerde bulunan menü butonlarını yapan bir arkadaş bu çalışmasını satışa çıkarmış.”


4. Griddler Pricing Grid II

jQuery ScrollTo Plugini Nasıl Kullanılır

Merhabalar.. Bugün sizlere, çoğu yabancı ve birkaç tane de türk blogunda yer alan, sonraki konu ya da yorumlara atla gibi jQuery ScrollTo Pluginini nasıl kullanırız onu göstereceğim.. Zaten şurada mevcut olan jQuery Pluginimizi öncelikle indirmemiz gerekiyor. Ve de jQuery scriptimizi şuradan indirebilirsiniz. Continue reading

jQuery CSS ve HTML5 ile Dropdown Menü

http://s3.amazonaws.com/nettuts/699_nav/200x200.jpgİ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 Sınıfları – Özel Efektler

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.

Söz Dizimi

pseudo-classes söz dizimi şu şekilde oluşturulur;

seçici:pseudo-class {özellik:değer;}

Continue reading

CSS Align – Hizalama

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ını Hizalama

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;

  • <h1>
  • <p>
  • <div>

gibi elamanlardır. Text align (yazı hizalama) özelliği için CSS Yazı başlığımızı inceleyebilirsiniz. Continue reading

CSS Floating – Sabit Olmayan Nesneler

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 Nedir?

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 Pozisyonları – CSS Position

CSS pozisyon elemanları adından da anlaşılacağı üzere, elemanların sayfa içerisindeki pozisyonlarını belirlemeye yarar. Elemanın etrafında ne kadar boşluk olacağı, neyin arkasında ya da neyin kenarında olacağına CSS position özelliği ile sağlayabiliriz.

Elementleri pozisyonlamada top, bottom, left, ve right özelliklerini kullanırız. Ancak bu değişkenler CSS pozisyon özelliklerini başta belirtmeden kullanılamaz.Ayrıca bu özellikler farklı konumlandırma ayarları ile çalışmaktadırlar.. Birazdan vereceğim örneklerle ne demek istediğimi acıkca anlayacağınızı umuyorum.

Statik Konumlandırma Continue reading

CSS Display ve Visibility

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 Boyutlandırma

CSS Boyutlandırma ÖzellikleriCSS 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;
}

Continue reading

CSS Grup ve Yuva Seçicileri

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 Grup Seçicileri

CSS derslerimiz boyunca aşağıda gördüğünüz şekilde CSS stil kodlarıını oluşturuyorduk; Continue reading