newspaper-layout-css

CSS ile Gazeteye Benzer Web Tasarımı

Bu makalemizde sadece CSS ile gazete yapısına benzer, bol kolonlu bir web tasarımı hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

Gazeteye benzer web tasarımı nasıl hazırlanır?

Çok fazla renk kullanmayacağız. Aslına bakarsanız CSS ile de kolonları ve yazı tiplerini belirledikten sonra işimiz pek kalmıyor. Kodlarımızı hazırlayalım :

HTML Kodları

İlk olarak gazete yapısına benzer Google Web Fontunu tasarıma dahil edelim. Aşağıdaki kodu <head>…</head> içerine yerleştirmeniz gerekiyor.

<link href=’http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700|PT+Serif+Caption|PT+Serif:400,700,400italic,700italic|Oswald:400,700′ rel=’stylesheet’ type=’text/css’>

Daha sonra tasarımımızın temelini oluşturacak yapıları ekleyelim.

<article>
  <h1>Gazete Başlığı</h1>
  <div class="time"><time>14 Ocak 2014, Salı</time></div>
  <section>
    <h2>Makale için Alt Başlık</h2>
    <p>Satır 1</p>
      <blockquote>
        "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."
      </blockquote>
    <p>Satır 2</p>
    <h3>Alt Başlık</h3>
    <p>Satır 3</p>
    <p>Satır 4</p>
    <h3>Alt Başlık</h3>
    <p>Satır 5</p>
  </section>
 </article>

CSS kodlarımız ile devam edelim.

CSS Kodları

Seçili öğelerin renkleriyle başlayalım.

::selection { background: #808080; color: #E6E6E6; }
::-moz-selection { background: #808080; color: #E6E6E6; }

Daha sonra tasarımı detaylandıralım.

body{
    font-family: 'PT Serif', serif;
    background-color: #f9f7f1;
    color: #404040;
    padding: 20px;
}

blockquote{
  font-family: 'Oswald', sans-serif;
  line-height: 1.2em;
  font-size: 1.8em;
  column-span: 2; -webkit-column-span:2;
  margin: 0px;
  padding: 0px;
  margin-left: 5px;

}
h1{
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 4em;
  line-height: 1em;
  text-align: center;
  font-weight: 700;
  padding: 0px;
  margin: 0px;
  margin-bottom: 32px;
}

h2, h3, h4, h5, h6{ font-family: 'PT Sans Narrow', sans-serif; }

h2{
  font-size: 3em;
  line-height: 1em;
  margin-top: 10px;
  margin-bottom: 10px;
}
h3{
  margin: 0px;
  padding: 0px;
  line-height: 0.8em;
  padding-top: 20px;
}
.time{
  text-align: center;
  font-family: 'PT Sans Narrow', sans-serif;
  border-top: 3px solid #333;
  border-bottom: 3px solid #333;
  font-size: 1.6em;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom: 30px;
  font-weight: 700;
  text-transform: uppercase;
}

ve son olarak küçük çözünürlüklü veya taşınabilir cihazlar için bir ekleme yapalım.

@media only all and (min-width: 600px) {

  article{
    -moz-columns:3; /* Kaç kolon olacak? */
    -webkit-columns:3;
    columns:3;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
    line-height: 1.5em;
    font-size: 1em;
    -webkit-column-rule: 2px outset #444;
    -moz-column-rule: 2px outset #444;
    column-rule: 2px outset #444;
  }

  h1{
    font-size: 8em;
    column-span: all;
    -webkit-column-span:all;
  }

  .time{
    column-span: all;
    -webkit-column-span:all;
  }

  p{
    text-align: justify;
    text-justify: inter-word;
  }
}

Kapanış

Michael Gearon tarafından hazırlanan bu tasarım bizlere geride bıraktığımız renksiz ve tırnaksız yazı tiplerinden ibaret gazeteleri hatırlatıyor. Umarız sizlerin de hoşuna gitmiştir.

Bu da ilginizi çekebilir  Makaleleriniz İçin Google Web Fonts

İyi çalışmalar.



  • Fornicras

    Teşekkürler. Bir isteğim olacaktı sadece HTML ve CSS kullanarak siteden çıkılmadan kapatılması mümkün olmayan kendi kendine çalmaya başlayan arkaplan müziği yapılabilir mi? Yapılabiliyorsa dersini yayınlayabilir misiniz? Tekrardan teşekkür ederim, beğeniyle takip ediyorum. ^_^

    • Aşağıdaki kodlar ile kolaylıkla yapabilirsiniz. Audio’ya autoplay ekledim böylece açılışta otomatik çalıyor. Ek olarak display:none ekledim böylece gözükmüyor.

      İyi çalışmalar.

      • Fornicras

        İlginiz için teşekkürler 2 gündür her yerde arıyordum şu display:none olayı aklıma gelmemişti. İşe yaradı. ^_^