ile

Sayfamızın içeriğini CSS3 ile güzelleştirelim

Ana sayfamızı hallettik. Ama daha güzel görünmesini istiyoruz. Peki ne yapabiliriz? Örneğin Logo’nun üstte olmasını, bazı elemanların yanda, bazı elemanların gölgeli, yuvarlak köşeli olmasını da isteyebiliriz. Hatta animasyon bile hazırlayabiliriz. İşte bunun için HTML5 ile gelen CSS3 var. CSS3’ü ve özelliklerini anlamaya başlayalım. CSS yani “cascading tyle sheet” basamaklı biçim sayfası anlamına gelir.

HTML elemanlarının görüntüsünü düzenlememize yarar. Örneğin sayfamızda bir telefon bilgisini içeren bir kutu yaratmak istemiş olalım. Kutumuzu div etiketiyle oluşturalım ve id özelliğine de iletisimTel diyelim.

 <div id="iletisimTel">
    <div id="tel">Tel: +90 212 444 19 17</div>
    <div id="fax">Fax: +90 212 444 19 05</div>
</div>

Şimdi adım adım kutumuzu şekillendirmeye başlayalım. CSS kodlarını istersek

gibi yazabiliriz. Ama ben tavsiye etmiyorum. Sonuçta karmakarışık ve yönetilemeyen bir kodunuz olur. Bir numaralı felsefemiz bilgi ve görüntüyü birbirinden mümkün olduğunda ayrı tutmak olmalı. İkinci seçeneğimiz html sayfasının head etiketinin altında <style type=”text/css”></style> etiketini kullanmak. Aslında bu da iyi bir yöntem değil ama şimdilik bunu kullanacağız.

Önce kutumuzu seçelim: id’si iletisimTel olan kutuyu seçmek istiyoruz. Bunun için # karakterini kullanmamız yeterli. #iletisimTel Tüm etiketleri seçmek istedeydik doğrudan div yazabilirdik.  Kendisi div olup id’si iletisimTel olan kutuyu ise div#iletisimTel şeklinde seçiyoruz. Peki birden fazla kutuyu aynı anda şekil vermek istersek ne olacaktı? Bunun için de class özelliğini kullanmamız gerekiyordu. Örneğin; <div class=”yesil”>Yesil kutu</div> <div class=”yesil kirmizikenar”></div> dediğimizde .yesil ve .kirmizikenar ifadeleriyle etiketlerimizi seçecektik. Yine etikete özel şekil vermek isteseydik de, div.kirmizi ifadesini kullanacaktık. Örneğimize dönelim:


<style type="text/css">
#iletisimTel
{
    width: 250px;
    border: 1px solid black;
    background-color: silver;
    padding:10px;
}
</style>

Burada ilk önce elemanımızı seçtik. Daha sonra açtığımız parantezler içerisinde istediğimiz özellikleri tanımlamaya başladık.

İlk önce width özelliği ile kutumuzun genişliğini 250 piksel olarak belirledik. Daha sonra border özelliği ile kenar çizgisini siyah, kesintisiz ve 1 piksel olarak belirledik. Gördüğümüz gibi burada ingilizce renk isimlerini kullanabiliyoruz. Ama istersek #000000 şeklinde 16’lık ren kodu da kullanabilirdik. Buraada 16’lık renk kodu ile ilgili bir ipucu vermek gerekirse, ilk iki hane kırmızı miktarını belirtiyor. Sonraki iki hane yeşil ve son iki hane de mavi miktarını veriyor. İlk iki hane 16*16 yani 0’dan 255’e kadar 256 adet renk miktar değeri elde etmemize yarıyor. Bu sayede web üzerinde 16.777.216 adet renk elde edebiliyoruz. Daha fazlasını merak ediyorsanız 16’lık sayıları araştırın derim.

Backround-color özelliği ile kutumuzun arka plan rengini de belirledik. Rengin silver yani gümüş rengi olmasını belirttik. Son olarak da padding yani kutunun dışından içeriğine kadar olan mesafeyi 10 piksel olarak ayarladık. Her şey tamam olduğunda karşımıza şöyle bir görüntü çıktı:

Güzel mi? Tabii ki hayır. Bunun yerine görüntüyü biraz daha modern bir hale getirelim.


<style type="text/css">
#iletisimTel
{
        width: 250px;
        border: none;
        background-color: white;
        padding:10px;

        /* Yazıyı kutunun ortasına hizaladık */
        text-align:center;

        /* Kutumuza gölge verdik */
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px#888;
        box-shadow: 0 0 5px #888;

        /* Yazının rengini ve font türünü seçtik */   
        color: gray;
        font:15px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>

Örnekte gördüğümüz gibi, CSS içinde yorum yapmak PHP’ye biraz da olsa benziyor. Burada yaptığımız değişiklik ise, kutudaki kenar çizgisini yokettik, arkaplanı beyaz yaptık, yazıyı kutunun ortasına hizaladık, CSS3 ile birlikte gelen yeniliklerden gölge özelliğini kullandık, kutu içindeki yazının renk, büyüklük ve yazıtipi özelliklerini de belirledik. Son olarak görünüm şu şekilde değişti:

Nasıl? Daha güzel görünüyor değil mi? Şimdilik CSS ile ilgili yapacaklarımız bu kadar. İsterseniz siz de bu özellkleri kurcalayıp değişiklikler yapabilirsiniz. Arka planı kırmızı, yazı rengini sarı ve kocaman yapabilirsiniz mesela.

Dayanışmayla!
Meraklı Bilişimci

Yorumla

Yorum