Kontrol Ukuran Font

Sebenarnya sangat sederhana hanya menguba ukuran besar atau kecilnya font. Hanya saja tampilan mengunakan CCS3 dan jQuery

Kelompok :
Slamet Budiono 12 622 086
Ridzal Marsetyo 12 622 072
Miftahul Mukti Anas 12 622 078
Rr Mirna Sri Afifa 12 622 099
M.Manu 12 622 067

Source Kode :

<!DOCTYPE html>
<html>
 <head>

<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  <style type="text/css">
  .css3 {
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0px 4px #fc9101, 0px 10px 15px rgba(0, 0, 0, 0.2);
  }
  .button {
  background-color: crimson;
  background-image: -webkit-linear-gradient(top, crimson, crimson);
  background-image: -moz-linear-gradient(top,crimson,crimson);
  display: inline-block;
  font-size: 24px;
  font-family: 'Meiryo UI';
  color: #fff;
  text-decoration: none !important;
  padding: 5px 20px;
  line-height: inherit;
  overflow: hidden;
  position: relative;
  border-radius: 2px;
  margin-top: 13px;
  margin-bottom: 10px;
  box-shadow: 0px 3px rgba(0, 0, 0, 0.2);
  }
  .button:hover {
  box-shadow: 0px 3px #fc820a, 0px 10px 15px rgba(0, 0, 0, 0.2);
  -moz-border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
  border-radius: 0px 0px 5px 5px;
  }
  #content{
  font-family: 'Lato', sans-serif;
  text-align:justify;
  padding:10px;
  background-color:whitesmoke;
  font-size:14px;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
  }
  #large{
  background-color: orange;
  background-image: -webkit-linear-gradient(top, orange, orange);
  background-image: -moz-linear-gradient(top,orange,orange);
  color:black;
  }
 #small{
  background-color: orange;
  background-image: -webkit-linear-gradient(top, orange, orange);
  background-image: -moz-linear-gradient(top,orange,orange);
  color:black;
  }
  #reset{
  background-color: orange;
  background-image: -webkit-linear-gradient(top, orange, orange);
  background-image: -moz-linear-gradient(top,orange,orange);
  color:black;
  }
  #fontlinks{
  margin-left:20%;
  margin-right:20%;
  margin-top:0px;
  margin-bottom:20px;
  text-align:center;
  }
  .buttonfont{
  color:dimgrey;
  }
  
  </style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
  <script type='text/javascript'>
  $(function(){
  $('input').click(function(){
  var ourText = $('#content');
  var currFontSize = ourText.css('fontSize');
  var finalNum = parseFloat(currFontSize, 10);
  var stringEnding = currFontSize.slice(-2);
  if(this.id == 'large') {
  finalNum *= 1.1;
  }
  else if (this.id == 'small'){
  finalNum /=1.1;
  }
  else if (this.id == 'reset'){
  finalNum =15;
  }
  ourText.animate({fontSize: finalNum + stringEnding},500);
  });
  });
  </script>
</head>
 <body>
 <div style="width:55%;margin-left:17%;margin-right:28%;">
 <div class="css3" style="background-color:gray;width:400px;height:400px;">
  <div id="content" style="height:260px">
  <center>
  <br />
  Kelompok : <br />
  Slamet Budiono 12 622 086<br />
  Ridzal Marsetyo 12 622 072<br />
  Miftahul Mukti Anas 12 622 078<br />
  Rr Mirna Sri Afifa 12 622 099<br />
  M.Manu 12 622 067</center>
  <br />
  </div>
  <br/>
  <div id="fontlinks">
  <input id='small' type='image' class="button buttonfont" value='A-'/>
  <input id='reset' type='image' class="button buttonfont" value='A'/>
  <input id='large' type='image' class="button buttonfont" value='A+'/>
  </div>
  
  </div>
  </div>
 </body>
</html>

Sumber http://z33s.blogspot.com/2010/07/memasang-widget-untuk-merubah-ukuran.html