Belajar HTML^online

Pengertian gradient Di halaman ini Apa itu Gradient ? Pengertian gradient Jenis gradient Linear gradient Radial gradient Conic gradient Pengertian gradient gradient adalah perpaduan dua warna atau lebih yang menciptakan pembauran halus pada pertemuan kedua warna tersebut yang . gradient terbagi menjadi 3 jenis : Linear Gradient :arah susunan warna (atas/bawah/kiri/kanan/diagonal) Radial Gradient :susunan warna terpusat ditengah elemen. Conic Gradient :susunan warna melingkar. Linear Gradient <div class='linear1'>linear gradient</div> <div class='linear2'>linear gradient</div> <div class='linear3'>linear gradient</div> <div class='linear4'>repeating linear gradient</div> <style> div { color: white; padding:10px; height:100px; border: 1px groove darkblue; text-align: center;} } .linear1 {background: linear-gradient(blue,orange);...

Tampilan cursor berdasarkan fungsi Di halaman ini Ikon Cursor Ikon default kursor Tabel ikon kursor Mengganti ikon kursor Tampilan Default Cursor Tampilan cursor pada umumnya adalah berbentuk panah penunjuk : Pada saat cursor menyorot teks, tampilannya akan berubah seperti ini : Tampilan cursor juga berubah dipermukaan elemen tombol atau link menjadi seperti ini : Tampilan cursor pada dasarnya bergantung terhadap perangkat yang digunakan. Setiap perangkat misal laptop atau komputer biasanya memiliki pengaturan khusus untuk tampilan cursor. Dalam CSS pengaturan cursor lebih kepada permintaan agar perangkat menampilkan cursor sesuai nilai properti yang ditentukan. Tabel nilai properti cursor Arahkan cursor ke kolom test untuk melihat tampilan sesuai nilai cursor. No. Value CSS test 1. alias {cursor: alias ;} 2. all-scroll {cursor: all-scroll ;} 3. auto {cursor: auto ;} 4. cell {cursor: cell ;} 5. col-resize {...

Memberi gaya pada tombol dengan CSS Di halaman ini CSS Tombol Elemen tombol Kustom tombol Border tombol Background tombol Hover tombol Elemen tombol <button> merupakan elemen HTML yang berfungsi untuk memulai eksekusi suatu tindakan dihalaman web. Sehingga biasanya tampilan elemen ini akan didesain kontras (mencolok) agar mudah terlihat. Contoh tampilan tombol default tanpa kustom: Tombol 1 Kirim Mengkustom tombol padding; margin; border-radius <button>Tombol</button> <button>Tombol</button> <button>Tombol</button> <button>Tombol</button> <button>Tombol</button> <button>Tombol</button> <style> button { color: inherit; padding: 10px 25px; margin: 5px; border-radius: 8px;} </style> Tombol Tombol Tombol Tombol Tombol Tombol Mengatur border tombol. Tombol Tombol Tombol Tombol Tombol Tombol <button clas...

Properti CSS - Float Di halaman ini CSS float Pengertian float Dampak CSS float Elemen float over height Pengertian float Float berarti mengambang. Properti float pada suatu elemen membuat kedudukan elemen "terangkat" dari tempat asalnya. Sebelum float 1 2 float 3 4 5 Sesudah float 1 2 float 3 4 5 Properti float merupakan properti sifat yang menetapkan sifat float (mengambang) pada elemen. Dimana nilai (value) properti float ini mendeklarasikan arah float-nya yaitu : 1. left (kiri). 2. right (kanan). Contoh diatas menggunakan float : right ; Lihat Kode contoh <div class='induk'> <div class='konten'>1</div> <div class='konten'>2</div> <div class='konten float-r'>float 3</div> <div class='konten'>4</div> <div class='konten'>5</div> </div> <style> .induk{ padding:5p...

Properti CSS flex Di halaman ini CSS flex Pengertian flex Menerapkan properti flex Mengatur jarak elemen flex Mengatur penyebaran elemen flex Memutus baris elemen flex Mempertahankan baris elemen flex Membalikkan arah urutan elemen flex Pengertian flex flex berasal dari kata flexible (lentur / fleksibel). Fungsi properti flex Properti flex berfungsi untuk mengatur fleksibilitas kelompok elemen (group). Membuat elemen grup : <div class='induk'> <div class='item konten-1'>konten 1</div> <div class='item konten-2'>konten 2</div> <div class='item konten-3'>konten 3</div> <div class='item konten-4'>konten 4</div> <div class='item konten-5'>konten 5</div> <div class='item konten-6'>konten 6</div> </div> <style> .induk { background: #f1f1f1; } .konten-1 { ...

Mengatur kelebihan ukuran konten yang melanggar batas elemen induknya kelebihan (OVERFLOW-Y) kelebihan (OVERFLOW-X) Overflow adalah pada saat suatu elemen tidak dapat "menampung" konten yang berada didalamnya. Atau sebaliknya : Pada saat suatu konten berukuran melebihi elemen induknya (parents element), seperti pada ilustrisi diatas. Kenapa disebut overflow (kelebihan aliran) ? Karena pada dasarnya halaman web berfungsi memuat informasi berupa teks. Dan teks memiliki arah baca dan juga arah dalam penulisannya baik dari arah kiri ke kanan atau sebaliknya. Arah baca / tulis inilah yang istilahkan sebagai aliran (flow), lebih tepatnya aliran teks. Dan ketika teks melampaui batas areanya disebut overflow atau aliran yang berlebih. Istilah tersebut diterapkan untuk semua jenis elemen HTML dan dimasukkan sebagai salah satu properti CSS yang berfungsi untuk mengatur / menentukan bagaimana kelebihan elemen tersebut harus ditampilkan. Properti CSS - overflow...

Mengatur posisi elemen dengan CSS Untuk menentukan letak elemen dengan CSS, salah satu cara yang dapat diterapkan adalah menggunakan properti posisi . Penerapan cara ini melalui 2 tahap berikut ini : 1. Menetapkan sifat elemen. Menggunakan properti position . Properti position ini berfungsi untuk menentukan sifat elemen . Detail value dari properti position: tersebut adalah : 1. static : Bersifat tetap ditempat semula. 2. relative : Bersifat menyesuaikan. 3. fixed : Bersifat permanen ditempat yang ditentukan. 4. absolute : Bersifat mutlak meninggalkan tempat asalnya. 5. sticky : Bersifat menempel. 2. Mengatur posisi elemen. Elemen yang sifatnya telah ditetapkan memerlukan properti letak untuk mengatur posisinya : 1. top : mengatur posisi elemen ke atas. 2. bottom : mengatur posisi elemen ke bawah. 3. left : mengatur posisi elemen ke kiri. 4. right : mengatur posisi elemen ke kanan. CATATAN : Properti letak TIDAK berlaku untuk elemen dengan properti pos...

Mengatur ukuran panjang dengan properti pembatas max & min Pada materi sebelumnya telah dijelaskan bagaimana Mengatur width dan height suatu elemen, dimana pengaturan tersebut adalah untuk menentukan ukuran tetap suatu elemen. Selanjutnya disini akan menjelaskan cara mengatur ukuran suatu elemen dengan cara memberikan batas ukuran pada elemen. Ketentuan atribut pembatas max- & min- berlaku untuk atribut width dan height elemen. min-width / min-height : Berarti mengatur ukuran elemen dengan memberikan batas terkecil (minimal). Sehingga ukuran suatu elemen bisa bertambah semaksimal mungkin sesuai elemen induknya. max-width / max-height : Berarti mengatur ukuran elemen dengan memberikan batas terbesar (maksimal). Sehingga ukuran elemen tidak bisa melebihi batas tersebut. Fungsi penggunaan properti pembatas max- & min- Properti min- & max- ini sangat penting dalam mendesain halaman web responsive. Yaitu : Untuk menjaga area pandang halaman web...