Penyegaran CSS: Border

Tentu, kita semua akrab dengan border. Adakah sesuatu yang baru yang mungkin bisa diperkenalkan? Baiklah, saya yakin ada beberapa hal dalam artikel ini yang tidak pernah Anda ketahui!

CSS3 tidak hanya bisa digunakan untuk membuat sudut yang membulat, tapi CSS biasa juga bisa digulung menjadi bentuk kustom. Betul; di masa lalu, sebelum teknik ini ditemukan, kita mungkin terpaksa menggunakan gambar latar belakang yang diposisikan absolute untuk menampilkan lingkaran atau panah. Syukurlah - saat kami dengan gembira mengambil satu langkah menjauh lagi dari Photoshop - ini bukan lagi masalahnya.

Dasar-dasar

Anda mungkin terbiasa dengan penggunaan border yang paling dasar.

1

border: 1px solid black;

Kode di atas akan menerapkan border 1px pada sebuah elemen. Polos dan sederhana; tapi kita juga bisa memodifikasi sintaksnya sedikit.

1

border-width: thick;

2

border-style: solid;

3

border-color: black;

Selain mengirimkan nilai tertentu ke border-width, tiga kata kunci dapat digunakan: thin, medium, dan thick.

Meskipun pada awalnya mungkin tidak perlu menggunakan bentuk panjang, ada beberapa kasus bila menguntungkan, seperti saat Anda perlu memperbarui beberapa aspek dari border saat event yang ditunjuk terjadi.

Mungkin Anda perlu mengubah warna border saat pengguna meng-hover di atas elemen tertentu. Menggunakan bentuk pendek akan mengharuskan Anda mengulangi nilai piksel.

1

.box {

2

    border: 1px solid red;   

3

}

4

5

.box:hover {

6

    border: 1px solid green;

7

}

Pendekatan yang lebih elegan dan DRY adalah memperbarui properti border-color secara khusus.

1

.box {

2

    border: 1px solid red;   

3

}

4

5

.box:hover {

6

    border-color: green;

7

}

Selain itu, seperti yang akan Anda temukan segera, teknik panjang ini sangat membantu saat membuat bentuk kustom dengan CSS.

Border-Radius

border-radius adalah anak emas dari CSS3 - properti baru pertama yang digunakan secara luas di masyarakat. Apa ini berarti, kecuali Internet Explorer 8 dan di bawahnya, semua browser dapat menampilkan sudut yang membulat.

Sebelumnya, perlu menggunakan awalan vendor untuk Webkit dan Mozilla, agar gayanya diterapkan dengan benar.

1

-webkit-border-radius: 10px;

2

-moz-border-radius: 10px;

3

border-radius: 10px;

Namun, akhir-akhir ini, kita dapat menyingkirkan versi vendor tanpa khawatir, dan tetap berpegang pada bentuk resmi: border-radius.

Seperti yang bisa diduga, kita juga bisa menentukan nilai kustom untuk setiap sisi kotak.

1

border-top-left-radius: 20px;

2

border-top-right-radius: 0;

3

border-bottom-right-radius: 30px;

4

border-bottom-left-radius: 0;

Pada kode di atas, pengaturan border-top-right-radius dan border-bottom-left-radius ke nol akan menjadi berlebihan, kecuali jika elemen mewarisi nilai yang perlu di-reset.

Sama seperti margin atau padding, pengaturan ini bisa dikondensasi menjadi satu properti, jika perlu.

1

/* top left, top right, bottom right, bottom left */

2

border-radius: 20px 0 30px 0;

Sebagai contoh (dan seperti yang sering dilakukan oleh desainer web), bentuk lemon dapat diproduksi ulang dengan CSS dan properti border-radius, seperti:

1

.lemon {

2

   width: 200px; height: 200px; 

3

4

   background: #F5F240;

5

   border: 1px solid #F0D900;      

6

   border-radius: 10px 150px 30px 150px;

7

}

Melampaui Dasar-dasar

Banyak desainer dengan senang hati mengikuti pengetahuan yang diuraikan sejauh ini di bab ini; namun, ada beberapa cara untuk mendorongnya lebih jauh lagi!

Banyak Border

Ada berbagai teknik yang bisa kita lihat, saat bertugas menerapkan banyak border pada sebuah elemen.

Border-Style

Sementara solid, dashed, dan dotted merupakan nilai paling sering untuk properti border-style, ada juga beberapa yang lain yang dapat kita gunakan, termasuk groove dan ridge.

1

border: 20px groove #e3e3e3;

Atau, dengan bentuk panjang:

1

border-color: #e3e3e3;

2

border-width: 20px;

3

border-style: groove;

Meskipun hal ini sangat membantu, efek ridge atau groove bukanlah benar-benar banyak border.

Outline

Teknik yang paling populer untuk membuat dua border adalah memanfaatkan properti outline.

1

.box {

2

   border: 5px solid #292929;

3

   outline: 5px solid #e3e3e3;

4

}

Metode ini sangat bagus, namun terbatas pada dua border. Jika Anda perlu membuat efek berlapis gradien, pendekatan yang berbeda akan diperlukan.

Elemen Pseudo

Bila teknik outline tidak mencukupi, pendekatan alternatif adalah memanfaatkan elemen pseudo :before dan :after, dan menerapkan border tambahan yang diperlukan pada konten yang dihasilkan.

1

.box {

2

  width: 200px; height: 200px;

3

  background: #e3e3e3;

4

  position: relative;

5

6

  border: 10px solid green;  

7

}

8

9

/* Create two boxes with the same width of the container */

10

.box:after, .box:before {

11

  content: '';

12

  position: absolute;

13

  top: 0; left: 0; bottom: 0; right: 0;

14

}

15

16

.box:after {

17

  border: 5px solid red;

18

  outline: 5px solid yellow;

19

}

20

21

.box:before {

22

  border: 10px solid blue;

23

}

Ini mungkin bukan pendekatan yang paling elegan, tapi pasti memenuhi pekerjaan itu. Satu peringatan adalah mudah membingungkan urutan warna border yang akan diterapkan. Tingkat "tebakan dan cek" tertentu sering diminta untuk menerapkan urutan yang benar.

Box-Shadow

Cara anak-anak yang keren untuk menciptakan jumlah border yang tak terbatas adalah dengan memanfaatkan parameter spread di properti CSS3 box-shadow.

1

.box {

2

    border: 5px solid red;

3

     box-shadow: 

4

       0 0 0 5px green, 

5

       0 0 0 10px yellow,

6

       0 0 0 15px orange;

7

}

Dalam kasus ini, kita menjadi pintar dan menggunakan box-shadow dengan cara yang mungkin belum tentu sesuai dengan spesifikasi aslinya.

Dengan mengatur komponen x, y, dan blur menjadi 0, kita malah bisa menggunakan nilai spread untuk membuat border padat di lokasi yang diinginkan. Karena box-shadow bisa ditumpuk, melalui penggunaan koma, jumlah level yang mungkin adalah tidak terbatas.

Teknik ini dengan anggun mendegradasi dengan cukup baik. Di browser lama, yang tidak mengenali properti box-shadow, ini hanya akan me-render border merah tunggal 5px.

Ingat: desain tidak perlu identik di semua browser. Tuliskan CSS Anda untuk browser yang paling modern, lalu berikan fallback yang sesuai, sesuai dengan itu.

Memodifikasi Sudut

Selain mengirimkan satu nilai ke border-radius, secara alternatif kita dapat memilih dua - dipisahkan oleh sebuah / - untuk menentukan nilai unik untuk radius horisontal dan vertikal.

Sebagai contoh...

1

border-radius: 50px / 100px; /* horizontal radius, vertical radius */

…setara dengan:

1

border-top-left-radius: 50px 100px;

2

border-top-right-radius: 50px 100px;

3

border-bottom-right-radius: 50px 100px;

4

border-bottom-left-radius: 50px 100px;

Teknik ini sangat membantu bila Anda perlu meniru kurva yang halus dan panjang, bukan sudut bulat generik. Misalnya, kode berikut memungkinkan kita untuk sedikit melepaskan diri dari bentuk persegi, menghasilkan efek menggulung seperti kertas.

1

.box {

2

    width: 200px; height: 200px;

3

    background: #666;

4

5

    border-top-left-radius: 15em 1em;

6

    border-bottom-right-radius: 15em 1em;

7

8

}

Bentuk CSS

Mungkin penggunaan border yang paling rapi adalah saat mereka dengan cerdik diterapkan ke elemen, yang memiliki lebar dan tinggi nol. Membingungkan, ya? Mari kita lihat sebuah demonstrasi.

Untuk beberapa contoh berikut, asumsikan markup berikut…

1

<div class="box"></div>

…dan gaya dasar berikut:

1

.box {

2

   width: 200px;

3

   height: 200px;

4

   background: black;

5

}

Contoh yang paling sering direferensikan, saat mendemonstrasikan bagaimana bentuk CSS dapat digunakan dalam sebuah proyek, adalah untuk menciptakan panah yang wajib.

Kunci untuk memahami bagaimana sebuah panah dapat dibentuk dengan CSS adalah dengan mengatur border-color yang unik ke masing-masing sisi, dan kemudian mengurangi nilai width dan height untuk kontainer menjadi 0.

Dengan asumsi sebuah div dengan kelas arrow sebagai kontainer:

1

.arrow {

2

  width: 0; height: 0;

3

4

  border-top: 100px solid red;

5

  border-right: 100px solid green;

6

  border-bottom: 100px solid blue;

7

  border-left: 100px solid yellow;  

8

}

Seperti yang ditunjukkan pada awal bab ini, sintaks yang lebih bersih tidak menggunakan versi pendek yang mencakup semua:

1

.arrow {

2

  width: 0; height: 0;

3

4

  border: 100px solid;  

5

  border-top-color: red;

6

  border-right-color: green;

7

  border-bottom-color: blue;

8

  border-left-color: yellow;

9

}

Kita bahkan bisa mengurangi ini lebih jauh, dengan mengelompokkan nilai warna.

1

.arrow {

2

  width: 0; height: 0;

3

4

  border: 100px solid;

5

  border-color: red green blue yellow;

6

}

Menarik kan? Akan sangat masuk akal jika kita mundur selangkah. Itulah satu-satunya cara yang memungkinkan warna bisa sejajar, dengan asumsi width dan height nol untuk kontainer. Nah, bagaimana jika kita mengatur semua border-colors menjadi transparent, kecuali sisi biru?

1

.arrow {

2

  width: 0; height: 0;

3

4

  border: 100px solid;

5

  border-bottom-color: blue;

6

}

Bagus sekali! Tapi sepertinya tidak terlalu semantik untuk membuat div .arrow, semua untuk tujuan menambahkan panah ke halaman. Sebagai gantinya, pseudo element dapat digunakan untuk menerapkan panah setelah atau sebelum elemen yang terkait.

Membuat Gelembung Ucapan

Untuk membuat gelembung ucapan 100% CSS, kita mulai dengan markup-nya.

1

<div class="speech-bubble">Hi there!</div>

Selanjutnya, beberapa gaya dasar harus diterapkan

1

.speech-bubble {

2

    position: relative;

3

    background-color: #292929;

4

5

    width: 200px;

6

    height: 150px;

7

    line-height: 150px; /* vertically center */

8

9

    color: white;

10

    text-align: center;

11

}

Panah akan diaplikasikan dengan menggunakan psuedo-element after.

1

.speech-bubble:after {

2

    content: '';    

3

}

Psuedo element :before dan :after dapat digunakan untuk memasukkan konten yang dihasilkan baik sebelum atau sesudah konten elemen.

Pada titik ini, ini hanya soal mereproduksi panah, dan memposisikannya di lokasi yang tepat. Kita memulai dengan memposisikan kontensecara absolute, mengatur ulang width dan height, dan menerapkan warna border.

1

.speech-bubble:after {

2

  content: '';

3

  position: absolute;

4

5

  width: 0;

6

  height: 0;

7

8

  border: 10px solid;

9

  border-color: red green blue yellow;

10

}

Karena kita tahu bahwa kita ingin panah menunjuk ke bawah, gambar di atas menunjukkan bahwa semua kecuali border merah (atau atas) harus dihilangkan, atau disetel ke transparan.

1

.speech-bubble:after {

2

  content: '';

3

  position: absolute;

4

5

  width: 0;

6

  height: 0;

7

8

  border: 10px solid;

9

  border-top-color: red;

10

}

Saat membuat bentuk CSS, karena kita tidak dapat menggunakan properti width untuk menentukan seberapa lebar panah seharusnya, properti border-width seharusnya yang digunakan. Dalam hal ini, panah harus sedikit lebih besar; sehingga border-width bisa dinaikkan menjadi 15px. Kita juga akan menempatkan panah di bagian bawah dan tengah kontainer, dengan menggunakan properti top dan left.

1

.speech-bubble:after {

2

  content: '';

3

  position: absolute;

4

5

  width: 0;

6

  height: 0;

7

8

  border: 15px solid;

9

  border-top-color: red;

10

11

  top: 100%;

12

  left: 50%;

13

}

Hampir sampai; langkah terakhir adalah memperbarui warna panah agar sama dengan latar belakang kontainer. Posisi juga perlu dimodifikasi untuk memperhitungkan lebar border (15px). Sementara kita di sini, kita juga akan menerapkan border-radius yang halus untuk membuat wadah tampak lebih seperti gelembung.

1

.speech-bubble { 

2

   /* … other styles */

3

   border-radius: 10px;

4

}

5

6

.speech-bubble:after {

7

  content: '';

8

  position: absolute;

9

10

  width: 0;

11

  height: 0;

12

13

  border: 15px solid;

14

  border-top-color: #292929;

15

16

  top: 100%;

17

  left: 50%;

18

  margin-left: -15px; /* adjust for border width */

19

}

Tidak buruk, ay? Pisahkan kode ini ke beberapa kelas yang bisa digunakan kembali, dan Anda siap untuk menyelesaikan semua proyek masa depan.

1

/* 

2

   Speech Bubbles

3

   Usage: Apply a class of .speech-bubble and .speech-bubble-DIRECTION

4

   <div class="speech-bubble speech-bubble-top">Hi there</div>

5

*/

6

7

.speech-bubble {

8

  position: relative;

9

  background-color: #292929;

10

11

  width: 200px;

12

  height: 150px;

13

  line-height: 150px; /* vertically center */

14

15

  color: white;

16

  text-align: center;

17

  border-radius: 10px;

18

19

  font-family: sans-serif;

20

}

21

22

.speech-bubble:after {

23

  content: '';

24

  position: absolute;

25

26

  width: 0;

27

  height: 0;

28

29

  border: 15px solid;

30

}

31

32

33

/* Position the Arrow */

34

35

.speech-bubble-top:after {

36

  border-bottom-color: #292929;

37

38

  left: 50%;

39

  bottom: 100%;

40

  margin-left: -15px;   

41

}

42

.speech-bubble-right:after {

43

  border-left-color: #292929;

44

45

  left: 100%;

46

  top: 50%;

47

  margin-top: -15px;    

48

}

49

50

.speech-bubble-bottom:after {

51

  border-top-color: #292929;

52

53

  top: 100%;

54

  left: 50%;

55

  margin-left: -15px;   

56

}

57

58

.speech-bubble-left:after {

59

  border-right-color: #292929;

60

61

  top: 50%;

62

  right: 100%;

63

  margin-top: -15px;    

64

}

Bonus: Pemusatan Vertikal yang Lebih Baik

Satu kelemahan untuk menggunakan line-height untuk memusatkan teks secara vertikal adalah Anda terbatas pada satu baris saja. Jika teks membutuhkan dua baris atau lebih, masing-masing tinggi baris akan terlalu besar. Solusi cerdas adalah dengan mengatur display table ke gelembung ucapan, dan display table-cell ke paragraf yang membungkus teks. Ini kemudian memungkinkan kita untuk menyelaraskan teks ke tengah, yang sesuai.

1

<div class="speech-bubble speech-bubble-top">

2

    <p>Text goes here.</p>

3

</div>

Selanjutnya, CSS yang dimodifikasi.

1

.speech-bubble {

2

 /* other styles */

3

4

  display: table;

5

}

6

7

.speech-bubble p {

8

  display: table-cell;

9

  vertical-align: middle;

10

}

Jika referensi untuk display: table membawa kembali kenangan buruk tentang tata letak kuno berbasis tabel, jangan khawatir. Properti-properti ini hanya mengacu pada gaya dimana elemen harus ditampilkan.

Kita tidak terbatas pada segitiga; CSS mampu menghasilkan segala macam bentuk - bahkan hati dan tanda biohazard!

1

.biohazard {

2

  width: 0; height: 0;

3

4

  border: 60px solid;

5

  border-radius: 50%;

6

7

  border-top-color: black;

8

  border-bottom-color: black;

9

  border-left-color: yellow;

10

  border-right-color: yellow;

11

}

Ringkasan

Meskipun benar bahwa bordeer sintaks sederhana border: 1px solid black berjalan jauh, jika kita pintar, kita dapat menciptakan berbagai efek bermanfaat, ikon, dan bentuk. Siapa sangka border bisa begitu kuat? Kuncinya adalah mengingat bahwa penataan untuk bentuk umum atau gelembung ucapan seharusnya hanya dibuat satu kali, dan kemudian dipisahkan ke kelas utilitas untuk penggunaan masa depan.