Bikin Elemenmu 'Nongol': Mainin Shadow dan Outline di CSS!

Udah paham kan soal Box Model? Sekarang, gimana caranya biar "kotak" elemen kita itu gak keliatan flat alias datar aja? Salah satu caranya adalah dengan nambahin efek bayangan (shadow). Bayangan ini bisa ngasih ilusi kedalaman dan bikin elemen jadi keliatan lebih "nongol" atau menonjol dari background-nya.

Selain shadow, CSS juga punya properti outline yang mirip border, tapi punya perilaku sedikit beda dan sering dipake buat tujuan aksesibilitas atau penegasan visual tanpa ngubah layout.

Yuk, kita obrak-abrik kedua properti ini!

box-shadow: Ngasih Bayangan ke Kotak Elemen

Properti box-shadow dipake buat nambahin efek bayangan ke elemen blok (kayak div, button, img, dll.). Kamu bisa ngatur posisi, ukuran blur, ukuran sebaran, warna, dan bahkan bikin bayangannya jadi ke dalem (inset).

• Sintaks Dasar: box-shadow: offset-x offset-y blur-radius spread-radius color inset;

  • offset-x (Wajib Ada jika mau ada shadow): Pergeseran bayangan secara horizontal. Nilai positif geser ke kanan, negatif ke kiri.
  • offset-y (Wajib Ada jika mau ada shadow): Pergeseran bayangan secara vertikal. Nilai positif geser ke bawah, negatif ke atas.
  • blur-radius (Opsional): Seberapa nge-blur (kabur) bayangannya. Nilai lebih besar = makin nge-blur. Kalau 0, bayangannya tajem.
  • spread-radius (Opsional): Seberapa jauh bayangan menyebar. Nilai positif bikin bayangan makin gede, negatif bikin makin kecil.
  • color (Opsional): Warna bayangan. Kalau gak diset, biasanya ngikutin warna teks (color) elemen atau default browser (seringnya item). Pake rgba() atau hsla() buat bayangan transparan itu ide bagus!
  • inset (Opsional): Kalau keyword inset ditambahin, bayangannya jadi ke dalem elemen, bukan ke luar.

• Kamu bisa nambahin beberapa bayangan sekaligus ke satu elemen dengan misahin tiap definisi bayangan pake koma (,).

Contoh Penggunaan box-shadow:

.kartu-standar {
    /* Bayangan simpel ke kanan bawah, sedikit blur, warna abu-abu transparan */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}
 
.tombol-keren {
    /* Bayangan lebih subtle, cuma offset Y, blur lebih gede */
    box-shadow: 0px 4px 15px -2px rgba(0, 0, 0, 0.3);
}
 
.efek-nimbul {
    /* Dua bayangan: satu gelap di bawah, satu terang di atas (buat ilusi 3D) */
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25), /* Bayangan bawah */
                0px -2px 2px rgba(255, 255, 255, 0.3); /* Highlight atas (biasanya butuh background gelap) */
}
 
.kotak-inset {
    background-color: #eee;
    /* Bayangan ke dalem, bikin efek kayak diteken */
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4);
}
 
.tanpa-blur-spread {
    /* Bayangan tajem tanpa blur atau spread, cuma offset */
    box-shadow: 6px 6px 0px dodgerblue;
}

Eksperimen dengan nilai-nilai box-shadow ini seru banget! Kamu bisa bikin macem-macem efek visual.

text-shadow: Ngasih Bayangan ke Teks

Gak cuma kotak elemen, teks juga bisa dikasih bayangan pake properti text-shadow. Cara kerjanya mirip box-shadow, tapi gak ada spread-radius dan inset.

• Sintaks Dasar: text-shadow: offset-x offset-y blur-radius color;

  • offset-x (Wajib Ada jika mau ada shadow): Pergeseran horizontal.
  • offset-y (Wajib Ada jika mau ada shadow): Pergeseran vertikal.
  • blur-radius (Opsional): Tingkat blur.
  • color (Opsional): Warna bayangan.

• Sama kayak box-shadow, kamu bisa nambahin beberapa bayangan teks sekaligus dipisah koma.

Contoh Penggunaan text-shadow:

.judul-utama-dengan-shadow {
    /* Bayangan teks simpel ke kanan bawah, sedikit blur, warna abu-abu */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
 
.teks-efek-neon {
    color: white;
    background-color: black; /* Biar efek neon keliatan */
    /* Beberapa bayangan buat efek neon (glow) */
    text-shadow: 0 0 5px #fff, /* Layer pertama, putih agak blur */
                 0 0 10px #fff,
                 0 0 15px #fff,
                 0 0 20px #00aaff, /* Warna neon utama */
                 0 0 35px #00aaff,
                 0 0 40px #00aaff,
                 0 0 50px #00aaff,
                 0 0 75px #00aaff;
}
 
.teks-outline-sederhana {
    color: white;
    /* Trik bikin outline pake text-shadow, dengan 4 shadow tanpa blur di sekitar teks */
    text-shadow: -1px -1px 0 #000,  
                  1px -1px 0 #000,
                 -1px  1px 0 #000,
                  1px  1px 0 #000;
}

text-shadow bisa ngasih sentuhan dramatis atau artistik ke teksmu.

outline: Garis Tambahan di Luar Border

Properti outline itu mirip sama border, dia juga nggambar garis di sekeliling elemen. Tapi, ada beberapa perbedaan penting:

1. Tidak Makan Tempat: outline digambar di luar border elemen dan gak ngambil ruang di layout. Artinya, nambahin outline gak bakal ngegeser elemen lain atau ngubah ukuran total elemen (beda sama border yang jadi bagian dari Box Model).
2. Gak Harus Persegi: outline gak harus ngikutin bentuk border-radius. Dia bisa aja tetep persegi meskipun bordernya melengkung (perilakunya bisa beda antar browser atau tergantung elemen).
3. Sering Dipake Buat Fokus (Aksesibilitas): Browser secara default ngasih outline ke elemen yang lagi dapet fokus (misal, pas kamu Tab ke link atau input field). Ini penting buat pengguna keyboard biar tau elemen mana yang lagi aktif. Banyak desainer ngilangin outline default ini (outline: none; atau outline: 0;) karena dianggap "ganggu" tampilan, tapi ini praktik buruk buat aksesibilitas kecuali kamu nyediain alternatif visual yang jelas buat nandain fokus.

• Properti-Properti outline:
  • outline-width: Ketebalan outline.
  • outline-style: Gaya garis (solid, dashed, dotted, double, groove, ridge, inset, outset).
  • outline-color: Warna outline. (Nilai invert (default di beberapa browser) akan menggunakan warna yang kontras dengan background).
  • Shorthand outline: outline: ketebalan gaya warna; (misal, outline: 2px dashed blue;).
  • outline-offset: Ngasih jarak antara outline dan border (atau tepi elemen kalau gak ada border). Bisa nilai positif (outline menjauh) atau negatif (outline ke dalem, bisa numpuk border).

Contoh Penggunaan outline:

/* Ganti style fokus default browser jadi lebih custom tapi tetep jelas */
a:focus, button:focus, input:focus {
    outline: 3px solid orange;
    outline-offset: 2px; /* Kasih sedikit jarak dari elemen */
}
 
/* Contoh outline biasa (bukan buat fokus) */
.elemen-penting-banget {
    border: 1px solid black;
    outline: 3px dotted red;
    outline-offset: 5px;
}
 
/* HATI-HATI! Jangan lakukan ini kecuali kamu punya pengganti visual fokus yang jelas! */
/*
.elemen-apapun:focus {
    outline: none; // Ini buruk buat aksesibilitas kalau gak ada feedback fokus lain
}
*/

Kapan Pake outline vs border?

• Pake border kalau kamu mau garis itu jadi bagian dari ukuran dan layout elemenmu.
• Pake outline kalau kamu mau garis tambahan buat penegasan visual atau feedback fokus yang gak ngubah layout sama sekali.

Efek shadow (box-shadow dan text-shadow) bisa bikin desainmu jadi lebih hidup dan punya dimensi. Sedangkan outline adalah alat yang berguna buat debugging atau, yang lebih penting, buat ngasih feedback visual yang jelas pas elemen dapet fokus, yang krusial buat aksesibilitas.

Eksperimen terus ya sama nilai-nilainya! Banyak efek keren yang bisa kamu ciptain cuma dengan ngombinasiin properti-properti ini.