Tip Trik oleh: Y. Karel Pangau
TIP TRIK KOMPUTER
oleh: Yohanes Karel Pangau
 
Pengaturan Font, Text, box dan shadow dengan CSS
oleh: Yohanes Karel Pangau
  Text Styling

Pengaturan teks pada HTML dapat diatur tampilannya supaya menjadi lebih indah dengan memanfaatkan elemen style yang merupakan skrip dari CSS. Property pada CSS yang digunakan untuk pemformatan teks antara lain: color, text-align, text-decoration, text-indent, dan text-transform.

Cara Penulisan:

color: kode_warna;


text-align: left | center | right | justify;


text-decoration : none | underline | overline | line-through | blink;


text-indent: length;

length ==> diisi dengan angka beserta satuannya (mis: 30px 2cm 1in 1em)

text-transform: none | capitalize | uppercase | lowercase;

Font Styling

CSS dapat melakukan pemformatan pada font, seperti menentukan ukuran font atau memilih jenis font yang akan digunakan. Property pada CSS yang digunakan untuk melakukan pemformatan font antara lain: font-size, font-family, font-style dan font-weight.

Cara Penulisan:

font-size: absolute-size | relative-size | length | percent;
absolute-size ==> xx-small | x-small | small | medium | large | x-large | xx-large
relative-size ==> larger | smaller
length ==> diisi dengan angka beserta satuannya (mis: 30px 2cm 1in 1em)
percent ==> ukuran font dengan nilai persen (mis; 80%)
Jika ukuran font tidak ditentukan, maka akan digunakan nilai default, yakni untuk teks normal seperti paragraf akan memiliki nilai 16px (1em = 16px = 100%).

font-family: nama/jenis huruf;


font-style : normal | italic | oblique;


font-variant: normal | small-caps;


font-weight : normal | bold | bolder | lighter | 100 s/d 900;

Nilai defaultnya adalah normal (sama dengan menggunakan 400)
bold ==> font tebal ( sama dengan menggunakan 700 )
bolder ==> font yang lebih tebal dari bold
lighter ==> font yang lebih tipis dari normal


Box Styling

CSS juga memungkinkan kita untuk membuat sebuah box / kotak. Property pada CSS yang digunakan untuk melakukan pemformatan font antara lain : margin, border, padding, width, background.

Cara Penulisan:

margin: length;
atau
margin: top right bottom left;


border: tebal_border style kode_warna;

tebal_border ==> diisi dengan angka beserta satuannya (mis: 3px 1cm 1in 1em)
style ==> dotted | dashed | solid | double | groove | ridge | inset | outset
kode_warna ==> kode warna

padding: length;
atau
padding: top right bottom left;


width: length;


background: kode_warna;

Contoh:
<html>
  <head><title>SMA Dempo</title>
    <style type="text/css">
      #kotak { margin     : 20px;
               border     : 5px solid black;
               padding    : 6px;
               width      : 200px;
               background : yellow; }    
    </style>
  </head>
  <body>
    <div id="kotak">
      SMA Dempo Malang
    </div>
  </body>
</html>
Hasilnya adalah:

SMA Dempo Malang


Text Shadow Styling

Cara Penulisan:

text-shadow: offset-X offset-Y Blur-radius Color;
offset-X ==> bayangan bergeser ke kiri/kanan
offset-Y ==> bayangan bergeser ke atas/bawah
Blur-radius ==> tingkat blur dari bayangan
Color ==> kode warna untuk bayangan

Contoh 1:
<font face="Verdana" size=6>
  <font style="text-shadow: 4px 4px 2px #AA55FF;">
    SMA Dempo Malang<br>
    normal shadow
  </font>
</font>
Hasilnya adalah:
SMA Dempo Malang
normal shadow


Contoh 2:
<font face="Verdana" size=6>
  <font style="background:#000;color:#fff;
              text-shadow: 0 0 1px #2ec728, 0 0 3px #2ec728, 0 0 5px #2ec728,
              0 0 7px #2ec728, 0 0 9px #2ec728;">
    SMA Dempo Malang<br>
    Neon
  </font>
</font>
Hasilnya adalah:
SMA Dempo Malang
Neon


Contoh 3:
<font face="Verdana" size=6>
  <font style="color:transparent; text-shadow:0 0 5px black;">
    SMA Dempo Malang<br>
    Blur
  </font>
</font>
Hasilnya adalah:
SMA Dempo Malang
Blur


Contoh 4:
<font face="Verdana" size=6>
  <font style="color: #aaa; 
              text-shadow: 1px 1px 0 black, 2px 2px 0 black,
              3px 3px 0 black, 4px 4px 0 black, 5px 5px 0 black;">
    SMA Dempo Malang<br>
    3 Demensi
  </font>
</font>
Hasilnya adalah:
SMA Dempo Malang
3 Demensi


Contoh 5:
<font face="Verdana" size=6>
  <font style="color: #444; background: #777;
              text-shadow: 1px 1px 1px rgba(255,255,255,.3),
              -1px -1px 0 rgba(0,0,0,.6);">
    SMA Dempo Malang<br>
    Letter Press
  </font>
</font>
Hasilnya adalah:
SMA Dempo Malang
Letter Press



Box Shadow Styling

Cara Penulisan:

box-shadow: offset-X offset-Y Blur-radius Color;
offset-X ==> bayangan bergeser ke kiri/kanan
offset-Y ==> bayangan bergeser ke atas/bawah
Blur-radius ==> tingkat blur dari bayangan
Color ==> kode warna untuk bayangan

Contoh 1:
<font face="Verdana" size=4>
  <font style="color: white; background: #6611bb;
               border: 1px solid black; 
               box-shadow: 4px 4px 2px #BB66FF;">

    SMA Dempo Malang - normal box shadow

  </font>
</font>
Hasilnya adalah:

SMA Dempo Malang - normal box shadow

Contoh 2:
<font face="Verdana" size=4>
  <font style="border: 1px dotted white; background: #CCCCFF;
               box-shadow        : 0 0 10px #444444; 
               -moz-box-shadow   : 0 0 10px #444444; 
               -webkit-box-shadow: 0 0 10px #444444; ">

    SMA Dempo Malang - blur box shadow

  </font>
</font>
Hasilnya adalah:

SMA Dempo Malang - blur box shadow

Contoh 3:
<font face="Verdana" size=4>
  <font style="box-shadow        : inset 0 0 7px black; 
               -moz-box-shadow   : inset 0 0 7px black; 
               -webkit-box-shadow: inset 0 0 7px black; ">

    SMA Dempo Malang - inset box shadow

  </font>
</font>
Hasilnya adalah:

SMA Dempo Malang - inset box shadow
 
Yohanes Karel Pangau    
SMA Katolik St. Albertus Malang