Poster tipografik (typographic poster) guna CSS

Imej prt scr yg diletak di bawah header blog Orandableg's

Imej prt scr contoh

Tipografi atau dalam bahasa Inggeris, Typography, (berasal dari kata bahasa Greek typos = bentuk dan graphein = menulis) merupakan teknik dan seni mengatur huruf menggunakan gabungan bentuk huruf cetak, saiz fon, ketebalan garis, garis pandu (line leading), jarak aksara, dan ruang huruf untuk menghasilkan hasil seni aturan huruf dalam bentuk fizikal atau digital. Matlamat utama tipografi adalah mengatur teks (isi) dalam bentuk yang mudah dibaca dan menarik dipandang.

Tipografi dihasilkan melalui pengatur huruf, jurutipografi, artis grafik, pengarah seni dan pekerja perkeranian. Ia pernah merupakan pekerjaan khusus, tetapi penggunaan komputer telah membuka ruang bagi pengguna biasa dan pereka visual generasi baru. Info: Wikipedia.

Demo (poster tipografik, dihasilkan dengan CSS)

ora

ndableg

dot blogspot dot com

ringan santai infotainment

plus PAPARAN

blog

list

HTML view

<div class="labu">
<div class="labi">
<h1 class="ha1">ora</h1>
  <h2 class="ha2">ndableg</h2>
  <div class="kotak">dot blogspot dot com</div>
  <h3 class="ha3">ringan santai infotainment</h3>
  <div class="rata">plus PAPARAN</div>
  <div class="blg">blog</div>
  <div class="lt">list</div>
</div>
</div>
<style>
  .labu {
    font-family: Georgia;
  margin: 0;
  padding: 0;
  background: linear-gradient(176deg, #cfe2f3 20%, #f3f3f3 30%, #eee 55%, #e9e9e9 65%, #e3e3e3 80%, #ccc 90%);   
  background-attachment: fixed;
    border-radius: 12px;
  text-align: center;  
  }
.labi {
  margin: auto;    
  max-width: 400px;
  padding: 8px;
}
.ha1 {
  color: #f6b26b; 
  font-size: 5em; 
  font-weight: bold;  
  mix-blend-mode: multiply; 
  text-transform: uppercase;
}
.ha2 { 
  color: #e69138; 
  font-size: 4em; 
  font-weight: bold; 
  margin-top: -0.7em; 
  mix-blend-mode: multiply; 
  text-transform: uppercase;
}
.kotak {
  background: #fff;
  color: #111;
  font-family: PT Sans;
  font-size: .8em;
  margin-top: -1.8em;
  letter-spacing: .5em; 
  text-transform: uppercase;
}
.ha3 { 
  color: #783f06; 
  font: 1.3em Georgia;  
  font-weight: bold; 
  margin-top: -.08em;
  mix-blend-mode: multiply; 
  text-transform: uppercase;
}
.rata {
  color: #000;
  font-family: Arial;
  font-size: 1em;
  font-weight: bold;    
  mix-blend-mode: multiply;
}
.blg {
  color: #9fc5e8; 
  font-size: 8em; 
  font-weight: 900;
  letter-spacing: -.1em; 
  mix-blend-mode: multiply; 
  text-transform: uppercase;
}
  .lt {
  color: #6fa8dc; 
  font-size: 8.4em; 
  font-weight: 900;
  letter-spacing: -.1em;
  padding-bottom: 0.6em;
  mix-blend-mode: multiply; 
  text-transform: uppercase;
}
</style>