Tuesday, June 14, 2022

Belajar CSS - Pengenalan CSS3

 

Pengertian CSS Vendor Prefix dan Cara Penulisannya

Pengertian CSS Vendor Prefix

Vendor prefix adalah sebutan untuk penambahan beberapa karakter khusus di awal penulisan property, terutama untuk property CSS3 terbaru. Sebagai contoh, untuk property column-count, jika menggunakan vendor prefix ditulis menjadi: -webkit-column-count.

Penulisan Vendor Prefix

Vendor prefix ditambahkan di awal penulisan property, sesuai dengan inisial web browser.

Berikut adalah awalan vendor prefix pada web browser populer:

  • -webkit- (Chrome, dan versi terbaru dari Opera)
  • -moz- (Firefox)
  • -o- (Opera versi lama)
  • -ms- (Internet Explorer)

Berikut contoh cara penulisan CSS Vendor Prefix:

1
2
3
4
5
6
7
div {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  -o-column-count: 3;
  -ms-column-count: 3;
  column-count: 3;
}

Property column-count digunakan untuk membuat kolom koran (multiple column). Sayangnya property ini belum menjadi standar resmi, sehingga belum didukung penuh oleh web browser . Karena itu harus menulisnya dengan penambahan vendor prefix.

Pada baris terakhir terdapat penulisan property ‘resmi’, yakni tanpa vendor prefix. Ini dipersiapkan agar ketika property tersebut sudah dinyatakan stabil, nilai dari property ini akan menimpa efek sebelumnya (yang menggunakan vendor prefix). Dengan demikian, hasil yang di dapat akan seragam pada setiap web browser.

Penambahan property dengan vendor prefix memang sedikit merepotkan. Kode CSS menjadi 5 kali lebih panjang, namun ini hanya digunakan untuk property CSS3 yang relatif baru. Jika property tersebut sudah selesai, bisa ‘membuang’ bagian vendor prefix dan menggunakan nama property resmi.

Membuat Efek Teks Berbayang dengan CSS3

Sesuai dengan namanya, property text-shadow adalah modul baru di dalam CSS3 yang berfungsi untuk menghasilkan teks berbayang (text shadow).

Contoh kode HTML dan CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   h1 {
     text-shadow: 2px 2px;
   }
</style>
</head>
<body>
<h1>Belajar CSS</h1>
</body>
</html>


Terlihat teks judul <h1> memiliki bayangan yang berada sedikit ke kanan dan kearah bawah. Penulisan property text-shadow: 2px 2px artinya:  ingin membuat bayangan di arah 2 pixel ke kanan, dan 2 pixel ke bawah.

Jika ingin bayangan ini berada di arah atas dan kiri, gunakan nilai negatif, seperti berikut:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   h1 {
     text-shadow: -10px -15px;
   }
</style>
</head>
<body>
<h1>Belajar CSS</h1>
</body>
</html>


Cara Menambahkan Efek Blur pada Bayangan Teks

Selain mengatur posisi bayangan, juga bisa mengatur seberapa ‘kabur’ bayangan yang dihasilkan. Caranya dengan menambahkan nilai blur, seperti berikut:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   h1 {
     text-shadow: 10px -15px 5px;
   }
</style>
</head>
<body>
<h1>Belajar CSS</h1>
</body>


Nilai 5px dari penulisan text-shadow: 10px -15px 5px adalah nilai blur yang ingin ditambahkan. Semakin tinggi nilainya, semakin ‘kabur’ bayangan yang dihasilkan

Cara Mengubah Warna Bayangan Teks

Secara default, bayangan teks berwarna sama dengan teks itu. Dalam contoh sebelumnya teks berwarna hitam, sehingga bayangannya juga berwarna hitam. 

Tambahkan 1 lagi nilai kepada property text-shadow, langsung saja masuk ke contohnya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   h1.satu {
     text-shadow: 2px 2px 5px red;
   }
   h1.dua {
     text-shadow: 2px -2px 5px blue;
   }
   h1.tiga {
     text-shadow: -5px -5px 3px #FF68ED;
   }
   h1.empat {
     text-shadow: 2px -2px 15px #56FF67;
   }
</style>
</head>
<body>
<h1 class="satu">Belajar CSS</h1>
<h1 class="dua">Belajar CSS</h1>
<h1 class="tiga">Belajar CSS</h1>
<h1 class="empat">Belajar CSS</h1>
</body>
</html>


Dapat alihat sekarang setiap teks memiliki warna bayangan yang berbeda-beda. Dengan menukar nilai warna, bisa mendapatkan efek bayangan yang mempesona.

Membuat Efek Bayangan (Box Shadow)

Property CSS3 box-shadow untuk Membuat Efek Bayangan

Untuk membuat efek bayangan pada sebuah element HTML (Box Model), gunakan property CSS3 box-shadow.

Property box-shadow bisa diisi dengan beragam nilai, tapi setidaknya perlu 2 nilai utama yang menentukan seberapa jauh jarak bayangan ditampilkan. Berikut contohnya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width: 150px;
     height: 150px;
     border: 2px solid black;
     background-color: yellow;
     margin: 30px;
  
     box-shadow: 7px 7px;
   }
</style>
</head>
<body>
<div></div>
</body>
</html>


Property box-shadow: 7px 7px akan menghasilkan efek bayangan di posisi 7 pixel ke kanan dan 7 pixel kebawah. Jika ingin kearah kiri dan atas, bisa menggunakan angka negatif:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width: 150px;
     height: 150px;
     border: 2px solid black;
     background-color: yellow;
     margin: 30px;
  
     box-shadow: -7px -7px;
   }
</style>
</head>
<body>
<div></div>
</body>
</html>


Mengatur Efek Blur Bayangan

Selain posisi bayangan, juga bisa mengatur seberapa ‘kabur’ bayangan yang ditampilkan. Dalam istilah design, ini dikenal dengan istilah blur. Semakin tinggi nilai blur, semakin samar-samar bayangan yang terjadi. Berikut contohnya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width: 150px;
     height: 150px;
     border: 2px solid black;
     background-color: yellow;
     margin: 30px;
  
     box-shadow: 7px 7px 10px;
   }
</style>
</head>
<body>
<div></div>
</body>
</html>


Property box-shadow: 7px 7px 10px berarti ingin menampilkan bayangan di 7 pixel ke kanan, 7 pixel ke bawah, dengan blur sebesar 10 pixel.

Menentukan Besar Bayangan

Nilai berikutnya yang bisa diinput ke dalam property box-shadow adalah Spread. Spread menentukan seberapa besar bayangan yang dibentuk. Berikut contohnya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width: 150px;
     height: 150px;
     border: 2px solid black;
     background-color: yellow;
     margin: 30px;
  
     box-shadow: 7px 7px 10px 15px;
   }
</style>
</head>
<body>
<div></div>
</body>
</html>


Mengganti Warna Bayangan

Dalam contoh sebelumnya, bayangan tampil dengan warna hitam, dimana ini adalah warna default bawaan web browser. Bisa menambahkan nilai warna ke dalam property box-shadow untuk mengganti warna bayangan ini. Berikut contohnya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width: 150px;
     height: 150px;
     border: 2px solid black;
     background-color: yellow;
     margin: 30px;
  
     box-shadow: 7px 7px 10px 2px green;
   }
</style>
</head>
<body>
<div></div>
</body>
</html>


Property box-shadow: 7px 7px 10px 2px green berarti: buat bayangan di posisi 7 pixel ke kanan, 7 pixel kebawah, blur sebesar 10 pixel, spread 2 pixel, dan berwarna hijau (green).

Menambahkan Efek Bayangan ke Gambar (img)

Efek bayangan dari property box-shadow yang dipelajari disini sangat menarik untuk digunakan dalam berbagai element HTML, terutama ke dalam gambar.

Dengan menambahkan property box-shadow: 10px 10px 10px ke dalam bingkai gambar yang pernah kita buat di dalam Tutorial Belajar CSS: Membuat Gallery Gambar dengan HTML dan CSS, efek yang dihasilkan terlihat professional. Berikut hasilnya:


Berikut kode yang  digunakan:
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar CSS</title>
  <style>
    body {
      width: 736px;
      margin: 10px auto;
      border: 2px solid black;
    }
    img {
      border: 4px solid #575D63;
      margin: 20px;
      padding: 10px;
      width: 300px;
      height: 200px;
      box-shadow: 10px 10px 10px;
    }
  </style>
</head>
<body>
  <img class="gambar1" src="autumn_lake.jpg"><img class="gambar2" src="beach.jpg">
  <img class="gambar3" src="berry.jpg"><img class="gambar4" src="sakura.jpg">
</html>

Untuk mendapatkan hasil yang sama, tinggal mengganti nama file gambar.

Membuat Sudut Melengkung (Rounded Corner)

di CSS

Untuk membuat sudut membulat, sudut melengkung atau rounded corner, di CSS3 menggunakan property border-radius. Nilai untuk property berupa satuan panjang seperti pixel, atau em. Semakin tinggi nilainya, semakin melengkung efek yang dihasilkan.

Berikut contoh cara membuat rounded corner:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width: 200px;
     height: 50px;
     border: 4px solid black;
     border-radius: 10px;
   }
</style>
</head>
<body>
  <div></div>
</body>
</html>


Contoh diatas, membuat sebuah box menggunakan tag <div>. Efek rounded corner dihasilkan dari property border-radius: 10px yang akan membuat keempat sudut box melengkung.

Mengubah warna border, cukup merubahnya dari property border dan secara otomatis warna border-radius juga ikut berubah:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width: 200px;
     height: 50px;
     border: 4px solid green;
     margin: 10px;
   }
   .satu {border-radius: 10px;}
   .dua {border-radius: 20px;}
   .tiga {border-radius: 30px;}
   .empat {border-radius: 40px;}
</style>
</head>
<body>
  <div class="satu"></div>
  <div class="dua"></div>
  <div class="tiga"></div>
  <div class="empat"></div>
</body>
</html>


4 kotak yang masing-masingnya menggunakan nilai border-radius yang berbeda-beda. Dapat terlihat bahwa semakin tinggi nilainya, semakin ‘membulat’ efek yang dihasilkan.

Mengatur Border Radius untuk Setiap Sudut

CSS3 juga membolehkan untuk mengubah besar sudut secara terpisah. Untuk ini gunakan 4 property:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

Sesuai dengan namanya, setiap property ini memiliki peran masing-masing. Misalnya property border-top-left-radius digunakan untuk mengatur rounded corner untuk sudut kiri atas. Berikut contoh penggunaannya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
div {
  width: 200px;
  height: 200px;
  border: 4px solid red;
  margin: 10px;
  
  border-top-left-radius: 20px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 60px;
  border-bottom-left-radius: 100px;
  }
</style>
</head>
<body>
  <div></div>
</body>
</html>


Contoh diatas menggunakan nilai yang berlainan untuk setiap sudut. Seperti yang terlihat, box memiliki besar bulatan sudut yang berbeda-beda.

Membuat Kolom Koran di HTML (multiple column)

Salah satu tambahan yang cukup menarik di CSS3 adalah modul multiple column. Modul ini digunakan untuk membagi konten teks menjadi kolom-kolom seperti di koran. 

Cara Membuat Tampilan Kolom Koran dengan CSS

CSS3 menyediakan beberapa property untuk membuat tampilan kolom seperti koran. Dalam tutorial ini hanya akan membahas 3 property diantaranya: column-count, column-width, dan column-rule.

Perlu juga menjadi catatan bahwa property-property ini belum bersifat final dan belum didukung secara penuh oleh web browser. Untuk hal ini harus menggunakan cara penulisan vendor prefix, yakni penambahan kode web browser di awal property CSS.

Membagi Kolom Berdasarkan Jumlahnya (column-count)

Cara paling praktis untuk membagi kolom HTML seperti tampilan di koran adalah menggunakan property column-count. Property ini bisa diisi dengan jumlah kolom yang inginkan, apakah 2, 3, 4 atau lebih. Web browser kemudian akan mengatur lebar dari tiap-tiap kolom. Berikut contoh penggunaannya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
 div {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }
</style>
</head>
<body>
<h2>Belajar CSS Multiple Column</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi
tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam
accumsan odio ac lectus mollis finibus. Maecenas imperdiet feugiat
felis, sit amet ullamcorper elit vulputate in.
</p>
<p>liquam a lectus porta, bibendum enim id, dictum nunc. Duis tincidunt
sed turpis non suscipit. Nunc id mi molestie, porta leo id, vulputate
eros. Donec scelerisque vitae justo finibus imperdiet. Curabitur eget
nibh dignissim ipsum interdum maximus at scelerisque odio.</p>
<p>
Morbi ac fermentum risus. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Praesent gravida
luctus leo sit amet vehicula. Donec luctus sit amet justo vel pretium.
Mauris id elit et sem semper convallis non eu nibh. Nullam ultrices
molestie lectus ut ultricies. Nam nec risus nunc.</p>
</div>
</body>
</html>


Seperti yang terlihat, tampilan teks dibagi merata ke dalam 3 kolom, sesuai dengan property column-count: 3.

Membagi Kolom Berdasarkan Lebarnya (column-width)

Cara kedua untuk membagi kolom adalah berdasarkan lebar dari kolom itu. Web browser akan otomatis mengkalkulasi berapa jumlah kolom yang bisa ditampilkan.

Sebagai contoh, jika men-set lebar kolom 200px, maka akan terdapat 4 kolom jika lebar yang tersedia adalah 800px. Untuk keperluan ini menggunakan propery column-width.

Berikut contoh penggunaannya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
  <style>
    div {
    -webkit-column-width: 200px;
    -moz-column-width: 200px;
    column-width: 200px;
  }
</style>
</head>
<body>
<h2>Belajar CSS Multiple Column</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi
tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam
accumsan odio ac lectus mollis finibus. Maecenas imperdiet feugiat
felis, sit amet ullamcorper elit vulputate in.
</p>
<p>liquam a lectus porta, bibendum enim id, dictum nunc. Duis tincidunt
sed turpis non suscipit. Nunc id mi molestie, porta leo id, vulputate
eros. Donec scelerisque vitae justo finibus imperdiet. Curabitur eget
nibh dignissim ipsum interdum maximus at scelerisque odio.</p>
<p>
Morbi ac fermentum risus. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Praesent gravida
luctus leo sit amet vehicula. Donec luctus sit amet justo vel pretium.
Mauris id elit et sem semper convallis non eu nibh. Nullam ultrices
molestie lectus ut ultricies. Nam nec risus nunc.</p>
</div>
</body>
</html>


Kali ini mengatur agar lebar kolom pas sebesar 200px. Jika terdapat ruang lebih, kolom baru akan ditambahkan. Efek yang dihasilkan cukup unik, karena jika mengubah-ubah lebar web browser, jumlah kolom juga akan berubah. Ini terjadi karena stidak menempatkan kolom-kolom ini kedalam ‘container’ lain seperti tag <div>.

Menambahkan garis pemisah kolom (column-rule)

Untuk efek yang lebih menarik, bisa menambahkan garis pemisah diantara kolom-kolom ini. Property yang digunakan adalah column-rule. Nilai yang bisa diisi sama dengan nilai yang digunakan untuk property border CSS. Berikut contoh penggunaannya:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
  div {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  
    -webkit-column-rule: 5px double black;
    -moz-column-rule: 5px double black;
    column-rule: 5px double black;
  }
</style>
</head>
<body>
<h2>Belajar CSS Multiple Column</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi
tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam
accumsan odio ac lectus mollis finibus. Maecenas imperdiet feugiat
felis, sit amet ullamcorper elit vulputate in.
</p>
<p>liquam a lectus porta, bibendum enim id, dictum nunc. Duis tincidunt
sed turpis non suscipit. Nunc id mi molestie, porta leo id, vulputate
eros. Donec scelerisque vitae justo finibus imperdiet. Curabitur eget
nibh dignissim ipsum interdum maximus at scelerisque odio.</p>
<p>
Morbi ac fermentum risus. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Praesent gravida
luctus leo sit amet vehicula. Donec luctus sit amet justo vel pretium.
Mauris id elit et sem semper convallis non eu nibh. Nullam ultrices
molestie lectus ut ultricies. Nam nec risus nunc.</p>
</div>
</body>
</html>


Property column-rule: 5px double black akan membuat sebuah garis pemisah dengan tebal 2 pixel diantara setiap kolom.

Tampilan halaman web seperti yang dibahas disini memang tidak banyak digunakan. Salah satu alasannya karena property CSS3 Multiple Column masih relatif baru dan belum didukung oleh mayoritas web browser. Namun jika tanpa CSS3, efek seperti ini cukup sulit dibuat.

-
Labels:

Memunculkan Simbol & Emoji Pada OS Mac

  Memunculkan Simbol & Emoji  1. Buka aplikasi Pages / Notes pada Macbook. 2. Klik pada Menubar Edit --> Pilih Emoji and Symbols a...