- 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/
Tidak ada komentar:
Posting Komentar