{"id":59128,"date":"2025-11-10T08:09:00","date_gmt":"2025-11-10T01:09:00","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=59128"},"modified":"2026-02-16T10:10:15","modified_gmt":"2026-02-16T03:10:15","slug":"belajar-css-bagian-20","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-20\/","title":{"rendered":"Belajar CSS Bagian 20: Mengenal CSS Transparency"},"content":{"rendered":"\n<p>Setelah pada seri Belajar CSS <strong><a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-19\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Bagian 19<\/a><\/strong> kita mempelajari cara mengatur <em>height<\/em> dan <em>width<\/em> pada elemen, kini kita masuk ke konsep baru yang tidak kalah penting dalam desain antarmuka, yaitu CSS <em>Transparency<\/em>. Transparansi memungkinkan Anda mengatur tingkat kejernihan atau <em>opacity <\/em>pada elemen, sehingga tampilan website dapat terlihat lebih dinamis, modern, dan estetik.<\/p>\n\n\n\n<p>Dalam desain tampilan web modern, efek visual sangat penting diterapkan untuk menciptakan tampilan yang menarik bagi pengunjung. Salah satu efek visual yang akan kita bahas adalah efek transparan. <\/p>\n\n\n\n<p>Properti CSS yang dapat digunakan untuk menggunakan efek transparan yaitu property <em>opacity <\/em>atau transparansi dan <em>background-color<\/em> menggunakan warna transparan.<\/p>\n\n\n\n<p>Pada bagian ke-20 ini, kita akan belajar mengenal lebih jauh tentang CSS <em>Transparency<\/em>, fungsinya, serta contoh penggunaannya agar Anda dapat menerapkannya dengan mudah dalam proyek web Anda.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa Itu Property CSS <em>Opacity<\/em>?<\/h2>\n\n\n\n<p>Property <em>opacity <\/em>adalah properti CSS yang dapat digunakan untuk mengubah tingkat transparansi suatu elemen HTML, sehingga dapat memberikan efek visual seperti menyatu dengan background, atau memberikan efek bayangan, atau fokus di elemen html tertentu. <\/p>\n\n\n\n<p>Secara <em>default<\/em>, semua elemen memiliki nilai 1. Dengan mengubah nilai ini hingga mendekati 0, maka elemen HTML akan terlihat semakin transparan.<\/p>\n\n\n\n<p>Contoh kode penulisan :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.box {\n        opacity: 0.5; \/*elemen akan menjadi 50% transparan*\/\n    }<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Cara Kerja CSS Opacity<\/h2>\n\n\n\n<p>Properti CSS opacity bekerja dengan mengatur tingkat transparansi suatu elemen HTML, termasuk seluruh konten di dalamnya seperti teks, gambar, dan elemen turunan lainnya. Nilai opacity menggunakan angka desimal antara 0 hingga 1.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>opacity: 1 &gt; elemen sepenuhnya terlihat (tidak transparan).<\/li>\n\n\n\n<li>opacity: 0.5 &gt; elemen setengah transparan.<\/li>\n\n\n\n<li>opacity: 0 &gt; elemen sepenuhnya tidak terlihat (transparan).<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Contoh Implementasi dan penggunaan<\/h2>\n\n\n\n<p>Tidak jauh berbeda dengan <em>script <\/em>CSS mengenai <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-18\/\" target=\"_blank\" rel=\"noopener\" title=\"css box model\">box model<\/a>, berikut adalah contoh <em>script <\/em>lengkap penggunaan CSS <em>opacity<\/em> yang telah diterapkan ke kode html.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Contoh Transparansi&lt;\/title&gt;\n    &lt;style&gt;\n    .container {\n        display: flex;\n        justify-content: center;\n    }\n    .container div {\n        margin: 10px;\n        padding: 10px;\n        background-color: #ffffff;\n        border: 1px solid #dadada;\n        border-radius: 10px;\n    }\n    .container .box-1 {\n        width: 100px;\n        max-width: 100px;\n        height: 100px;\n        max-height: 100px;\n        <strong>opacity: 0.2;<\/strong>\n    }\n    .container .box-2 {\n        width: 100px;\n        max-width: 100px;\n        height: 150px;\n        max-height: 150px;\n        <strong>opacity: 0.4;<\/strong>\n    }\n    .container .box-3 {\n        width: 200px;\n        max-width: 200px;\n        height: 200px;\n        max-height: 200px;\n        <strong>opacity: 0.6;<\/strong>\n    }\n    .container .box-4 {\n        width: 200px;\n        max-width: 200px;\n        height: 350px;\n        max-height: 350px;\n        <strong>opacity: 0.8;<\/strong>\n    }    \n    body {\n        background-image: url(pindah-hosting.png);\n        background-repeat: no-repeat;\n        background-size: cover;\n    }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n    &lt;div class=\"container\"&gt;\n        &lt;div class=\"box-1\"&gt;Box Satu&lt;\/div&gt;\n        &lt;div class=\"box-2\"&gt;Box Dua&lt;\/div&gt;\n        &lt;div class=\"box-3\"&gt;Box Tiga&lt;\/div&gt;\n        &lt;div class=\"box-4\"&gt;Box Empat&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Jika diakses menggunakan <em>browser, <\/em>maka<em> <\/em>akan menampilkan hasil sebagai berikut:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"574\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image-1024x574.png\" alt=\"CSS Opacity\" class=\"wp-image-59129\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image-1024x574.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image-300x168.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image-768x431.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image-370x207.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image-270x151.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image-570x320.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image-740x415.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image.png 1311w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Transparansi Menggunakan Property background-color<\/h2>\n\n\n\n<p>Selain menggunakan CSS <em>opacity<\/em>, Anda juga dapat menggunakan property CSS  <em>background-color<\/em> dan ubah warnanya menjadi transparan. Informasi lebih lengkap mengenai <em>property background color<\/em> dapat di pelajari di artikel berikut <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-6\/\" target=\"_blank\" rel=\"noopener\" title=\"\"><strong>Menggunakan Background di CSS<\/strong><\/a> <\/p>\n\n\n\n<p>Berikut adalah contoh property CSS background-color.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container div {\n    background-color: #ffffff9e; \/*warna transparany*\/\n}<\/code><\/pre>\n\n\n\n<p>Anda dapat menentukan warna menggunakan fitur <em>inspect element<\/em> yang sudah di sediakan oleh <em>browser <\/em>seperti gambar di bawah.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"234\" height=\"276\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image-1.png\" alt=\"Menggunakan warna transparan\" class=\"wp-image-59130\"\/><\/a><\/figure>\n<\/div>\n\n\n<p><strong>BACA JUGA : <a href=\"https:\/\/blog.rumahweb.com\/kode-warna-html-dan-css\/\" title=\"\">Kode Warna HTML dan CSS yang Perlu Anda Ketahui<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Membuat Tampilan Seperti Desain Kaca (<em>Glass Design<\/em>)<\/h2>\n\n\n\n<p>Glass Morphism adalah teknik desain yang membuat efek visual transparan seperti kaca. Untuk membuat efek ini, Anda bisa menggunakan properti CSS <em>backdrop-filter<\/em>. Pastikan Anda juga mengatur transparansi dengan properti <em>background-color<\/em>. <\/p>\n\n\n\n<p>Properti <em>backdrop-filter<\/em> memungkinkan Anda menerapkan efek visual seperti blur atau perubahan warna pada area di belakang elemen.<\/p>\n\n\n\n<p>Anda cukup menambahkan kode css berikut :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container div {\n    background-color: #ffffff9e;\n    border: 1px solid #ffffff9e;\n    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n    border-radius: 10px;\n    backdrop-filter: blur(13.6px);\n    -webkit-backdrop-filter: blur(13.6px);\n}<\/code><\/pre>\n\n\n\n<p>Berikut adalah contoh <em>script <\/em>lengkap penggunaan <em>glass design<\/em> yang telah diterapkan ke kode html.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Contoh Transparansi&lt;\/title&gt;\n    &lt;style&gt;\n    .container {\n        display: flex;\n        justify-content: center;\n    }\n    .container div {\n        margin: 10px;\n        padding: 10px;\n<strong>        background-color: #ffffff9e;\n        border: 1px solid #ffffff9e;<\/strong>\n        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n        border-radius: 10px;\n<strong>        backdrop-filter: blur(13.6px);\n        -webkit-backdrop-filter: blur(13.6px);<\/strong>\n    }\n    .container .box-1 {\n        width: 100px;\n        max-width: 100px;\n        height: 100px;\n        max-height: 100px;\n    }\n    .container .box-2 {\n        width: 100px;\n        max-width: 100px;\n        height: 150px;\n        max-height: 150px;\n    }\n    .container .box-3 {\n        width: 200px;\n        max-width: 200px;\n        height: 200px;\n        max-height: 200px;\n    }\n    .container .box-4 {\n        width: 200px;\n        max-width: 200px;\n        height: 350px;\n        max-height: 350px;\n    }    \n    body {\n        background-image: url(pindah-hosting.png);\n        background-repeat: no-repeat;\n        background-size: cover;\n    }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n    &lt;div class=\"container\"&gt;\n        &lt;div class=\"box-1\"&gt;Box Satu&lt;\/div&gt;\n        &lt;div class=\"box-2\"&gt;Box Dua&lt;\/div&gt;\n        &lt;div class=\"box-3\"&gt;Box Tiga&lt;\/div&gt;\n        &lt;div class=\"box-4\"&gt;Box Empat&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Jika diakses menggunakan <em>browser,<\/em> maka akan menampilkan halaman sebagai berikut:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"625\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image-2-1024x625.png\" alt=\"transparansi seperti desain kaca - belajar css transparancy\" class=\"wp-image-59132\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image-2-1024x625.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image-2-300x183.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image-2-768x469.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image-2-370x226.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image-2-270x165.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image-2-570x348.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image-2-740x451.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/image-2.png 1313w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Kapan Menggunakan Efek Transparansi?<\/h2>\n\n\n\n<p>Efek transparansi hanya dapat digunakan untuk elemen tertentu saja yang sekiranya terlihat menarik dan profesional. Berikut beberapa kondisi secara umum kapan efek transparansi digunakan:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Membuat efek transparan pada gambar <em>background<\/em>.<\/li>\n\n\n\n<li>Memberikan efek animasi transparan ketika <em>mouse <\/em>masuk ke elemen atau sebaliknya (<em>fade-in<\/em>\/<em>fade-out<\/em>).<\/li>\n\n\n\n<li>Memberikan efek transparan di bagian menu.<\/li>\n\n\n\n<li>Membuat efek transparan di bagan elemen box \/ card.<\/li>\n\n\n\n<li>Membuat <em>popup <\/em>yang memiliki tampilan efek transparan.<\/li>\n<\/ul>\n\n\n\n<p>Perlu diingat, tidak semua elemen cocok diberi efek transparansi. Penggunaan yang berlebihan dapat membuat tampilan website menjadi berantakan dan elemen-elemen saling bertabrakan secara visual. Oleh karena itu, gunakan efek transparansi secukupnya dan hanya pada elemen yang memang perlu terlihat transparan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Penutup<\/h2>\n\n\n\n<p>Dalam desain web modern, efek visual memiliki peran penting untuk menciptakan tampilan yang menarik dan profesional. Untuk membuat efek transparan, Anda bisa menggunakan dua properti CSS, yaitu <em>opacity <\/em>dan <em>background-color<\/em>. <\/p>\n\n\n\n<p><em>Opacity <\/em>berfungsi untuk mengatur tingkat transparansi elemen secara keseluruhan, sedangkan <em>background-color<\/em> berfungsi untuk membuat efek transparansi melalui kode warna. Dengan menguasai kedua properti ini, Anda dapat menciptakan desain website yang lebih modern dan <em>eye-catching<\/em>.<\/p>\n\n\n\n<p>Demikian seri belajar CSS bagian 20 tentang CSS Transparency. Ikuti terus kelas belajar CSS selanjutnya di Rumahweb Indonesia, agar kemampuan CSS Anda semakin meningkat. Selamat mencoba \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Setelah pada seri Belajar CSS Bagian 19 kita mempelajari cara mengatur height dan width pada elemen, kini kita masuk ke konsep baru yang tidak kalah penting dalam desain antarmuka, yaitu CSS Transparency. Transparansi memungkinkan Anda mengatur tingkat kejernihan atau opacity pada elemen, sehingga tampilan website dapat terlihat lebih dinamis, modern, dan estetik. Dalam desain tampilan [&hellip;]<\/p>\n","protected":false},"author":353,"featured_media":59175,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[5],"tags":[1752,1751,2186],"class_list":{"0":"post-59128","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-design","8":"tag-belajar-css","9":"tag-css","10":"tag-tutorial-css"},"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/11\/Banner-belajar-css-bagian-20.jpg","jetpack_shortlink":"https:\/\/wp.me\/p8n3G7-fnG","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/59128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=59128"}],"version-history":[{"count":10,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/59128\/revisions"}],"predecessor-version":[{"id":61797,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/59128\/revisions\/61797"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/59175"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=59128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=59128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=59128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}