Bermain dengan Typography memang menyenangkan, bagi yang suka! Teknik typo alias berkreasi dengan kata-kata bagi kalangan blogazine sering dipertontonkan dalam sesi membuat sebuah postingan. Sering kita lihat juga menghias kata di dalam fitur blockquote. AA Koben nemuin satu percobaan tentang type "type experiment" by mattjqueen. Trik type yg terintegrasi dengan jQuery script ini bisa membuat susunan kata-kata (kalimat) menjadi besar kecil.
Demo: cdpn.io/Akpnh Pada halaman demo, ukuran font cukup besar agar terlihat trick typo secara tegas :D Seperi biasa orang baik hanya melakukan perubahan sedikit disana-sini agar lebih unyu-unyu :"> Jika sobat mau mengedit, adapun 2 hal dasar yg mesti diperhatikan terlebih dahulu adalah:
- Pemakaian jenis huruf.
- Font-size alias ukuran huruf.
.panel-kal {
width: 500px;
margin: 0 auto;
font-family: 'IM Fell English',Times New Roman,Verdana;
}
.sabda {
float: left;
margin-left: 1em;
position: relative;
}
.lg {
float: left;
font-size: 1.5em;
position: relative;
margin: .5em .1em 0 .1em;
}
.lg2 {
float: left;
font-size: 1em;
position: relative;
margin: .5em .1em 0 .1em;
text-transform: uppercase;
}
.sm1 {
float: left;
font-size: .7em;
position: relative;
margin: 1.2em .1em 0;
text-transform: uppercase;
}
.sm2 {
float: left;
font-size: .7em;
position: relative;
text-transform: uppercase;
margin: 2.2em .1em 0 -.76em;
}
width: 500px;
margin: 0 auto;
font-family: 'IM Fell English',Times New Roman,Verdana;
}
.sabda {
float: left;
margin-left: 1em;
position: relative;
}
.lg {
float: left;
font-size: 1.5em;
position: relative;
margin: .5em .1em 0 .1em;
}
.lg2 {
float: left;
font-size: 1em;
position: relative;
margin: .5em .1em 0 .1em;
text-transform: uppercase;
}
.sm1 {
float: left;
font-size: .7em;
position: relative;
margin: 1.2em .1em 0;
text-transform: uppercase;
}
.sm2 {
float: left;
font-size: .7em;
position: relative;
text-transform: uppercase;
margin: 2.2em .1em 0 -.76em;
}
Planning HTML
<div class="panel-kal">
<div class="typePanel">
----------- BLAH-BLEH-BLOH -----------
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var evenFilter = ['lg','sm1','sm2'];
var oddFilter = ['lg','sm1','sm2','lg','lg'];
var words = $('.typePanel').text().split(' ');
function isEven(e){return 0==e%2?!0:!1}for($(".typePanel").html(""),i=0;i<words.length;i++){var $word=$('<div class="sabda"></div>'),wordLetters=words[i].split("");for(j=0;j<wordLetters.length;j++)wordLetters.length>3&&isEven(wordLetters.length)?$word.append('<div class="'+evenFilter[j%evenFilter.length]+'">'+wordLetters[j]+"</div>"):wordLetters.length>3?$word.append('<div class="'+oddFilter[j%oddFilter.length]+'">'+wordLetters[j]+"</div>"):$word.append('<div class="lg2">'+wordLetters[j]+"</div>");$(".typePanel").append($word)}
});
//]]>
</script>
Happy type \m/Loading... |
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...