king-octahasan

Quotes Part 1 - Ki Hajar Dewantara

noreply@blogger.com (Octavianus Hasan) — Sat, 8 Jul 2023 21:52:00 +0800

Menilik Quotes Ki Hajar Dewantara tentang Pendidikan

Hari Pendidikan Nasional diperingati pada tanggal 2 Mei setiap tahunnya. Ki Hajar Dewantara merupakan sosok kelahiran 2 Mei 1889 di Yogyakarta. Ki Hajar Dewantara dikenal sebagai bapak pendidikan Indonesia karena memperjuangkan hak rakyat Indonesia di bidang pendidikan. Sosoknya yang inspiratif juga meninggalkan pesan-pesan untuk generasi masa depan.

Berikut beberapa quotes Ki Hajar Dewantara tentang Pendidikan.

1. “Anak-anak hidup dan tumbuh sesuai kodratnya sendiri. Pendidik hanya dapat merawat dan menuntun tumbuhnya kodrat itu.” - Ki Hajar Dewantara.

2. "Among System kita yaitu: menyokong kodrat alamnya anak-anak yang kita didik, agar dapat mengembangkan hidupnya lahir dan batin menurut kodratnya sendiri-sendiri." - Ki Hajar Dewantara.

3. "Dengan budi pekerti, tiap-tiap manusia berdiri sebagai manusia merdeka (berpribadi), yang dapat memerintah atau menguasai diri sendiri. Inilah manusia beradab dan itulah maksud dan tujuan pendidikan dalam garis besarnya." - Ki Hajar Dewantara.

4. "Dengan ilmu kita menuju kemuliaan." - Ki Hajar Dewantara.

5. "Di dalam hidupnya anak-anak adalah tiga tempat pergaulan yang menjadi pusat pendidikan yang amat penting baginya, yaitu alam keluarga, alam perguruan dan alam pergerakan pemuda." - Ki Hajar Dewantara.

6. "Di mana ada kemerdekaan di situ harus ada disiplin yang kuat. Sungguh disiplin itu bersifat self disiplin, yaitu kita sendiri mewajibkan dengan sekeras-kerasnya. Dan peraturan yang sedemikian itu harus ada di dalam suasana yang merdeka." - Ki Hajar Dewantara.

7. "Guru jangan hanya memberi pengetahuan yang perlu dan baik saja tetapi harus juga mendidik si murid akan dapat mencari sendiri pengetahuan itu dan memakainya guna amal keperluan umum. Pengetahuan yang baik dan perlu itu yang manfaat untuk keperluan lahir batin dalam hidup bersama." - Ki Hajar Dewantara.

8. "Maksud pengajaran dan pendidikan yang berguna untuk kehidupan bersama adalah memerdekakan manusia sebagai anggota persatuan (rakyat)." - Ki Hajar Dewantara.

9. "Pendidikan dan pengajaran di dalam Republik Indonesia harus berdasarkan kebudayaan dan kemasyarakatan bangsa Indonesia, menuju ke arah kebahagiaan batin serta keselamatan hidup lahir." - Ki Hajar Dewantara.

10. "Pengaruh pengajaran itu umumnya memerdekakan manusia atas hidupnya lahir, sedang merdekanya hidup batin terdapat dari pendidikan." - Ki Hajar Dewantara.

11. “Ada satu kebebasan yang lebih tinggi daripada kebebasan politik, yaitu kebebasan untuk memilih cara hidup sendiri, kebebasan untuk memilih cara hidup yang dibenarkan oleh hati nurani dan kebijaksanaan.” - Ki Hajar Dewantara.

12. “Anak-anak tumbuh sesuai kodratnya sendiri. Pendidik hanya dapat merawat dan menuntun tumbuhnya kodrat itu” - Ki Hajar Dewantara.

13. “Dunia pendidikan tak lepas dari para pengajar alias guru, para pejuang tulus tanpa tanda jasa yang mencerdaskan kehidupan bangsa.” - Ki Hajar Dewantara.

14. “Guru adalah seorang pejuang tulus tanpa tanda jasa mencerdaskan bangsa.” - Ki Hajar Dewantara.

15. “Ing ngarso sung tulodo, ing madyo mangun karso, tut wuri handayani.” (Di depan memberi contoh, di tengah membangun semangat, di belakang memberi dorongan) - Ki Hajar Dewantara.

16. “Jika ingin mengubah dunia, mulailah dengan mengubah diri sendiri.” - Ki Hajar Dewantara.

17. “Melalui ngerti, ngrasa, lan nglakoni (menyadari, menginsyafi, dan melakukan), budi pekerti yang dibentuk untuk merdeka dan mandiri akan hadir adab.” - Ki Hajar Dewantara.

18. “Membaca adalah jendela dunia. Tetapi tidak hanya itu, membaca juga adalah sebuah kunci yang dapat membuka pintu-pintu rahasia ilmu pengetahuan dan kebijaksanaan.” - Ki Hajar Dewantara.

19. “Mempunyai ketetapan, tidak tergoyahkan, berisi dengan berilmu pengetahuan, hingga yakin dengan seyakin-yakinnya bahwa apa yang dilakukannya adalah benar dan baik.” - Ki Hajar Dewantara.

20. “Orang yang mempunyai kecerdasan budi pekerti itu senantiasa memikir-mikirkan dan merasa-rasakan serta selalu memakai ukuran, timbangan dan dasar-dasar yang pasti dan tetap.” - Ki Hajar Dewantara.

21. “Pendidikan bukanlah persiapan untuk hidup. Pendidikan itu sendiri adalah kehidupan.” - Ki Hajar Dewantara.

22. “Pendidikan sejati adalah pendidikan yang mengajarkan kita untuk hidup bersama, untuk saling menghargai, untuk saling membantu, untuk saling mencintai.” - Ki Hajar Dewantara.

23. “Percaya, tegas, penuh ilmu hingga matang jiwanya, serta percaya diri, tidak mudah takut, tabah menghadapi rintangan apapun.” - Ki Hajar Dewantara.

24. “Seorang pemimpin sejati adalah pemimpin yang mampu memimpin dengan hati dan berpijak pada moralitas yang benar.” - Ki Hajar Dewantara.

25. “Sesungguhnya, hidup itu ibarat sebuah buku. Siapa yang tidak pernah belajar, sama saja dengan buku yang tidak pernah dibaca.” - Ki Hajar Dewantara.

26. “Setiap orang menjadi guru, setiap rumah menjadi sekolah.” - Ki Hajar Dewantara.

27. “Tak ada orang yang lahir sebagai musuh. Hanya ketidaktahuan dan ketidak-pahaman yang menciptakan permusuhan.” - Ki Hajar Dewantara.

28. “Tidak ada anak yang bodoh. Yang ada hanya guru yang tidak tahu cara mengajar.” - Ki Hajar Dewantara.

Itulah beberapa quotes yang dapat kita maknai dari sosok Ki Hajar Dewantara semoga dapat menjadi inspirasi bagi anak muda dalam menempuh pendidikan.

Belajar CSS Part 31 - Layout Halaman Web Responsif

noreply@blogger.com (Octavianus Hasan) — Mon, 31 Dec 2018 00:01:00 +0800

CSS Layout Halaman Web

Pada tutorial HTML sebelumnya telah dibahas mengenai layout halaman web, akan tetapi di tutorial kali ini kita akan membahas desain layout yang responsif menggunakan CSS.

Sebuah situs web sering dibagi menjadi header, menu, konten dan footer. Berikut merupakan contoh layout halaman web yang sederhana:

Struktur di atas, adalah salah satu yang paling umum digunakan.

Header

Sebuah header biasanya terletak di bagian atas website, tapi ada juga yang penempatan header berada tepat di bawah menu navigasi bagian atas. Dalam header, sering mengandung logo atau nama website.

Contoh

body {
  margin: 0;
}

/* Menerapkan style header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="header">
  <h1>Header</h1>
</div>

</body>
</html>

Hasilnya:

Navigasi Bar

Menu atau navigasi merupakan tempat atau wadah untuk link yang memberikan akses ke halaman-halaman lain dalam suatu web.

Contoh

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Menerapkan style header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Menerapkan style navigation bar atas */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Menerapkan style pada link navigation bar atas */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Mengubah warna navigasi saat disentuh */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="header">
  <h1>Header</h1>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

</body>
</html>

Hasilnya:

Konten

Tata letak di bagian ini, sering tergantung pada target pengguna. Tata letak yang paling umum adalah satu (atau menggabungkan semua konten) sebagai berikut:

1-kolom (sering digunakan untuk mobile browser)
2-kolom (sering digunakan untuk tablet dan laptop)
Tata letak 3-kolom (hanya digunakan untuk desktop)

Pada contoh ini kita akan membuat layout 3-kolom, dan mengubahnya ke layout 1-kolom pada layar yang lebih kecil.

Contoh

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Menerapkan style header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Menerapkan style navigation bar atas */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Menerapkan style pada link navigation bar atas */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Mengubah warna navigasi saat disentuh */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Mengatur 3 kolom yang sama posisinya bersebelahan satu sama lain */
.kolom {
  float: left;
  width: 33.33%;
  padding: 15px;
}

/* Menghapus float setelah kolom */
.baris:after {
  content: "";
  display: table;
  clear: both;
}

/* Tata letak responsif - membuat ketiga kolom saling bertumpuk, bukan bersebelahan */
@media screen and (max-width:600px) {
  .kolom {
    width: 100%;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="header">
  <h1>Header</h1>
  <p>Ubah ukuran jendela browser untuk melihat efek responsif.</p>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<div class="baris">
  <div class="kolom">
    <h2>Kolom</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>

  <div class="kolom">
    <h2>Kolom</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>

  <div class="kolom">
    <h2>Kolom</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
</div>

</body>
</html>

Hasilnya:

Tips: Untuk membuat layout 2-kolom, ubah lebar menjadi 50%. Untuk membuat layout 4-kolom, gunakan 25%, dll.

Tips: Cara yang lebih modern membuat layout kolom adalah dengan menggunakan CSS flexbox. Namun, tidak didukung di Internet Explorer 10 dan versi sebelumnya. Jika kita memerlukan dukungan IE6-10, gunakan float (seperti yang ditunjukkan di atas).

Footer

footer ditempatkan di bagian bawah halaman website. Pada bagian footer ini sering berisi informasi seperti hak cipta dan info kontak.

Contoh

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Menerapkan style header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Menerapkan style navigation bar atas */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Menerapkan style pada link navigation bar atas */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Mengubah warna navigasi saat disentuh */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Mengatur 3 kolom yang sama posisinya bersebelahan satu sama lain */
.kolom {
  float: left;
  padding: 10px;
}

/* Kolom kiri dan kanan */
.kolom.samping {
  width: 25%;
}

/* Kolom tengah */
.kolom.tengah {
  width: 50%;
}

/* Menghapus float setelah kolom */
.baris:after {
  content: "";
  display: table;
  clear: both;
}

/* Tata letak responsif - membuat tiga kolom saling bertumpuk, bukan bersebelahan */
@media screen and (max-width: 600px) {
  .kolom.samping, .kolom.tengah {
    width: 100%;
  }
}

/* Menerapkan style footer */
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="header">
  <h1>Header</h1>
  <p>Ubah ukuran browser untuk melihan efek responsif.</p>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

<div class="baris">
  <div class="kolom samping">
    <h2>Side</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
  </div>
  
  <div class="kolom tengah">
    <h2>Main Content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>

  <div class="kolom samping">
    <h2>Side</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
  </div>
</div>

<div class="footer">
  <p>Footer</p>
</div>

</body>
</html>

Hasilnya:

Tata Letak Halaman Web yang Responsif

Dengan menggunakan beberapa kode CSS di atas, kita akan membuat tata letak situs web responsif, yang bervariasi antara dua kolom dan kolom yang memiliki lebar penuh (full-width) tergantung pada lebar layar.

Contoh

* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}

/* Header/Blog Title */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}

.header h1 {
  font-size: 50px;
}

/* Menerapkan style pada navigation bar atas */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Menerapkan style di link pada navigation bar atas */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Menguah warna saat navbar disentuh */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Buat dua kolom berbeda yang mengapung di sebelah satu sama lain
 */
/* Kolom kiri */
.kolomkiri {   
  float: left;
  width: 75%;
}

/* Kolom kanan */
.kolomkanan {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}

/* Gambar */
.gambar {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Menambahkan efek gambar pada artikel */
.kartunama {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* Menghapus float setelah kolom */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

/* Responsive layout - Saat lebar layar kurang dari 800px, buat dua kolom bertumpuk satu sama lain alih-alih bersebelahan */
@media screen and (max-width: 800px) {
  .kolomkiri, .kolomkanan {   
    width: 100%;
    padding: 0;
  }
}

/* Responsive layout - Saat lebar layar kurang dari 400px, buat navigasi  link saling bertumpukan, bukan bersebelahan */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="header">
  <h1>Selamat Datang di Website Saya</h1>
</div>

<div class="topnav">
  <a href="#">Home</a>
  <a href="#">Contact</a>
  <a href="#">Profil</a>
  <a href="#" style="float:right">About Us</a>
</div>

<div class="row">
  <div class="kolomkiri">
    <div class="kartunama">
      <h2>JUDUL</h2>
      <h5>Deskripsi judul, 31 Desember 2018</h5>
      <div class="gambar" style="height:200px;">Gambar</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
    <div class="kartunama">
      <h2>JUDUL</h2>
      <h5>Deskripsi judul, 30 Desember 2018</h5>
      <div class="gambar" style="height:200px;">Gambar</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
  </div>
  <div class="kolomkanan">
    <div class="kartunama">
      <h2>About Me</h2>
      <div class="gambar" style="height:100px;">Gambar</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="kartunama">
      <h3>Popular Post</h3>
      <div class="gambar"><p>Gambar</p></div>
      <div class="gambar"><p>Gambar</p></div>
      <div class="gambar"><p>Gambar</p></div>
    </div>
    <div class="kartunama">
      <h3>Follow Me</h3>
      <p>Lorem ipsum dolor sit amet,</p>
    </div>
  </div>
</div>

<div class="footer">
  <h2>Footer</h2>
</div>

</body>
</html>

Hasilnya:

Demikian pembahasan mengenai layout (tata letak) halaman web menggunakan HTML dan didesain menggunakan CSS.

Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 30 - Desain Form dengan CSS

noreply@blogger.com (Octavianus Hasan) — Fri, 28 Dec 2018 23:59:00 +0800

CSS Form

Form atau bisa juga disebut sebagai daftar isian merupakan salah satu elemen yang digunakan untuk memasukan atau menginput data pada sebuah website.

Form sangat berguna dalam sebuah website, karena dengan adanya form sebuah halaman web menjadi web interaktif dan dinamis. Form juga merupakan satu-satunya sarana bagi pengembang website untuk mendapatkan informasi dari pengguna.

Tampilan form pada HTML dapat didesain dengan menggunakan CSS sehingga memperoleh tampilan yang menarik.

Contoh

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

<!DOCTYPE html>
<html>
<body>

<h3>Menggunakan CSS untuk menerapkan styling pada Form di HTML</h3>
<div>
  <form>
    <label for="nama_depan">Nama Depan</label>
    <input type="text" id="nama_depan" name="nama_depan" placeholder="Nama depan...">
    <label for="nama_belakang">Nama Belakang</label>
    <input type="text" id="nama_belakang" name="nama_belakang" placeholder="Nama belakang...">

    <label for="negara">Negara</label>
    <select id="negara" name="negara">
      <option value="indonesia">Indonesia</option>
      <option value="brunei">Brunei Darussalam</option>
      <option value="malaysia">Malaysia</option>
    </select>

    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>

Hasilnya:

Memberikan Efek pada Kolom Input

Gunakan properti width untuk menentukan lebar pada kolom input.

Contoh

input {
  width: 100%;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Kolom input dengan lebar full:</p>

<form>
  <label for="nama_depan">Nama Depan</label>
  <input type="text" id="nama_depan" name="nama_depan">
</form>

</body>
</html>

Hasilnya:

Contoh di atas berlaku untuk semua elemen <input>. Jika kita hanya ingin menerapkan efek pada jenis kolom input tertentu, kita dapat menggunakan atribut selector:

input[type=text] - hanya akan memilih kolom teks
input[type=password] - hanya akan memilih kolom kata sandi
input[type=number] - hanya akan memilih kolom dengan tipe nomor / angka

Menambahkan Ruang pada Kolom Input

Gunakan properti padding untuk menambahkan ruang di dalam kolom teks. Bila ingin menambahkan ruang di luar kolom teks, gunakan properti margin.

Contoh

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Menambahkan ruang pada kolom input:</p>

<form>
  <label for="nama_depan">Nama Depan</label>
  <input type="text" id="nama_depan" name="nama_depan">
  <label for="lname">Nama Belakang</label>
  <input type="text" id="nama_belakang" name="nama_belakang">
</form>

</body>
</html>

Hasilnya:

Menambahkan dan mengubah Tampilan Border pada Kolom Input

Gunakan properti border untuk mengubah ukuran perbatasan (border) dan warna, dan menggunakan properti border-radius untuk menambahkan lengkungan pada sudut kotak kolom input ataupun button (tombol).

Contoh

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid red;
  border-radius: 4px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Kolom input yang memiliki border:</p>

<form>
  <label for="nama_depan">Nama Depan</label>
  <input type="text" id="nama_depan" name="nama_depan">
  <label for="lname">Nama Belakang</label>
  <input type="text" id="nama_belakang" name="nama_belakang">
</form>

</body>
</html>

Hasilnya:

Jika kita hanya ingin menambahkan border bawah, gunakan properti border-bottom.

Contoh

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid red;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Kolom input yang hanya memiliki border sisi bawah:</p>

<form>
  <label for="nama_depan">Nama Depan</label>
  <input type="text" id="nama_depan" name="nama_depan">
  <label for="lname">Nama Belakang</label>
  <input type="text" id="nama_belakang" name="nama_belakang">
</form>

</body>
</html>

Hasilnya:

Menambahkan Warna pada Kolom Input

Gunakan properti background-color untuk menambahkan warna latar belakang pada kolom input, dan properti color untuk mengubah warna teks.

Contoh

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  background-color: #3CBC8D;
  color: white;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Mewarnai kolom input:</p>

<form>
  <label for="nama_depan">Nama Depan</label>
  <input type="text" id="nama_depan" name="nama_depan" value="Okta">
  <label for="lname">Nama Belakang</label>
  <input type="text" id="nama_belakang" name="nama_belakang" value="Hasan">
</form>

</body>
</html>

Hasilnya:

Membuat Kolom Input agar Terfokus

Secara default, beberapa browser akan menambahkan garis biru di sekitar kolom input pada saat kita mengklik kolom input. Kita dapat menghapus garis biru tersebut dengan menambahkan outline: none;input.

Gunakan selector :focus agar kolom input ketika diklik akan terfokus.

Contoh

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid #555;
  outline: none;
}
input[type=text]:focus {
  background-color: lightblue;
}

<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>

<p>Dalam contoh ini menggunakan selector :fokus untuk menambahkan warna latar belakang ke kolom input saat kolom diklik:</p>

<form>
  <label for="nama_depan">Nama Depan</label>
  <input type="text" id="nama_depan" name="nama_depan" value="Okta">
  <label for="nama_belakang">Last Name</label>
  <input type="text" id="nama_belakang" name="nama_belakang" value="Hasan">
</form>

</body>
</html>

Hasilnya:

Kolom Input Menggunakan Icon / Gambar

Jika kita ingin sebuah ikon berada dalam kolom input, gunakan properti background-image dan atur posisinya dengan menggunakan properti background-position.

Juga perhatikan bahwa kita menambahkan padding pada sisi kiri dengan ukuran lebih besar sehingga ruang ikon dalam kolom tidak ditempati oleh teks.

Contoh

input[type=text] {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url("https://img.icons8.com/metro/26/000000/search.png");
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Kolom input memiliki icon gambar:</p>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

Hasilnya:

Animasi pada Kolom Input

Dalam contoh ini kita menggunakan properti CSS transition untuk mengaktifkan lebar kolom input pencarian ketika diklik.

Contoh

input[type=text] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url("https://img.icons8.com/metro/26/000000/search.png");
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Animasi pada kolom pencarian:</p>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

Hasilnya:

Menerapkan Efek pada Textarea

Secara default, teks area memiliki "grabber" pada pojok kanan bawah. Grabber ini adalah untuk mengubah ukuran teks area pada saat kita arahkan mouse, kemudian klik, tahan dan geser (scroll).

Gunakan properti resize untuk mencegah / menonaktifkan grabber di pojok kanan bawah teks area.

Contoh

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p><strong>Tips:</strong> Gunakan properti resize untuk mencegah / menonaktifkan grabber di pojok kanan bawah teks area.: </p>

<form>
  <textarea>Some text...</textarea>
</form>

</body>
</html>

Hasilnya:

Menambahkan Efek pada Menu Pilihan

Contoh

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;


<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Menerapkan styling pada menu pilihan.</p>

<form>
  <select id="negara" name="negara">
  <option value="id">Indonesia</option>
  <option value="bn">Brunei Darussalam</option>
  <option value="my">Malaysia</option>
  </select>
</form>

</body>
</html>

Hasilnya:

Menambahkan Efek pada Tombol Input (Button)

Contoh

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
/* Tips: gunakan width: 100%; untuk menerapkan ukuran lebar tombol (button) menjadi full halaman */

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Menambahkan Efek pada Tombol Input (Button):</p>

<input type="button" value="Button">
<input type="reset" value="Reset">
<input type="submit" value="Submit">

</body>
</html>

Hasilnya:

Form Responsif

Ubah ukuran jendela browser untuk melihat efeknya. Contoh berikut menggunakan query media untuk membuat formulir responsif.

Contoh

* {
  box-sizing: border-box;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Menghapus float setelah kolom */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - Saat layar kurang dari 600px, maka kolom tidak saling bersebelahan */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}


<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Responsive Form</h2>
<p>Ubah ukuran jendela browser untuk melihat efeknya. Ketika layar kurang dari 600px lebar, buat dua kolom bertumpuk di atas satu sama lain, bukan di sebelah satu sama lain.</p>

<div class="container">
  <form>
  <div class="row">
    <div class="col-25">
      <label for="nama_depan">Nama Depan</label>
    </div>
    <div class="col-75">
      <input type="text" id="nama_belakang" name="nama_depan" placeholder="Nama depan...">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="nama_belakang">Nama Belakang</label>
    </div>
    <div class="col-75">
      <input type="text" id="nama_belakang" name="nama_belakang" placeholder="Nama belakang..">
    </div>
  </div>

  <div class="row">
    <div class="col-25">
      <label for="negara">Negara</label>
    </div>

    <div class="col-75">
      <select id="negara" name="negara">
        <option value="indonesia">Indonesia</option>
        <option value="brunei">Brunei Darussalam</option>
        <option value="malaysia">Malaysia</option>
      </select>
    </div>
  </div>

  <div class="row">
    <div class="col-25">
      <label for="subject">Subject</label>
    </div>

    <div class="col-75">
      <textarea id="subject" name="subject" placeholder="Tulis sesuatu disini.." style="height:200px"></textarea>
    </div>
  </div>
  <div class="row">
    <input type="submit" value="Submit">
  </div>
  </form>
</div>

</body>
</html>

Hasilnya

Demikian pembahasan mengenai membuat form dan menambahkan efek pada form menggunakan CSS.

Semoga Bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 29 - Attribute Selector

noreply@blogger.com (Octavianus Hasan) — Mon, 13 Aug 2018 23:00:00 +0800

CSS Attribute Selector

Attribute Selector adalah selector CSS yang digunakan untuk mencari dan menata elemen HTML dengan menggunakan nilai attribut dari tag HTML.

Untuk menggunakan attribute selector, kita menulisnya di dalam tanda kurung siku, seperti contoh berikut ini: [href], img[width=”200px”] atau [href$=”.pdf”].

CSS Selector [attribute]

Selector [attribute] digunakan untuk memilih elemen dengan atribut yang ditentukan.

Contoh berikut memilih semua elemen <a> dengan atribut target:

Contoh

a[target] {
    background-color: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Link dengan atribut target akan memiliki latar belakang kuning:</p>

<a href="https://www.youtube.com">youtube.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

<p><b>Catatan:</b> Untuk [<i>attribute</ i>] agar berfungsi di IE8 dan versi sebelumnya, DOCTYPE harus dideklarasikan. </ p>

</body>
</html>

Hasilnya:

CSS Selector [attribute="value"]

Selector [attribute="value"] digunakan untuk memilih elemen dengan atribut dan nilai tertentu.

Contoh berikut akan memilih semua elemen <a> dengan atribut target="_ blank":

Contoh

a[target=_blank] {
    background-color: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Link dengan target="_blank" akan memiliki latar belakang kuning:</p>

<a href="https://www.youtube.com">youtube.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

<p><b>Catatan:</b> Untuk [<i>attribute</ i>] agar berfungsi di IE8 dan versi sebelumnya, DOCTYPE harus dideklarasikan. </ p>

</body>
</html>

Hasilnya:

CSS Selector [attribute~="value"]

Selector [attribute~="value"] digunakan untuk memilih elemen dengan nilai atribut yang "mengandung" kata tertentu.

Contoh berikut memilih semua elemen dengan atribut judul yang berisi daftar kata yang dipisahkan spasi, salah satunya adalah "bunga":

Contoh

[title~=gerak] {
    border: 5px solid yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Semua gambar dengan atribut judul yang mengandung kata "gerak" mendapat garis kuning.</p>

<img src="nama_gambar.jpg" title="title_gambar" width="150" height="113">
<img src="nama_gambar.gif" title="gerak" width="224" height="162">
<img src="nama_gambar.gif" title="gambar gerak" width="200" height="240">

<p><b>Catatan:</b> Untuk [<i>attribute</i>~=<i>value</i>] agar berfungsi di IE8 dan versi sebelumnya, DOCTYPE harus dideklarasikan.</p>

</body>
</html>

Hasilnya:

CSS Selector [attribute|="value"]
Selector [attribute|="value"] digunakan untuk memilih elemen dengan atribut yang ditentukan dimulai dengan nilai tertentu.

Contoh berikut memilih semua elemen dengan nilai atribut class yang diawali dengan "top":

Catatan: Value harus berupa seluruh kata, baik hanya satu kata, seperti class="top", atau diikuti oleh tanda hubung (-), seperti class="top-text"!

Contoh

[class|=top] {
    background: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1 class="top-header">Welcome</h1>
<p class="toptext">Hello world!</p>
<p class="top-content">Apakah Anda suka belajar CSS?</p>

<br>
<p><b>Catatan:</b> Untuk [<i>attribute</i>|=<i>value</i>] agar berfungsi di IE8 dan versi sebelumnya, DOCTYPE harus dideklarasikan.</p>

</body>
</html>

Hasilnya:

CSS Selector [attribute^="value"]

Selector [attribute^="value"] digunakan untuk memilih elemen yang nilai atributnya dimulai dengan nilai yang ditentukan.

Contoh berikut memilih semua elemen dengan nilai atribut kelas yang diawali dengan "top":

Catatan: Nilai tidak harus berupa kata utuh!

Contoh

[class^="top"] {
    background: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

<p><b>Catatan:</b> Untuk [<i>attribute</i>^=<i>value</i>] agar berfungsi di IE8 dan versi sebelumnya, DOCTYPE harus dideklarasikan.</p>

</body>
</html>

Hasilnya:

CSS Selector [attribute$="value"]

Selector [attribute$="value"] digunakan untuk memilih elemen yang nilai atributnya diakhiri dengan nilai yang ditentukan.

Contoh berikut memilih semua elemen dengan nilai atribut class yang diakhiri dengan "test":

Catatan: Nilai tidak harus berupa kata utuh!

Contoh

[class$="test"] {
    background: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="first_test">Elemen div yang pertama.</div>
<div class="second">Elemen div yang kedua.</div>
<div class="my-test">Elemen div yang ketiga.</div>
<p class="mytest">Ini adalah teks di sebuah paragraf.</p>

</body>
</html>

Hasilnya:

CSS Selector [attribute*="value"]

Selector [attribute*="value"] digunakan untuk memilih elemen yang nilai atributnya berisi nilai yang ditentukan.

Contoh berikut memilih semua elemen dengan nilai atribut class yang berisi "te":

Catatan: Nilai tidak harus berupa kata utuh!

Contoh

[class*="te"] {
    background: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="first_test">Elemen div yang pertama.</div>
<div class="second">Elemen div yang kedua.</div>
<div class="my-test">Elemen div yang ketiga.</div>
<p class="mytest">Ini adalah teks di sebuah paragraf.</p>

</body>
</html>

Hasilnya:

Styling Form

Selector attribute dapat berguna untuk menata form / formulir tanpa menggunakan class atau ID.

Contoh

input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type="button"] {
    width: 120px;
    margin-left: 35px;
    display: block;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<form name="input" action="" method="get">
  Nama depan:<input type="text" name="Nama" value="Okta" size="20">
  Nama belakang:<input type="text" name="Nama" value="Hasan" size="20">
  <input type="button" value="Masuk">
</form>

</body>
</html>

Hasilnya:

Tips: Kunjungi tutorial CSS Form untuk lebih banyak belajar tentang bagaimana menata Form menggunakan CSS.

Demikian pembahasan mengenai Attriute Selector pada CSS.
Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 28 - Membuat Galeri Gambar (Image Gallery)

noreply@blogger.com (Octavianus Hasan) — Sun, 12 Aug 2018 22:54:00 +0800

CSS Image Gallery

CSS Image Gallery dapat digunakan untuk membuat sebuah galeri gambar yang didesain menggunakan CSS sehingga bisa memperoleh hasil yang menarik.

Galeri gambar berikut ini dibuat dengan menggunakan HTML dan CSS:

Contoh

div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="gallery">
  <a target="_blank" href="nama_gambar.jpg">
    <img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="600" height="400">
  </a>
  <div class="desc">Tambahkan deskripsi gambar disini</div>
</div>

<div class="gallery">
  <a target="_blank" href="nama_gambar.jpg">
    <img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="600" height="400">
  </a>
  <div class="desc">Tambahkan deskripsi gambar disini</div>
</div>

<div class="gallery">
  <a target="_blank" href="nama_gambar.jpg">
    <img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="600" height="400">
  </a>
  <div class="desc">Tambahkan deskripsi gambar disini</div>
</div>

<div class="gallery">
  <a target="_blank" href="nama_gambar.jpg">
    <img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="600" height="400">
  </a>
  <div class="desc">Tambahkan deskripsi gambar disini</div>
</div>

</body>
</html>

Catatan: Jangan lupa masukkan gambar yang ukurannya sama, agar terlihat sama besar saat dibuka di browser.

Hasilnya kurang lebih seperti ini:

Demikian pembahasan mengenai cara membuat gallery image menggunakan HTML dan CSS.

Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 27 - Dropdown Menu

noreply@blogger.com (Octavianus Hasan) — Sun, 12 Aug 2018 03:03:00 +0800

CSS dropdown

Dropdown adalah elemen kontrol grafis pada halaman web yang mirip dengan kotak list yang memungkinkan pengguna untuk memilih salah satu nilai dari list tersebut.

Dropdown dasar

Di bawah ini merupakan contoh dari kotak dropdown yang muncul saat pengguna menggerakkan mouse di atas elemen tersebut.

Contoh

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Gerakkan mouse ke teks di bawah ini untuk membuka konten dropdown.</p>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

</body>
</html>

Hasilnya:

Penjelasan dari contoh di atas:

untuk kode HTML

Gunakan setiap elemen untuk membuka konten dropdown, misalnya elemen <span> atau <button>.

Gunakan elemen container (seperti <div>) untuk menciptakan konten dropdown dan menambahkan apapun yang kita inginkan di dalamnya.

Bungkus elemen <div> di sekitar elemen untuk menempatkan konten dropdown dengan benar dengan CSS.

untuk kode CSS

Class .dropdown menggunakan position:relative, yang diperlukan ketika kita ingin konten dropdown ditempatkan tepat di bawah tombol dropdown (menggunakan position:absolute).

Class .dropdown-content berisi konten dropdown yang sebenarnya. Ini disembunyikan secara default, dan akan ditampilkan di hover (lihat di bawah). Perhatikan bahwa lebar minimum ditetapkan menjadi 160 piksel. Jangan ragu untuk mengubahnya.

Tips: Jika kita ingin lebar konten dropdown selebar tombol dropdown, atur lebar menjadi 100% (dan overflow:auto untuk mengaktifkan scroll pada layar kecil).

Selector :hover digunakan untuk menampilkan menu dropdown ketika pengguna menggerakkan mouse ke tombol dropdown.

Menu dropdown

Membuat menu dropdown yang memungkinkan pengguna untuk memilih opsi dari tiap list.

Contoh di bawah ini mirip dengan yang sebelumnya, kecuali bahwa kita menambahkan link di dalam kotak dropdown dan menatanya agar cocok dengan tombol dropdown yang telah ditata.

Contoh

.dropbtn {
    background-color: #007399;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #00ace6}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #00ace6;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Dropdown Menu</h2>
<p>Gerakkan mouse ke teks di bawah ini untuk membuka konten dropdown.
</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<p><strong>Catatan:</strong> Kita menggunakan href="#" untuk mengetes link.</p>

</body>
</html>

Hasilnya:

Right-aligned Dropdown Content

Right-aligned Dropdown Content adalah penyelarasan menu dropdown ke kanan.

Jika kita ingin menu dropdown berawal dari kanan ke kiri, bukan dari kiri ke kanan, tambahkan right: 0;

Contoh

.dropbtn 
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Aligned Dropdown Content</h2>
<p>Tentukan apakah konten dropdown harus berawal dari kiri ke kanan atau kanan ke kiri dengan menggunakan properti left dan right.</p>

<div class="dropdown" style="float:left;">
  <button class="dropbtn">Left</button>
  <div class="dropdown-content" style="left:0;">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<div class="dropdown" style="float:right;">
  <button class="dropbtn">Right</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

Hasilnya:

Dropdown Gambar

Dibawah ini adalah cara menambahkan gambar dan konten lainnya dalam kotak dropdown.

Contoh

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.desc {
    padding: 15px;
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Dropdown Image</h2>
<p>Gerakkan mouse ke teks di bawah ini untuk membuka konten dropdown.</p>

<div class="dropdown">
  <img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="100" height="50">
  <div class="dropdown-content">
    <img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="300" height="200">
    <div class="desc">Deskripsi Gambar</div>
  </div>
</div>

</body>
</html>

Hasilnya:

Demikian pembahasan mengenai cara membuat dropdown menu yang di tata menggunakan CSS.

Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 26 - Navigation Bar

noreply@blogger.com (Octavianus Hasan) — Sat, 11 Aug 2018 23:32:00 +0800

CSS Navigation Bar

Navigation bar adalah menu navigasi yang dimaksudkan untuk membantu pengunjung situs web dalam mengakses informasi. Hal penting untuk setiap situs web adalah dengan adanya navigation bar yang mudah digunakan oleh pengguna.

Dengan menggunakan CSS, kita dapat mengubah menu HTML yang terlihat membosankan menjadi navigation bar yang menarik.

Navigasi Bar = Daftar Link

Sebuah navigasi bar memerlukan HTML standar sebagai dasar / basis. Jadi, kita membangun navigasi bar dari HTML standar terlebih dahulu.

Sebuah navigasi bar pada dasarnya adalah terdiri dari satu atau beberapa link, sehingga menggunakan elemen <ul> dan <li>.

Dalam contoh ini, kita akan membuat navigasi bar dari daftar HTML standar.

Contoh

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>Catatan: Kita menggunakan href="#" untuk menguji link.</p>

</body>
</html>

Hasilnya:

Sekarang mari kita menghapus bullet (tanda bulat hitam), margin dan padding dari daftar link tersebut:

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Pada contoh ini, kita menghapus bullet (titik hitam) dari list, default padding dan margin ditentukan secara default.</p>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya:

Penjelasan dari contoh di atas:

list-style-type: none; untuk menghilangkan bullet (titik hitam). Navigasi bar tidak memerlukan penanda list item
Setel margin: 0; dan padding: 0; untuk menghapus pengaturan default browser

Kode dalam contoh di atas adalah kode standar yang digunakan pada navigasi bar vertikal dan horizontal.

Vertikal Navigation Bar

Untuk membangun sebuah navigasi bar vertikal, kita dapat mengatur elemen <a> di dalam list, selain dari kode di atas:

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li a {
    display: block;
    width: 60px
    background-color: #dddddd;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>Warna latar belakang ditambahkan ke link untuk menunjukkan area link.</p>
<p>Perhatikan bahwa seluruh area link dapat diklik, bukan hanya teks.</p>

</body>
</html>

Hasilnya:

Penjelasan dari contoh di atas:

display: block;

Menampilkan link sebagai elemen block membuat seluruh area link yang dapat diklik (bukan hanya teks), dan ini memungkinkan kita untuk menentukan width (lebar), padding, margin, height (tinggi), dll.

width: 60px;

Elemen Block mengambil lebar secara keseluruhan yang tersedia secara default.

Kita juga dapat mengatur lebar <ul>, dan menghapus lebar <a>, karena mereka akan mengambil lebar penuh yang tersedia ketika ditampilkan sebagai elemen block. Ini akan menghasilkan hasil yang sama seperti pada contoh sebelumnya.

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60px;
} 

li a {
    display: block;
    background-color: #dddddd;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>Warna latar belakang ditambahkan ke link untuk menunjukkan area link.</p>
<p>Perhatikan bahwa seluruh area link dapat diklik, bukan hanya teks.</p>

</body>
</html>

Hasilnya:

Contoh Navigation Bar Vertikal

Pada contoh di bawah ini, kita membuat navigasi bar vertikal dasar dengan warna latar belakang abu-abu dan mengubah warna latar belakang link ketika pengguna menggerakkan mouse di atas link tersebut.

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

/* Mengubah link saat disentuh mouse */
li a:hover {
    background-color: #555;
    color: white;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Vertical Navigation Bar</h2>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya:

Active / Current Navigasi Link

Tambahkan class "active" ke link saat ini untuk memberitahu pengguna agar mengetahui di halaman mana dia berada.

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Vertical Navigation Bar</h2>
<p> Dalam contoh ini, kita membuat class "active" dengan warna latar hijau dan teks putih. Class ditambahkan ke link "Beranda".</ P>

<ul>
  <li><a class="active" href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya:

Memposisikan Link di Tengah & Menambakan Borders

Tambahkan text-align: center; ke <li> atau <a> untuk menempatkan link ke tengah.

Tambahkan properti border ke <ul> untuk menambahkan garis di sekitar navigasi bar. Jika kita juga ingin border di dalam navigasi bar, tambahkan border-bottom untuk semua elemen <li>, kecuali <li> yang terakhir.

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    border: 1px solid #555;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li {
    text-align: center;
    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}

li a.active {
    background-color: #4dd2ff;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Vertical Navigation Bar</h2>
<p>Dalam contoh ini, kita memposisikan link navigasi dan menambahkan border ke navigasi bar.</p>

<ul>
  <li><a class="active" href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya:

Full-height Tetap Vertikal Navbar

Pada contoh berikut kita akan membuat sebuah navigasi bar secara full-height, dan memiliki side navigasi "sticky".

Contoh

body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4dd2ff;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a class="active" href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">

<h2>Memperbaiki Full-height Side Nav</h2>
  <h3>Coba gulir area ini, dan lihat bagaimana sidenav menempel ke halaman</h3>

  <p> Perhatikan bahwa elemen div ini memiliki margin kiri 25%. Ini karena navigasi samping diatur ke lebar 25%. Jika kita menghapus margin, sidenav akan overlay / duduk di atas div ini. </p>
  <p> Juga perhatikan bahwa kami telah mengatur sidenav ke overflow: auto. Ini akan menambahkan scroll bar ketika sidenav terlalu panjang (misalnya jika memiliki lebih dari 50 tautan di dalamnya). </ P>
  <p>Teks yang lain...</p>
  <p>Teks yang lain...</p>
  <p>Teks yang lain...</p>
  <p>Teks yang lain...</p>
  <p>Teks yang lain...</p>
  <p>Teks yang lain...</p>
  <p>Teks yang lain...</p>
  <p>Teks yang lain...</p>
  <p>Teks yang lain...</p>
  <p>Teks yang lain...</p>
  <p>Teks yang lain...</p>
</div>

</body>
</html>

Hasilnya:

Catatan: Contoh ini mungkin tidak bekerja dengan baik pada perangkat mobile.

Navigasi Bar Horizontal

Ada dua cara untuk membuat sebuah navigasi bar horizontal. Menggunakan inline atau floating daftar item.

Inline List Item

Salah satu cara untuk membangun sebuah navigasi bar horizontal adalah untuk menentukan elemen <li> sebagai inline, di samping kode "standard" di atas.

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya:

Penjelasan dari contoh di atas:

display: inline;

Secara default, elemen <li> adalah elemen block. Di sini, kita menghapus baris baru sebelum dan sesudah disetiap list item, untuk menampilkan tiap isi dari elemen tersebut pada satu baris.

Floating List Item

Cara lain untuk menciptakan sebuah navigasi bar horizontal adalah untuk memberikan float ke elemen <li>, dan menentukan layout untuk link navigasi.

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

li a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p><b>Catatan:</b> Jika DOCTYPE tidak ditentukan, item floating dapat menghasilkan hasil yang tidak diharapkan.</p>
<p>Warna latar belakang ditambahkan ke link untuk menunjukkan area link. Seluruh area link dapat diklik, bukan hanya teks. </ P>
<p><b>Catatan:</b> overflow: hidden; ditambahkan ke elemen <ul> untuk mencegah elemen <li> keluar dari list.</p>

</body>
</html>

Hasilnya:

Penjelasan dari contoh di atas:

float: left;

Penggunaan float untuk mendapatkan elemen-elemen block berada di sisi / samping satu sama lain

display: block;

Menampilkan link sebagai elemen block membuat seluruh area link yang dapat diklik (bukan hanya teks), dan ini memungkinkan kita untuk menentukan width (lebar), padding, margin, height (tinggi), dll

padding: 8px;

Sejak elemen blok mengambil lebar penuh yang tersedia, mereka tidak bisa mengapung di samping satu sama lain. Oleh karena itu, tentukan beberapa padding untuk membuat mereka terlihat baik

background-color: #dddddd;

Menambahkan warna background abu-abu ke setiap elemen

Tips: Tambahkan background-color ke <ul>, bukan hanya untuk setiap elemen <a> jika kita ingin mewarnai lebar sepenuhnya latar belakang.

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #dddddd;
}

li {
    float: left;
}

li a {
    display: block;
    padding: 8px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>Warna latar belakang ditambahkan ke list, bukan hanya untuk setiap link, tapi untuk menentukan warna latar secara penuh sesuai lebar dari halaman. </p>
<p><b>Catatan: </ b> overflow: hidden; ditambahkan ke elemen <ul> untuk mencegah elemen <li> keluar dari list.</p>

</body>
</html>

Hasilnya:

Contoh Navigasi Bar Horizontal

Pada contoh di bawah ini, kita membuat navigasi bar horizontal dasar dengan warna latar belakang gelap dan mengubah warna latar belakang dari link ketika pengguna menggerakkan mouse di atasnya.

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a class="active" href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya:

Active / Current Navigasi Link

Tambahkan class "active" ke link saat ini untuk memberitahu pengguna agar mengetahui di halaman mana dia berada.

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #3399ff;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a class="active" href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya:

Right-Align Link (Penyelarasan Link ke Kanan)

Right-align link yaitu dengan memberikan float untuk list item ke kanan (float:right;).

Contoh


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #3399ff;
}


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li style="float:right"><a href="#about" class="active">About</a></li>
</ul>

</body>
</html>

Penempatan href dan class jangan sampai tertukar. Apabila tertukar hasilnya tidak seperti yang diharapkan.

Hasilnya:

Border Dividers (Garis Pembagi)

Tambahkan properti border-right ke <li> untuk membuat garis pembagi link.

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
    border-right:1px solid #bbb;
}

li:last-child {
    border-right: none;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #3399ff;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a class="active" href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li style="float:right"><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya:

Fixed Navigation Bar

Pada contoh berikut, kita membuat navigasi bar tetap berada di bagian atas atau bawah halaman, bahkan ketika pengguna menggulir halaman.

Fixed Top

Contoh

body {margin:0;}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #3399ff;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a class="active" href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div style="padding:20px;margin-top:30px;background-color:#b3d9ff;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Gulir halaman ini untuk melihat efeknya </ h2>
<h2>Navigasi bar akan tetap berada di bagian atas halaman saat menggulir halaman </ h2>

<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>

</body>
</html>

Hasilnya:

Fixed Buttom

Contoh

body {margin:0;}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    bottom: 0;
    width: 100%;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #3399ff;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a class="active" href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div style="padding:20px;background-color:#b3d9ff;height:1500px;">
<h1>Fixed Bottom Navigation Bar</h1>
<h2>Gulir halaman ini untuk melihat efeknya </ h2>
<h2>Navigasi bar akan tetap berada di bagian bawa halaman saat menggulir halaman </ h2>

<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>

</body>
</html>

Hasilnya:

Catatan: Posisi "Fixed" mungkin tidak bekerja dengan baik pada perangkat mobile.

Gray Horizontal Navbar

Di bawah ini merupakan sebuah contoh dari navigasi bar horizontal abu-abu dengan border abu-abu tipis.

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

li {
    float: left;
}

li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #ddd;
}

li a.active {
    color: white;
    background-color: #3399ff;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a class="active" href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya:

Sticky Navbar (Navbar Menempel)

Gunakan position: sticky; ke <li> untuk membuat navbar sticky (lengket / menempel).

Elemen yang melekat antara relatif dan fixed, tergantung pada posisi gulir. Diposisikan relatif sampai posisi offset yang diberikan terpenuhi di viewport - kemudian "lengket" di tempat (seperti posisi: fixed).

Contoh

body {
    font-size: 28px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

.active {
    background-color: #3399ff;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="header">
  <h2>Scroll Ke bawah</h2>
  <p>Scroll ke bawah untuk melihat effect sticky.</p>
</div>

<ul>
  <li><a class="active" href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
</ul>

<h3>Contoh Sticky Navigation Bar</h3>
<p>Navbar akan <strong> menempel </strong> ke atas saat kita mencapai posisi gulirnya. </p>
<p><strong>Catatan: </strong>Internet Explorer, Edge 15 dan versi sebelumnya tidak mendukung pemosisian sticky. Safari membutuhkan awalan -webkit.</p>
<p>Teks di bawah ini hanyalah teks biasa untuk mengetes apaka efeknya akan working atau tidak.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>

</body>
</html>

Hasilnya:

Catatan: Internet Explorer, Edge 15 dan versi sebelumnya tidak mendukung position sticky. Safari membutuhkan awalan -webkit- (lihat contoh di atas). Kita juga harus menentukan setidaknya satu dari top, right, bottom atau left untuk penentuan posisi sticky agar working.

Demikian pembahasan mengenai cara membuat navigation bar dengan menambahkan CSS sehingga terlihat menarik.
Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 25 - Opacity

noreply@blogger.com (Octavianus Hasan) — Tue, 7 Aug 2018 02:38:00 +0800

CSS Opacity / Transparency

Properti opacity digunakan untuk menentukan opacity / transparansi dari sebuah elemen.

Berikut merupakan contoh dari penerapan properti opacity untuk menciptakan efek transparansi pada gambar:

Contoh

img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* Untuk IE8 and versi sebelumnya */
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Transparansi Gambar</h1>
<p>Properti opacity menetapkan transparansi elemen. Semakin rendah nilainya, semakin transparan: </ p>

<p>Gambar dengan 50% opacity:</p>
<img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="100">

</body>
</html>

Hasilnya:

Efek Hover Transparan

Properti opacity sering digunakan bersama-sama dengan selector :hover untuk mengubah opacity pada mouse-over. Mouse-over artinya ketika kita meletakkan mouse / kursor di atas elemen yang diberi efek transparansi, maka elemen tersebut akan berubah efek.

Contoh

img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* Untuk IE8 and versi sebelumnyar */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* Untuk IE8 and versi sebelumnya */
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Transparansi Gambar</h1>
<p>Properti opacity sering digunakan bersama dengan selector :hover untuk mengubah opacity pada mouse-over:</p>
<img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="100">
<img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="100">
<img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="100">

<p><b>Catatan: </b>Di IE, sebuah !DOCTYPE harus ditambahkan untuk selector :hover untuk bekerja pada elemen lain dari sebuah elemen</ p>

</body>
</html>

Hasilnya:

Berikut merupakan contoh penerapan efek hover terbalik:

Contoh

img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* Untuk IE8 and versi sebelumnya */
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Transparansi Gambar</h1>
<p>Properti opacity sering digunakan bersama dengan selector :hover untuk mengubah opacity pada mouse-over:</p>
<img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="100">
<img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="100">
<img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="100">

<p><b>Catatan: </b>Di IE, sebuah !DOCTYPE harus ditambahkan untuk selector :hover untuk bekerja pada elemen lain dari sebuah elemen</ p>

</body>
</html>

Hasilnya:

Transparent Box (Kotak transparan)

Transparansi Menggunakan Opacity
Bila menggunakan properti opacity untuk menambahkan transparansi untuk latar belakang sebuah elemen, maka semua elemen yang ada di dalam elemen tersebut akan mewarisi transparansi yang sama. Hal ini dapat membuat teks di dalam elemen sepenuhnya transparan sehingga sulit untuk dibaca.

Contoh

div {
    background-color: #3399ff;
    padding: 10px;
}

div.first {
    opacity: 0.1;
    filter: alpha(opacity=10); /* Untuk IE8 and versi sebelumnya */
}

div.second {
    opacity: 0.3;
    filter: alpha(opacity=30); /* Untuk IE8 and versi sebelumnya */
}

div.third {
    opacity: 0.6;
    filter: alpha(opacity=60); /* Untuk IE8 and versi sebelumnya */
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Kotak Transparan</h1>
<p>Saat menggunakan properti opacity untuk menambahkan transparansi ke latar belakang elemen, semua elemen turunannya menjadi transparan juga. Ini dapat membuat teks di dalam elemen transparan sepenuhnya sulit dibaca: </p>

<div class="first"><p>opacity 0.1</p></div>
<div class="second"><p>opacity 0.3</p></div>
<div class="third"><p>opacity 0.6</p></div>
<div><p>opacity 1 (default)</p></div>

</body>
</html>

Hasilnya:

Catatan: Perhatikan bahwa teks menjadi transparan seperti warna latar belakang saat menggunakan properti opacity.

Transparansi menggunakan RGBA

Jika kita tidak ingin menerapkan opacity ke isi dari elemen, seperti dalam contoh kita di atas, gunakan nilai warna RGBA.

Contoh berikut menetapkan opacity untuk warna latar belakang dan tidak teks:

Contoh

div {
    background: rgb(0,153,255);
    padding: 10px;
}

div.first {
    background: rgba(0,153,255,0.1);
}

div.second {
    background: rgba(0,153,255,0.3);
}

div.third {
    background: rgba(0,153,255,0.5);
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Kotak Transparan</h1>
<h3>Menggunakan opacity:</h3>
<div style="opacity:0.1;"><p>10% opacity</p></div>
<div style="opacity:0.3;"><p>30% opacity</p></div>
<div style="opacity:0.6;"><p>60% opacity</p></div>
<div><p>opacity 1</p></div>

<h3>Menggunakan nilai warna RGBA:</h3>
<div class="first"><p>10% opacity</p></div>
<div class="second"><p>30% opacity</p></div>
<div class="third"><p>60% opacity</p></div>
<div><p>default</p></div>

<p>Perhatikan bagaimana teks menjadi transparan serta warna latar belakang saat menggunakan properti opacity. </ p>

</body>
</html>

Hasilnya:

Catatan: Menggunakan nilai warna RGBA menampilkan hasil yang berbeda dengan menggunakan opacity.

Sebuah nilai warna RGBA ditentukan dengan: RGBA (merah, hijau, biru, alpha ). Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (sepenuhnya buram).

Teks dalam Kotak Transparan

Berikut merupakan langkah-langkah membuat teks transparan dalam sebuah kotak:
* Membuat elemen <div> (class="background") dengan gambar latar belakang dan sebuah border.
* Membuat <div> lain (class="transbox") dalam <div> pertama. <div class="transbox"> memiliki warna latar belakang dan sebuah border. Div ini adalah div transparan.
* Di dalam <div> transparan, kita menambahkan beberapa teks tepatnya di dalam elemen <p>.

Contoh

div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); /* Untuk IE8 and versi sebelumnya */
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>Ini adalah sebuah teks yang menempati kotak transparan.</p>
  </div>
</div>

</body>
</html>

Hasilnya:

Demikian pembahasan mengenai properti opacity dalam CSS.

Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 24 - Pseudo Element

noreply@blogger.com (Octavianus Hasan) — Tue, 7 Aug 2018 00:28:00 +0800

CSS Pseudo-element

Apa itu pseudo-element?
pseudo-element digunakan untuk menata bagian-bagian tertentu dari suatu elemen.

Sebagai contoh, pseudo-element dapat digunakan untuk:

Menerapkan style untuk huruf pertama, atau garis, dari suatu elemen
Memasukkan konten sebelum atau sesudah konten dari suatu elemen

Sintaks

Sintaks dari pseudo-element:

selector::pseudo-element {
    property:value;
}

Pseudo-element ::first-line

Pseudo-element ::first-line digunakan untuk menambah efek khusus pada baris pertama dari sebuah teks.

Contoh berikut penggunaan pseudo-element ::first-line pada baris pertama dari teks disemua elemen <p>.

Contoh

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Kita dapat menggunakan pseudo element ::first-line untuk menambahkan efek khusus pada baris pertama dari sebuah teks. Lebih banyak teks. Dan bahkan lebih, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan lebih banyak lagi, dan banyak lagi. </ P>

</body>
</html>

Hasilnya:

Catatan: pseudo-element ::first-line hanya dapat diterapkan untuk elemen-elemen block-level.

Properti berikut berlaku untuk pseudo-element ::first-line:

properti font
properti color
properti background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

Pseudo-element ::first-letter

Pseudo-element ::first-letter digunakan untuk menambah efek khusus pada huruf pertama dari teks.

Contoh berikut penggunaan pseudo-element ::first-letter pada huruf pertama dari teks di semua elemen <p>.

Contoh

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Kita dapat menggunakan pseudo-element ::first-letter untuk menambahkan efek khusus pada karakter pertama teks! </ p>

</body>
</html>

Hasilnya:

Catatan: pseudo-element ::first-letter hanya dapat diterapkan untuk elemen block-level.

Properti berikut berlaku untuk pseudo-element ::first-letter:

properti font
properti color
properti background
properti margin
properti padding
properti border
text-decoration
vertical-align (hanya jika "float" memiliki value "none")
text-transform
line-height
float
clear

Pseudo-element dan CSS Class

Pseudo-elemen dapat dikombinasikan dengan CSS Class.

Contoh

p.intro::first-letter {
    color: #ff0000;
    font-size:200%;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p class="intro">Ini adalah introduction.</p>
<p>Ini adalah sebuah paragraf dengan beberapa teks.</p>

</body>
</html>

Hasilnya:

Contoh di atas akan menampilkan huruf pertama paragraf dengan class="intro", berwarna merah dan dalam ukuran yang lebih besar.

Multiple pseudo-element
Beberapa pseudo-element juga bisa digabungkan.

Dalam contoh berikut, huruf pertama paragraf akan menjadi merah, dalam ukuran font huruf besar (xx-large). Sisa baris pertama berwarna biru, dan dalam huruf kecil (small-caps). Sisa paragraf akan menjadi ukuran dan warna font default.

Contoh

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Kita dapat menggabungkan pseudo-element ::first-letter dan ::first-line untuk menambahkan efek khusus pada huruf pertama dan baris pertama teks! </ p>

</body>
</html>

Hasilnya:

Pseudo-element ::before

Pseudo-element ::before dapat digunakan untuk memasukkan beberapa konten sebelum konten dari sebuah elemen.

Contoh berikut menyisipkan gambar sebelum isi / konten dari masing-masing elemen <h1>.

Contoh

h1::before {
    content: url(smiley.gif);
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading</h1>
<p>Pseudo-element ::before memasukkan konten sebelum konten suatu elemen.</p>

<h1>Ini adalah heading</h1>
<p><b>Catatan: </b>IE8 mendukung properti konten hanya jika DOCTYPE dideklarasikan. </ p>

</body>
</html>

Hasilnya:

Pseudo-element ::after

Pseudo-element ::after dapat digunakan untuk memasukkan beberapa konten setelah isi / konten sebuah elemen.

Contoh berikut menyisipkan gambar setelah isi / konten dari masing-masing elemen <h1>.

Contoh

h1::after {
    content: url(smiley.gif);
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading</h1>
<p>Pseudo-element ::after memasukkan konten setelah konten pada sebuah elemen. </p>

<h1>Ini adalah heading</h1>
<p><b>Catatan: </b>IE8 mendukung properti konten hanya jika DOCTYPE dideklarasikan. </ p>

</body>
</html>

Hasilnya:

Pseudo-element ::selection

Pseudo-element ::selection sesuai dengan porsi elemen yang dipilih oleh pengguna.

Properti CSS berikut dapat diterapkan ke ::selection : color, background, cursor, dan outline.

Contoh berikut ini membuat teks yang dipilih akan berwarna merah dan memiliki background berwarna kuning:

Contoh

::-moz-selection { /* Code untuk mozilla Firefox */
    color: red;
    background: yellow;
}

::selection {
    color: red;
    background: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Pilih beberapa teks di halaman ini:</h1>
<p>Ini adalah paragraf.</p>

<div>Ini adalah beberapa teks dalam elemen div.</div>

<p><strong>Catatan: </strong> ::selection tidak didukung di Internet Explorer 8 dan versi sebelumnya. </ p>
<p><strong>Catatan: </ strong> Firefox mendukung alternatif, properti :: - moz-selection. </ p>

</body>
</html>

Hasilnya:

Catatan: Pilih / blok beberapa teks yang diinginkan, maka akan berubah menjadi teks berwarna merah dan berlatar belakang kuning seperti pada gambar di atas.

Demikian pembahasan mengenai pseudo-element dalam CSS.
Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 23 - Pseudo Class

noreply@blogger.com (Octavianus Hasan) — Sun, 5 Aug 2018 01:19:00 +0800

CSS Pseudo-class

Apa itu pseudo-class?

pseudo-class digunakan untuk mendefinisikan keadaan tertentu dari suatu elemen.

Sebagai contoh, pseudo-class dapat digunakan untuk:

Menetukan style untuk elemen ketika pengguna meletakkan mouse di atas elemen tersebut
Menentukan style untuk link yang sudah dikunjungi dan belum dikunjungi, sehingga keduanya terlihat berbeda
Menentukan style untuk elemen saat kursor terfokus pada elemen tersebut

Sintaks

Sintaks dari pseudo-class:

selector: pseudo-class {
    property: value;
}

Pseudo Class Selector Untuk Link (Tautan)

:link Selector ini hanya akan memilih link yang ada href-nya sehingga memiliki cara kerja yang mirip dengan a[href].
:visited Memilih link yang sudah pernah dikunjungi di browser yang sedang digunakan.
:hover Saat kursor berada di atas sebuah link, link tersebut berada dalam status hover dan selector ini yang memilihnya.
:active Memilih link yang sedang aktif (sedang diklik). Misalnya, untuk menentukan sebuah link berada dalam status sedang ditekan atau membuat semua link menjadi seperti button.

Berikut merupakan contoh penggunaan pseudo class untuk link:

Contoh

/* link yang belum dikunjungi */
a:link {
    color: red;
}

/* link yang sudah dikunjungi */
a:visited {
    color: green;
}

/* ketika mouse di atas link */
a:hover {
    color: hotpink;
}

/* link yang aktif (sedang ditekan) */
a:active {
    color: blue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p><b><a href="https://king-octahasan.blogspot.com" target="_blank">Ini adalah sebuah link</a></b></p>

<p><b>Catatan:</b> a: hover HARUS muncul setelah a:link dan a:visited dalam definisi CSS agar menjadi efektif. </p>
<p><b>Catatan:</b> a:active HARUS muncul setelah a:hover dalam definisi CSS agar efektif. </p>

</body>
</html>

Hasilnya:

Catatan: a:hover HARUS muncul setelah a:link dan a:visited dalam definisi CSS agar menjadi efektif! a:active HARUS muncul setelah a:hover dalam definisi CSS agar menjadi efektif! Nama-nama pseudo-class tidak sensitif.

Pseudo Class Selector untuk Input

:focus Menentukan style menggunakan hover hanya akan berguna saat menggunakan mouse. Bila pengguna menggunakan keyboard untuk navigasi maka kita perlu memakai :focus untuk memilih link yang sedang terpilih. Opsi ini tidak hanya untuk link tapi dapat pula digunakan untuk input dan textarea.

Berikut merupakan contoh penggunaan :focus.

Contoh

input:focus {
    background-color: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<form>
  Nama Depan: <input type="text" name="nama_depan"><br>
  Nama Belakang: <input type="text" name="nama_belakang"><br>
  <input type="submit" value="Submit">
</form>

<p><b>Catatan:</b> IE8 mendukung pseudo-class :focus hanya jika deklarasi !DOCTYPE ditentukan.</p>

</body>
</html>

Hasilnya:

:target Pseudo class target dipakai bersama dengan Id dan bekerja saat hash tag di URL saat ini bertemu dengan nama Id. Jadi jika kita mengunjungi alamat www.situs.com/#home maka selector #home:target akan bertemu. Opsi ini sangat berguna bila kita membuat sebuah area menggunakan tab dimana setiap tab akan terhubung dengan hash tag dan mengaktifkan area panel berdasarkan selector yang sesuai dengan :target.

Contoh

:target {
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}


<!DOCTYPE html>
<html>
<head>
<title>Pseudo Class</title>
</head>
<body>

<h1>Ini adalah sebuah heading</h1>

<p><a href="#news1">Lompat ke New content 1</a></p>
<p><a href="#news2">Lompat ke New content 2</a></p>

<p> Klik pada link di atas dan selector  :target akan menyorot anchor HTML yang aktif saat ini. </ p>

<p id="news1">
<h2>New content 1...</h2>
<h2>New content 1...</h2>
<h2>New content 1...</h2>
<h2>New content 1...</h2>
<h2>New content 1...</h2>
<h2>New content 1...</h2>
<h2>New content 1...</h2>
<h2>New content 1...</h2>
<h2>New content 1...</h2>
<h2>New content 1...</h2>
<h2>New content 1...</h2>
<h2>New content 1...</h2>
<h2>New content 1...</h2>
<h2>New content 1...</h2>
<h2>New content 1...</h2>
<h2>New content 1...</h2>
<h2>New content 1...</h2>
<h2>New content 1...</h2>
</p>
<p id="news2">
<h2>New content 2...</h2>
<h2>New content 2...</h2>
<h2>New content 2...</h2>
<h2>New content 2...</h2>
<h2>New content 2...</h2>
<h2>New content 2...</h2>
<h2>New content 2...</h2>
<h2>New content 2...</h2>
<h2>New content 2...</h2>
<h2>New content 2...</h2>
<h2>New content 2...</h2>
<h2>New content 2...</h2>
<h2>New content 2...</h2>
<h2>New content 2...</h2>
<h2>New content 2...</h2>
<h2>New content 2...</h2>
<h2>New content 2...</h2>
<h2>New content 2...</h2>
<h2>New content 2...</h2>
<h2>New content 2...</h2>

</p>

<p><b>Catatan:</b> Internet Explorer 8 dan versi sebelumnya tidak mendukung selector :target.</p>

</body>
</html>

Hasilnya:

:enabled Memilih input yang berada dalam status enabled dan siap dipakai.
:disabled Memilih input yang berada dalam status disabled. Banyak browser menampilkan input dengan status disabled dengan warna keabu-abuan.

Berikut merupakan contoh penggunaan selector :enabled dan :disabled.

Contoh

input[type=text]:enabled {
    background: #ffff00;
}

input[type=text]:disabled {
    background: #dddddd;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<form>
Nama depan: <input type="text" value="Okta"><br>
Nama belakang: <input type="text" value="Hasan"><br>
Daerah asal: <input type="text" disabled="disabled" value="Gorontalo">
</form>

</body>
</html>

Hasilnya:

:checked Memilih checkbox yang sedang terpilih.

Berikut merupakan contoh penggunaan selector :checked.
Contoh

input:checked {
    height: 50px;
    width: 50px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<form>
  <input type="radio" checked="checked" value="pria" name="jenis_kelamin"> Pria<br>
  <input type="radio" value="wanita" name="jenis_kelamin"> Wanita<br>
  <input type="radio" value="wanita" name="jenis_kelamin"> Banci Kaleng<br>
  <input type="checkbox" checked="checked" value="Sepeda Motor"> Aku mempunya sebuah sepeda motor<br>
  <input type="checkbox" value="Laptop"> Aku mempunyai sebuah laptop
  <input type="checkbox" value="Laptop"> Aku mempunyai sebuah buku
  <input type="checkbox" value="Laptop"> Aku mempunyai sebuah pencil
</form>

</body>
</html>

Hasilnya:

:indeterminate Memilih radio button yang ada dalam status tidak ada yang terpilih (kondisi default saat suatu halaman baru di load).

Berikut merupakan contoh penggunaan selector :indeterminate.

Contoh

input, span.ya {
        color: blue;
      }
:indeterminate + span {
        color: red
      }

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body>

<h1>Wanita Idaman</h1>
<ul>
<input type="checkbox"><span>Solehah</span> <br />
<input type="checkbox"><span>Cantik</span> <br />
<input type="checkbox"><span class="ya">Cantik dan solehah</span> <br />
</ul>
</body>
</html>

Hasilnya:

Pseudo Class Selector Untuk Menentukan Posisi

root Memilih elemen yang menjadi root sebuah dokumen.

Contoh

:root {
    background: #20b2aa;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah sebuah heading</h1>

</body>
</html>

:first-child Memilih elemen pertama dalam sebuah parent.

Contoh

p:first-child {
    background-color: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p> Paragraf ini adalah anak pertama dari parentnya (body). </ p>

<h1> Selamat Datang di Beranda Saya </ h1>
<p> Paragraf ini bukan anak pertama dari parent. </ p>

<div>
  <p> Paragraf ini adalah anak pertama dari parentnya (div). </ p>
  <p> Paragraf ini bukan anak pertama dari parentnya. </ p>
</ div>

<p><b>Catatan:</b> Untuk :first-child agar working di IE8 dan versi sebelumnya, DOCTYPE harus dideklarasikan.</p>

</body>
</html>

Hasilnnya:

:last-child Memilih elemen terakhir dalam sebuah parent.

Contoh

p:last-child {
    background: #ff0000;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Paragraf pertama.</p>
<p>Paragraf kedua.</p>
<p>Paragraf ketiga.</p>
<p>Paragraf keempat.</p>

</body>
</html>

Hasilnya:

:nth-child() Memilih elemen berdasarkan ekspresi aljabar sederhana (seperti "2n", atau "4n-h1")

Contoh

p:nth-child(4) { 
    background: red;
} /*angka 4 bisa diganti dengan angka 1, 2, 3 (karena pada contoh ini hanya ada 4 paragraf*/

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Paragraf pertama.</p>
<p>Paragraf kedua.</p>
<p>Paragraf ketiga.</p>
<p>Paragraf keempat.</p>

<p><b>Catatan:</b> Internet Explorer 8 dan versi sebelumnya tidak mendukung selector :nth-child().</p>

</body>
</html>

Hasilnya:

:nth-of-type() Mirip seperti :nth-child tetapi dipakai saat elemen yang ada di dalam level yang sama menggunakan tipe yang berbeda. Misalnya didalam sebuah div kita ada beberapa paragraf dan gambar. Kita ingin memilih semua gambar yang ada di posisi ganjil. Opsi :nth-child tidak akan working di sini, kita akan memerlukan div img:nth-of-type(odd). Berguna sekali saat dipakai dalam sebuah list yang memiliki elemen <dt> dan <dd>.

Contoh

p:nth-of-type(3) {
    background: red;
} /*angka 3 bisa diganti dengan angka 1, 2, 4 (karena pada contoh ini hanya ada 4 paragraf*/

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Paragraf pertama.</p>
<p>Paragraf kedua.</p>
<p>Paragraf ketiga.</p>
<p>Paragraf keempat.</p>

</body>
</html>

Hasilnya:

:first-of-type Memilih elemen pertama di dalam parent mana pun. Jadi jika kita memiliki dua div yang didalamnya ada sebuah paragraf, gambar, paragraf, dan gambar. Maka div img:first-of-type akan memilih gambar (tag) pertama di dalam kedua div tersebut.

Contoh

p:first-of-type {
    background: red;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Paragraf pertama.</p>
<p>Paragraf kedua.</p>
<p>Paragraf ketiga.</p>
<p>Paragraf keempat.</p>

</body>
</html>

Hasilnya:

:last-of-type Kebalikan dari :first-of-type.

Contoh

p:last-of-type {
    background: #ff0000;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah sebuah heading</h1>
<p>Paragraf pertama.</p>
<p>Paragraf kedua.</p>
<p>Paragraf ketiga.</p>
<p>Paragraf keempat.</p>

</body>
</html>

Hasilnya:

:nth-last-of-type() Bekerja seperti :nth-of-type, tapi dimulai dari bawah.

Contoh

p:nth-last-of-type(2) {
    background: red;
} /*angka 2 bisa diganti dengan angka 1, 3, 4 (karena pada contoh ini hanya ada 4 paragraf*/

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Paragraf pertama.</p>
<p>Paragraf kedua.</p>
<p>Paragraf ketiga.</p>
<p>Paragraf keempat.</p>

<p><b>Catatan:</b> Internet Explorer 8 dan versi sebelumnya tidak mendukung selector :nth-last-of-type().</p>

</body>
</html>

Hasilnya:

:nth-last-child() Bekerja seperti :nth-child, tapi dimulai dari bawah.

Contoh

p:nth-last-child(2) {
    background: red;
} /*angka 2 bisa diganti dengan angka 1, 3, 4 (karena pada contoh ini hanya ada 4 paragraf*/

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Paragraf pertama.</p>
<p>Paragraf kedua.</p>
<p>Paragraf ketiga.</p>
<p>Paragraf keempat.</p>

<p><b>Catatan:</b>Internet Explorer 8 dan versi sebelumnya tidak mendukung selector :nth-last-child().</p>

</body>
</html>

Hasilnya:

:only-of-type Memilih suatu elemen apabila di dalam parent-nya tidak ada elemen lain yang sepertinya.

Contoh

p:only-of-type {
    background: red;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div><p>Ini adalah sebuah paragraf</p></div>
<div><p>Ini adalah sebuah paragraf.</p><p>Ini adalah sebuah paragraf.</p></div>

</body>
</html>

Hasilnya:

Pseudo Class Selector Relasi

:not() Mengeluarkan elemen yang terpilih berdasarkan selector yang ada di dalam parameter :not().

Contoh

p {
    color: #000000;
}

:not(p) {
    color: #ff0000;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah sebuah heading</h1>
<p>Ini adalah sebuah paragraf.</p>
<p>Ini adalah paragraf lain.</p>

<div>Ini adalah teks yang berada di dalam elemen div.</div>
<a href="https://king-octahasan.blogspot.com" target="_blank">Link ke  blog king_octahasan</a>

</body>
</html>

Hasilnya:

:empty Memilih elemen yang tidak mengandung teks apapun dan tidak ada elemen anak (child).

Contoh

p:empty {
    width: 100px;
    height: 20px;
    background: #ff0000;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p></p>
<p>Sebuah paragraf.</p>
<p>Paragraf lain.</p>

</body>
</html>

Hasilnya:

Demikian pembahasan mengenai pseudo class dalam CSS.

Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 22 - Combinator

noreply@blogger.com (Octavianus Hasan) — Thu, 2 Aug 2018 03:24:00 +0800

CSS Combinators

Combinator adalah sesuatu yang menjelaskan hubungan antara selector dalam kode CSS. Sebuah selector CSS dapat berisi lebih dari satu selector sederhana.

Ada empat combinator berbeda dalam CSS:

descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)

Descendant Selector

Descendant selector akan memilih semua elemen yang cocok berdasarkan keturunan dari elemen tertentu.

Contoh berikut memilih semua elemen <p> di dalam elemen <div>:

Contoh

div p {
    background-color: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div>
  <p>Paragraf 1 di dalam div.</p>
  <p>Paragraf 2 di dalam div.</p>
  <span><p>Paragraf 3 di dalam div.</p></span>
</div>

<p>Paragraf 4. di luar div.</p>
<p>Paragraf 5. di luar div.</p>

</body>
</html>

Hasilnya kurang lebih seperti ini:

Pada contoh di atas, teks yang berada dalam elemen <p> yang merupakan keturunan dari div memiliki background berwarna kuning, termasuk yang berada di dalam tag <span>. Karena tag <span> juga masih berada di dalam div.

Jadi, paragraf 1, 2 dan 3 akan memilik background berwarna kuning karena berada di dalam div. Sedangkan paragraf 4 dan 5 tidak berwarna, karena berada di luar div.

Child Selector

Child Selector memilih semua elemen yang merupakan turunan langsung dari elemen tertentu.

Contoh berikut memilih semua elemen <p> yang merupakan turunan langsung dari elemen <div>:

Contoh

div > p {
    background-color: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div>
  <p>Paragraf 1 di dalam div.</p>
 <span><p>Paragraf 2 di dalam div.</p></span> <!-- bukan keturunan langsung, tapi cucu -->
  <p>Paragraf 3 di dalam div.</p>
</div>

<p>Paragraf  4 di luar div.</p>
<p>Paragraf 5 di luar div.</p>

</body>
</html>

Hasilnya kurang lebih seperti ini:

Sesuai hasil dari contoh di atas, hanya paragraf 1 dan 3 saja yang memiliki background berwarna kuning. Paragraf 2 tidak memiliki background berwarna kungin karena paragraf 2 bukan keturunan langsung dari div. Akan tetapi keturunan langsung dari <span> atau bisa dibilang cucu dari div.

Adjacent Sibling Selector

Adjacent Sibling Selector memilih semua elemen yang merupakan saudara kandung (atau setingkat) dan berdekatan dengan elemen tertentu.

Contoh berikut memilih semua elemen <p> yang menempati tempat setelah elemen <div>:

Contoh

div + p {
    background-color: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div>
  <p>Paragraf 1 di dalam div</p>
  <p>Paragraf 2 di dalam div</p>
  <p>Paragraf 3 di dalam div</p>
</div>

<p>Paragraf 4 di luar div</p>
<p>Paragraf 5 di luar div</p>

</body>
</html>

Hasilnya kurang lebih seperti ini:

Sesuai hasil dari contoh di atas, hanya paragraf 4 yang memiliki background berwarna kuning. Paragraf 1, 2 dan 3 berada di dalam div, sehingga tidak satingkat dengan div dan merupakan turunan dari div.

Sedangkan paragraf 5, meskipun saudara (atau setingkat) dengan div namun tidak berdekatan dengan div. Hanya paragraf 4 yang merupakan saudara dari div, dan letaknya berdekatan dengan div, sehingga paragraf 4 yang memiliki background kuning.

General Sibling Selector

General Sibling Selector memilih semua elemen yang merupakan saudara kandung dari elemen tertentu.

Contoh berikut memilih semua elemen <p> yang merupakan saudara kandung dari elemen <div>:

Contoh

div ~ p {
    background-color: yellow;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Paragraf 1.</p>

<div>
  <code>Some code.</code>
  <p>Paragraf 2.</p>
</div>

<p>Paragraf 3.</p>
<code>Some code.</code>
<p>Paragraf 4.</p>

</body>
</html>

Hasilnya kurang lebih seperti ini:

Maka, hanya paragraf 4 dan 5 memiliki background berwarna kuning. Karena paragraf 4 dan 5 merupakan saudara dari div.

Demikian pembahasan mengenai combinator pada CSS.

Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 21 - Align (Penyelarasan)

noreply@blogger.com (Octavianus Hasan) — Thu, 2 Aug 2018 01:14:00 +0800

CSS Layout - Horizontal & Vertikal Align

Align adalah penyelarasan, perataan, atau jajaran baik berupa teks, elemen, dan lain-lain.

Gambar di bawah merupakan contoh penyelarasan elemen yang disetel ke align center (penyelarasan ke tengah).

Penyelarasan Elemen ke Tengah

Untuk memusatkan elemen blok (seperti <div>) secara horizontal, gunakan margin: auto;. Setel lebar elemen sehingga akan menceganya untuk meregang ke tepi / sisi dari wadah elemen tersebut.

Elemen tersebut kemudian akan mengambil lebar yang ditentukan, dan ruang yang tersisa akan dibagi rata antara dua margin (margin kiri dan kanan).

Contoh

.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Penyelarasan Elemen ke Tengah</h2>
<p>Untuk  memusatkan elemen blok (seperti <div>) secara horizontal, gunakan margin: auto;</p>

<div class="center">
  <p><b>Catatan: </b>menggunakan margin:auto tidak working di IE8, kecuali kalau sebuah !DOCTYPE dideklarasikan.</p>
</div>

</body>
</html>

Hasilnya:

Catatan: Penyelaraskan ke tengah tidak berpengaruh jika properti width tidak diatur (atau set ke 100%).

Penyelarasan Teks ke Tengah

Untuk memusatkan teks ke tengah dalam sebuah elemen, gunakan text-align: center;.

Contoh

.center {
    text-align: center;
    border: 3px solid green;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Teks di Tengah</h2>

<div class="center">
  <p>Teks ini di selaraskan ke tengah</p>
</div>

</body>
</html>

Hasilnya:

Tip: Untuk contoh lebih lanjut tentang cara untuk menyelaraskan teks, lihat CSS Text pada tutorial CSS sebelumnya.

Penyelarasan Gambar ke Tengah

Untuk menempatkan gambar di tengah, atur margin kiri dan kanan ke auto dan buat menjadi elemen blok.

Contoh

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Sebuah gambar di Tengah</h2>
<p>Untuk menempatkan gambar di tengah, atur margin kiri dan kanan ke auto dan buat menjadi elemen blok.</p>

<img src="paris.jpg" alt="Paris" style="width:40%">

</body>
</html>

Hasilnya:

Penyelarasan Kiri dan Kanan - Menggunakan "position"

Salah satu metode untuk menyelaraskan elemen adalah dengan menggunakan position: absolute;.

Contoh

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Penyelarasan Kanan</h2>
<p> Contoh cara menyelaraskan elemen dengan properti position: </ p>

<div class="right">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>

</body>
</html>

Hasilnya:

Catatan: Elemen yang diposisikan secara absolute dihapus dari aliran normal, dan dapat tumpang tindih dengan elemen lain.

Penyelarasan Kiri dan Kanan - Menggunakan "float"

Metode lain untuk menyelaraskan elemen adalah dengan menggunakan properti float.

Contoh

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Penyelarasan Kanan</h2>
<p> Contoh cara menyelaraskan elemen dengan properti float: </ p>

<div class="right">
  <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>

</body>
</html>

Hasilnya:

Catatan: Jika sebuah elemen lebih tinggi dari elemen yang induknya, dan elemen tersebut mengambang (float), maka akan "meluap" di luar wadahnya. Kita dapat menggunakan "clearfix" hack untuk memperbaiki ini. Lihat contoh clearfix hack berikut!

Clearfix Hack

Kita dapat menambahkan overflow: auto; ke elemen induknya untuk memperbaiki masalah ini.

Contoh

div {
    border: 3px solid #4CAF50;
    padding: 5px;
}

.img1 {
    float: right;
}

.clearfix {
    overflow: auto;
}

.img2 {
    float: right;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Dalam contoh ini, gambar lebih tinggi daripada elemen induknya, dan itu mengambang, sehingga meluap di luar wadahnya:</p>

<div>
<img class="img1" src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>

<p style="clear:right">Tambahkan class clearfix dengan overflow: auto; ke elemen induknya untuk memperbaiki masalah ini:</p>

<div class="clearfix">
<img class="img2" src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>

</body>
</html>

Hasilnya:

Penyelarasan Secara Vertikal - Menggunakan "padding"

Ada banyak cara untuk menyelaraskan elemen secara vertikal dalam CSS. Sebuah solusi sederhana adalah dengan menggunakan padding top (atas) dan padding buttom (bawah).

Contoh

.center {
    padding: 70px 0;
    border: 3px solid green;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2> Penyelarasan ke Tengah Secara Vertikal </ h2>
<p> Dalam contoh ini, menggunakan properti padding untuk memusatkan elemen div secara vertikal: </ p>

<div class="center">
  <p>Teks ini di selaraskan ke tengah secara vertikal...</p>
</div>

</body>
</html>

Hasilnya:

Untuk menyelaraskan secara vertikal dan horizontal, gunakan padding dan text-align: center;:

Contoh

.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Diselaraskan ke Tengah</h2>
<p>Dalam contoh ini, menggunakan padding dan text-align untuk memusatkan elemen div secara vertikal dan horizontal:</p>

<div class="center">
  <p>Teks ini diselaraskan ke tengah secara vertikal dan horizontal...</p>
</div>

</body>
</html>

Hasilnya:

Penyelarasan Secara Vertikal - Menggunakan "line-height"

Trik lain adalah dengan menggunakan properti line-height dengan nilai yang sama dengan properti height.

Contoh

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}

.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Diselaraskan ke Tengah</h2>
<p>Dalam contoh ini, menggunakan properti line-height dengan value yang sama dengan properti height untuk memusatkan elemen div:</p>

<div class="center">
  <p>Teks ini diselaraskan ke tengah secara vertikal dan horizontal...</p>
</div>

</body>
</html>

Hasilnya:

Penyelarasan Secara Vertikal - Menggunakan "position" & "transform"

Jika padding dan line-height tidak menjadi pilihan, solusi ketiga adalah dengan menggunakan properti position dan transform.

Contoh

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Diselaraskan ke Tengah</h2>
<p>Dalam contoh ini, menggunakan properti positioning dan transform untuk memusatkan elemen div secara vertikal dan horizontal: </ p>

<div class="center">
  <p>Teks ini diselaraskan ke tengah secara vertikal dan horizontal...</p>
</div>

<p>Catatan: Properti transform tidak didukung di IE8 dan versi sebelumnya.</p>

</body>
</html>

Hasilnya:

Demikian pembahasan mengenai Penyelarasan elemen, gambar, maupun teks dalam CSS.

Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 20 - Float dan Clear

noreply@blogger.com (Octavianus Hasan) — Tue, 31 Jul 2018 21:10:00 +0800

CSS Layout - Float

float secara etimologi berarti "mengapung" atau "mengambang". Properti float digunakan untuk menentukan apakah sebuah elemen box harus mengapung (float) atau tidak. Selain itu, properti float juga dapat digunakan untuk mengatur posisi, tata letak (layout) dan style lainnya.

Sebuah elemen bisa diposisikan seakan-akan berada mengapung diantara elemen setelahnya. Mengapung disini, berarti elemen yang mengalami float tersebut akan dipindahkan ke tepi paling kiri atau tepi paling kanan dari element induknya.

Elemen yang tidak mengalami float berada pada posisi normal, yaitu berada pada arah berlawanan dengan elemen yang mengelilinginya (bertumpuk dari atas kebawah atau dari kiri ke kanan). Sedangkan, elemen yang mengalami float tidak mengikuti kaidah sebagaimana semestinya. Properti float tidak bisa digunakan untuk elemen-elemen yang memiliki posisi absolute (position: absolute;).

Properti float memiliki value / nilai berikut:

left - elemen mengapung di sebelah kiri elemen induknya
right - elemen mengapung di sebelah kanan elemen induknya
none - elemen tidak mengapung (akan ditampilkan hanya di mana terjadi dalam teks). Float none ini adalah default
inherit - elemen mewarisi (inherit) nilai float dari elemen induknya

Dalam penggunaannya sederhana, properti float dapat digunakan untuk membungkus teks di sekitar gambar.

Contoh - float: right;

Contoh berikut menetapkan bahwa gambar mengapung ke kanan dalam teks.

Contoh

img {
    float: right;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Dalam contoh ini, gambar akan mengapung ke kanan di paragraf, dan teks dalam paragraf akan membungkus gambar. </ p>

<p><img src="nama_gambar.jpg" alt="nama_alternatif_gambar" style="width:170px;height:170px;margin-left:15px;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body>
</html>

Hasilnya:

Contoh - float: left;

Contoh berikut menetapkan bahwa gambar mengapung ke kiri dalam teks:

Contoh

img {
    float: left;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p> Dalam contoh ini, gambar akan mengambang ke kiri di paragraf, dan teks dalam paragraf akan membungkus gambar. </ p>

<p><img src="nama_gambar.jpg" alt="nama_alternatif_gambar" style="width:170px;height:170px;margin-right:15px;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body>
</html>

Hasilnya:

Contoh - float: none;

float:none; digunakan untuk menentukan bahwa sebuah elemen tidak boleh mengapung (float).

Contoh

img {
    float: none;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p> Dalam contoh ini, gambar akan ditampilkan di tempat yang tepat di teks (float: none;). </ p>

<p><img src="nama_gambar.jpg" alt="nama_alternatif_gambar" style="width:170px;height:170px;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body>
</html>

Hasilnya:

CSS Layout - Clear

Properti CSS clear merupakan properti yang digunakan untuk membersihkan elemen yang sebelumnya telah mengalami float. Sehingga, elemen yang di-clear akan berpisah dari elemen yang mengalami float dan akan berpindah pada baris baru.

Properti clear memiliki value / nilai berikut:

none - memungkinkan elemen mengapung (float) di kedua sisi. Ini adalah default.
left - tidak ada elemen mengapung (float) di sisi kiri
right - tidak ada elemen mengapung (float) di sisi kanan
both - tidak ada elemen mengapung (float) di kedua sisi (kiri atau kanan)
inherit - elemen mewarisi nilai yang clear dari induknya

Cara paling umum untuk menggunakan properti clear adalah setelah kita menggunakan properti float pada elemen.

Contoh berikut membersihkan float ke kiri. Berarti tidak ada elemen mengambang (float) di sisi kiri elemen (div):

Contoh

.div1 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div2 {
    border: 1px solid red;
}

.div3 {
    float: left;
    width: 100px;
    height: 50px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.div4 {
    border: 1px solid red;
    clear: left;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Tanpa menggunakan clear</h2>
<div class="div1">div1</div>
<div class = "div2"> div2 - Perhatikan bahwa div2 setelah div1 dalam kode HTML. Namun, karena div1 mengapung ke kiri, teks dalam div2 mengalir di sekitar div1. </ Div>
<br><br>

<h2>Menggunakan clear</h2>
<div class="div3">div3</div>
<div class = "div4"> div4 - Di sini, clear: letf; memindahkan div4 ke bawah div3 mengambang. Nilai "left" artinya memberikan clear (menghilangkan float) terhadap elemen yang mengambang (float) ke kiri. Kita juga dapat memberikan clear "right" dan "both" (keduanya). </ Div>

</body>
</html>

Hasilnya:

Menggunakan "clearfix"

Jika sebuah elemen lebih tinggi dari elemen yang induknya, dan elemen tersebut mengambang (float), maka akan "meluap" di luar wadahnya.

Contoh

div {
    border: 3px solid #4CAF50;
    padding: 5px;
}

.img1 {
    float: right;
}

.clearfix {
    overflow: auto;
}

.img2 {
    float: right;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p> Dalam contoh ini, gambar lebih tinggi daripada elemen yang memuatnya, dan itu mengambang, sehingga meluap di luar wadahnya: </ p>

<div>
<img class="img1" src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>

<p style = "clear: right"> Tambahkan kelas clearfix dengan overflow: auto; ke elemen yang memuatnya, untuk memperbaiki masalah ini: </ p>

<div class="clearfix">
<img class="img2" src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>

</body>
</html>

Hasilnya:

Fungsi Lain Properti Float
Selain yang di jelaskan di atas, berikut ada beberapa fungsi lain dari properti float:

Grid of Boxes / Equal Width Boxes
Memudahkan untuk mengatur kotak (box) agar saling berdampingan satu sama lain
Contoh

* {
    box-sizing: border-box;
}

.box {
    float: left;
    width: 33.33%;
    padding: 50px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Kotak Grid</h2>
<p>Menerapkan float di sisi masing-masing kotak:</p>

<div class="clearfix">
  <div class="box" style="background-color:#bbb">
    <p>Some text inside the box.</p>
  </div>
  <div class="box" style="background-color:#ccc">
    <p>Some text inside the box.</p>
  </div>
  <div class="box" style="background-color:#ddd">
    <p>Some text inside the box.</p>
  </div>
</div>

<p> Perhatikan bahwa pada contoh ini juga menggunakan clearfix hack untuk menjaga aliran tata letak, dan itu menambahkan properti box-sizing untuk memastikan bahwa kotak tidak rusak karena tambahan padding. Coba hapus kode ini untuk melihat efeknya. </ P>

</body>
</html>

Hasilnya:

Properti box-sizing? Kita dapat dengan mudah membuat tiga kotak mengambang berdampingan. Namun, ketika kita menambahkan sesuatu yang menambah lebar setiap kotak (misalnya padding atau border), maka kotak akan rusak. Properti box-sizing memungkinkan kita untuk memasukkan padding dan batas lebar total kotak (dan tinggi), memastikan bahwa padding tetap berada di dalam kotak dan tidak pecah.

Grid box juga dapat digunakan untuk menampilkan gambar agar berdampingan.
Contoh

* {
    box-sizing: border-box;
}

.img-container {
    float: left;
    width: 33.33%;
    padding: 5px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Gambar Mengambang</h2>
<p>Menerapkan float di tiap sisi:</p>

<div class="clearfix">
  <div class="img-container">
    <img src="nama_gambar.jpg" alt="nama_alternatif" style="width:100%">
  </div>
  <div class="img-container">
    <img src="nama_gambar.jpg" alt="nama_alternatif" style="width:100%">
  </div>
  <div class="img-container">
    <img src="nama_gambar.jpg" alt="nama_alternatif" style="width:100%">
  </div>
</div>

<p> Perhatikan bahwa pada contoh ini juga menggunakan clearfix hack untuk menjaga aliran tata letak, dan itu menambahkan properti box-sizing untuk memastikan bahwa kotak tidak rusak karena tambahan padding. Coba hapus kode ini untuk melihat efeknya. </ P>

</body>
</html>

Hasilnya:

Equal Height Boxes

Seperti pada contoh sebelumnya, bawa menetapkan float sehingga kotak bisa berdampingan dengan lebar yang sama sangatlah mudah. Namun, tidak mudah untuk membuat kotak mengambang dengan ketinggian yang sama. Akan tetapi, kita tetap dapat menetapkan tinggi tetap, seperti pada contoh di bawah ini:
Contoh

* {
    box-sizing: border-box;
}

.box {
    float: left;
    width: 50%;
    padding: 50px;
    height: 300px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Equal Height Boxes</h2>
<p>Kotak mengambang dengan ketinggian yang sama:</p>

<div class="clearfix">
  <div class="box" style="background-color:#bbb">
    <h2>Box 1</h2>
    <p>Some content, some content, some content</p>
  </div>
  <div class="box" style="background-color:#ccc">
    <h2>Box 2</h2>
    <p>Some content, some content, some content</p>
    <p>Some content, some content, some content</p>
    <p>Some content, some content, some content</p>
  </div>
</div>

<p> Contoh ini tidak terlalu fleksibel. Tidak apa-apa untuk menggunakan CSSheight  jika kita dapat menjamin bahwa kotak akan selalu memiliki jumlah konten yang sama di dalamnya, tetapi itu tidak selalu benar. Jika kita mencoba contoh di atas pada ponsel (atau mengubah ukuran jendela browser), kita akan melihat bahwa isi kotak kedua akan ditampilkan di luar kotak. </ P>

</body>
</html>

Hasilnya:

Memudahkan pembuatan menu secara horizontal
Menggunakan float untuk membuat menu horizontal.
Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

.active {
    background-color: red;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<ul>
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya:

Mengatur layout halaman secara keseluruhan
Demikian juga dengan mengatur seluruh tata letak halaman web, gunakan properti float.
Contoh

* {
    box-sizing: border-box;
}
.header, .footer {
    background-color: grey;
    color: white;
    padding: 15px;
}
.column {
    float: left;
    padding: 15px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.menu {
    width: 25%;
}
.content {
    width: 75%;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 8px;
    background-color: #33b5e5;
    color: #ffffff;
}

.menu li:hover {
    background-color: #0099cc;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="header">
  <h1>Header</h1>
</div>

<div class="clearfix">
  <div class="column menu">
    <ul>
      <li>Satu</li>
      <li>Dua</li>
      <li>Tiga</li>
      <li>Empat</li>
    </ul>
  </div>

  <div class="column content">
    <h1>Teks bahasa asing:</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

<div class="footer">
  <p>Footer Text</p>
</div>

</body>
</html>

Hasilnya:

Demikian pembahasan mengenai Properti Float dan Clear dalam CSS.

Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 19 - Penerapan Properti Overflow

noreply@blogger.com (Octavianus Hasan) — Wed, 25 Jul 2018 23:48:00 +0800

CSS Layout - Overflow

Properti CSS overflow digunakan untuk mengontrol atau menghandle konten yang ukurannya melebihi ukuran parent dari konten tersebut.

Contoh penggunaan properti overflow:

This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

Properti overflow memiliki nilai / value berikut:

visible
hidden
scroll
auto

Catatan: Properti overflow hanya bekerja untuk elemen block dengan ketinggian tertentu.

Catatan: Dalam OS X Lion (pada Mac), scrollbar tersembunyi secara default dan hanya ditunjukkan saat sedang digunakan (meskipun "overflow: scroll" diatur).

Overflow: visible;

Secara default overflow adalah visible, yang berarti bahwa konten yang ada di dalam elemen "tidak dipotong" dan "melebihi" ukuran elemen kotak yang ditentukan.

Contoh

div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: visible;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>CSS Overflow</h2>
<p>Secara default, overflow adalah visible, yang berarti bahwa konten yang ada di dalam elemen "tidak dipotong" dan "melebihi" ukuran elemen kotak yang ditentukan:</p>

<div>Kita dapat menggunakan properti overflow ketika kita ingin memiliki kontrol pada layout yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi (overflow) terhadap kotak elemen. </div>

</body>
</html>

Hasilnya:

Overflow: hidden;

Dengan value menggunakan hidden, yang berarti bahwa konten yang ada di dalam elemen menjadi "terpotong" dan "tidak melebihi" ukuran elemen kotak yang ditentukan.

Contoh

div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: hidden;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>CSS Overflow</h2>
<p>Dengan nilai hidden, overflow terpotong, dan sisa konten disembunyikan:</ p>

<p>Cobalah untuk menghapus properti overflow untuk memahami cara kerjanya.</p>

<div>Kita dapat menggunakan properti overflow ketika kita ingin memiliki kontrol pada layout yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi (overflow) terhadap kotak elemen. </ Div>

</body>
</html>

Hasilnya:

Overflow: scroll;

Menetapkan nilai scroll, yang berarti bahwa konten yang ada di dalam elemen menjadi "terpotong" dan ditambahkan scroll bar untuk menggulir konten yang ada di dalam kotak. Scroll bar yang ditambahkan adalah scrollbar secara horizontal dan vertikal (bahkan jika kita tidak membutuhkannya).

Contoh

div {
    background-color: #eee;
    width: 200px;
    height: 100px;
    border: 1px dotted black;
    overflow: scroll;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>CSS Overflow</h2>
<p>Value scroll, yang berarti bahwa konten yang ada di dalam elemen menjadi "terpotong" dan ditambahkan scroll bar untuk menggulir konten yang ada di dalam kotak.:</p>

<div>Kita dapat menggunakan properti overflow ketika kita ingin memiliki kontrol pada layout yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi (overflow) terhadap kotak elemen. </ Div>

</body>
</html>

Hasilnya:

Overflow: auto;

Value auto hampir sama dengan value scroll, perbedaannya pada value auto hanya menambahkan scrollbar jika diperlukan.

Contoh

div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: auto;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>CSS Overflow</h2>
<p>Value auto hampir sama dengan value scroll, perbedaannya pada value auto hanya menambahkan scrollbar jika diperlukan:</p>

<div>Kita dapat menggunakan properti overflow ketika kita ingin memiliki kontrol pada layout yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi (overflow) terhadap kotak elemen. </ Div>

</body>
</html>

Hasilnya:

overflow-x dan overflow-y

Properti overflow-x dan overflow-y digunakan dalam menentukan apakah untuk mengubah overflow konten hanya horizontal atau vertikal (atau kedua-duanya).

overflow-x menentukan apa yang harus dilakukan pada sisi kiri / kanan konten.
overflow-y menentukan apa yang harus dilakukan pada sisi bawah / atas konten.

Contoh

div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow-x: hidden;
    overflow-y: scroll;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>CSS Overflow</h2>
<p>Kita dapat mengubah overflow secara horizontal atau vertical.</p>
<p>overflow-x menentukan apa yang harus dilakukan pada sisi kiri / kanan konten.
<br>
overflow-y menentukan apa yang harus dilakukan pada sisi bawah / atas konten.</p>

<div>Kita dapat menggunakan properti overflow ketika kita ingin memiliki kontrol pada layout yang lebih baik. Properti overflow menentukan apa yang terjadi jika konten melebihi (overflow) terhadap kotak elemen. </ Div>

</body>
</html>

Hasilnya:

Tabel Properti Overflow

Dibawah ini adalah tabel dari semua properti CSS Overflow:

Properti	Deskripsi
overflow	Menentukan yang terjadi jika konten melebihi kotak elemen
overflow-x	Menentukan apakah yang harus diterapkan pada sisi kiri / kanan konten
overflow-y	Menentukan apakah yang harus diterapkan pada sisi atas / bawah konten

Demikian pembahasan mengenai properti overflow pada CSS.
Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 18 - Position

noreply@blogger.com (Octavianus Hasan) — Wed, 25 Jul 2018 00:11:00 +0800

CSS Layout - Properti Position

Properti position digunakan untuk menetapkan jenis metode penentuan posisi yang digunakan untuk sebuah elemen.

Ada lima nilai / value untuk properti position:

static
relative
fixed
absolute
sticky

Elemen kemudian diposisikan menggunakan properti top, buttom, left, dan right. Namun, properti ini tidak akan bekerja kecuali properti position diatur terlebih dahulu. Properti-properti ini juga bekerja secara berbeda tergantung pada nilai position.

Position: statis;

Properti position:static; merupakan properti default semua elemen HTML. Elemen-elemen yang memiliki position:static; tidak terpengaruh oleh properti top, buttom, left, dan right. Artinya, apabila kita menambahkan value top, bottom, left, atau right, value tersebut tidak akan menghasilkan apapun.

Sebuah elemen yang memiliki position: static; tidak diposisikan dalam cara yang khusus, artinya selalu diposisikan sesuai dengan aliran normal halaman.

Berikut adalah contoh penggunaannya pada elemen <div>:

Contoh

div.static {
    position: static;
    border: 3px solid #73AD21;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>position: static;</h2>

<p> Elemen dengan position: statis; tidak diposisikan dengan cara khusus apa pun; ini selalu diposisikan sesuai dengan aliran normal halaman: </ p>

<div class = "static">
Elemen div ini memiliki posisi: statis;
</ div>

</body>
</html>

Hasilnya:

Position: relative;

Properti position: relative; merupakan elemen yang hampir sama dengan value static. Yang menjadi perbedaan yaitu, apabila kita menambahkan value top, bottom, left, atau right akan berfungsi. Pengaturan position pada suatu elemen menggunakan value tersebut akan mendorong elemen tersebut ke arah yang diinginkan.

Sebuah elemen dengan position: relative; diposisikan relatif terhadap posisi normal. Mengatur properti top, buttom, left, atau right dari elemen yang memiliki properti position:relative; akan menyebabkannya disesuaikan dari posisi normalnya.

Konten lainnya yang tidak diposisikan relative, tidak akan masuk ke setiap celah yang ditinggalkan oleh elemen yang memiliki position:relative;.

Berikut adalah contoh penggunaannya pada elemen <div>:

Contoh

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>position: relative;</h2>

<p>Sebuah elemen dengan position: relative; diposisikan relatif terhadap posisi normal:</p>

<div class="relative">
Elemen div ini memiliki position: relative;
</div>

</body>
</html>

Hasilnya:

Position: fixed;

Sebuah elemen yang memiliki position: fixed; diposisikan relatif atau selalu mengikuti alur dokumen, yang berarti selalu tetap di tempat yang sama bahkan jika halaman tersebut digulir ke bawah ataupun ke atas.

Sedangkan untuk memposisikan elemen gunakan properti top, buttom, left, atau right. Elemen tetap tidak meninggalkan celah pada halaman dimana lokasi sebelumnya elemen tersebut berada.

Perhatikan elemen tetap di sudut kanan bawah halaman pada contoh berikut.

Contoh

    div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

<!DOCTYPE html>
<html>
<head>
<title>Display</title>
</head>
<body>

<h2>position: fixed;</h2>

<p> Elemen dengan position: fixed; diposisikan relatif terhadap viewport, yang berarti selalu berada di tempat yang sama meskipun halaman digulir: </p>

<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>
<h1>Gulir Halaman Anda!</h1>

<div class = "fixed">
Elemen div ini memiliki position: fixed;
</ div>

</body>
</html>

Hasilnya:

Position: absolute;

Sebuah elemen dengan position: absolute; akan dihilangkan / dicabut dari alur dokumen, dan elemen lainnya akan bekerja sebagaimana mestinya (tidak terganggu dengan elemen yang diberikan properti absolute).

Apabila element yang mempunyai properti absolute tersebut ada didalam sebuah element lagi (parent), maka element tersebut akan diabaikan, seakan-akan elemen tersebut tidak ada di dalam element parent tersebut.

Berikut ini adalah contoh sederhana:

Contoh

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
} 

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>position: absolute;</h2>

<p>Sebuah elemen dengan position: absolute; akan dihilangkan / dicabut dari alur dokumen:</ p>

<div class = "relative"> Elemen div ini memiliki position: relative;
  <div class = "absolute"> Elemen div ini memiliki position: absolute;</ div>
</ div>

</body>
</html>

Hasilnya:

Position: sticky;

Sebuah elemen yang memiliki position: sticky; diposisikan berdasarkan posisi scroll pengguna.

Pada contoh di bawah ini, elemen sticky menempel pada bagian atas halaman ( top: 0).

Contoh

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Coba untuk <b>scroll</b> di dalam bingkai ini untuk memahami cara kerja sticky</p>
<p>Catatan: IE/Edge 15 version sebelumnya tidak mendukung position sticky.</p>

<div class="sticky">INI ADALAH POSITION STICKY</div>

<div style="padding-bottom:2000px">
  <p>Pada contoh ini, elemen sticky menempel pada bagian atas halaman ( top: 0).</p>

  <p>Scroll kembali untuk mengembalikan posisi sticky</p>
  <p>Ini adalah teks yang bisa di scroll.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  
<p>Ini adalah teks yang bisa di scroll.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

</body>
</html>

Hasilnya:

Tumpang Tindih Element (Overlapping)

Ketika elemen telah diberi position yang artinya elemen-elemen tersebut telah memiliki posisi masing-masing, elemen-elemen tersebut juga dapat ditumpang tindih terhadap elemen lainnya.

Gunakan properti z-index menentukan urutan tumpukan elemen (yang elemen harus ditempatkan di depan, atau belakang dari elemen lainnya).

Sebuah elemen dapat memiliki urutan tumpukan positif atau negatif:

Contoh

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Ini adalah heading</h1>
<img src="nama_gambar.jpg" width="200" height="140">
<p> Karena gambar memiliki indeks-z -1, maka gambar akan ditempatkan di belakang teks. </ p>

</body>
</html>

Hasilnya:

Elemen dengan urutan tumpukan yang lebih besar selalu berada di depan elemen yang urutan tumpukannya yang lebih rendah.

Catatan: Jika dua elemen yang diposisikan tumpang tindih tanpa z-indeks yang ditentukan, elemen yang diposisikan terakhir dalam kode HTML akan ditampilkan di bagian atas.

Properti CSS Position
Berikut adalah tebel dari properti-properti position dalam CSS:

Properti	Deskripsi
position	Menentukan jenis posisi untuk suatu elemen
top	Mengatur tepi margin atas untuk kotak yang diposisikan
bottom	Mengatur tepi margin bawah untuk kotak yang diposisikan
right	Menetapkan tepi margin kanan untuk kotak yang diposisikan
letf	Menetapkan tepi margin kiri untuk kotak yang diposisikan
clip	elemen yang benar-benar diposisikan
z-index	Mengatur urutan tumpukan elemen

Demikian pembahasan mengenai properti-properti position dalam CSS.

Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 17 - Mengatur Tampilan Halaman (Display)

noreply@blogger.com (Octavianus Hasan) — Tue, 24 Jul 2018 01:33:00 +0800

CSS Layout - Properti Display
Properti display adalah properti CSS yang paling penting untuk mengendalikan tata letak halaman web. Properti display menentukan apakah / bagaimana elemen akan ditampilkan.

Setiap elemen HTML memiliki nilai tampilan (display) default tergantung pada jenis elemen itu. Tampilan (display) nilai default untuk sebagian besar elemen adalah block atau inline.

Display Block
Elemen blok merupakan elemen yang bertujuan untuk membagi halaman HTML menjadi bagian yang terpisah, atau menjadi blok. Element block akan ditampilkan terpisah dari seluruh tag sebelum dan sesudahnya. Artinya, display block ini bisa menggunakan properti width dan height.

Berikut merupakan elemen-elemen pada display block:

<div>
<h1> - <h6>
<p>
<li>
<form>
<header>
<footer>
<section> dll.

Selain elemen-elemen diatas, masih ada lagi elemen-elemen lain yang tidak disebutkan. Untuk melihat lebih lengkap, kunjungi Tutorial Elemen Inline dan Block pada Tutorial HTML sebelumnya.

Berikut adalah contoh penggunaan beberapa elemen yang ada pada display block.
Contoh

a {
    display: block;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Display links as block elements:</p>

<a href="https://king-octahasan.blogspot.com/search/label/Tutorial%20HTML5?&max-results=8" target="_blank">Belajar HTML</a>
<a href="https://king-octahasan.blogspot.com/search/label/Tutorial%20CSS3?&max-results=8" target="_blank">Belajar CSS</a>
<a href="#" target="_blank">Belajar JavaScript</a>

</body>
</html>

Hasilnya akan seperti ini:

Display Inline
Elemen inline akan menyatu dengan tag sebelum dan sesudahnya. Tag ini tidak akan memulai blok atau baris baru namun akan tetap berada di dalam blok tersebut. Tag inline juga tidak akan ditampilkan dengan jarak dari tag sebelum dan sesudahnya. Artinya, display inline tidak bisa menggunakan property width dan height.

Berikut merupakan elemen-elemen pada display inline:

<span>
<a>
<img>
<b>
<i>
<em> dll.

li {
    display: inline;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Tampilannya terlihat seperti sebuah menu horizontal:</p>

<ul>
  <li><a href="/html/default.asp" target="_blank">HTML</a></li>
  <li><a href="/css/default.asp" target="_blank">CSS</a></li>
  <li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>

Hasilnya akan seperti ini:

Catatan: Mengatur properti tampilan elemen hanya mengubah bagaimana elemen ditampilkan, tidak seperti apa elemen itu. Jadi, elemen inline dengan display: block; tidak diizinkan untuk memiliki elemen-elemen blok lain di dalamnya.

Display inline-block
Display inline-block merupakan gabungan dari display inline dan block. Sudah dijelaskan pada bagian diatas jika display inline tidak bisa menggunakan property width dan height, dan display block bisa menggunakan property width dan height. Display inline-block memiliki tampilan seperti inline namun kita bisa menggunakan property width dan height.

Contoh berikut menunjukkan cara kerja yang berbeda dari display: inline;, display: inline-block; dan display:block;.
Contoh

span.a {
    display: inline; /* the default for span */
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid blue;    
    background-color: yellow; 
}

span.b {
    display: inline-block;
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid blue;        
    background-color: yellow; 
}

span.c {
    display: block;
    width: 100px;
    height: 100px;
    padding: 5px;
    border: 1px solid blue;        
    background-color: yellow; 
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Properti display</h1>

<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="a">Aliquam</span> <span class="a">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="b">Aliquam</span> <span class="b">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class="c">Aliquam</span> <span class="c">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. </div>

</body>
</html>

Hasilnya:

Display: none;
display: none; umumnya digunakan dengan JavaScript untuk meniadakan dan menampilkan elemen tanpa menghapusnya. Dengan kata lain, display:none; artinya meniadakan suatu elemen yang diinginkan tanpa mengambil ruang apapun pada browser.
Contoh

h1.tiadakan{
    display: none;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading yang terlihat (ditampilkan di browser)</h1>
<h1 class="tiadakan">Ini adalah heading yang ditiadakan</h1>
<p>Perhatikan bahwa elemen h1 dengan display: none; tidak mengambil ruang apa pun. </ p>

</body>
</html>

Hasilnya akan seperti ini:

Catatan: Perhatikan bahwa elemen h1 dengan tampilan: none; tidak mengambil ruang apa pun.

Catatan: Pada elemen <script> menggunakan display: none; sebagai default.

Visibility: hidden;
visibility: hidden; digunakan untuk menyembunyikan elemen dengan mengambil atau menyisakan ruang sesuai ukuran elemennya.
Contoh

h1.hidden {
    visibility: hidden;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading yang terlihat (ditampilkan di browser)</h1>
<h1 class="hidden">Ini adalah heading yang tersembunyi</h1>
<p>Perhatikan bahwa heading yang tersembunyi masih membutuhkan ruang di browser. </ p>

</body>
</html>

Hasilnya akan seperti ini:

Catatan: Perhatikan yang di tandai di atas bahwa heading yang tersembunyi masih menyisakan ruang di browser.

Demikian pembahasan mengenai cara mengatur tampilan atau display pada CSS.
Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 16 - Cara Desain Tabel dengan CSS

noreply@blogger.com (Octavianus Hasan) — Mon, 23 Jul 2018 02:28:00 +0800

CSS Table
Dalam HTML, tabel yang kita buat masih sangat sederhana. Tabel bisa kita desain dengan menggunakan CSS.

Berikut adalah tabel hasil desain menggunakan CSS:

Nama Pemain Bola	Klub	Negara
Cristiano Ronaldo	Juventus	Portugal
Lionel Messi	Barcelona	Argentina
Neymar JR	PSG	Brazil
Luka Modric	Real Madrid	Croatia
Antoine Griezmann	Atletico de Madrid	France
Kylian Mbappe	PSG	France
Marcelo Vieira	Real Madrid	Brazil

Tabel Border

Tabel border digunakan untuk menentukan batas tabel dalam CSS, dengan menggunakan properti border.

Berikut merupakan contoh menetapkan border hitam untuk elemen <table>, <th>, dan <td>.

Contoh

table, th, td {
    border: 1px solid black;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Menambahkan border pada sebuah tabel:</h2>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
  </tr>
</table>

</body>
</html>

Hasilnya:

Perhatikan bahwa hasil dari tabel dalam contoh di atas memiliki border ganda. Hal ini karena kedua tabel dan elemen <th> dan <td> memiliki border terpisah.

Border Collapse pada Tabel

Properti border-collapse digunakan untuk menetapkan apakah border pada tabel harus diperkecil (collapse), artinya garis dua yang merupakan default pada tabel harus dihilangkan salah satunya.

Contoh

table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Menambahkan border collapse:</h2>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
  </tr>
</table>

<p>Catatan: Jika !DOCTYPE tidak ditentukan, properti border-collapse dapat menghasilkan hasil yang tidak diharapkan di IE8 dan versi sebelumnya. </ p>

</body>
</html>

Hasilnya:

Jika kita hanya ingin menentukan border hanya di sisi tabel saja (tidak untuk baris atau kolom pada tabel secara keseluruhan), maka kita hanya menentukan properti border untuk <table> saja.

Contoh

table {
    border-collapse: collapse;
    border: 1px solid black;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Border tunggal di sisi tabel:</h2>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
  </tr>
</table>

</body>
</html>

Hasilnya:

Menentukan Lebar dan Tinggi tabel

Lebar dan tinggi tabel didefinisikan oleh properti width dan height.

Contoh di bawah merupakan tabel yang di setel dengan lebar 100%, dan ketinggian elemen <th> 50px.

Contoh

table, td, th {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th {
    height: 50px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2> Properti width dan height </ h2>
<p> Setel lebar tabel, dan tinggi baris header tabel: </ p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Simpanan</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
    <td>$100.000</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Alan</td>
    <td>Pasilia</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Amin</td>
    <td>Laba</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Hasilnya:

Penyelarasan secara Horizontal (Horizontal Alignment)

Properti text-align digunakan untuk menetapkan keselarasan horizontal (seperti kiri, kanan, atau tengah) dari konten yang berada dalam elemen <th> atau <td>.

Secara default, isi dari elemen <th> diselaraskan di tengah (center-aligned) dan isi dari elemen <td> diselaraskan di sisi kiri (left-aligned).

Di bawah ini adalah contoh penyelarasan teks dalam elemen <th> di sisi kiri.

Contoh

table, td, th {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th {
    text-align: left;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti text-align</h2>
<p>Properti ini disetel dengan penyelarasan horizontal (seperti kiri, kanan, atau tengah) konten dalam th atau td:</p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Simpanan</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
    <td>$100.000</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Alan</td>
    <td>Pasilia</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Amin</td>
    <td>Laba</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Hasilnya:

Penyelarasan secara Vertikal (Vertical Alignment)

Properti vertical-align digunakan untuk menetapkan penyelarasan (alignment) secara vertikal (seperti atas, bawah, atau tengah) dari konten yang berada dalam <th> atau <td>.

Secara default, alignment vertikal dari konten dalam sebuah tabel adalah tengah (untuk kedua <th> dan <td> elemen).

Contoh berikut menetapkan penyelarasan teks vertikal ke bawah untuk elemen <td>.

Contoh

table, td, th {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    width: 100%;
}

td {
    height: 50px;
    vertical-align: bottom;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti vertical-align</h2>
<p>Properti ini disetel dengan penyelarasan vertikal (seperti kiri, kanan, atau tengah) konten dalam th atau td:</p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Simpanan</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
    <td>$100.000</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Alan</td>
    <td>Pasilia</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Amin</td>
    <td>Laba</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Hasilnya:

Table Padding

Untuk mengontrol ruang antara border dan konten dalam sebuah tabel, gunakan properti padding pada elemen <td> dan <th>.
Contoh

table, td, th {    
    border: 1px solid #ddd;
    text-align: left;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 15px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti padding</h2>
<p> Properti ini menambahkan spasi antara border dan konten dalam tabel. </ p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Simpanan</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
    <td>$100.000</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Alan</td>
    <td>Pasilia</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Amin</td>
    <td>Laba</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Hasilnya:

Horizontal Dividers (Pembatas Horizontal)

Horizontal dividers merupakan pembagi atau pembatas secara horizontal antara baris dalam tabel.

Tambahkan properti border-bottom untuk <th> dan <td> untuk pembagi secara horisontal.

Contoh

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Bordered Table Dividers</h2>
<p>Tambahkan properti border-bottom ke th dan td untuk pembatas horizontal: </ p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Simpanan</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
    <td>$100.000</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Alan</td>
    <td>Pasilia</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Amin</td>
    <td>Laba</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Hasilnya:

Hoverable Table

Hoverable tabel maksudnya adalah untuk menyorot setiap baris pada tabel saat mouse diletakkan di atas baris tabel. Gunakan selektor :hover pada <tr> untuk menyorot baris tabel pada mouse.

Contoh

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

tr:hover {background-color:#f5f5f5;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Hoverable Table</h2>
<p>Pindahkan mouse ke baris tabel untuk melihat efeknya.</p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Simpanan</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
    <td>$100.000</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Alan</td>
    <td>Pasilia</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Amin</td>
    <td>Laba</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Hasilnya:

Tabel Bergaris (Striped Table)

Striped Table maksudnya adalah membuat tabel dengan model zebra, yaitu tabel bergaris-garis.

Untuk tabel zebra bergaris-garis, gunakan selektor nth-child() dan menambahkan background-color untuk semua baris tabel (baris ganjil atau genap).

Contoh

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Striped Table</h2>
<p> Untuk tabel bergaris zebra, gunakan selektor nth-child() dan tambahkan warna latar belakang ke semua baris tabel (genap atau ganjil): </ p>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Simpanan</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
    <td>$100.000</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Alan</td>
    <td>Pasilia</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Amin</td>
    <td>Laba</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Hasilnya:

Table Color

Contoh di bawah menentukan warna latar belakang dan warna teks pada elemen <th>.

Contoh

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
    background-color: #58ACFA;
    color: white;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Pewarnaan Table Header</h2>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
    <th>Simpanan</th>
  </tr>
  <tr>
    <td>Octavianus</td>
    <td>Hasan</td>
    <td>$100.000</td>
  </tr>
  <tr>
    <td>Noldi</td>
    <td>Harun</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Alan</td>
    <td>Pasilia</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Amin</td>
    <td>Laba</td>
    <td>$250</td>
</tr>
</table>

</body>
</html>

Hasilnya:

Responsive Table

Sebuah tabel responsif akan menampilkan scroll bar horizontal jika layar terlalu kecil untuk menampilkan konten secara lengkap.

Menambahkan elemen kontainer (seperti <div>) dengan overflow-x:auto sekitar elemen <table> untuk membuatnya menjadi responsif.

Contoh

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Responsive Table</h2>
<p> Tabel responsif akan menampilkan scroll horizontal jika layarnya terlalu kecil untuk menampilkan konten secara lengkap. Ubah ukuran jendela browser untuk melihat efeknya:</p>
<p> Untuk membuat tabel responsif, tambahkan elemen container (seperti div) dengan <strong> overflow-x: auto </ strong> di sekitar elemen tabel: </p>

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>Nama Depan</th>
      <th>Nama Belakang</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Octavianus</td>
      <td>Hasan</td>
      <td>95</td>
      <td>95</td>
      <td>95</td>
      <td>95</td>
      <td>95</td>
      <td>95</td>
      <td>95</td>
      <td>95</td>
      <td>95</td>
      <td>95</td>
    </tr>
    <tr>
      <td>Noldi</td>
      <td>Harun</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Alan</td>
      <td>Pasilia</td>
      <td>93</td>
      <td>93</td>
      <td>93</td>
      <td>93</td>
      <td>93</td>
      <td>93</td>
      <td>93</td>
      <td>93</td>
      <td>93</td>
      <td>93</td>
    </tr>
  </table>
</div>

</body>
</html>

Hasilnya:

Catatan: Dalam OS X Lion (pada Mac), scrollbar tersembunyi secara default dan hanya ditunjukkan saat sedang digunakan (meskipun "overflow: scroll" diatur).

Properti-properti Tabel pada CSS
Di bawah ini merupakan tabel dari properti-properti CSS tabel yang bisa kita gunakan:

Properti	Deskripsi
border	Menetapkan semua properti bolder dalam satu deklarasi
border-collapse	Menentukan apakah batas tabel harus diciutkan atau tidak
border-spacing	Menentukan jarak antara batas sel yang berdekatan
caption-side	Menentukan penempatan keterangan tabel
empty-cells	Menentukan apakah atau tidak untuk menampilkan batas dan latar belakang pada sel-sel kosong dalam sebuah tabel
table-layout	Menetapkan algoritma tata letak yang akan digunakan untuk tabel

Demikian pembahasan mengenai tabel dalam CSS.
Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 15 - List Item

noreply@blogger.com (Octavianus Hasan) — Sat, 21 Jul 2018 23:08:00 +0800

CSS List Item (Daftar Item)

Dengan menggunakan CSS kita bisa memanipulasi atau mengubah list item pada halaman web kita. CSS sangat berguna apabila kita ingin membuat list dengan model tertentu. Misalnya list yang berbentuk bullet, titik, angka, bilangan romawi, dan lain-lain.
Contoh List:

List pada HTML dan List pada CSS

Dalam HTML, ada dua jenis list:

unordered list (<ul>) - list item yang ditandai dengan bullet (bulatan kecil)
ordered list (<ol>) - list item yang ditandai dengan angka atau huruf

Properti list pada CSS memungkinkan kita untuk:

Untuk mengatur tanda list item untuk ordered list
Untuk mengatur tanda list item untuk unordered list
Mengatur gambar sebagai penanda list item
Menambahkan warna latar belakang untuk list dan list item

Penanda List Item yang berbeda

Properti list-style-type digunakan untuk menetapkan jenis penanda list item.

Contoh berikut menunjukkan beberapa penanda list item yang tersedia:

Contoh

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Contoh dari unordered list:</p>

<ul class="a">
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca-Cola</li>
</ul>

<ul class="b">
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca-Cola</li>
</ul>

<p>Contoh dari ordered list:</p>
<ol class="c">
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca-Cola</li>
</ol>

<ol class="d">
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca-Cola</li>
</ol>

</body>
</html>

Hasilnya:

Catatan: Contoh di atas hanya terdiri dari beberapa nilai untuk unordered list, dan beberapa untuk ordered list.

Gambar sebagai penanda List Item

Properti list-style-image digunakan untuk menetapkan gambar sebagai penanda list item. Untuk membuat gambar sebagai penanda list item, gunakan gambar yang ukurannya sangat kecil, dengan dimensi kurang lebih 18x18 pixel.

Contoh

ul {
    list-style-image: url('gambar.png');
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca-Cola</li>
</ul>

</body>
</html>

Hasilnya:

Posisi Penanda List Item

Properti list-style-position digunakan untuk menentukan posisi penanda (poin-poin) list item.

"List-style-position: outside;" berarti bahwa poin-poin akan berada di luar list item. Awal setiap baris list item akan selaras secara vertikal. Posisi ini adalah posisi default list item.

"List-style-position: inside;" berarti bahwa poin-poin akan berada di dalam list item. Karena itu adalah bagian dari list item, itu akan menjadi bagian dari teks dan mendorong teks sehingga teks terlihat agak ke kanan.

Contoh

ul.a {
    list-style-position: outside;
}

ul.b {
    list-style-position: inside;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Properti list-style-position</h1>
<h2>list-style-position: outside (default):</h2>

<ul class="a">
  <li>Kopi adalah minuman hasil seduhan biji kopi yang telah disangrai dan dihaluskan menjadi bubuk. Kopi merupakan salah satu komoditas di dunia yang dibudidayakan lebih dari 50 negara. Dua varietas pohon kopi yang dikenal secara umum yaitu Kopi Robusta (Coffea canephora) dan Kopi Arabika (Coffea arabica).</li>
  <li>Teh adalah minuman yang mengandung kafeina, sebuah infusi yang dibuat dengan cara menyeduh daun, pucuk daun, atau tangkai daun yang dikeringkan dari tanaman Camellia sinensis dengan air panas.</li>
  <li>Coca-Cola adalah minuman ringan berkarbonasi yang dijual di toko, restoran, dan mesin penjual di lebih dari 200 negara. Minuman ini diproduksi oleh The Coca-Cola Company asal Atlanta, Georgia, dan sering disebut Coke saja (merek dagang terdaftar The Coca-Cola Company di Amerika Serikat sejak 27 Maret 1944).</li>
</ul>

<h2>list-style-position: inside:</h2>

<ul class="b">
  <li>Kopi adalah minuman hasil seduhan biji kopi yang telah disangrai dan dihaluskan menjadi bubuk. Kopi merupakan salah satu komoditas di dunia yang dibudidayakan lebih dari 50 negara. Dua varietas pohon kopi yang dikenal secara umum yaitu Kopi Robusta (Coffea canephora) dan Kopi Arabika (Coffea arabica).</li>
  <li>Teh adalah minuman yang mengandung kafeina, sebuah infusi yang dibuat dengan cara menyeduh daun, pucuk daun, atau tangkai daun yang dikeringkan dari tanaman Camellia sinensis dengan air panas.</li>
  <li>Coca-Cola adalah minuman ringan berkarbonasi yang dijual di toko, restoran, dan mesin penjual di lebih dari 200 negara. Minuman ini diproduksi oleh The Coca-Cola Company asal Atlanta, Georgia, dan sering disebut Coke saja (merek dagang terdaftar The Coca-Cola Company di Amerika Serikat sejak 27 Maret 1944).</li>
</ul>

</body>
</html>

Hasilnya:

Menghapus Pengaturan Default

Properti list-style-type:none juga dapat digunakan untuk menghapus tanda/bullet.

Perhatikan bahwa list juga memiliki marjin default dan padding. Untuk menghapus ini, menambahkan margin:0 dan padding:0 ke <ul> atau <ol>.

Contoh

ul.demo {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>List default:</p>
<ul>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca-Cola</li>
</ul>

<p>Menghapus bullets, margin and padding:</p>
<ul class="demo">
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca-Cola</li>
</ul>

</body>
</html>

Hasilnya:

List - properti Singkatan (Shorthand)

Properti list-style adalah properti singkat. Hal ini digunakan untuk mengatur semua properti list dalam satu deklarasi.

Contoh

ul {
    list-style: square inside url("sqpurple.gif");
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca-Cola</li>
</ul>

</body>
</html>

Hasilnya:

Bila menggunakan properti singkatan, urutan nilai properti adalah sebagai berikut:

list-style-type (Jika list-style-image ditentukan, nilai properti ini akan ditampilkan jika gambar untuk beberapa alasan tidak dapat ditampilkan)
list-style-position (Menentukan apakah penanda list item akan muncul dalam atau di luar aliran konten)
list-style-image (Menentukan gambar sebagai penanda list item)

Jika salah satu dari nilai properti di atas yang hilang, nilai default untuk properti yang hilang akan dimasukkan, jika ada.

Mengubah List menggunakan Warna (Color)

Kita juga bisa menetapkan styling pada list item dengan menggunakan warna (color), hal itu dimaksudkan untuk membuat list agar terlihat sedikit lebih menarik.

Apa pun yang ditambahkan ke tag <ol> atau <ul>, mempengaruhi seluruh list, sementara properti ditambahkan ke tag <li> akan mempengaruhi list item secara individu (bukan keseluruhan list item).

Contoh

ol {
    background: #ff9999;
    padding: 20px;
}

ul {
    background: #3399ff;
    padding: 20px;
}

ol li {
    background: #ffe5e5;
    padding: 5px;
    margin-left: 35px;
}

ul li {
    background: #cce5ff;
    margin: 5px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Menerapkan styling pada Lists dengan warna (color):</h1>

<ol>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca-Cola</li>
</ol>

<ul>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca-Cola</li>
</ul>

</body>
</html>

Hasilnya:

Demikian pembahasan mengenai List Item pada CSS.
Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 14 - Link (Hyperlink)

noreply@blogger.com (Octavianus Hasan) — Mon, 25 Jun 2018 22:40:00 +0800

Menerapkan Styling pada Link

Dengan menggunakan CSS, link dapat ditata atau diatur seperti pemberian warna pada link, mengubah link menjadi bentuk tombol (button), membuat tampilan link akan berubah pada saat disentuh, dan lain-lain.

Link dapat ditata dengan properti CSS (misalnya color, font-family, background, dan lain-lain).

Contoh

a {
    color: hotpink;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p><b><a href="https://king-octahasan.blogspot.com" target="_blank">Ini adalah sebuah link</a></b></p>

</body>
</html>

Hasilnya:

Selain itu, link dapat diberi style yang berbeda tergantung pada keadaan di mana mereka berada.

Berikut adalah style yang bisa diterapkan pada link:

a:link - normal, link yang belum dikunjungi
a:visited - link yang telah dikunjungi pengguna
a:hover - link ketika mouse pengguna berada di atasnya
a:active - link saat itu diklik

Contoh

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p><b><a href="https://king-octahasan.blogspot.com" target="_blank">Ini adalah sebuah link</a></b></p>
<p><b>Catatan:</b> Catatan: a:hover HARUS muncul setelah a:link dan a:visited mendefinisikan CSS agar menjadi efektif.</p>
<p><b>Catatan:</b> a:active MUST muncul setelah a:hover dalam rangka mendefinisikan CSS agar menjadi efektif.</p>

</body>
</html>

Hasilnya:

Saat mengatur style untuk beberapa link, ada beberapa aturan dalam mengurutkannya:

a:hover HARUS muncul setelah a:link dan a:visited
a:active HARUS muncul setelah a:hover

Text Decoration

Properti text-decoration ini kebanyakan digunakan untuk menghapus garis bawah dari sebuah link.

Contoh

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p><b><a href="https://king-octahasan.blogspot.com" target="_blank">Ini adalah sebbuah link</a></b></p>
<p><b>Catatan:</b> a:hover HARUS muncul setelah a:link dan a:visited dalam rangka mendefinisikan CSS agar menjadi efektif.</p>
<p><b>Catatan:</b> a:active HARUS muncul setelah a:hover dalam rangka mendefinisikan CSS agar menjadi efektif.</p>

</body>
</html>

Hasilnya:

Warna Latar Belakang

Properti background-color dapat digunakan untuk menentukan warna latar belakang untuk link.

Contoh

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p><b><a href="https://king-octahasan.blogspot.com" target="_blank">Ini adalah sebbuah link</a></b></p>
<p><b>Catatan:</b> a:hover HARUS muncul setelah a:link dan a:visited dalam rangka mendefinisikan CSS agar menjadi efektif.</p>
<p><b>Catatan:</b> a:active HARUS muncul setelah a:hover dalam rangka mendefinisikan CSS agar menjadi efektif.</p>

</body>
</html>

Hasilnya:

Advance - Link Button

Contoh berikut ini menunjukkan contoh yang lebih canggih dimana kita menggabungkan beberapa sifat CSS untuk menampilkan link sebagai kotak / tombol.

Contoh

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<a href="https://king-octahasan.blogspot.com/" target="_blank">Ini adalah sebuah link</a>

</body>
</html>

Hasilnya:

Demikian pembahasan mengenai cara menerapkan styling pada link dalam CSS.

Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 13 - Font

noreply@blogger.com (Octavianus Hasan) — Wed, 16 May 2018 00:01:00 +0800

CSS Fonts

Properti font pada CSS mendefinisikan font-family, ketebalan, ukuran (size), dan teks style.

Perbedaan antara Fonts Serif dan Sans-serif:

Dalam CSS, ada dua jenis nama font family:

generik family - kelompok font family dengan ekspresi yang sama (seperti "Serif" atau "Monospace")
font family - font family tertentu (seperti "Times New Roman" atau "Arial")

Font Family

Jenis font pada teks diatur dengan menggunakan properti font-family.

Properti font-family harus memiliki beberapa nama font sebagai sistem "fallback". Jika browser tidak mendukung font pertama, ia mencoba font berikutnya, dan seterusnya.

Mulailah dengan font yang kita inginkan, dan akhiri dengan generik family, untuk membiarkan browser memilih font yang serupa di generik family, jika tidak ada font lain yang tersedia.

Catatan : Jika nama font family lebih dari satu kata, itu harus dalam tanda kutip, seperti: "Times New Roman".

Apabila font family sudah lebih dari satu yang ditentukan dalam daftar, harus dipisahkan dengan koma.

Contoh


p {
    font-family: "Times New Roman", Times, serif;
}

Font Style

Properti font-style ini kebanyakan digunakan untuk menentukan teks miring.

Properti ini memiliki tiga nilai:

normal - Teks ditampilkan biasanya
italic - Teks ditampilkan dalam huruf miring
oblique - Teks "bersandar" (miring sangat mirip dengan miring, tapi kurang didukung)

Contoh

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p class="normal">Paragraf ini memiliki teks yang normal.</p>
<p class="italic">Paragraf ini memiliki teks yang miring.</p>
<p class="oblique">Paragraf ini memiliki teks yang oblique.</p>

</body>
</html>

Hasilnya:

Font Size

Properti font-size digunakan untuk menetapkan ukuran teks.

Mampu mengelola ukuran teks sangat penting dalam desain web. Namun, kita sebaiknya tidak menggunakan penyesuaian ukuran font untuk membuat paragraf terlihat seperti judul, atau judul terlihat seperti paragraf.

Selalu gunakan tag HTML yang tepat, seperti <h1> - <h6> untuk judul dan <p> untuk paragraf.

Nilai font-size bisa menjadi ukuran absolute (mutlak), atau relative (relatif).

Ukuran absolut:

Mengatur teks ke ukuran tertentu
Tidak memungkinkan pengguna untuk mengubah ukuran teks dalam semua browser (buruk karena alasan aksesibilitas)
ukuran absolut berguna ketika ukuran fisik dari output diketahui

Ukuran relatif:

Mengatur ukuran relatif terhadap elemen sekitarnya
Memungkinkan pengguna untuk mengubah ukuran teks dalam browser

Catatan: Jika kita tidak menentukan ukuran font, ukuran default untuk teks normal, seperti paragraf, adalah 16px (16px = 1em).

Mengatur Ukuran Font Dengan Pixel

Mengatur ukuran teks dengan piksel memberikan kita kendali penuh atas ukuran teks.

Contoh

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<p>Ini adalah sebuah paragraf.</p>
<p>Ini adalah sebuah paragraf lain.</p>

</body>
</html>

Hasilnya:

Mengatur Ukuran Font Dengan Em

Untuk memungkinkan pengguna dalam mengubah ukuran teks (dalam menu browser), banyak developer menggunakan em daripada piksel.

Catatan: Menggunakan em direkomendasikan penggunaannya.

1em sama dengan ukuran font default saat ini. Ukuran teks default di browser adalah 16px. Jadi, ukuran default dari 1em adalah 16px.

Ukuran dapat dihitung dari piksel ke em menggunakan rumus ini: pixels/16=em

Contoh

h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
    font-size: 1.875em; /* 30px/16=1.875em */
}

p {
    font-size: 0.875em; /* 14px/16=0.875em */
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>

<p>Ini adalah sebuah paragraf.</p>

<p>Menentukan ukuran font di em memungkinkan semua browser utama untuk mengubah ukuran teks. Sayangnya, masih ada masalah dengan IE versi lama. Saat mengubah ukuran teks, itu menjadi lebih besar / lebih kecil dari ukuran seharusnya.</p>

</body>
</html>

Hasilnya:

Dalam contoh di atas, ukuran teks dalam em adalah sama dengan contoh sebelumnya dalam pixel. Namun, dengan menggunakan ukuran em, memungkinkan kita untuk menyesuaikan ukuran teks dalam semua browser.

Sayangnya, masih ada masalah dengan versi IE. Teks menjadi lebih besar dari yang seharusnya ketika dibuat lebih besar, dan lebih kecil dari yang seharusnya bila dibuat lebih kecil.

Menggunakan Kombinasi Persen dan Em

Kita juga bisa mengkombinasikan persen (%) dan em dalam menentukan ukuran huruf.

Contoh berikut ini menunjukkan ukuran teks yang sama di semua browser, dan memungkinkan semua browser untuk memperbesar atau mengubah ukuran teks.

Contoh

body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>

<p>Ini adalah sebuah paragraf.</p>
<p>Contoh ini adalah menentukan ukuran font dalam persen dan em dan ukuran teks yang dihasilkan adalah sama di semua browser utama, dan memungkinkan semua browser mengubah ukuran teks</ p>

</body>
</html>

Hasilnya:

Font Weight

Properti font-weight digunakan untuk menentukan berat (ukuran ketebalan) font.

Contoh

p.normal {
    font-weight: normal;
}

p.light {
    font-weight: lighter;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p class="normal">Ini adalah sebuah paragraf.</p>
<p class="light">Ini adalah sebuah a paragraf.</p>
<p class="thick">Ini adalah sebuah paragraf.</p>
<p class="thicker">Ini adalah sebuah paragraf.</p>

</body>
</html>

Hasilnya:

Responsif Ukuran Font

Ukuran teks juga dapat diatur dengan menggunakan satuan vw, yang berarti "viewport width". Dengan cara itu ukuran teks akan mengikuti ukuran jendela browser.

Contoh

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h1 style="font-size:10vw;">Teks Responsif</h1>

<p style="font-size:5vw;">Ubah ukuran jendela browser untuk melihat skala ukuran teks</p>

<p style="font-size:5vw;">Gunakan unit "vw" saat menentukan ukuran teks. 10vw akan mengatur ukuran hingga 10% dari lebar viewport.</p>

<p>Viewport adalah ukuran jendela browser. 1vw = 1% dari lebar viewport. Jika viewport lebarnya 50cm, 1vw adalah 0,5cm.</p>

</body>
</html>

Hasilnya:

Font Variant

Properti font-variant digunakan untuk menentukan apakah teks harus ditampilkan dalam huruf kecil.

Dalam huruf small-caps, semua huruf kecil dikonversi menjadi huruf besar. Namun, huruf besar yang dikonversi muncul dalam ukuran font yang lebih kecil dari huruf besar asli dalam teks.

Contoh

p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p class="normal">Nama saya Octavianus Hasan.</p>
<p class="small">Nama saya Octavianus Hasan.</p>

</body>
</html>

Hasilnya:

Demikian pembahasan mengenai Fonts dalam CSS.
Semoga bermanfaat!

Belajar CSS Part 12 - Text

noreply@blogger.com (Octavianus Hasan) — Sat, 12 May 2018 00:42:00 +0800

Text Color

Properti color digunakan untuk mengatur warna teks. Warna bisa ditentukan dengan menggunakan:

nama - menentukan warna menggunakan nama warna, seperti "blue" untuk warna biru.
RGB - menentukan warna menggunakan nilai RGB, seperti "rgb (0,0,255)"
Hex - menentukan warna menggunakan nilai hex, seperti "#0000ff"

Contoh

body {
    color: blue;
}

h1 {
    color: green;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading 1</h1>
<p> Ini adalah paragraf biasa. Perhatikan bahwa teks ini berwarna biru. Warna teks default untuk halaman diatur dalam selector body pada CSS. </ P>

</body>
</html>

Hasilnya:

Text Alignment

Properti text-align digunakan untuk mengatur perataan, jajaran atau keselarasan teks secara horizontal. Dengan menggunakan properti text-align, kita bisa mengatur perataan teks, seperti rata kiri, kanan, tengah, atau rata kiri-kanan.

Contoh berikut menunjukkan teks rata tengah, dan juga teks rata kiri dan kanan (perataan kiri adalah default jika arah teks dari kiri ke kanan, dan perataan kanan adalah default jika arah teks dari kanan ke kiri).

Contoh

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Heading 1 (rata tengah)</h1>
<h2>Heading 2 (rata kiri)</h2>
<h3>Heading 3 (rata kanan)</h3>

<p>Ketiga heading di atas memiliki perataan teks, yaitu rata tengah, rata, kiri, dan rata kanan</p>

</body>
</html>

Hasilnya:

Ketika properti text-align diatur ke "justify", setiap baris meregang sehingga setiap baris memiliki lebar yang sama, dan margin kiri dan kanan rata (seperti di majalah dan koran):

Contoh

div {
    border: 1px solid black;
    padding: 10px;
    width: 200px;
    height: 300px;
    text-align: justify;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Contoh penggunaan text-align: justify;</h1>

<p>Apabila text-align diatur ke "justify", setiap baris meregang sehingga setiap baris memiliki lebar yang sama, dan margin kiri dan kanan rata (seperti di majalah dan koran)</p>

<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

</body>
</html>

Hasilnya:

Text Decoration

Properti text-decoration digunakan untuk mengatur atau menghapus dekorasi dari teks. Value text-decoration biasanya digunakan untuk menghilangkan atau menghapus garis bawah dari link.

Contoh

a {
    text-decoration: none;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Ini adalah sebuah link tanpa garis bawah (underline): <a href="https://king-octahasan.blogspot.com">king-octahasan</a></p>

</body>
</html>

Hasilnya:

Fungsi lain dari properti text-decoration adalah digunakan untuk menghias teks.

Contoh

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>

</body>
</html>

Hasilnya:

Catatan: Hal ini tidak dianjurkan untuk menggarisbawahi teks yang bukan link, karena bisa membingungkan pembaca teks tersebut.

Text Transformation

Properti text-transform digunakan untuk menentukan huruf besar dan huruf kecil dalam teks.

Hal ini dapat memudahkan kita untuk mengubah semua huruf menjadi huruf besar atau huruf kecil, ataupun digunakan hanya pada huruf pertama dari setiap kata.

Contoh

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p class="uppercase">Ini adalah sebuah teks</p>
<p class="lowercase">Ini adalah sebuah teks</p>
<p class="capitalize">Ini adalah sebuah teks</p>

</body>
</html>

Hasilnya:

Teks Indentation

Properti text-indent digunakan untuk menentukan indentasi baris pertama dari teks.

Contoh

p {
    text-indent: 50px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>

Hasilnya:

Letter Spacing

Properti letter-spacing digunakan untuk menentukan ruang antara karakter dalam teks.

Contoh berikut menunjukkan bagaimana untuk menambah atau mengurangi ruang antara karakter.

Contoh

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>

</body>
</html>

Hasilnya:

Line Height

Properti line-height digunakan untuk menentukan ruang antara baris.

Contoh

p.small {
    line-height: 0.7;
}

p.big {
    line-height: 1.8;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>
Ini adalah sebuah paragraf dengan line-height default.<br>
Ketinggian baris default di sebagian besar browser adalah sekitar 110% hingga 120%.<br>
</p>

<p class="small">
Ini adalah sebuah paragraf dengan sebuah line-height kecil.<br>
Ini adalah sebuah paragraf dengan sebuah line-height kecil.<br>
</p>

<p class="big">
Ini adalah sebuah paragraf dengan sebuah line-height besar.<br>
Ini adalah sebuah paragraf dengan sebuah line-height besar.<br>
</p>

</body>
</html>

Hasilnya:

Text Direction

Properti direction digunakan untuk mengubah arah teks dari sebuah elemen.

Contoh

p.contoh1 {
    direction: rtl;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Ini adalah text direction default.</p>
<p class="contoh1"><bdo dir="rtl">Ini adalah text direction dari kanan-ke-kiri.</bdo></p>

</body>
</html>

Hasilnya:

Word Spacing

Properti word-spacing digunakan untuk menentukan ruang antara kata-kata dalam sebuah teks.

Contoh berikut menunjukkan bagaimana untuk menambah atau mengurangi ruang antara kata-kata.

Contoh

h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>

</body>
</html>

Hasilnya:

Text Shadow

Properti text-shadow digunakan untuk menambahkan bayangan pada teks.

Contoh berikut menentukan posisi bayangan horizontal (3px), posisi bayangan vertikal (2px) dan warna bayangan (biru):

Contoh

h1 {
    text-shadow: 3px 2px red;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h1>Efek text-shadow</h1>
<p><b>Catatan:</b> Internet Explorer 9 (dan versi sebelumnya) tidak mendukung properti text-shadow.</p>

</body>
</html>

Hasilnya:

Demikian pembahasan mengenai Text (teks).
Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 11 - Outline (Garis Luar)

noreply@blogger.com (Octavianus Hasan) — Wed, 9 May 2018 00:57:00 +0800

CSS Outline

Outline pada CSS adalah garis yang berada di sekitar elemen, tepatnya di luar border. Fungsi dari outline ini adalah untuk membuat elemen agar terlihat lebih menonjol.

CSS outline memiliki properti-properti berikut:

outline-style
outline-color
outline-width
outline-offset
outline

Catatan: Outline (garis luar) berbeda dengan border! Tidak seperti border, outline digambar di luar elemen border, dan mungkin bisa tumpang tindih dengan konten lainnya. Dan outline BUKAN merupakan bagian dari dimensi elemen; Total lebar dan tinggi elemen tidak terpengaruh oleh lebar outline.

Contoh

p {
    border: 2px solid black;
    outline: #2E9AFE solid 10px;
    margin: auto;    
    padding: 20px;
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p> Elemen ini memiliki batas hitam 2px dan garis luar biru dengan lebar 10 piksel. </ p>

</body>
</html>

Hasilnya seperti di bawah ini:

Outline Style

Properti outline-style digunakan untuk menentukan gaya (styling) untuk outline.

Berikut adalah value yang bisa digunakan dalam outline-style:

dotted - Mendefinisikan garis putus-putus
dashed - Mendefinisikan garis putus-putus
solid - Mendefinisikan garis yang solid
double - Mendefinisikan garis ganda
groove - Mendefinisikan garis 3D beralur
ridge - Mendefinisikan garis bergerigi 3D
inset - Mendefinisikan garis inset 3D
outset - Mendefinisikan garis awal 3D
none - Mendefinisikan tidak ada garis (garis ditiadakan)
hidden - Mendefinisikan garis yang disembunyikan

Contoh berikut menunjukkan berbeda value dari outline-style:

Contoh

p {outline-color:lightskyblue;}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti outline-style</h2>

<p class="dotted">dotted outline</p>
<p class="dashed">dashed outline</p>
<p class="solid">solid outline</p>
<p class="double">double outline</p>
<p class="groove">groove outline. Efeknya tergantung pada value dari outline-color.</p>
<p class="ridge">ridge outline. Efeknya tergantung pada value dari outline-color.</p>
<p class="inset">inset outline. Efeknya tergantung pada value dari outline-color.</p>
<p class="outset">outset outline. Efeknya tergantung pada value dari outline-color.</p>

</body>
</html>

Hasilnya:

Outline Color

Properti outline-color digunakan untuk mengatur warna garis. Warna dapat diatur dengan menggunakan:

nama - menentukan warna menggunakan nama warna, seperti "blue" untuk warna biru.
RGB - menentukan warna menggunakan nilai RGB, seperti "rgb (0,0,255)"
Hex - menentukan warna menggunakan nilai hex, seperti "#0000ff"
invert - melakukan inversi warna (yang menjamin bahwa garis yang terlihat atau menonjol, terlepas dari warna latar belakang)

Contoh berikut menunjukkan beberapa garis yang berbeda dengan warna yang berbeda. Juga perhatikan bahwa elemen-elemen ini juga memiliki garis hitam tipis di dalam outline.

Contoh

p.contoh1 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
}

p.contoh2 {
    border: 1px solid black;
    outline-style: double;
    outline-color: green;
}

p.contoh3 {
    border: 1px solid black;
    outline-style: outset;
    outline-color: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti outline-color</h2>

<p class="contoh1">Outline solid merah.</p>
<p class="contoh2">Outline solid hijau.</p>
<p class="contoh3">Outline solid kuning.</p>

</body>
</html>

Hasilnya:

Contoh berikut ini menggunakan outline-color: invert, yang melakukan inversi warna. Hal ini memastikan bahwa garis yang terlihat atau menonjol, terlepas dari warna latar belakang:

Contoh

p.contoh1 {
    border: 1px solid yellow;
    outline-style: solid;
    outline-color: invert;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Menggunakan outline-color:invert</h2>
<p class="contoh1">Outline invert</p>

</body>
</html>

Hasilnya:

Outline Width

Properti outline-width digunakan untuk menentukan lebar outline. Berikut adalah value yang bisa digunakan dalam outline-width:

thin (biasanya 1px)
medium (biasanya 3px)
thick (biasanya 5px)
Sebuah ukuran tertentu (dalam px, pt, cm, em, dll)

Contoh berikut menunjukkan beberapa garis dengan lebar yang berbeda:

Contoh

p.contoh1 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: skyblue;
    outline-width: thin;
}

p.contoh2 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: skyblue;
    outline-width: medium;
}

p.contoh3 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: skyblue;
    outline-width: thick;
}

p.contoh4 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: skyblue;
    outline-width: 4px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti outline-width</h2>
<p class="contoh1">thin outline.</p>
<p class="contoh2">medium outline.</p>
<p class="contoh3">thick outline.</p>
<p class="contoh4">4px thick outline.</p>

</body>
</html>

Hasilnya:

Outline Offset

Properti outline-offset digunakan untuk menambah ruang antara garis dan tepi atau batas elemen. Ruang antara elemen dan garis adalah transparan.

Contoh berikut menentukan sebuah 15px outline tepi border:

Contoh

p {
    margin: 30px;
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti outline-offset</h2>
<p> Paragraf ini memiliki outline (garis luar) 15px di luar tepi border. </ p>

</body>
</html>

Hasilnya:

Contoh berikut menunjukkan bahwa ruang antara elemen dan garis adalah transparan:

Contoh

p {
    margin: 30px;
    background:yellow;
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti outline-offset</h2>
<p> Paragraf ini memiliki outline (garis luar) 15px di luar tepi border. </ p>

</body>
</html>

Hasilnya:

Outline

Properti outline adalah properti singkatan yang digunakan untuk menetapkan properti outline secara individu:

outline-width
outline-style (wajib)
outline-color

Properti outline ditetapkan sebagai salah satu, dua, atau tiga nilai dari daftar di atas. Urutan nilai tidak masalah, artinya boleh bertukaran dalam penulisan nilainya.

Contoh berikut menunjukkan beberapa garis yang ditentukan dengan menggunakan properti singkatan, yaitu outline:

Contoh

p.contoh1 {outline: dashed;}
p.contoh2 {outline: dotted red;}
p.contoh3 {outline: 5px solid yellow;}
p.contoh4 {outline: thick ridge pink;}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti outline</h2>

<p class="contoh1">outline dashed.</p>
<p class="contoh2">outline dotted merah.</p>
<p class="contoh3">5px solid outline kuning .</p>
<p class="contoh4">thick ridge outline pink.</p>

</body>
</html>

Hasilnya:

Demikian pembahasan mengenai CSS Outline (garis luar).

Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 10 - CSS Box Model

noreply@blogger.com (Octavianus Hasan) — Wed, 11 Apr 2018 01:55:00 +0800

Box Model

Box Model adalah konsep yang menjelaskan bahwa semua elemen halaman web dapat dianggap dan diproses sebagai kotak (box). Dalam CSS, istilah "box model" digunakan ketika berbicara tentang desain dan tata letak sebuah halaman web.

Box Model pada dasarnya adalah sebuah kotak yang membungkus di sekitar setiap elemen HTML. Box Model terdiri dari beberapa lapisan, yaitu:

margin
border
padding
konten

Gambar di bawah merupakan ilustrasi box model:

Box Model memungkinkan kita untuk menambahkan border di sekitar elemen, dan untuk mendefinisikan ruang antara elemen-elemen.

Contoh

div {
    background-color: greenyellow;
    width: 300px;
    border: 25px solid lightskyblue;
    padding: 25px;
    margin: 25px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Demo CSS Box Model</h2>

<p> CSS Box Model pada dasarnya adalah kotak yang membungkus setiap elemen HTML. Box Model terdiri dari border, padding, margin, dan konten.</p>

<div>Teks ini adalah isi dari kotak (isi konten). Konten ini memiliki padding 25px, margin 25px dan border biru langit 25px. Selain itu juga, teks ini memiliki warna latar belakang hijau kekuningan. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>

Hasilnya:

Mengatur Lebar dan Tinggi Elemen

Dalam rangka pengaturan lebar dan tinggi suatu elemen dengan benar di semua browser, kita perlu tahu bagaimana cara kerja box model.

Apabila kita ingin mengatur lebar dan tinggi dari suatu elemen dengan menggunakan CSS, kita hanya mengatur lebar dan tinggi dari area konten saja. Untuk menghitung ukuran penuh dari sebuah elemen, kita harus menambahkan padding, border, dan margin.

Contoh

div {
    width: 320px;
    height:100px;
    padding: 10px;
    border: 5px solid gray;
    margin: 20;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Menghitung lebar dan tinggi box model:</h2>
<div>Kotak ini memiliki tinggi 100px dan lebar 320px.</div>

</body>
</html>

Hasilnya:

Berikut adalah cara perhitungannya:

100px (tinggi)

+ 20px (padding atas + bawah)

+ 10px (border atas + bawah)

+ 40px (margin atas + bawah)

= 160px (tinggi total)

320px (lebar)

+ 20px (padding kiri + kanan)

+ 10px (border kiri + kanan)

+ 40px (margin kiri + kanan)

= 390px (lebar total)

Total tinggi dan lebar elemen harus dihitung seperti ini:

Tinggi:

Jumlah total elemen height = (height) + (padding atas + padding bawah) + (border atas + border bawah) + (margin atas + margin bawah)

Lebar:

Jumlah total elemen width = (width) + (padding kiri + padding kanan) + (border kiri + border kanan) + (margin kiri + margin kanan)

Demikian pembahasan mengenai box model dalam CSS.

Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 9 - Mengatur Tinggi dan Lebar Elemen

noreply@blogger.com (Octavianus Hasan) — Mon, 9 Apr 2018 03:11:00 +0800

CSS Height dan Width

Properti height dan width digunakan untuk mengatur tinggi dan lebar pada suatu elemen.

Properti CSS height dan width memiliki satuan nilai (value) berikut:

auto - browser menghitung nilai tinggi dan lebar secara otomatis (satuan nilai auto adalah default)
satuan px, cm, dll
satuan % (persen) berdasarkan blok elemen.

Contoh 1

div {
    height: 200px;
    width: 50%;
    background-color: powderblue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Mengatur tinggi dan lebar suatu elemen</h2>
<p>Elemen div di bawah ini memiliki tinggi 200px and dan lebar 50%:</p>

<div>Elemen div ini memiliki tinggi 200px and dan lebar 50%</div>

</body>
</html>

Hasilnya:

Contoh 2

div {
    height: 100px;
    width: 500px;
    background-color: powderblue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Mengatur tinggi dan lebar suatu elemen</h2>
<p>Elemen div di bawah ini memiliki tinggi 100px and dan lebar 500px:</p>

<div>Elemen div ini memiliki tinggi 100px and dan lebar 500px</div>

</body>
</html>

Hasilnya:

Catatan: Properti height dan width tidak mengandung padding, border, atau margin. Properti ini hanya mengatur tinggi atau lebar area di dalam padding, border, dan margin pada suatu elemen.

Pengaturan "max-height" dan "min-height"

Properti max-height digunakan untuk mengatur panjang maksimum dari suatu elemen. Sedangkan properti min-height digunakan untuk mengatur panjang minimum dari suatu elemen.

Properti max-height dan min-height dapat ditentukan dalam nilai (value):

length - seperti px, cm, dll
persen (%) - berdasarkan blok elemen
none - lebar maksimum ditiadakan (ini adalah pengaturan default)

Contoh

div {
    max-height: 600px;
    min-height: 400px;
    background-color: powderblue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Pengaturan max-height dan min-height dari sebuah elemen</h2>
<p>Resize jendela browser untuk melihat efeknya</p>

<div>Ini adalah teks...Ini adalah teks...Ini adalah teks...Ini adalah teks...Ini adalah teks...Ini adalah teks...Ini adalah teks...Ini adalah teks...Ini adalah teks</div>

</body>
</html>

Hasilnya:

Pengaturan "max-width" dan "min-width"

Properti max-width digunakan untuk mengatur lebar maksimum dari suatu elemen. Sedangkan properti min-width digunakan untuk mengatur lebar minimum dari suatu elemen.

Sama halnya dengan properti max-height dan min-height, properti max-width dan min-width dapat ditentukan dalam nilai (value):

length - seperti px, cm, dll
persen (%) - berdasarkan blok elemen
none - lebar maksimum ditiadakan (ini adalah pengaturan default)

Contoh

div {
    max-width: 500px;
    height: 100px;
    background-color: powderblue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Pengaturan max-width and min-width dari sebuah elemen</h2>
<p>Resize (perkecil dan perbesar) jendela browser untuk melihat efeknya</p>

<div>Ini adalah teks...Ini adalah teks...Ini adalah teks...Ini adalah teks...Ini adalah teks...Ini adalah teks...Ini adalah teks...Ini adalah teks...Ini adalah teks</div>

</body>
</html>

Hasilnya:

Di bawah ini adalah tabel dari properti-properti CSS height dan width:

Properti	Deskripsi
height	Mengatur tinggi sebuah elemen
max-height	mengatur tinggi maksimum suatu elemen
min-height	mengatur tinggi minimum suatu elemen
width	mengatur lebar suatu elemen
max-width	mengatur lebar maksimum suatu elemen
min-width	mengatur lebar minimum suatu elemen

Demikian pembahasan mengenai cara mengatur tinggi dan lebar sebuah elemen menggunakan properti CSS height dan width.

Semoga bermanfaat!

Sumber: https://www.w3schools.com

Belajar CSS Part 8 - Padding pada CSS

noreply@blogger.com (Octavianus Hasan) — Mon, 9 Apr 2018 01:35:00 +0800

Padding

Padding merupakan sisi dalam dari sebuah elemen. Sama halnya dengan margin, kita juga bisa mengatur jarak pada sisi sebuah elemen. Padding hanya digunakan untuk mengatur jarak pada sisi dalamnya saja.

Properti Padding

Properti padding digunakan untuk menghasilkan ruang di sekitar konten pada sebuah elemen, tepatnya di dalam dari setiap border yang sudah ditetapkan.
Contoh

div {
    padding: 70px;
    border: 1px solid #FF0000;
    text-align: justify;
}

<!DOCTYPE html>
<html>
<head>
<title>Padding</title>
</head>
<body>

<div>Elemen ini memiliki padding 70px. Elemen ini memiliki padding 70px.
Elemen ini memiliki padding 70px.
Elemen ini memiliki padding 70px.
Elemen ini memiliki padding 70px. Elemen ini memiliki padding 70px. Elemen ini memiliki padding 70px. Elemen ini memiliki padding 70px. Elemen ini memiliki padding 70px.</div>

</body>
</html>

Hasilnya kurang lebih seperti ini:

Sama halnya dengan margin, padding juga memiliki empat sisi, yaitu:

padding-top
padding-right
padding-bottom
padding-left

Semua properti padding memiliki nilai (value) berikut:

length - menentukan nilai padding dalam px, pt, cm, dll
% - menentukan padding dalam persen berdasarkan lebar blok elemen
inherit - menetapkan padding harus mengikuti elemen induk (atau elemen sebelumnya)

Catatan: Dalam padding, nilai negatif tidak diperbolehkan.

Di bawah ini adalah contoh menetapkan padding yang berbeda untuk keempat sisi dari elemen <div>:

Contoh

div {
    border: 1px solid black;
    background-color: lightblue;
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Penggunaan properti padding</h2>
<div>Elemen div ini memiliki padding pada sisi atas 50px, padding pada sisi kanan 30px, padding pada sisi bawah 50px, dan padding pada sisi kiri 80px.</div>

</body>
</html>

Hasilnya:

Mempersingkat Pengkodean pada Padding

Untuk mempersingkat pengkodean, kita harus menentukan semua properti padding dalam satu properti.

Properti padding digunakan untuk menyingkat properti berikut:

padding-top
padding-right
padding-bottom
padding-left

Berikut adalah adalah cara kerjanya:

Apabila properti padding memiliki empat nilai:

padding: 25px 50px 75px 100px;

padding sisi atas adalah 25px
Padding sisi tepat adalah 50px
Padding sisi bawah adalah 75px
Padding sisi kiri adalah 100px

Contoh

div {
    border: 1px solid black;
    padding: 25px 50px 75px 100px;
    background-color: lightblue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti padding 4 nilai</h2>
<div>Elemen div ini memiliki padding 25px pada sisi atas, 50px pada sisi kanan, 75px pada sisi bawah, dan 100px pada sisi kiri.</div>

</body>
</html>

Hasilnya:

Apabila properti padding memiliki tiga nilai:

padding: 25px 50px 75px;

padding sisi atas adalah 25px
paddings sisi kanan dan kiri adalah 50px
Padding sisi bawah adalah 75px

Contoh

div {
    border: 1px solid black;
    padding: 25px 50px 75px;
    background-color: lightblue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti padding 3 nilai</h2>
<div>Elemen div ini memiliki padding 25px pada sisi atas, 50px pada sisi kanan dan kiri, 75px pada sisi bawah.</div>

</body>
</html>

Hasilnya:

Apaila properti padding memiliki dua nilai:

padding: 25px 50px;

padding sisi atas dan bawah yang 25px
padding sisi kanan dan kiri adalah 50px

Contoh

div {
    border: 1px solid black;
    padding: 25px 50px;
    background-color: lightblue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti padding 2 nilai</h2>
<div>Elemen div ini memiliki padding 25px pada sisi atas dan bawah, dan 50px pada sisi kanan dan kiri.</div>

</body>
</html>

Hasilnya:

Apabila properti padding memiliki satu nilai:

padding: 25px;

keempat sisi padding adalah 25px

Contoh

div {
    border: 1px solid black;
    padding: 25px;
    background-color: lightblue;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti padding 1 nilai</h2>
<div>Elemen div ini memiliki padding 25px untuk keempat sisinya</div>

</body>
</html>

Hasilnya:

Catatan: Apabila kita ingin memberikan ukuran padding yang sama pada keempat sisi, maka cukup hanya dengan menuliskan padding 1 nilai saja seperti di atas.

Pada tabel di bawah ini adalah semua properti CSS padding:

Properti	Deskripsi
padding	Sebuah properti singkatan untuk mengatur semua properti padding dalam satu deklarasi
padding-top	Menentukan padding pada sisi atas konten dalam sebuah elemen
padding-right	Menentukan padding pada sisi kanan konten dalam sebuah elemen
padding-bottom	Menentukan padding pada sisi bawah konten dalam sebuah elemen
padding-left	Menentukan padding pada sisi kiri konten dalam sebuah elemen

Demikian pembahasan mengenai cara mengatur padding atau jarak di sekitar konten pada sebuah elemen.
Semoga bermanfaat!

Sumber: https://www.w3schools.com