Selection CSS Trick Last Year

Melakukan trick sudah tentu harus cerdik. Dengan ilmu pas-pasan tetapi resource bertebaran dimana-mana menjadikan satu jurus ampuh tersendiri ;)) Langkah selanjutnya tinggal pinter-pinternya kita dalam mensiasati pemakaian/penerapan ke dalam blog! Pada tahapan inilah banyak blogger yang bingung sendiri. Contoh sudah ada, kode tertulis dengan rapih...eh masih saja pada bertanya :))
Ingatlah satu hal, kode yang sederhana (sedikit/simple) belum tentu memiliki fungsi sederhana pula! Bisa jadi script panjang berjubel tapi tidak terpakai oleh kita, eh malah script sedikit namun malah terpakai? Karena tidak ada info keren, terpaksa review trick lawas :D

Gambar pegunungan namanya itu, perhatikan ada garis-garis tipis pd gambar tersebut? Ini salah satu trik menyembunyikan image inti dengan menambahkan image ekstra. Dulu pernah dibahas juga tapi entah dimana keberadaannya :P Sobat tinggal membuat image dengan resolusi 1px x 1px.

.featuredImg {
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
background: #000;
margin: 10px auto;
}
.imgOver {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(IMAGE 1px x 1px);
}

Markup HTML<div class="featuredImg">
<img src="IMAGE INTI" alt="" />
<div class="imgOver"></div>
</div>Berikut contoh dengan img 1px x 1px mode titik-titik

Bila kalian kreatif, hal ini bisa dikombinasikan dengan multiple backgrounds with css3 ;)

Perhatikan dengan seksama 1 demo berikut

Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at. Brute aeque deseruisse mei ex, invidunt constituto usu te, sea te delectus urbanitas interpretaris. Eu ullum ubique eum, id aliquid mediocrem quo. Nam ne eius debitis. Vis porro labitur laboramus an. Utamur electram voluptatum qui cu, nobis efficiendi eloquentiam in quo, scripta euripidis in est. At viris imperdiet vix. Justo assueverit reprehendunt has in, nostrud legendos appellantur eam ea. Eos ex erat errem utinam, eos epicuri philosophia ut, ad eam ubique labore. Eos nibh laboramus ei, ei sumo fugit pro, Beben Koben.

ARE YOU READY FOR 2013

Lakukan grab pada area tulisan aneh lorem ipsum Tulisan ARE YOU READY FOR 2013 tidak ikut ter-grab kan? Disitulah unik trik ini ;)) Add gadget brkt ke blog sobat (lalu delete lagi ajah) kan ngetes doang terlihat seperti apa jika tertanam di blog :P

Add kode CSS brikut ke dalam blog, kemudian lihat pada bagian atas monitor!

body:before {
    content: "";
    position: fixed;
    top: -7px;
    left: 0;
    width: 100%;
    height: 7px;
    z-index: 100;
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}

Lantas bagaimana jika kepengen bermotif garis-garis berwarna, like this...

Sed da sine vocabulario, il magazines interlinguistica web. Al duo tote synonymo finalmente. Ma ille toto del, ha durante synonymo uso. Le peano vices non, duo libere technic articulo in. Sine paternoster simplificate su non, anglese moderne secundo da web.
Fu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan. Sin Fielse d'wäiss grousse vu, Hämmel meescht d'Blumme Beben Koben

Ini dia kodenya

.gar_pis:before {
  display: block;
  content: '';
  height: 7px;
  background-image: -moz-linear-gradient(0deg, #b145c7 9%, #7646d6 9%, #7646d6 18%, #4a5adb 18%, #4a5adb 27%, #4a78e4 27%, #4a78e4 36%, #3a9dcf 36%, #3a9dcf 45%, #38bf73 45%, #38bf73 54%, #80c83b 54%, #80c83b 63%, #cad839 63%, #cad839 72%, #e7ba37 72%, #e7ba37 81%, #e77337 81%, #e77337 90%, #e9411f 90%, #e9411f 100%, #b145c7 100%);
  background-image: -webkit-linear-gradient(0deg, #b145c7 9%, #7646d6 9%, #7646d6 18%, #4a5adb 18%, #4a5adb 27%, #4a78e4 27%, #4a78e4 36%, #3a9dcf 36%, #3a9dcf 45%, #38bf73 45%, #38bf73 54%, #80c83b 54%, #80c83b 63%, #cad839 63%, #cad839 72%, #e7ba37 72%, #e7ba37 81%, #e77337 81%, #e77337 90%, #e9411f 90%, #e9411f 100%, #b145c7 100%);
  background-image: -o-linear-gradient(0deg, #b145c7 9%, #7646d6 9%, #7646d6 18%, #4a5adb 18%, #4a5adb 27%, #4a78e4 27%, #4a78e4 36%, #3a9dcf 36%, #3a9dcf 45%, #38bf73 45%, #38bf73 54%, #80c83b 54%, #80c83b 63%, #cad839 63%, #cad839 72%, #e7ba37 72%, #e7ba37 81%, #e77337 81%, #e77337 90%, #e9411f 90%, #e9411f 100%, #b145c7 100%);
  background-image: linear-gradient(0deg, #b145c7 9%, #7646d6 9%, #7646d6 18%, #4a5adb 18%, #4a5adb 27%, #4a78e4 27%, #4a78e4 36%, #3a9dcf 36%, #3a9dcf 45%, #38bf73 45%, #38bf73 54%, #80c83b 54%, #80c83b 63%, #cad839 63%, #cad839 72%, #e7ba37 72%, #e7ba37 81%, #e77337 81%, #e77337 90%, #e9411f 90%, #e9411f 100%, #b145c7 100%);
  background-size: 650px 4px;
}

background-color: #fff;
background-image: -webkit-linear-gradient(transparent 50%, rgba(8, 19, 143, 0.6) 50%),-webkit-linear-gradient(left, transparent 50%, rgba(8, 19, 143, 0.6) 50%);
background-image: -moz-linear-gradient(transparent 50%, rgba(8, 19, 143, 0.6) 50%),-moz-linear-gradient(left, transparent 50%, rgba(8, 19, 143, 0.6) 50%);
background-image: -o-linear-gradient(transparent 50%, rgba(8, 19, 143, 0.6) 50%),-o-linear-gradient(left, transparent 50%, rgba(8, 19, 143, 0.6) 50%);
background-image: -ms-linear-gradient(transparent 50%, rgba(8, 19, 143, 0.6) 50%),-ms-linear-gradient(left, transparent 50%, rgba(8, 19, 143, 0.6) 50%);
background-image: linear-gradient(transparent 50%, rgba(8, 19, 143, 0.6) 50%),linear-gradient(left, transparent 50%, rgba(8, 19, 143, 0.6) 50%);
background-size: 30px 30px;

Demikian saja trick CSS sederhana akhir tahun dari aa Beben Koben si bloglang anu ganteng kalem tea. Semoga bermanfaat, kreasikanlah sendiri-sendiri menurut keperluan masing² :)
Happy coding \m/