Bu makalemizde sadece CSS ile gazete yapısına benzer, bol kolonlu bir web tasarımı hazırlayacağız.
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>Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor.</p>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
<blockquote>
"Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus."
</blockquote>
<p>Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p>
<h3>Alt Başlık</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</p>
<h3>Alt Başlık</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</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.
İyi çalışmalar.
CSS ile Gazeteye Benzer Web Tasarımı
Hiç yorum yok:
Yorum Gönder