Bagi para wapper era 2010-an, nama JCMS CSS itu sangat familiar. JCMS (John Content Management System) adalah CSS sejuta ummat wapper kala itu. Tidak ada CSS yang paling keren, kecuali JCMS. CSS sederhana bernuansa gelap dan berbackground gambar gradasi statis ini memang jadi CSS andalan para wapper untuk membuat situs apa saja.
CSS yang identik dengan konten underground (gretonger, phreaker, modder) ini menurut sebuah sumber, dikembangkan oleh tim developer asal Rusia, dengan tokoh utama yang sangat legendaris di dunia WAP bernama John77 (atau sering disebut John). Ada nama-nama lain seperti Alkatraz yang sangat berperan dalam pengembangan sistem inti (core system) JohnCMS sejak era 2.x hingga 4.x. (mohon dikoreksi kalau salah ya)
Karena sifatnya yang open-source, banyak pengembang lain (termasuk dari Indonesia) yang ikut membuat "mod" atau versi modifikasi termasuk saya. JCMS telah banyak mengalami modifikasi dari tangan ke tangan. Entah berapa tangan sudah.
CSS JohnCMS ini memang dirancang khusus untuk perangkat seluler di masa ketika bandwidth sangat mahal dan browser HP (seperti Opera Mini) sangat terbatas. Jadi tidak kompatibel jika digunakan untuk web dengan tampilan desktop seperti Blogspot dan Wordpress kala itu.
Tidak seperti desain modern yang mengandalkan GPU rendering, desain JCMS klasik mengandalkan teknik Image-Based CSS. Karena keterbatasan browser seluler kala itu, elemen visual tidak dibuat dengan kode, melainkan dengan potongan gambar (assets) berukuran mikro.
Komponen Utama
- Background Gradasi: Menggunakan gambar format .gif atau .png setinggi 1px yang diulang secara horizontal (repeat-x).
- Scanline Overlay: Efek garis-garis pada bar menu untuk menciptakan kesan teknis/elektronik.
- Zebra Styling: Teknik membedakan warna antar baris konten agar mudah dibaca di layar HP yang sempit.
a:link, a:visited {
color : #fe8f17;
text-decoration : none;
}
a:hover {
color : #ff4e00;
text-decoration : none;
}
input, textarea, select {
color : #6d6d6d;
background-color : #101010;
border : 1px solid #363636;
}
input:hover, textarea:hover, select:hover {
color : #8f8f8f;
background-color : #212121;
border : 1px solid #434343;
}
input:focus, textarea:focus, select:focus {
color : #78b100;
background-color : #1c2900;
border : 1px solid #385400;
}
body {
color: #CCCCCC;
font-size : 11px;
background-color : #000;
font-family : Tahoma;
margin : 0;
padding : 0;
border : 1px solid #3b3b3b;
margin: auto; max-width: 650px;
}
form {
font-size : small;
margin : 0;
padding : 0;
}
h3 {
margin : 0;
padding : 0;
padding-bottom : 2px;
}
hr {
margin-top : 2px;
margin-bottom : 2px;
border-top : 1px solid #434343;
border-right-style : none;
border-right-width : 0;
border-bottom-style : none;
border-bottom-width : 0;
border-left-style : none;
border-left-width : 0;
}
p {
margin-top : 6px;
margin-bottom : 6px;
}
ul {
margin : 0;
padding-left : 20px;
}
.bmenu, .birumuda, .phdr, .hdr {
color : #0084b5;
text-shadow : #000000 1px 1px 2px;
background-color : #000406;
background-image : url(images/bmenu.gif);
background-repeat : repeat-x;
background-position : 50% top;
margin-top : 1px;
margin-bottom : 1px;
padding : 2px;
border : 1px solid #005064;
}
.bmenu a {
color : #0084b5;
border-bottom : 1px dotted #004354;
}
.bmenu a:hover {
color : #25c5ff;
border-bottom : 1px dotted #006882;
}
.clip {
color : #459bb1;
border : 1px solid #3f3f3f;
font-size : x-small;
background-color : #292929;
padding : 4px 4px 8px;
}
.end {
text-align : center;
}
.func {
border-left : 4px solid #659300;
color : #757575;
font-size : x-small;
margin-top : 4px;
margin-left : 2px;
padding-left : 4px;
border-top : 1px dotted #4f4f4f;
}
.gmenu {
color : #75bf00;
background-color : #030500;
background-image : url(images/gmenu.gif);
background-repeat : repeat-x;
background-position : 50% top;
margin-top : 1px;
margin-bottom : 1px;
padding : 2px;
border : 1px solid #415f00;
}
.gmenu a {
color : #75bf00;
border-bottom : 1px dotted #223200;
}
.gmenu a:hover {
color : #96f400;
border-bottom : 1px dotted #395400;
}
.gray {
color : #586776;
}
.a, .coklat, .logo {
margin: 1px;
padding: 1px;
color : #b94201;
text-align : center;
background-color : #020100;
background-image : url(images/tmn.gif);
background-repeat : repeat-x;
background-position : 50% bottom;
margin-top : 1px;
margin-bottom : 1px;
padding : 2px;
border-top : 1px solid #5c2901;
border-bottom : 1px solid #5c2901;
border-left : 1px solid #5c2901;
border-right : 1px solid #5c2901;
}
.header, .footer {
margin: 1px;
padding: 1px;
background-image : url(images/header.gif);
color : #a9a9a9;
text-shadow : #000000 1px 1px 2px;
background-color : #0a0a0a;
background-repeat : repeat-x;
background-position : 50% top;
margin-bottom : 1px;
padding : 2px;
border : 1px solid #333333;
}
.footer a:link {
color : #a9a9a9;
text-decoration : none;
border-bottom : 1px dotted #3f3f3f;
}
.footer a:hover {
color : #d2d2d2;
text-decoration : none;
border-bottom : 1px dotted #696969;
}
.left {
float : left;
}
.list1 {
background-color : #101010;
margin-top : 1px;
margin-bottom : 1px;
padding : 2px;
border : 1px solid #323232;
}
.list2 {
background-color : #212121;
margin-top : 1px;
margin-bottom : 1px;
padding : 2px;
border : 1px solid #323232;
}
.maintxt {
padding-right : 1px;
padding-left : 1px;
border : 1px solid #3b3b3b;
}
.b, .c, .d, .menu, .news {
background-color : #040404;
background-image : url(images/menu.gif);
background-repeat : repeat-x;
background-position : 50% bottom;
margin-top : 1px;
margin-bottom : 1px;
padding : 2px;
border : 1px solid #353535;
}
.bb {
background-color : #CCCCCC;
background-image : url(images/menu.gif);
background-repeat : repeat-y;
background-position : 50% bottom;
margin-top : 1px;
margin-bottom : 1px;
padding : 2px;
border : 1px solid #353535;
}
.phpcode {
color : #00798f;
background-color : #001114;
border : 1px dotted #00272e;
margin-top : 4px;
padding : 0 2px;
}
.quote {
border-left : 4px solid #5c5c5c;
color : #b5b4b4;
text-shadow : #000000 1px 1px 2px;
font-size : x-small;
padding : 2px 0 2px 4px;
margin-left : 2px;
}
.red a:link, .red a:visited {
color : #d20000;
}
.reply {
border-left : 4px solid #ca0000;
color : #db0000;
padding : 2px 0 2px 4px;
}
.rmenu, .alarm {
color : #bd0000;
background-color : #050000;
background-image : url(images/rmenu.gif);
background-repeat : repeat-x;
background-position : 50% top;
margin-top : 1px;
margin-bottom : 1px;
padding : 2px;
border : 1px solid #590000;
}
.status {
color : #3fa400;
text-shadow : #000000 3px 3px 4px;
font-weight : bold;
font-size : x-small;
padding-left : 0;
}
.sub {
border-top : 1px dotted #4b4b4b;
font-size : x-small;
margin-top : 4px;
}
.sub a:link, .sub a:visited {
text-decoration : none;
}
.tmn, .fmenu {
margin: 1px;
padding: 1px;
color : #b94201;
text-shadow : #000000 1px 1px 2px;
background-color : #020100;
background-image : url(images/tmn_1.gif);
background-repeat : repeat-x;
background-position : 50% bottom;
margin-top : 1px;
margin-bottom : 1px;
padding : 2px;
border : 1px solid #5c2901;
}
.tmn a:link, .tmn a:visited, .fmenu a:link, .fmenu a:visited {
color : #b94201;
text-decoration : none;
border-bottom : 1px dotted #602200;
}
.tmn a:hover, .fmenu a:hover {
color : #ff5a00;
border-bottom : 1px dotted #933400;
}
.merah {
color : #bd0000;
background-color : #050000;
background-image : url(images/rmenu.gif);
background-repeat : repeat-x;
background-position : 50% top;
margin-top : 1px;
margin-bottom : 1px;
padding : 2px;
border : 1px solid #590000;
}
.hijau {
color : #75bf00;
background-color : #030500;
background-image : url(images/gmenu.gif);
background-repeat : repeat-x;
background-position : 50% top;
margin-top : 1px;
margin-bottom : 1px;
padding : 2px;
border : 1px solid #415f00;
}
.hijau a {
color : #75bf00;
border-bottom : 1px dotted #223200;
}
.hijau a:hover {
color : #96f400;
border-bottom : 1px dotted #395400;
}
/By : Noname/
Yang bikin saya kagum adalah background image gradasi yang kalau dibuka di HP, kecil dan pecah grafiknya, saking kecilnya. Tapi saat menyentuh baris kode CSS dan ditampilkan lewat browser HP, elegan tampilannya.
Dari dulu saya ingin mencoba cari tahu gimana cara membuat efek gradasi dari image backround ini, sekaligus ingin membuat sendiri background image nya. Tapi tak pernah berhasil.
Sayang CSS sekeren ini sekarang hanya tinggal dokumentasi, tak ada lagi yang memakainya. Apalagi era Android dan layar HP selebar lapangan sepak bola sekarang ini, makin tak memungkinkan CSS ini digunakan lagi.
Tapi yang jelas, CSS ini bukan sekadar barisan kode usang, melainkan sebuah prasasti dari era di mana kreativitas lahir dari keterbatasan (ciieeh bahasanya). Melalui teknik mikro-gradasi dan efisiensi class JohnCMS, kita belajar bahwa sebuah desain yang hebat tidak selalu lahir dari teknologi yang berat, melainkan dari ketelitian dalam setiap pikselnya. Dari HP layar seuprit bisa lahir karya yang fenomenal.
Posting Komentar