https://misterthree.netlify.app/tags/css/Recent content in css on MisterThreeHugo -- gohugo.iomisterthree.blog@gmail.com (Misterthree)misterthree.blog@gmail.com (Misterthree)This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.Thu, 10 Jun 2021 12:33:57 +0700https://misterthree.netlify.app/blog/mengenal-css3-calc-function/Thu, 10 Jun 2021 12:33:57 +0700misterthree.blog@gmail.com (Misterthree)https://misterthree.netlify.app/blog/mengenal-css3-calc-function/CSS3 memiliki fungsi calc() khusus untuk melakukan perhitungan matematika dasar. Sehingga tanda yang digunakan bisa berupa + , - , / dan *. Sebagai salah satu contoh kita menggunakan metode pengurangan, kita akan membagi objek menjadi tiga bagian sama rata : Atau bisa juga kita membuat semacam menu, dengan jarak ke kanan sebesar 20px seperti ini : Beberapa hal yang harus diperhatikan: Penghitungan dilakukan dari kiri ke kanan, atau atas ke bawah.https://misterthree.netlify.app/blog/css-shorthand/Sun, 02 May 2021 11:36:19 +0700misterthree.blog@gmail.com (Misterthree)https://misterthree.netlify.app/blog/css-shorthand/Apa itu Shorthand CSS? Teknik shorthand adalah cara mempersingkat penulisan kode CSS yang memungkinkan untuk menetapkan nilai beberapa property secara bersamaan. Teknik ini dapat menghemat karakter, energi, dan tentu saja waktu, selain itu kode akan terlihat lebih rapi dan efisien. Metode penulisan model shorthand dapat diterapkan kedalam Javascript dan CSS. Tapi dalam bahasan kali ini, kita fokus belajar ke bagian CSS saja dulu. Margin, Padding dan Outline Margin, padding dan Outline mempunyai value (nilai) yang sama.https://misterthree.netlify.app/blog/perbedaan-display-none-dan-visibility-hidden/Thu, 22 Apr 2021 21:52:05 +0700misterthree.blog@gmail.com (Misterthree)https://misterthree.netlify.app/blog/perbedaan-display-none-dan-visibility-hidden/CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs. Kali ini kita akan belajar cara menyembunyikan objek dengan css. sebenarnya ada beberapa alternatif kode yang bisa digunakan, diantaranya display:none dan visibility:hidden. Bahkan ada juga alternatif lainnya, yaitu membuat objek transparan dengan menambahkan kode opacity:0. Sebelum melangkah pada perbedaan, sebaiknya kita ketahui dulu properti dari keduanya.https://misterthree.netlify.app/blog/cara-memotong-karakter-pada-judul-kalimat/Wed, 21 Apr 2021 13:02:08 +0700misterthree.blog@gmail.com (Misterthree)https://misterthree.netlify.app/blog/cara-memotong-karakter-pada-judul-kalimat/Ada beberapa cara yang bisa dilakukan untuk memotong kalimat supaya tidak terlalu panjang. Biasanya ini dilakukan pada Judul Artikel atau Deskripsi postingan. Kali ini kita akan belajar bagaimana kita dapat memotong judul atau deskripsi posting mengunakan CSS. Mengunakan text-overflow: ellipsis text-overflow: ellipsis bisa digunakan untuk memangkas karakter pada satu baris saja. Syaratnya harus disertakan overflow: hidden dan white-space: nowrap. Untuk contoh CSS seperti ini: .box { text-overflow: ellipsis; /* Harus ada supaya berjalan ellipsisnya */ overflow: hidden; white-space: nowrap; } untuk demonya, silahkan uji coba juga di CodePen