1. Ayyıldız Tim forumu Hariç Hiç Bir şekilde Rütbeli Oldugunu İdda edenlere inanmayınız.. Ayyıldız Tim Adına Sizden Bilgi Belge TC Kimlik Vb Evrak İsteyenlere Asla Bilgilerinizi Vermeyiniz.
    Duyuruyu Kapat

Css Dersleri 4-arkaplanlar

'Html - CSS - XML - JavaScript - Ajax' forumunda ERVAH-I-EZEL tarafından 15 Mayıs 2017 tarihinde açılan konu

  1. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,651

    Özel Mesaj
    Selam herkese. Css Derserinde 4. konudayız. Önceki dersimizde "Div" ve "Span" etiketlerinin özelliklerini işlemiştik.

    Css Dersleri 1-Giriş
    Css Dersleri 2-Yazı Biçimlendirme
    Css Dersleri 2-Div ve Span Etiketleri

    Bu derste ise Css ile arkaplan özelleştirmeyi öğreneceğiz. Bu konuda öğrendiğimiz şeylerin bazılarını ileriki konularda da uygulayabileceğiz, o yüzden dikkatli çalışın. Kolay gelsin. ;)

    İlk olarak arkaplan dediğimiz şeyi "zemin" olarak da tanımlayabiliriz. Bir web sitesinde bizim içerik olara görüntülediğimiz yer "body" etiketi içine yazılan kodlardır. Yani zemin dediğimiz şey "body" etiketinin kendisi oluyor. Ama bu arkaplan işini farklı sadece "body" etiketi içinde kullanmak zorunda değiliz. Biz önceki derste ne öğrendik? Div etiketinin blok seviye yani belli bir alana sahip olduğunu. Tıpkı şu resimdeki gibi:

    [​IMG]

    O zaman biz çerçeve içindeki kısmı da o div etiketinin arkaplanı olarak düşünebiliriz. Örnek olarak o div etiketinin arkaplan rengini değiştirebiliriz.

    İlk önce her zaman yaptığımız gibi temel Html ve Css kodlarımızı yazalım. Hatta içine bir paragraf etiketi açıp yazı da yazalım. Sonra da tek tek öğrenmeye başlayalım.

    HTML:
    <!Docytype html>
    <html>
    
        <head>
            <title>Css Ders-4</title>
            <meta charset="Utf8">
            <style>
                body {background-color:green; }
                p    {color:yellow; }  
                     
            </style>
        </head>
       
        <body>
        <p>
        Deli gönlüm kabardı mı coştu mu,<br/><br/>
    Çanakkale hiç aklına düştü mü,<br/><br/>
    Dert ettiğin üç beş hain puşt mu,<br/><br/>
    Tasa etme güzel yurdum Türkiyem,<br/><br/>
    
    Yedi düvel sekiz olsa fark etmez,<br/><br/>
    Atasından duymadı mı çark etmez,<br/><br/>
    Sönmedikçe bir ocak terk etmez,<br/><br/>
    Tasa etme güzel yurdum Türkiyem,<br/><br/>
    
    Biz bu yurda kelle verdik,baş verdik<br/><br/>
    Baba verdik,evlat verdik,eş verdik,<br/><br/>
    Nice görülmemiş düş verdik,<br/><br/>
    Tasa etme güzel yurdum Türkiyem.<br/><br/>
    
    Kadın erkek yaşlı genci demeden,<br/><br/>
    Korkma vermez seni kimse ölmeden,<br/><br/>
    Ölüm olmaz cana vade dolmadan,<br/><br/>
    Tasa etme güzel yurdum Türkiyem, </p>
    
    
        </body>
       
    
    </html>

    1- Arkaplan Rengi Belirleme

    Renklerin nasıl tanımlandığını önceki konulardan biliyorsunuz. Örnek olarak bir paragrafın rengini;

    HTML:
    p {color:yellow; }
    şeklinde tanımlayabiliyorduk. Bu bizim herhangi bir nesnenin rengini belirtme işini görür. Bu nesnenin üzerinde bulunduğu zemini yani arkaplanı ise şu şekilde belirtebiliriz:

    HTML:
    body {background-color:green;}
    "Background" kelime anlamıyla zaten "Arkaplan" anlamına gelir. Bakalım nasıl bir şey oluşturduk?

    [​IMG]

    2- Arkaplana Resim Ekleme

    Arkaplana resim eklemek için şöyle bir kod kullanılır:

    HTML:
    body {background-image:url(kaynak); } 
    Burada "url" resme bir kaynak vereceğimizi açıklamak için kullanıldı ve daha sonra parantez içine resmimiz dosya adı veya link şeklinde eklenecek. Örnek:

    HTML:
    body {background-image:url(Ayt.jpg); }
    Bu şekilde bir kod yazdığımda havalı bir sonuç ile karşılaşıyorum.

    [​IMG]

    Dikkatimizi çeken şey aynı resmin sayfa içinde sürekli tekrarlanmasıdır. Bu varsayılan olarak gelen bir değerdir ve değiştirilebilir. Bunun için yazdığımız kodu şöyle düzenlemeliyiz:

    HTML:
    body {background-image:url(Ayt.jpg);
                 background-repeat:  }
    Resmin arkaplandaki tekrarını belirleyeceğiz. İki nokta sonrasına gelebilecek değerler:

    repeat : Resmin bütün zemine yayılmasını sağlar. (Varsayılan değer)
    repeatx : Resmin solüstten sağüste doğru yayılmasını sağlar.
    repeaty : Resmin solüstten solalta doğru yayılmasını sağlar.
    norepeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.

    Biz resmimizin hiç tekrarlanmadan orjinal bir şekilde kalması için "no-repeat" özelliğini kullanacağız.

    HTML:
    body {background-image:url(Ayt.jpg);
                 background-repeat:no-repeat;  }
    Şimdiki durumda resim aşağıda verildiği gibi orjinal şekildedir.

    [​IMG]

    Resim Konumlandırma

    Normalde konumlandırma işlevini ileriki konularda öğreneceğiz. Bunun için "div" etiketi çok işimize yarayacak. Bunu önceki derste gördük. Ama resimler için özel olarak basit konumlandırma kodları da var.
    İlk olarak "background-position:" kodunu ekleyelim.

    HTML:
    body {background-image:url(Ayt.jpg);
    
                 background-repeat:no-repeat;
                 background-position:  }
    Girilebilecek değerler şunlardır:

    top : Resmi yukarı yerleştirir.
    center : Resmi ortalar.
    bottom : Resmi aşağı yerleştirir.
    left : Resmi sola yerleştirir.
    right: Resmi sağa yerleştirir.

    Resmi tam ortaya yerleştirelim.

    HTML:
    body {background-image:url(Ayt.jpg);
    
                 background-repeat:no-repeat;
                 background-position:center;  }
    [​IMG]

    Evet devrelerim, bu dersimizin de sonuna geldik. Önceki konulara nazaran anlattığım şeyler biraz daha az oldu ama yine de güzel şeyler öğrendik. Bu arada artık elle tutulur şeyler yapmaya başladık, Web Tasarım alanında emin adımlarla ilerliyoruz. Hala gerçek bir siteye göre eksiğimiz var gibi gözükse de bu öğrendiklerimiz yerine birden oturacak. Zahmet olmadan rahmet olmaz. İyi çalışmalar... ;)



     
  2. oyuncu_king Atıldı

    • Guest
    Katılım:
    13 Ocak 2017
    Mesaj:
    133
    Alınan Beğeniler:
    134

    Özel Mesaj
    Eline sağlık devrem. :)
     
    ERVAH-I-EZEL bunu beğendi.
  3. oyuncu_king Atıldı

    • Guest
    Katılım:
    13 Ocak 2017
    Mesaj:
    133
    Alınan Beğeniler:
    134

    Özel Mesaj
    Yeni konu ne zaman gelir devrem. Beklemedeyim... :confused:
     
  4. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,651

    Özel Mesaj
    Hem Hack hem de Web Tasarım konuları açınca buralar yavaşladı devrem, yeni konu yakında gelir herhalde. :confused:
     
    oyuncu_king bunu beğendi.
  5. Sabotai Guest

    • Guest
    Katılım:
    12 Temmuz 2015
    Mesaj:
    37
    Alınan Beğeniler:
    15
    Meslek:
    Lise mezunu

    Özel Mesaj
    Eline sağlık devrem
     
    ERVAH-I-EZEL bunu beğendi.
  6. genaral Guest

    • Guest
    Katılım:
    27 Mayıs 2017
    Mesaj:
    331
    Alınan Beğeniler:
    170

    Özel Mesaj
    repeat : Resmin bütün zemine yayılmasını sağlar. (Varsayılan değer)
    repeatx : Resmin solüstten sağüste doğru yayılmasını sağlar.
    repeaty : Resmin solüstten solalta doğru yayılmasını sağlar.
    norepeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar

    devrem bu şekilde kodların ne işe yaradıgı gıbı bir liste olusturabılırsen cok mutlu oluruz inaşllah yaparsın kolay gelsin
     
    ERVAH-I-EZEL bunu beğendi.
  7. ERVAH-I-EZEL Guest

    • Guest
    Katılım:
    30 Ocak 2017
    Mesaj:
    1,333
    Alınan Beğeniler:
    4,651

    Özel Mesaj
    Tamam devrem. İnternette Css kodları ve anlamları şeklinde konular var ama ben pek beğenemedim, biraz karışık olmuş. İlk fırsatta bir konu paylaşacağım.
     
  8. genaral Guest

    • Guest
    Katılım:
    27 Mayıs 2017
    Mesaj:
    331
    Alınan Beğeniler:
    170

    Özel Mesaj

    saol devrem bu aralar bu konular uzerınde çalısıyorum teşekkurler
     
    ERVAH-I-EZEL bunu beğendi.
  9. Da3b3 Guest

    • Guest
    Katılım:
    28 Şubat 2018
    Mesaj:
    6
    Alınan Beğeniler:
    1

    Özel Mesaj
    Ekran fotosu aldığınız resimler gözükmüyor...
     
    AydoganGotu bunu beğendi.

Bu Sayfayı Paylaş