Tombol Web 3D Chunky Orman Clark: Versi CSS3

Hari ini kita akan membuat beberapa tombol CSS3 yang luar biasa! Mereka didasarkan pada gratisan PSD populer yang dibuat Orman Clark untuk situs web Premium Pixel-nya. Kami akan mencoba membuat salinan CSS dari mereka, dengan tepat dan dengan markup HTML sesedikit mungkin.

Catatan Editor: Orman secara sportif memungkinkan kami untuk men-CSS-kan apa pun dari Premium Pixel gratisnya yang kami pilih. Tombol-tombol chunky ini hanyalah salah satu dari sekian banyak gratisan, jadi semoga lebih banyak tutorial seperti ini di masa mendatang. Huzzah!

Langkah 1: Menguraikan Dokumen HTML

Kami akan memulai dengan membuat dokumen HTML baru. Saya berbasiskan pada HTML5 boilerplate, hanya untuk dapat memulai dengan cepat dan dengan markup dokumen yang sempurna. Saya menggunakan dokumen normalisasi css yang menyertainya juga. Lalu kita akan menambahkan daftar dengan beberapa jangkar dasar di dalamnya. Sesederhana itu, kita tidak memerlukan span atau div tambahan, teman baik kita CSS3 akan mengurusnya.

Untuk dapat memberikan beberapa gaya css, kami memberikan daftar sebuah kelas 'buttons'. Dan karena kami akan menunjukkan semua warna yang digunakan Orman dalam desainnya, kami akan memberikan setiap tautan warna yang berbeda sebagai kelas.

1

<ul class="buttons">

2

  <li><a href="#" class="button gray">Download</a></li>

3

	<li><a href="#" class="button pink">Download</a></li>

4

	<li><a href="#" class="button blue">Download</a></li>

5

	<li><a href="#" class="button green">Download</a></li>

6

	<li><a href="#" class="button turquoise">Download</a></li>

7

	<li><a href="#" class="button black">Download</a></li>

8

	<li><a href="#" class="button darkgray">Download</a></li>

9

	<li><a href="#" class="button yellow">Download</a></li>

10

	<li><a href="#" class="button purple">Download</a></li>

11

	<li><a href="#" class="button darkblue">Download</a></li>

12

</ul>

Itu saja yang kita butuhkan untuk saat ini, dokumen HTML kita selesai!
Inilah yang seharusnya terlihat ketika Anda melihatnya di browser Anda sejauh ini:

Langkah 2: Beberapa Gaya CSS Dasar

Sebelum kita mulai dengan gaya seperti gradien, sudut membulat, dll, kami akan menerapkan beberapa gaya dasar terlebih dahulu.
Tidak ada yang istimewa di sini, hanya barang-barang CSS2 biasa.

1

ul { list-style: none; }

2

3

a.button {

4

	display: block;

5

	float: left;

6

	position: relative;

7

	height: 25px;

8

	width: 80px;

9

	margin: 0 10px 18px 0;

10

11

	text-decoration: none;

12

	font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;

13

	font-weight: bold;

14

	line-height: 25px;

15

	text-align: center;

16

}

Kita dapat dengan mudah mengubah warna tombol juga, karena kita menambahkan kelas. Jadi kita akan melakukannya untuk setiap warna lain, misalnya abu-abu. Anda dapat memeriksa semua kode warna di file demo.

1

/* GRAY */

2

.gray,

3

.gray:hover {

4

	color: #555;

5

	border-bottom: 4px solid #b2b1b1;

6

	background: #eee;

7

}

8

9

.gray:hover { background: #e2e2e2; }

Jika Anda melakukan semuanya dengan baik, Anda harus memiliki sesuatu seperti ini. Itu bagus.. jika kita hidup di tahun 2008!

Langkah 3: Border Ganda di sepanjang Jalan!

Sekarang, jika Anda melihat lebih dekat pada file photoshop, Anda akan melihat bahwa tidak ada border yang lebih tebal di bagian bawah, tetapi yang lebih tipis sepanjang jalan, dan sedikit garis ekstra antara bagian tebal dan border sebenarnya. Untuk menerjemahkan detail terakhir ke css, kita akan menggunakan trik CSS2, pseudo-elements :before dan :after.

Kami akan memposisikan elemen-elemen ini - yang dapat kita lihat sebagai kotak terpisah - persis di belakang tombol kami sebenarnya dengan properti position. Untuk menghemat beberapa baris css, kita akan menata kedua elemen terlebih dahulu dan kemudian menambahkan nilai hanya untuk elemen before.

1

a.button {

2

	display: block;

3

	float: left;

4

	position: relative;

5

	height: 25px;

6

	width: 80px;

7

	margin: 0 10px 18px 0;

8

9

	text-decoration: none;

10

	font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;

11

	font-weight: bold;

12

	line-height: 25px;

13

	text-align: center;

14

}

15

16

a.button:before,

17

a.button:after {

18

	content: '';

19

	position: absolute;

20

	left: -1px;

21

	height: 25px;

22

	width: 80px;

23

	bottom: -1px;

24

}

25

26

a.button:before { 

27

	height: 23px;

28

	bottom: -4px;

29

	border-top: 0;

30

}

Semuanya mulai terlihat bagus saat kami menambahkan warna yang tepat!

1

/* GRAY */

2

.gray,

3

.gray:hover {

4

	color: #555;

5

	border-bottom: 4px solid #b2b1b1;

6

	background: #eee;

7

}

8

9

.gray:before,

10

.gray:after {

11

	border: 1px solid #cbcbcb;

12

	border-bottom: 1px solid #a5a5a5;

13

}

14

15

.gray:hover { background: #e2e2e2; }

Langkah 4: Menambahkan Keajaiban CSS3

Sekarang apa yang kalian semua tunggu-tunggu, bagian CSS3. Kami akan mulai dengan menambahkan sudut membulat ke semua tombol kita:

1

a.button {

2

	display: block;

3

	float: left;

4

	position: relative;

5

	height: 25px;

6

	width: 80px;

7

	margin: 0 10px 18px 0;

8

9

	text-decoration: none;

10

	font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;

11

	font-weight: bold;

12

	line-height: 25px;

13

	text-align: center;

14

15

	-webkit-border-radius: 3px; 

16

	-moz-border-radius: 3px;

17

	border-radius: 3px;

18

}

Dan tentu saja elemen :before dan :after kita perlu sudut membulat juga, untuk membuat border-nya sesuai. Namun, elemen :before tidak perlu sudut atas dibulatkan, jika tidak kita akan melihat sedikit bug. Karena elemen :before adalah yang memiliki posisi terendah, kita akan menambahkan box shadow ke elemen ini bukannya ke elemen utama.

1

a.button:before,

2

a.button:after {

3

	content: '';

4

	position: absolute;

5

	left: -1px;

6

	height: 25px;

7

	width: 80px;

8

	bottom: -1px;

9

10

	-webkit-border-radius: 3px; 

11

	-moz-border-radius: 3px;

12

	border-radius: 3px;

13

}

14

15

a.button:before { 

16

	height: 23px;

17

	bottom: -4px;

18

	border-top: 0;

19

20

	-webkit-border-radius: 0 0 3px 3px; 

21

	-moz-border-radius: 0 0 3px 3px;

22

	border-radius: 0 0 3px 3px;

23

24

	-webkit-box-shadow: 0 1px 1px 0px #bfbfbf;

25

	-moz-box-shadow: 0 1px 1px 0px #bfbfbf;

26

	box-shadow: 0 1px 1px 0px #bfbfbf;

27

}

Terakhir kami akan menerapkan beberapa latar belakang gradien, inner shadow dan beberapa bayangan teks untuk setiap warna yang terpisah. Kami akan menambahkan status :visited juga untuk mencegah bug di IE6.

1

/* GRAY */

2

a.gray,

3

a.gray:hover,

4

a.gray:visited {

5

	color: #555;

6

	border-bottom: 4px solid #b2b1b1;

7

	text-shadow: 0px 1px 0px #fafafa;

8

9

	background: #eee;

10

	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#e2e2e2));

11

	background: -moz-linear-gradient(top,  #eee,  #e2e2e2);

12

13

	box-shadow: inset 1px 1px 0 #f5f5f5;

14

}

15

16

.gray:before,

17

.gray:after {

18

	border: 1px solid #cbcbcb;

19

	border-bottom: 1px solid #a5a5a5;

20

}

21

22

.gray:hover {

23

	background: #e2e2e2;

24

	background: -webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#eee));

25

	background: -moz-linear-gradient(top,  #e2e2e2,  #eee);

26

}

Ini harus menjadi hasil kita. Terlihat bagus, ya?

Langkah 5: Apakah Kita Tidak Melupakan Sesuatu?

Ada satu hal penting yang masih perlu kita lakukan; Orman membuat desain untuk status active juga. Jadi tentu saja kami akan menambahkannya ke versi css kita!

Kami akan menempatkan kode untuk status active di bawah semua definisi warna kami karena beberapa nilai ini perlu ditimpa. Perbedaan pertama dengan status-status lain adalah bahwa ia tidak memiliki border. Ini juga diposisikan sedikit lebih rendah untuk menyarankan indentasi. Dan kita harus menggunakan 2 bayangan, bukannya satu: yang normal, putih dan yang kedua, bagian dalam yang transparan. Terakhir, kita tidak membutuhkan pseudo-element :before dan :after lagi.

1

/* ACTIVE STATE */

2

a.button:active {

3

	border: none;

4

	bottom: -4px;

5

    margin-bottom: 22px;

6

7

	-webkit-box-shadow: 0 1px 1px #fff;

8

	-moz-box-shadow:  0 1px 1px #fff;

9

	box-shadow:  1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3);

10

}

11

12

a.button:active:before,

13

a.button:active:after {

14

	border: none;	

15

16

	-webkit-box-shadow: none;

17

	-moz-box-shadow: none;

18

	box-shadow: none;

19

}

Seperti inilah tampilan tombol kita dalam status active:

Langkah 6: (opsional) Browser yang Lebih Lama

Sekarang kita memiliki beberapa tombol CSS3 yang bagus yang berfungsi di semua browser modern. Tetapi bagaimana dengan Internet Explorer, misalnya? IE8 dan yang lebih rendah tidak mendukung bayangan kotak atau teks, atau gradien.

Agar dapat menata elemen kita secara khusus untuk browser ini, kita dapat menggunakan Modernizr, perpustakaan javascript yang mendeteksi apakah browser Anda dapat menangani properti CSS3 dan HTML5. Itu tidak memperbaiki masalah browser yang lebih lama, itu menambahkan kelas ke tag html (melaporkan kemampuan apa saja yang ada dan tidak tersedia) untuk memungkinkan penataan alternatif.

Pilihan lain akan membuat browser ini berperilaku dengan beberapa perpustakaan javascript lainnya (yang disebut polyfills), tetapi itu adalah sesuatu yang tidak akan kami bahas dalam tutorial ini. Sebagai gantinya kami hanya akan menggunakan gambar untuk browser yang lebih lama.

Pertama kita akan membuat versi kustom dari Modernizr, dengan cara itu kita tidak perlu membawa semua javascript yang berlebihan dengan kita. Kita dapat melakukannya dengan mudah di situs web mereka. Ketika kami menerapkan javascript di file html kami, kami hanya perlu menentukan penataan alternatif untuk kelas html tertentu. Kami akan menggunakan gambar untuk browser yang tidak mendukung (salah satu dari) 2 efek CSS3 yang paling penting yang kami gunakan, border radius dan gradien css. Dan karena beberapa browser yang lebih lama bahkan tidak mendukung konten yang dihasilkan (:before dan :after), kami akan menyebut yang satu itu juga.

1

/* MODERNIZR FALLBACK */

2

.no-cssgradients a.button, .no-cssgradients a.button:visited,

3

.no-borderradius a.button, .no-borderradius a.button:visited,

4

.no-generatedcontent a.button, .no-generatedcontent a.button:visited {

5

	background: url(images/sprite.png) no-repeat 0 0px;

6

	height: 32px;

7

	width: 82px;

8

}

9

10

.no-cssgradients a.button:hover,

11

.no-borderradius a.button:hover,

12

.no-generatedcontent a.button:hover {

13

	background: url(images/sprite.png) no-repeat 0 -32px;

14

}

15

16

.no-cssgradients a.button:active,

17

.no-borderradius a.button:active,

18

.no-generatedcontent a.button:active {

19

	background: url(images/sprite.png) no-repeat 0 -64px;

20

	bottom: 0;

21

	line-height: 35px;

22

}

23

24

.no-cssgradients a.gray,

25

.no-cssgradients a.gray:visited,

26

.no-cssgradients a.gray:hover { background-position-x: 0; }

27

28

.no-cssgradients a.pink,

29

.no-cssgradients a.pink:visited,

30

.no-cssgradients a.pink:hover { background-position-x: -82px; }

31

32

.no-cssgradients a.blue,

33

.no-cssgradients a.blue:visited,

34

.no-cssgradients a.blue:hover { background-position-x: -164px; }

35

36

.no-cssgradients a.green,,

37

.no-cssgradients a.green:visited,

38

.no-cssgradients a.green:hover { background-position-x: -246px; }

39

40

.no-cssgradients a.turquoise,

41

.no-cssgradients a.turquoise:visited,

42

.no-cssgradients a.turquoise:hover { background-position-x: -328px; }

43

44

.no-cssgradients a.black,

45

.no-cssgradients a.black:visited,

46

.no-cssgradients a.black:hover { background-position-x: -410px; }

47

48

.no-cssgradients a.darkgray,

49

.no-cssgradients a.darkgray:visited,

50

.no-cssgradients a.darkgray:hover { background-position-x: -492px; }

51

52

.no-cssgradients a.yellow,

53

.no-cssgradients a.yellow:visited,

54

.no-cssgradients a.yellow:hover { background-position-x: -574px; }

55

56

.no-cssgradients a.purple,

57

.no-cssgradients a.purple:visited,

58

.no-cssgradients a.purple:hover { background-position-x: -656px; }

59

60

.no-cssgradients a.darkblue,

61

.no-cssgradients a.darkblue:visited,

62

.no-cssgradients a.darkblue:hover { background-position-x: -738px; }

63

64

.no-cssgradients a.button, .no-cssgradients a.button:visited, .no-cssgradients a.button:hover, .no-cssgradients a.button:before, .no-cssgradients a.button:after,

65

.no-borderradius a.button, .no-borderradius a.button:visited, .no-borderradius a.button:hover, .no-borderradius a.button:before, .no-borderradius a.button:after,

66

.no-generatedcontent a.button, .no-generatedcontent a.button:visited, .no-generatedcontent a.button:hover, .no-generatedcontent a.button:before, .no-generatedcontent a.button:after {

67

	border: 0;

68

}

Untuk meningkatkan kinerja, kami menggunakan CSS Sprite untuk hover dan status active. Dan status :visited masih disertakan untuk mencegah bug IE6.

Kesimpulan

Jadi, sekarang kita memiliki tombol CSS3 lintas browser sepenuhnya! Anda mungkin akan berpikir bahwa ini terlihat seperti banyak kode untuk 10 tombol, tetapi tentu saja ini hanya demonstrasi dari apa yang Anda bisa atau tidak bisa lakukan dengan CSS3. Anda bebas melakukan apa pun yang Anda inginkan!

Sejauh ini tutorial pertama saya.. Saya harap Anda menyukainya, terima kasih telah membaca!