Simple is Beautiful

Sobat masih ingat tidak dengan bahasa standar web. Yaitu membuat tulisan menjadi miring (italic), font jadi tebal (bold), huruf menjadi lebih kecil/besar dan lain² Kreatifitas dengan sentuhan hati bisa menghasilkan satu karya full stylish. Cobalah sobat² kembali buka buku/arsip/sumber dasar-dasar belajar HTML ;) atau buka koleksi source kepunyaan Beben Koben si Bloglang anu ganteng kalem tea Html ya htmL.
Dari kesederhanaan mari kita berkreasi kreatifitas dengan CSS and HTML. Perhatikan contoh simpel berikut ini yah ;)) :">

Italic text Bold text Strong text Big text Small text Teletype text Emphasized text Definition term Sample computer code text Keyboard text Variable

Contoh yang diberikan itu beberapa atribut secara langsung bisa kita gunakan tag-nya dalam melakukan postingan.

Coded	Example
Italic	<i>Italic text</i>
Bold	<b>Bold text</b>
Big	<big>Big text</big>
Small	<small>Small text</small>
tt	<tt>Teletype text</tt>
em	<em>Emphasized text</em>
Strong	<strong>Strong text</strong>
dfn	<dfn>Definition term</dfn>
Code	<code>Computer code text</code>
Samp	<samp>Sample computer code text</samp>
Kbd	<kbd>Keyboard text</kbd>
Var	<var>Variable</var>
Cite	<cite>Citation</cite>

Lalu bagaimana jika diberi sentuhan attribute CSS guna memperindah penampilan kode standar tersebut! Beben ambil sample tag tt yah :P

Code CSS

tt {
font-family: 'Andale Mono', 'Lucida Console', monospace;
}
tt.Begex {
white-space: nowrap;
border-top: solid;
border-bottom: solid;
border-width: 1px;
padding-top: 1px;
padding-bottom: 1px;
border-color: #FF6600;
background-color: #FFF4E8;
}
tt.Bengex {
white-space: nowrap;
border-top: solid;
border-bottom: solid;
border-width: 1px;
padding-top: 1px;
padding-bottom: 1px;
border-color: #0066FF;
background-color: #E8F4FF;
}
tt.Benex{
white-space: nowrap;
border-top: solid;
border-bottom: solid;
border-width: 1px;
padding-top: 1px;
padding-bottom: 1px;
border-color: #00A000;
background-color: #E0FFE0;
}

Kode HTML (Pemakaian)

<tt class="Begex">YOUR CONTENT HERE</tt>

<tt class="Bengex">YOUR CONTENT HERE</tt>

<tt class="Benex">YOUR CONTENT HERE</tt>

Result

<cite>Citation</cite>

<tt>Teletype text</tt>

<small>Small text</small>

How my friend, that's one easy thing and interest right? :D Bagaimana sekarang browse yg sudah support terhadap atribut CSS3! Tentu akan semakin menarik kita berkreatifitas duong :-"
Ingat dengan master kendhin pernah bercerita mengenai trik supaya sesuatu berada dipojok :-/ Coba sekarang kita variasikan dengan little touchy CSS3 yooo :D

Kode CSS3

#juru {
top: 55px;
z-index: 12;
opacity: 0.7;
left: -225px;
width: 555px;
padding: 10px;
font-size: 25px;
text-align: center;
position: fixed;
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 0);
border: 1px solid rgb(255, 0, 0);
font-family: 'trebuchet ms',verdana,arial,sans-serif;
-moz-transform: rotate(-45deg); /* Firefox */
-moz-transform-origin: 50% 0pt;
-ms-transform:rotate(-45deg); /* IE 9 */
-ms-transform-origin:50% 0pt;
-webkit-transform:rotate(-45deg); /* Safari and Chrome */
-webkit-transform-origin:50% 0pt;
-o-transform:rotate(-45deg); /* Opera */
-o-transform-origin:50% 0pt;
}

Code HTML

<div id="juru">YOUR CONTENT HERE</div>Lihat demonya jika berkerja yah dipojok kiri atas yg bertuliskan "Prodigy of Head"

Prodigy of Head

Ingat sesuatu enggak, yap ini trik pojok preview yang ada pada editor post blogger baru :D Oke selamat berkreasi Fun Fun Deh :P Karena semua ada di OTAKMU ;))
Happy blogging \m/