ile

Tasarımı HTML5 ve CSS3′e dökmek (Son) – CSS Yazma – 2

Bu yazıda CSS Kodumuzu yazmaya devam ediyoruz. Özet navigasyonu bitirdik ve detaylı navigasyonu bitirmemiz gerek. İlk iş detaylı navigasyonla başlayalım.

liste

Navigasyonun şu anki durumu bu şekilde. Bunu şu şekle çevirmeliyiz:

Screen Shot 2014-03-07 at 19.11.59

Yani üst başlıklar yatay ama her üst başlığın alt menüleri dikey olacak. Bunu da


#detail-navigation > ul > li{
    float: left;
    display: inline-block;
    margin-right: 72px;
}

ile hallediyoruz. Burada “>” işareti etiketin içindeki ilk child-elemente gider. Mantığı şu şekilde açıklayabiliriz:

<nine>
    <evlat id="anne">
        <evlat id="kiz"></evlat>
    </evlat>
</nine>

Eğer “nine > evlat” dersek burada sadece id’si anne olan elemanı seçeriz. ama “nine evlat” deseydik, id’si “anne” olanı ve id’si “kız” olan etiketleri seçecektik.

Bir sonraki adımımız, özet alt bilgi, yani “summary footer”. Burada 3 tane liste elemanımız var. Bu liste elemanlarını dağıtmak istiyoruz. Bunun için de foundation’un block-grid özelliğinden yararlanacağız.


<div id="summary-footer" class="large-12 columns">
    <ul class="small-block-grid-3">
        <li><p>APPLICATION<br/>2014</p></li>
        <li><p>REQUEST<br/>INFO</p></li>
        <li><p>SUBSCRIBE TO<br/>NEWSLETTER</p></li>
    </ul>
</div>

Burada block-grid liste elemanlarımızı istediğimiz gibi ortalayıp sağa sola yaslayıp dağıtıyor ve satır sütun belirlememize gerek kalmıyor.

Arka planları da istediğimiz gibi boyuyoruz. Sağ ve sol birbirine yapışık olduğu için arkaya beyaz bir border da attık. İstersek bunu transparan da yapabiliriz.


#summary-footer li
{
    color: white;
    text-align:center;
    background-color:black;
    border-right:solid 18px white;
    border-left:solid 18px white;
    height:150px;
}

#summary-footer p
{
    padding:50px;
    background-color:black;
    font-family: 'akzidenz-grotesk_bqmedium' !important;
    font-weight:bold;
    margin: auto;
}

Özet alt bilgi bölümünün son halini şu şekile getirmeyi başardık:

Screen Shot 2014-03-07 at 21.46.50

Şu anda ilk verilen tasarıma neredeyse ulaştık gibi. Sırada detay alt bilgi bölümü var. Detay alt bilgi bölümünde başlık kısmını row yani satır olarak belirledik, başlığın altında ise uzun bir künye yer alıyor. Bu künyeyi satırlara ve sütunlara bölemeyiz. Block-grid de kullanmamız mantıksız olur, sonuçta bunu Google’ın ayrı bilgi yığınları olarak indexlemesini istemiyoruz. Açıkçası, kullandığımız her elemanın, mantıksal bir açıklaması var. Sadece görsel olarak 3 kolona bölmek istiyoruz. Bunun için CSS3’ün column özelliğinden yararlanacağız. Bu özellik aynı gazetelerde olduğu gibi, başka bir elemana ihtiyaç kalmadan yazıları sütunlara bölmemizi sağlar ve ortaya çok sağlam okunabilirlik çıkar. Gazetelerde de sütunlar gözlerin uzun uzun hareketler yapmaması ve yorulmaması için varlardır.

CSS kodumuza bakarsak:


#detail-footer{
    color:#58595b;
    font-size:12px !important;
    font-family: 'garamond_three_medium';
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
    -moz-column-gap:40px; /* Firefox */
    -webkit-column-gap:40px; /* Safari and Chrome */
    column-gap:40px;
    -moz-column-rule:3px outset #fff; /* Firefox */
    -webkit-column-rule:3px outset #fff; /* Safari and Chrome */
    column-rule:3px outset #fff;
}

#copyright{
    color:#58595b;
    font-family: 'akzidenz-grotesk_bqmedium' !important;
    font-size:9px;
    margin-top:25px;
}

Burada metnimizi 3 kolona ayırdık, aralarına 3px boyunda beyaz bir çizgi ve 40px boyunda boşluk koyduk.

Sonuç görüntümüz şu şekilde.Screen Shot 2014-03-07 at 21.53.16

Sonuç olarak, bize gelen bir PSD dosyasını tamamıyla HTML5 ve CSS3’e dökmüş olduk. Gelen tasarımın minimalist olması veya farklı renkler imajlar kullanması kodlama süremizi uzatabilirdi. Buraya kadar kullandığımız CSS3 özelliklerinden kullanmadığımız ama araştırıp kendi kodlarınızda kullanabilecekleriniz şunlar:

  1. CSS3 Box Shadow (Gölgeler)
  2. CSS3 Rounded Corners (Yuvarlak köşeler)
  3. CSS3 Gradients (Renk geçişleri)
  4.  Üstüste arkaplanlar
  5. Resim dosyası kullanarak sınır çizme (border-image)
  6. 2 boyutlu dönüşümler (büyütme, küçültme, döndürme, kaydırma gibi)
  7. 3 boyutlu dönüşümler
  8. CSS3 Animasyonları (Flash animasyonları kadar gelişmiş animasyonları, JS ve HTML5 Canvas kullanmadan yapmanız mümkünmüş, ben denemedim 🙂 )

Bunun gibi daha birçok CSS3 özelliğini tasarımcıdan size gelen tasarıma göre kullanmanız mümkün.

Bir sonraki seride bu tasarımı sıfırdan yazılmış bir WordPress temasına çevirmeyi öğreneceğiz.

Yorumla

Yorum

  1. Anlatılanların bitmiş halini arşivleyip bizlere sunarsanız çok faydalı olur. Mesela anlatırken ufak tefek kod yanlışlığı yapılmış. Örneğin ilk kutuda temel htmlin kodlarını vermişsiniz ama diğer konuda şimdiye kadar şu kadar kodumuz var dediğinizde bazı divler farklı kafa karıştırıyor bu. Analtımlarınızın bitmiş halinide arşiv olarak paylaşabilirseniz seviniriz.