CSS ile Gazeteye Benzer Web Tasarımı

Vatanay Özbeyli CSS3, Öne Çıkanlar

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  Photoshop ile T-Shirt Tasarımı

İyi çalışmalar.