Dasar dari Positioning
Kita sudah mengetahui cara mengubah posisi dari sebuah elemen dengan menggunakan margin. Namun ketika melakukannya, posisi elemen lain di sekitarnya akan terpengaruh. Lantas bagaimana jika kita ingin memindahkan tanpa mengganggu posisi elemen lainnya? Solusinya kita perlu mengubah positioning schema dengan…
Belajar Rounded Corner di CSS
CSS3 memperkenalkan kemampuan untuk membuat rounded corner atau sudut bundar pada box dengan menggunakan properti border-radius. Nilai dari properti ini merupakan tingkat lengkungan border dalam pixel. .rounded { border-radius: 10px;} Jika diterapkan, pinggiran border akan tampak seperti ini: Kita bisa menetapkan nilai pada individu…
Belajar Box Shadow di CSS
Box Shadow Pada materi formatting text kita sudah belajar cara menambahkan drop shadow pada teks. Pada CSS3 kita juga dapat menambahkan drop shadow di sekitar kotak elemen (tidak termasuk margin) dengan menggunakan properti box-shadow. Nilai dan cara kerja dari properti box-shadow mirip seperti text-shadow, yaitu nilainya menentukan jarak vertikal dan horizontal,…
Basic Display di CSS
Display Roles Kita pernah membahas mengenai inline dan block pada modul HTML sebelumnya. Kita telah paham bahwa standarnya, tiap elemen HTML memiliki dua tipe yaitu block dan inline. Untuk lebih jelasnya berikut sifat – sifat yang ada pada elemen block…
Belajar Border, Padding dan Margin
Border Border merupakan sebuah garis yang mengelilingi area konten dan padding (opsional). Kita bisa mengatur tipe, ketebalan, serta warna garis yang ditampilkan sesuai dengan yang kita inginkan. Kita juga bisa mengatur dalam menampilkan sebagian atau keseluruhan garis pada elemen. Mari kita eksplorasi…
Belajar Box Model HTML
Pada pembahasan background-color disinggung bahwa setiap elemen ditampilkan seperti sebuah boxes atau kotak. Box model merupakan salah satu konsep dari CSS. Setiap elemen yang dibuat pada HTML akan menciptakan sebuah kotak untuk menampung kontennya. Layaknya bentuk kotak pada umumnya, pasti terdapat nilai seperti lebar,…
Cara Text dan Background Color CSS
Pada modul pengenalan CSS kita sudah mencoba bagaimana mudahnya mengganti warna pada teks yang ditampilkan. Sejujurnya tidak ada lagi yang perlu kita bahas disini. Kita dapat dengan mudahnya mengganti warna teks dengan properti color. Nilai dari properti color dapat berupa predefined color…
Belajar Warna di CSS
Warna memberikan kesan hidup pada sebuah website, Jika kita kembali pada tahun 1993 saat website hanya menampilkan background abu dengan teks hitam, tentu membosankan sekali, bukan? Yahoo Search Engine pada tahun 1994, Sumber: https://www.webdesignmuseum.org/ Pada saat itu memang belum tersedia sebuah browser yang…
Belajar Font Styling di CSS
Ketika kita membuat sebuah dokumen teks, termasuk dokumen cetak, langkah awal kita biasanya adalah menentukan jenis font yang akan digunakan. Pada pengembangan website pun demikian. Dalam CSS, font ditentukan dengan menggunakan beberapa paket properti font. Kita bisa atur tipe font,…
Belajar Pseudo Selector di CSS
Selain beberapa selector yang sudah kita pelajari, CSS masih memiliki dua selector lagi yang dapat kita manfaatkan untuk membantu untuk menyeleksi elemen untuk menerapkan sebuah rule, yakni Pseudo-class dan Pseudo-elemen. Sebelum menjelaskan lebih detail tentang kedua selector tersebut, perlu kita…