Border Semitransparan untuk Menciptakan Efek Tajam dan Tipis pada Elemen

Tabel Konten
  1. Membandingkan Hasil Tampilan 
  • Penggunaan Properti background-clip Lainnya 
  • Saya secara alami sering dan suka memperhatikan hal-hal yang detail, terutama pada elemen-elemen UI di dalam web-web terkenal seperti Google, Facebook dan juga berbagai framework web. Kali ini Saya akan membahas mengenai tampilan menu dropdown pada framework Bootstrap ini:

    Bootstrap Dropdown
    Menu dropdown pada Bootstrap.

    Tampilannya terlihat sangat tajam dan dimensinya juga terlihat sangat tipis! Bagi Anda yang sudah terbiasa bekerja dengan aplikasi Photoshop dan sejenisnya mungkin tidak begitu asing dengan teknik untuk membuat efek seperti ini.

    Pada kenyataannya, menciptakan elemen kotak dengan efek bayangan saja tidak cukup untuk memberikan kesan sisi yang tajam dan dimensi yang tipis seperti gambar di atas:

    /* Belum cukup! */
    .box {
      background-color:white;
      border:1px solid #bbb;
      box-shadow:0 4px 15px -4px rgba(0,0,0,.6);
    }

    Lihat Demo

    Deklarasi di atas sudah cukup untuk menciptakan efek kotak bergaris batas dan berbayang, namun tidak cukup utuk memberikan efek tajam pada elemen tersebut. Jika Anda memperhatikan dengan seksama pada menu dropdown di gambar pertama, maka seharusnya Anda akan menyadari bahwa garis batas pada menu tersebut ternyata tembus pandang:

    Bootstrap Dropdown
    Pembesaran tampilan.

    Efek semacam ini tidak cukup dibuat hanya dengan warna solid dan bayangan, melainkan kita membutuhkan warna semi transparan pada border. Kita bisa menggunakan kode warna RGBA atau HSLA pada border:

    .box {
      background-color:white;
      border:1px solid rgba(0,0,0,.3);
      box-shadow:0 4px 15px -4px rgba(0,0,0,.6);
    }

    Tapi sekarang efek transparan pada border justru menampilkan warna latar dari elemen .box di bagian bawahnya karena warna latar secara normal memang akan menembus sampai ke sisi terluar dari border (Anda bisa mengeceknya dengan mencoba mengubah tipe border menjadi dashed atau dotted). Untuk mencegah warna latar agar tidak melebihi batas dalam lingkar border, kita bisa menggunakan CSS background-clip dengan nilai padding-box:

    .box {
      background-color:white;
      border:1px solid rgba(0,0,0,.3);
      background-clip:padding-box;
      box-shadow:0 4px 15px -4px rgba(0,0,0,.6);
    }

    Lihat Demo

    Membandingkan Hasil Tampilan 

    Berikut ini adalah gambar cuplikan hasil tampilan pada efek sebelum dan efek sesudah:

    Efek Tajam dengan CSS
    Efek sebelum dan sesudah.

    Penggunaan Properti background-clip Lainnya 

    Fungsi CSS background-clip adalah untuk menentukan apakah latar belakang elemen, baik warna atau gambar, akan meluas ke bagian bawah perbatasan atau tidak. Nilai padding-box pada properti ini memungkinkan warna latar yang secara normal akan melebar dan melebihi batas sebelah dalam dari lingkar border menjadi tidak melebihi batas tersebut. Selengkapnya mengenai CSS background-clip bisa Anda pelajari di sini

    Secara pribadi Saya jarang menggunakannya untuk kepentingan dekorasi. Melainkan, Saya lebih sering menggunakan properti ini untuk memperbaiki tampilan yang sedikit rusak karena render piksel yang tidak terlalu baik pada beberapa peramban. Sebagai contoh adalah pada elemen tombol dengan efek rouded corner di sekelilingnya seperti ini:

    CSS3 Button

    Gambar sebelah kiri adalah tampilan standar tombol yang dibuat tanpa mendeklarasikan background-clip:padding-box. Jika Anda meperhatikannya dengan seksama, maka pada bagian sisi-sisi lengkungnya akan tampak sedikit warna latar yang melebihi batas. Saya tidak tahu mengapa, tetapi ini hanya terjadi pada elemen tombol yang dikenai deklarasi display:inline, sedangkan tombol dengan deklarasi display:inline-block atau display:block tidak mengalami masalah ini. Ini terjadi di Google Chrome.

    Gambar sebelah kanan adalah hasil tampilan sesudah Saya menerapkan deklarasi background-clip:padding-box pada tombol. Terlihat lebih rapi, karena warna latar tidak menembus bagian sisi tombol.

    Kembali kepada efek tajam dan super tipis pada menu dropdown, Google Chrome juga mengimplementasikan hal yang sama, hanya saja sepertinya dia menggunakan latar gambar, bukan CSS:

    Google Chrome Dropdown
    Menu dropdown pada Google Chrome.

    Pada Google Chrome versi lama, Anda pasti pernah melihat sebuah menu di bagian kanan bawah bernama “Barusan Ditutup” yang jika diklik akan menampilkan daftar histori munculan yang juga memiliki kesan yang sama seperti yang sedang kita bahas sekarang, akan tetapi efek itu diciptakan menggunakan metode yang sedikit berbeda dan Saya pikir ini sudah tidak standar lagi karena hasilnya yang kurang rapi dan tidak konsisten. Bukan menggunakan border semitransparan dan CSS background-clip, melainkan menggunakan outline semitransparan. Hasilnya kurang bagus karena outline tidak bisa mengikuti efek lengkung di ujung-ujung kotak. Saya menambahkan ini sebagai pengetahuan tambahan saja. Seharusnya Saya membahas ini sebelum peramban tersebut diperbaharui sampai yang seperti sekarang:

    Outline Semitransparan
    Outline tidak bisa mengikuti garis lengkung.
    .box {
      background-color:white;
      box-shadow:0 0 3px rgba(0,0,0,.8);
      outline:1px solid rgba(0,0,0,.4);
      outline-offset:-3px;
    }

    Teknik lainnya adalah dengan menggunakan CSS bayangan murni, tanpa border:

    .box {
      background-color:white;
      box-shadow:0 0 0 1px rgba(0,0,0,.3),0 4px 15px -4px rgba(0,0,0,.6);
    }

    Lihat Demo

    Ini adalah teknik tersingkat, karena kita bahkan tidak memerlukan properti background-clip untuk menciptakan efeknya di sini. Hanya saja, jika peramban tidak mendukung CSS bayangan atau tidak mendukung CSS bayangan berganda atau tidak mendukung nilai spread pada CSS bayangan, maka efek garis batasnya tidak akan terlihat. Border memungkinkan kita untuk menciptakan fallback agar tampilan elemen tidak menjadi terlalu buruk pada peramban yang tidak mendukung CSS bayangan dan warna RGBA. Begini maksudnya:

    .box {
      background-color:white;
      border:1px solid #bbb; /* warna fallback untuk peramban yang tidak mendukung warna RGBA */
      border:1px solid rgba(0,0,0,.3); /* warna border yang seharusnya */
      background-clip:padding-box;
      box-shadow:0 4px 15px -4px rgba(0,0,0,.6);
    }

    48 Komentar

    • Damar Zaky

      waaah mas taufik jeli juga yaa, dulu juga saya sempet merhatiin ginian, pernah kayak border itu kadang nggak keliatan kayak ada border, padahal ada, cuma karena warna, ternyata solusinya emang sedikit box shadow yaa...

      • no data

        wah wah, masih sepi orang yang nongkrong nih!
        izin nyimak artikelnya om taufik! :)
        - salam damai!

    • kontol ajing pepek

      nah ini masalah yang perlu ditahu desainer web, orang ini emang teliti banget dah :-bd saya tunggu artikel yang lebih sulit dan menguras otak. CSS gini mah biasa aja :Q

    • Anonim

      Untuk hal ini aku masih kesulitan pada crome dan opera kak, kalau bordernya bisa melengkung, tapi untuk backgroung nya tidak bisa mengikuti garis lengkung pada bordernya, ada solusi kah untuk blog saya kak ?

      • Taufik Nurrohman

        Kalau ada contohnya mungkin akan lebih mudah dimengerti...

        • IRIL SAGITA

          Contohnya ini kak :

          Atau Anda bisa cek di SAGITA COM

          • Taufik Nurrohman

            Biasanya cukup memakai overflow:hidden pada elemen induk. Kalau kasusnya adalah karena elemen yang dimaksud berupa gambar, dulu Saya sudah pernah membahasnya di sini

    • Kang Ismet

      mantep... selain js, jquery, css, ajax dll.. ternya jeli juga dalam hal grafis :-d selama ini saya cuma pake box-shaddow saja

      • Beben Koben

        itulah muridku, selalu jeli dalam melihat koding
        how about u bro?

    • Sopala Multapa

      keren mas .. memang terkadang saya kurang memperhatikan hal gituan tapi kalau dah pro ya gini deh .. selalu teliti .. zaluttt

    • Unknown

      asli salut. insya Allah saya juga bakal bisa kayak akang besok mah :D | sekarang lagi dipelajari dikit... dulu saya gk faham, tapi gara2 teman ada yg ngajak bikin site di Dupball.. makanya saya jadi sedikit2 bisa :D

    • Unknown

      Wow detail sekali, sampai garis border sapai jeli gitu yaah mas .. cool !

    • Anonim

      design sedetail ini ternyata juga diperhatikan juga yaa mas, keren

    • ws

      salut sama kejeliannya :-bd

    • Unknown

      menurut saya yang benar-benar mempelejari kode-kode dari maz bro ini kayaknya cuma 4 orang
      Blog Kang Ismet
      Maz Waone
      Mas Jin
      Opic Blog

      saya cuma melihat dari segi design nya :Q

      • Kang Ismet

        mempelajari seluruhnya sih engga.. satu persatu aja.. kadang2 bingung memahami kode2 mas taufik, terlalu tinggi buat saya, tapi alhamdulillah sedikit demi sedikit bisa memahami :)

        • Unknown

          betul kata kas ismet. tapi menurut saya cara belajar satu arah akan mempercepat pemahaman pemahaman dari setiap postingan yan di berikan oleh admin. di sini belajarnya saya arahkan ke blog nya mas taufik norrohman, buka berarti saya tidak pernah mengujungi blog blog lain.
          noh... mas taufik nurrohman jadi ketawa liat opic blog berkomentar...
          terima kasih atas tutorial2 nya mas...

    • Anonim

      nambah lagi ilmu CSS.. thanks mas taufik

    • Unknown

      mas taufik pny mata 'super', yg kecil aja terlihat gmn yg besar coba... \o/

      • Taufik Nurrohman

        Mungkin karena mata Saya kecil, dan karena Saya tidak bisa melihat yang besar.

    • Putra Kefa

      infonya detail...dan mendalam ...thanks DTE .. :) :-bd

    • Anonim

      wih ilmu baru :-bd

    • Unknown

      hebat dah mas taufik, orang besar pun harus memahami hal-hal kecil dan tidak mengabaikannya :-bd

    • Fajrin

      wah tajam sekali Mas..ane tau maksudnya
      memang jika dari kejauhan tidak ada bedanya. cukup mancap jika mereka melakukan zoom

    • Anonim

      kang sorry OOT... tapi ada pada postingan ini yang mau saya tanyakan...

      tadi pas saya menunjuk dan memperhatikan soal optimasi apa aja sih yang ada pada blog akang.. next ketika diperiksa pada kalimat yg ada di :

      Efek semacam ini tidak cukup dibuat hanya dengan warna solid dan bayangan, melainkan kita membutuhkan warna semi transparan pada border. Kita bisa menggunakan kode warna RGBA atauHSLA pada border:

      nah di yang saya kasih bold dan saya tunjuk ada yang nonghol seperti yang dikasih title gitu... apa itu pake CSS atau pake apa ya, kalo boleh saya tau... dan boleh saya pelajari... mohon buatkan postinganya yang membahas seperti diatas ya kang. soalnya ini penting banget buat fitur dagang saya di blog :D

      makasih kang...

      DIKETIK DENGAN BERHARAP ADA BANTUAN DATANG :D

    • Admin

      entah mau tanya apa lagi.. yang penting ini :-bd saya kasih..

    • Anonim

      Tips baru nih, dengan kode RGBA juga mungkin bisa membuat objek menjadi transparan. Nanti saya pelajari... Bisa untuk mempercantik blog :-bd

    • Unknown

      Efek semacam ini tidak cukup dibuat hanya dengan warna solid dan bayangan, melainkan kita membutuhkan warna semi transparan pada border. Kita bisa menggunakan kode warna RGBA atau HSLA pada border:

      dengan cuplikan kalimat di atas saya jadi ingin bertanya atas kejelian mata mas taufik walau agak miring dari postingan, kenapa para desainer template dalam memberikan pewarnaan kebanyakan menggunakan #HEX atau RGBA ketimbang HSLA. apakah faktor peramban ataukah ada faktor lain?

      • Taufik Nurrohman

        HSLA itu muncul terakhir, jadi agak malas menggunakannya (bagi Saya). Istilahnya, kalau yang sebelumnya saja masih bisa dipakai kenapa harus menggunakan yang baru.

    • Unknown

      memang kalau dalam desain warna jarang ada yang seteliti ini. 7:(

    • ajatshare

      Saya benar-benar kagum sama kang Taufik jarang2 blogger menerangkan detail seperti ini apalagi ini mengenai grafis yang membutuhkan ketelitian, akurasi dan presisi pokoknya good...good...and good job.

    • Anonim

      sangat teliti

    • Unknown

      seniman :-bd

    • Unknown

      Makasih Infonya... sangat berguna banget...tampilan webnya keren banget...

    • Unknown

      aku malah ga pernah merhatiin hal beginian mas.. tp thanks yah infonya...

    • Yusuf

      makasih mas, dulu saya pernah membaca post ini namun saya kira kurang berguna, eh ternyata baru-baru ini saya mempunyai masalah dalam menciptakan border yang bagus buat blog! terus ane buka lagi ni post dan ternyata sangat berguna dan bermanfaat. :-bd

    • Anonim

      makasih untuk tutornya mas..

    • Anonim

      Akhirnya ketemu juga ini yang ane cari, makasih pak

    • Unknown

      tapi kok pada "sesudah" border yang bawah agak kacau..

      • Taufik Nurrohman

        Warnanya kalah sama kegelapan bayangan bawah yang lebih pekat (offset vertikal positif 4 piksel).

        • Unknown

          Oh ya mas, kalau membuat readmore hanya gambar saja gimana ya?? Saya coba cari di google masih ada ringkasannya :(

    • Anonim

      wah keren abis mas :D

    • Unknown

      Somethings... mantap

    • Dede Mulyadi

      Selalu mampir, keren dan bermanfaat.
      http://merodja.blogspot.com

    • Mode

      Terimakasih ilmunya

    Komentar telah ditutup.