Artık CSS kodlarınızı daha hızlı daha kolay yazabileceksiniz. Nasıl mı? less.js ile. Hemen konuya girelim.

styles.less adlı bir dosya oluşturup bunu HTML sayfanıza çağırınız.

<link rel="stylesheet/less" type="text/css" href="styles.less">

Daha sonra http://lesscss.org adresine girip son versiyonunu indirin. HTML sayfanıza indirdiğiniz javascript dosyasını çağırınız.

<script src="http://lesscss.googlecode.com/files/less-1.1.3.min.js" type="text/javascript"></script>

Artık CSS içinde değişkenler kullanabilirsiniz. Örneğin bir rengi birden fazla kullanmanız gerekirse her seferinde renk kodunu yazmak yerine değişkene atayıp kullanabilirsiniz. Daha sonra bir değişiklik yapmak istediğinizde sadece o değişkendeki renk kodunu değiştirmeniz yeterli olacaktır.

Örnek kullanım:

// LESS
@renk = #333;

#header {
    color: @renk;
}
a {
    color: @renk;
}

» devamı

Bugün CSS ile ilgili bir ipucu vereceğim. Örneğin bir menü yaptığınızda veya tekrar eden bir div yaptığınızda birinci div'in farklı olması gerekir. Mesela border'ı yok etmeniz gerekebilir vs.

Bunun için şimdiye kadar ayrı bir class kullandıysanız bu ip ucu tam sizin için. Ayrı bir class kullanmaya gerek kalmadan da yapılabilir. Nasıl mı? Görelim.

Örneğin şu şekilde bir HTML kodumuz mevcut:

<div id="huko">menü</div>
<div id="huko">menü</div>
<div id="huko">menü</div>

Bunlar için şöyle bir css kodu kullanalım:

#huko { background-color: #ddd; }

Bu şekilde kullandığımızda şöyle bir görüntü alırız:

Şimdi gelelim asıl meselemize. İlk div'in arkaplan rengini değiştirmek için artık ayrı bir class kullanmanıza gerek yok. Küçük bir CSS kodu ile bunu yapabilirsiniz. » devamı

CSS kodunuzu alt alta yazdınız ve bunu sıkıştırmak istiyorsunuz. Ya da yan yana yazılmış CSS'i okumakta zorluk çekiyorsunuz, okunabilir olmasını istiyorsunuz. Bu durumlarda PROCSSOR işinize yarayabilecek bir araç.

Siteye girdiğinizde orta bölüme CSS kodlarınızı direkt yapıştırabilir, stil dosyanızı upload edebilir ya da bir link verebilirsiniz. Daha sonra "options" bölümünden ne şekilde formatlanmasını istiyorsanız seçiyorsunuz. » devamı

Sprite Cow'da bir imaj dosyası yükleyerek CSS-Sprite oluşturabiliyoruz (sadece Firefox ve Chrome'da çalışıyor!). Herşey yarı otomatik çalışıyor. Arkaplanı transparan olan bir imaj yüklüyorsunuz ve istediğiniz grafiğin üzerine tıklıyorsunuz. Sprite Cow size CSS-Sprite'ını otomatik oluşturuyor. » devamı

Öncelikle HTML kodlarımız ile başlıyoruz:

<div id="container">
    <div id="tab-head">
        <ul>
            <li><a href="#tab1">Tab 1</a></li>
            <li><a href="#tab2">Tab 2</a></li>
            <li><a href="#tab3">Tab 3</a></li>
        </ul>
    </div>
    <div style="clear:both;"></div>
    <div id="tab-content">
        <div id="tab1" class="content">Tab 1</div>
        <div id="tab2" class="content">Tab 2</div>
        <div id="tab3" class="content">Tab 3</div>
    </div>
</div>

Daha sonra bunlara CSS yardımı ile stil veriyoruz: » devamı

Programlama yapmadan, if-else veya fonksiyonlar kullanmadan tek bir CSS dosyası ve gereken imajlarla Iconize ile linklerinize simgeler ekleyin.

Iconize nasıl çalışır?

CSS dökümanında daha önce tanımlanmış seçicileri kullanarak HTML elemanlarını seçer ve bunlara görsellik kazandırır. » devamı

Bu makalemde CSS3 efektleriyle yapılmış bir yatay menü örneği ögreceksiniz.
Öncelikle HTML kodları şu şekildedir:

<div id="menu">
    <ul>
        <li><a href="#">Anasayfa</a></li>    
        <li><a href="#">Hakkımda</a></li>
        <li><a href="#">Galeri</a></li>
        <li><a href="#">Projeler</a></li>
        <li><a href="#">İletişim</a></li>
    </ul>
</div>

Burada ul tag'ı ile bir liste oluşturduk. » devamı