Penggunaan Praktis CSS3: Transformasi dan Transisi

Transformasi dan Transisi (diperkenalkan sebagai bagian dari spesifikasi CSS3) memungkinkan kita untuk membuat sejenis interaksi dan pengalaman yang sebelumnya hanya terkait dengan JavaScript atau Flash. Anda mungkin telah membaca banyak diskusi dan tutorial mencakup sifat-sifat ini, tetapi mereka cenderung eksperimental di alam.

Dalam tutorial ini kita akan mengeksplorasi transformasi dan transisi CSS dengan menciptakan sesuatu yang lebih berguna. Kita akan membangun satu halaman HTML statis yang akan memanfaatkan transformasi dan transisi dalam slider, ditambah beberapa efek hover menarik.

Sebelum kita melanjutkan akan bermanfaat apabila sambil mencatat kompatibilitas browser. Tutorial ini menunjukkan teknik-teknik modern, teknik yang akan menjadi lebih biasa lagi, tetapi untuk saat ini sedang mengalami ketidakcocokan di browser yang lebih tua. Lihat caniuse.com untuk analisis lebih rinci yang mana browser mendukung berbagai metode yang dibahas di sini.

Persiapan

Baiklah, pada titik ini kita sudah tahu ke mana kita akan pergi, jadi kita bisa memutuskan apa yang kita butuhkan untuk dipersiapkan.

Sebelum hal yang lainnya, persiapan adalah kunci keberhasilan. ~ Alexander G. Bell

Keterampilan Dasar

Pertama, kita perlu pemahaman dasar tentang HTML dan CSS. Dengan asumsi Anda memilikinya, kita siap untuk melanjutkan.

Namun, jika, Anda benar-benar baru di bidang ini, saya akan menyarankan Anda menyempatkan waktu untuk mendapatkan topik up to date; Untungnya Envato telah menyediakan kursus 30 hari yang akan mengajarkan Anda semua hal-hal penting yang perlu Anda ketahui tentang HTML & CSS secara gratis.

Menemukan Gambar

Kita jelas akan memerlukan beberapa gambar untuk membuat slider gambar, serta keterangan gambar untuk website. PhotoDune akan melayani tujuan kita dengan sangat baik. Berikut ini adalah gambar yang kita akan gunakan dalam tutorial ini.

• Pizza
• Ayam Panggang
• Salad
• Pangsit
• Sarapan
• Pasta
• Makan Malam Steak
• Wanita Saat Makan Malam
• Cappuccino
• Set Meja

Kita juga akan memerlukan tekstur untuk latar belakang. Tempat favorit saya untuk menemukan tekstur pada saat ini adalah Subtle Patterns dan setelah browsing melalui semua halaman, saya akhirnya memutuskan untuk menggunakan contoh ini.

Mengelola Folder

Meskipun ini opsional, saya pribadi lebih menyukai mengelola folder proyek saya pada tahap awal, cara ini akan memastikan kita tetap terorganisir dari awal. Jadi, untuk situs web ini saya telah membuat dua folder utama psd dan html, dimana folder html terdiri dari dua folder lain untuk font dan gambar.

Desain

Selanjutnya, kita mockup situs web di Photoshop untuk referensi sementara kita sedang membangunnya dalam HTML. Saya tidak akan pergi lebih jauh dalam langkah ini, dimana desain yang sebenarnya adalah di luar lingkup tutorial ini. Anda sudah dapat menemukan banyak tutorial tata letak di Webdesigntuts+, seperti yang satu ini.

Nah, gambar di bawah ini adalah apa yang saya buat; mari kita menyimpan file di dalam folder psd kita.

HTML

Sebelum melakukan peng-kodean apapun, saya telah memotong beberapa grafis yang diperlukan untuk digunakan dalam tata letak. Pertama latar belakang navigasi, satu dengan warna hitam di bagian atas dan pole kustom untuk gambar thumbnail.

Jika Anda mengikuti seluruh kursus 30 hari pada HTML & CSS, Jeffrey menunjukkan cara untuk mengiris sebuah file PSD pada hari ke 27.

HTML5

Kita juga akan memanfaatkan tag baru dari spesifikasi HTML5, sehingga diharapkan akan menemukan <nav>, <header>, <footer> dan beberapa tag baru yang saya (jujur) jarang menggunakan seperti <figure> dan <figcaption>.

Namun, kita tidak akan membahas terlalu banyak tentang HTML5 di sini, yang berada di luar cakupan tutorial ini. Sebaliknya, Anda dapat menemukan banyak tutorial HTML5 di Nettuts+.

Header & Navigasi

Baiklah, mari kita sekarang membuka editor teks dan mulai pengkodean beberapa markup.

Seperti yang Anda lihat dalam desain akhir, kita tidak akan memisahkan menu dan bagian header, sehingga navigasi utama itu sendiri akan dibungkus dalam header tag.

1

2

<header> 

3

  <div> 

4

		<h1 class="home"><a href="/">the resto.</a></h1> 

5

		<nav id="site-nav"> 

6

			<ul class="menu"> 

7

				<li><a href="#">About</a></li> 

8

				<li><a href="#">Contact</a></li> 

9

				<li><a href="#">Restaurant</a></li> 

10

				<li><a href="#">Store</a></li> 

11

			</ul> 

12

		</nav> 

13

	</div> 

14

</header>

Bagian Slider Gambar

Slider gambar akan dibungkus dalam tag section. Section adalah sebuah elemen baru yang juga termasuk dalam spesifikasi baru HTML5 untuk menentukan bagian atau segmen dalam dokumen HTML.

1

2

<section id="image-slider"> 

3

	<div class="hidden"> 

4

	<span class="shine"></span> 

5

	<ul> 

6

		<li id="slide-1" class="slide"> 

7

		<figure> 

8

			<img src="images/slide/grilled-chicken.jpg" /> 

9

			<figcaption> 

10

				<p>Faworki cotton candy apple pie lollipop. Jelly beans apple pie sweet roll pie cheesecake.</p> 

11

			</figcaption> 

12

		</figure> 

13

		</li> 

14

		<li id="slide-2" class="slide"> 

15

		<figure> 

16

			<img src="images/slide/pasta.jpg" /> 

17

			<figcaption> 

18

				<p>Sesame snaps caramels powder muffin applicake chocolate cake.</p> 

19

			</figcaption> 

20

		</figure> 

21

		</li> 

22

		<li id="slide-3" class="slide"> 

23

			<figure> 

24

				<img src="images/slide/steak.jpg" /> 

25

				<figcaption> 

26

					<p>Pie danish applicake sugar plum sweet roll faworki cookie lollipop carrot cake. Chupa chups jujubes cupcake tart. </p> 

27

				</figcaption> 

28

			</figure> 

29

		</li> 

30

		<li id="slide-4" class="slide"> 

31

			<figure> 

32

				<img src="images/slide/cappuccino.jpg" /> 

33

				<figcaption> 

34

					<p>Lollipop dessert toffee apple pie liquorice chocolate marzipan.</p> 

35

				</figcaption> 

36

			</figure> 

37

		</li> 

38

	</ul> 

39

	</div> 

40

41

	<!-- image slider navigation --> 

42

	<nav class="nav-slider"> 

43

		<ul> 

44

			<li><a href="#slide-1">1</a></li> 

45

			<li><a href="#slide-2">2</a></li> 

46

			<li><a href="#slide-3">3</a></li> 

47

			<li><a href="#slide-4">4</a></li> 

48

		</ul> 

49

	</nav> 

50

	</section>

Ini adalah semua HTML yang kita perlukan untuk membentuk slider gambar kita. Sekarang, mari kita lihat lebih dekat pada setiap bagian dari markup.

Mulai dari <div class="hidden">, kita akan menggunakan class ini untuk menyembunyikan slide yang melebihi dari dimensi yang ditentukan; dalam kasus ini adalah 960 x 380 piksel.

Slide disusun menggunakan unordered list. Setiap slide dibungkus dalam tag <li> dengan id yang unik <li id="slide-3" class="slide"> sehingga kita dapat memilih slide spesifik melalui sebuah Fragment identifier nantinya.

Perhatikan bahwa kita menggunakan figure untuk membungkus slide gambar dan figcaption untuk keterangan slide. Elemen-elemen ini menjelaskan peran dan hubungan mereka dengan sempurna (secara semantik).

1

2

<figure> 

3

	<img src="images/slide/cappuccino.jpg" /> 

4

	<figcaption> 

5

	<p>Lollipop dessert toffee apple pie liquorice chocolate marzipan.</p> 

6

	</figcaption> 

7

</figure>

Figure adalah tag baru dalam spesifikasi HTML5. Tag ini dimaksudkan untuk menandai grafis, foto, diagram, dll. Sementara figcaption, menurut w3c, mewakili suatu keterangan atau legenda untuk figure. Jadi, tag ini saling terkait secara efektif.

Bagian Keterangan Gambar

Keterangan gambar akan dibungkus dalam tag section juga.

1

2

<section id="image-caption"> 

3

	<ul> 

4

	<li class="thumbnail thumbnail-1"> 

5

		<figure> 

6

		<span class="pattern-overlay"></span> 

7

			<img src="images/thumbnail/women-at-dinnner.jpg"/> 

8

		<figcaption> 

9

		<p>Lemon drops dessert</p> 

10

		</figcaption> 

11

		</figure> 

12

	</li> 

13

	<li class="thumbnail thumbnail-2"> 

14

		<figure>	 

15

		<span class="pattern-overlay"></span> 

16

			<img src="images/thumbnail/cooked-breakfast.jpg"/> 

17

		<figcaption> 

18

		<hr /><h3>Apple pie chupa</h3> 

19

		<p>Apple pie chupa chups pudding cheesecake pie cake topping jelly-o.  

20

		Icing sweet roll toffee.</p> 

21

		<p>Lemon drops toffee pastry cookie marzipan carrot cake tart sweet roll tiramisu.</p> 

22

		</figcaption> 

23

		</figure> 

24

	</li> 

25

	<li class="thumbnail thumbnail-3"> 

26

		<figure> 

27

		<span class="pattern-overlay"></span> 

28

		<img src="images/thumbnail/steamed-dumplings.jpg"/> 

29

		<figcaption> 

30

		<hr /><h3>Jelly beans</h3> 

31

		<p>Jelly beans icing macaroon pudding carrot cake.  

32

		Sweet roll halvah pudding cookie candy canes cake jelly marshmallow.</p>  

33

		<p>Chupa chups halvah tiramisu sugar plum.</p> 

34

		</figcaption> 

35

		</figure>	 

36

	</li> 

37

	<li class="thumbnail thumbnail-4"> 

38

		<figure> 

39

		<span class="pattern-overlay"></span> 

40

			<img src="images/thumbnail/salad.jpg"/> 

41

		<figcaption> 

42

<p>Gummies chocolate bar tootsie roll oat cake gummies. Sesame snaps faworki ice cream tootsie roll pastry.</p> 

43

		</figcaption> 

44

		</figure> 

45

	</li> 

46

<li class="thumbnail thumbnail-5"> 

47

		<figure> 

48

		<span class="pattern-overlay"></span> 

49

			<img src="images/thumbnail/table-in-restaurant.jpg"/> 

50

		<figcaption> 

51

		<p>Wypas cheesecake sweet ice cream faworki macaroon sweet pie.  

52

		Tart sweet muffin pastry cotton candy ice cream chocolate gummi bears.</p> 

53

		</figcaption> 

54

		</figure> 

55

	</li> 

56

	<li class="thumbnail thumbnail-6"> 

57

		<figure> 

58

		<span class="pattern-overlay"></span> 

59

			<img src="images/thumbnail/pizza.jpg"/> 

60

		<figcaption> 

61

		<hr /><h3>Chocolate chocolate</h3> 

62

		<p>Chocolate chocolate cake wafer halvah jelly ice cream fruitcake wypas.  

63

		Sweet topping candy sugar plum bear claw sugar plum bonbon. </p> 

64

<p>Croissant sweet roll apple pie cotton candy bear claw marshmallow cheesecake ice cream chocolate bar</p> 

65

		</figcaption> 

66

		</figure> 

67

	</li> 

68

	</ul> 

69

</section>

Itu semua yang kita butuhkan untuk bagian Keterangan Gambar, markup sudah cukup jelas yang serupa dengan markup dalam Slider Gambar.

Footer

Kita hanya akan menambahkan teks hak cipta di footer.

1

2

<footer> 

3

<p>Envato &copy; 2012. All rights reserved</p> 

4

</footer>

Styling

Dalam bagian ini kita akan mulai semua pekerjaan styling. Saya akan berasumsi Anda sudah tahu cara untuk memisahkan style dari dokumen HTML dan link menggunakan file css.

<link href="style.css" rel="stylesheet" type="text/css">

Prefix-Free

Style akan memanfaatkan banyak spesifikasi CSS3 baru, yang sayangnya untuk masing-masing browser akan membutuhkan prefix vendor agar bekerja dengan benar. Seperti -o- untuk Opera, -moz- untuk Mozilla Firefox dan -webkit- untuk Safari dan Chrome. Penulisan CSS yang membengkak dengan cara ini bisa sangat tidak efisien.

Jadi, saya telah memutuskan untuk menambahkan prefix-free dari Lea Verou dalam dokumen; sebuah library JavaScript untuk menangani semua prefix vendor ini secara otomatis, jadi kita hanya perlu menambahkan format resmi properti. Sebagai contoh, biasanya kita akan perlu untuk menulis aturan CSS berikut untuk menskala sebuah elemen:

1

2

div { 

3

	transform: scale(2,4); 

4

	-ms-transform: scale(2,4); /* IE 9 */ 

5

	-webkit-transform: scale(2,4); /* Safari and Chrome */ 

6

	-o-transform: scale(2,4); /* Opera */ 

7

	-moz-transform: scale(2,4); /* Firefox */ 

8

}

Ketika menggunakan skrip prefix-free, kita dapat menghapus semua prefix vendor.

1

2

div { 

3

	transform: scale(2,4); 

4

}

Download file prefix-free dan letakkan di bagian bawah dokumen, sebelum penutupan tag body.

<script src="prefixfree.js">

CSS Reset

Masalah lain yang akan kita hadapi di browser adalah inkonsistensi. Sebenarnya setiap browser me-render elemen HTML dengan style default masing-masing dan style default ini sering sedikit berbeda.

Untuk menimpa style standar dan memastikan kita bekerja dimulai dari blok yang sama di setiap browser, kita akan menggunakan CSS reset. Ada beberapa pilihan di luar sana; seperti satu ini dari Eric Mayer, YUI dari Yahoo dan HTML5 Reset oleh Richard Clark. Tapi kali ini saya tertarik untuk mencoba Normalize.css oleh Nicolas Gallagher. Download file, dan letakkan link di dalam tag head, sebelum mereferensikan file css lainnya.

1

2

<head> 

3

	<link href="normalize.css" rel="stylesheet" type="text/css" /> 

4

</head>

Baiklah, sekarang kita sudah siap. Mari kita mulai styling. Mulai dari tag body.

Website akan memiliki latar belakang bertekstur; kita akan menerapkan latar belakang pada body, serta menentukan default dan ukuran font family.

1

2

body { 

3

	background:url('images/grid-noise.png') repeat; 

4

	font: 12pt Tahoma, Geneva, sans-serif; 

5

}

@Font-Face

Berbicara tentang font, kami berencana untuk menerapkan beberapa font non-sistem untuk HTML, jadi kita akan menanganinya menggunakan @font-face. Yah, @font-face tidak benar-benar sesuatu yang baru dalam CSS, itu sebenarnya termasuk dalam spesifikasi CSS2, tapi sayangnya metode ini tidak digunakan secara luas oleh para desainer web pada waktu itu.

Untuk memasukkan font kita sendiri menggunakan @font-face cukup sederhana. Bahkan, orang-orang baik di font squirrel menciptakan alat berguna ini untuk menghasilkan kode yang Anda perlukan.

Dalam desain kami, kami menggunakan ChunkFive untuk logo resto dan Titillium untuk navigasi menu. Mari kita men-download semua font ini dan menerapkan aturan @font-face ke stylesheet:

1

2

@font-face { 

3

	font-family: 'ChunkFiveRegular'; 

4

	src: url('fonts/Chunkfive-webfont.eot'); 

5

	src: url('fonts/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), 

6

		 url('fonts/Chunkfive-webfont.woff') format('woff'), 

7

		 url('fonts/Chunkfive-webfont.ttf') format('truetype'), 

8

		 url('fonts/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); 

9

	font-weight: normal; 

10

	font-style: normal; 

11

}

1

2

@font-face { 

3

	font-family: 'TitilliumText22LRegular'; 

4

	src: url('fonts/TitilliumText22L003-webfont.eot'); 

5

	src: url('fonts/TitilliumText22L003-webfont.eot?#iefix') format('embedded-opentype'), 

6

		 url('fonts/TitilliumText22L003-webfont.woff') format('woff'), 

7

		 url('fonts/TitilliumText22L003-webfont.ttf') format('truetype'), 

8

		 url('fonts/TitilliumText22L003-webfont.svg#TitilliumText22LRegular') format('svg'); 

9

	font-weight: normal; 

10

	font-style: normal; 

11

}

Styling Header dan Navigasi

Header akan memiliki latar belakang yang kami iris sebelumnya dalam tutorial ini dan kita juga akan menerapkan font family baru kita, untuk class home dan nav li.

1

2

header { 

3

	background: url('images/nav-bg.png') repeat-x; 

4

	padding: 0; 

5

	height: 70px; 

6

	border-bottom: 2px solid #000; 

7

	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .5); 

8

	width: 100%; 

9

} 

10

header > div { 

11

	width: 960px; 

12

	margin: 0 auto; 

13

} 

14

header .home { 

15

	margin: 0; 

16

	font: 36pt/60pt 'ChunkFiveRegular', Arial, sans-serif; 

17

	text-shadow: 0px 2px 0px #000; 

18

	float: left; 

19

} 

20

header a { 

21

	text-decoration: none; 

22

	color: #fff; 

23

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

24

	transition: all 300ms ease-out; 

25

} 

26

header nav { 

27

	float: right; 

28

} 

29

header nav ul { 

30

	padding: 0; 

31

	margin-right: 6px; 

32

} 

33

header nav li { 

34

	display: inline; 

35

	font: 12pt/35pt 'TitilliumText22LRegular', Arial, sans-serif; 

36

	margin-left: 25px; 

37

	text-transform: uppercase; 

38

}

Perhatikan bahwa kami tidak memasukkan prefix vendor untuk menyatakan aturan box-shadow. Saya harus berterima kasih kepada Lea Verou untuk membuat script prefix-free - dia menyelamatkan dari kekacauan.

Styling Konten

Style #content adalah standar. Dia akan memiliki warna latar belakang sedikit putih, lebar fix 960px, berpusat di layar, dan drop shadow.

1

2

#content { 

3

	width: 960px; 

4

	height: auto; 

5

	margin: 25px auto 0; 

6

	background: #f3f3f3; 

7

	border: 1px solid #bbb; 

8

	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .3); 

9

}

Sejauh ini, menerapkan semua style di atas Anda seharusnya melihat sesuatu seperti ini:

Styling Slider Gambar

Sekarang, mari kita menerapkan beberapa style untuk Slider Gambar. Slider termasuk navigasi akan memiliki dimensi 960 x 425 piksel, sementara slide gambar sendiri seperti yang telah disebutkan di atas hanya akan memiliki 960 x 360 piksel.

1

2

#image-slider { 

3

	height: 425px; 

4

	width: 960px; 

5

} 

6

#image-slider ul { 

7

	list-style: none; 

8

	margin: 0; 

9

	padding: 0; 

10

}

Keterangan gambar akan memiliki latar belakang sedikit transparan. Untuk mencapai efek transparansi ini kami tidak akan menggunakan aturan opacity, karena juga akan mempengaruhi teks di dalam judul. Sebaliknya, kita akan mencapainya dengan menggunakan Alpha channel dari mode warna RGBA.

1

2

#image-slider figcaption { 

3

	background-color: rgba(0,0,0,.7); 

4

	color: #fff; 

5

	padding: 10px 20px; 

6

	position: relative; 

7

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

8

	width: 920px; 

9

	bottom: 0; 

10

}

Jika Anda memperhatikan ke gambar dalam slide; ada ruang putih antara gambar dan keterangan. Untuk menghapusnya kita menambahkan display: block; ke gambar.

1

2

#image-slider img { 

3

	display: block; 

4

}

Posisi Slide

Dalam bagian ini kita akan bekerja di sekitar slide. Slide akan menggunakan absolute position sehingga mereka akan bertumpukan.

1

2

#image-slider .slide { 

3

	position: absolute; 

4

}

Sementara gambar dalam slide harus terlihat, kita melakukan ini dengan mengubah nilai opacity ke nol.

1

2

#image-slider .slide img { 

3

	position: relative; 

4

	opacity: 0; 

5

}

Namun, gambar di slide pertama harus terlihat. Jadi, kami akan memilihnya secara khusus menggunakan selector :first-child dan set opacity ke 1.

1

2

#image-slider .slide:first-child img { 

3

	opacity: 1; 

4

}

Baiklah, hasilnya masih belum apa yang kita harapkan dari desain akhir. Seperti yang dapat Anda lihat dari gambar di atas, judul slide yang seharusnya tersembunyi masih terlihat. Jadi, kita perlu untuk menyembunyikannya.

1

2

#image-slider .hidden { 

3

	height: 380px; 

4

	overflow: hidden; 

5

	position: relative; 

6

	width: 960px; 

7

	border-bottom: 1px solid #aaa; 

8

}

Menciptakan Efek Bersinar

Kita harus mengucapkan banyak terima kasih kepada spesifikasi baru CSS3, yang sekarang kita dapat membuat efek yang bersinar tanpa memasukkan gambar apa pun. Kita akan mencapai efek menggunakan CSS3 Background Gradient.

Saya tidak akan ke rincian tentang bagaimana menerapkannya, karena Anda dapat membaca tip ini di sini secara komprehensif.

Sekarang, mari kita tambahkan style berikut;

1

2

#image-slider .shine { 

3

	height: 300px; 

4

	margin: 0 auto; 

5

	position: absolute; 

6

	right: -60px; 

7

	top: -58px; 

8

	transform: rotate(-20deg); 

9

	background: linear-gradient(45deg, rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); 

10

	width: 1500px; 

11

	z-index: 5; 

12

}

Jika Anda telah membaca Tip tersebut, saya berasumsi aturan gradien seharusnya sudah jelas bagi Anda. Namun, mari kita lihat aturan lain untuk mencari tahu apa yang dilakukan CSS sebenarnya.

Pertama, <span class="shine"> akan memiliki position: absolute dengan z-index: 5 untuk membawanya berada di atas unsur-unsur lain dalam slide. Efek bersinar tidak muncul dengan benar, sehingga unsur tersebut masih perlu diputar oleh sekitar -20 derajat (transform: rotate(-20deg);).

Navigasi Slider

Style slider agak sederhana. Secara default, menu di navigasi akan memiliki posisi inline sehingga setiap menu akan muncul berdampingan.

1

2

.nav-slider { 

3

	text-align: center; 

4

	padding-top: 15px; 

5

	border-top: 1px solid #fff; 

6

} 

7

.nav-slider li { 

8

	display: inline; 

9

	margin: 0 5px; 

10

}

Perhatikan bahwa navigasi tersebut masih menunjukkan teks angka; kita harus menyingkirkannya dan memberikan beberapa style.

Pertama kita menambahkan inline-block, sehingga jangkar dapat ditambahkan dengan nilai lebar dan tinggi, kemudian tambahkan text-indent: -9999px untuk secara visual menghapus teks di dalam.

1

2

.nav-slider li a { 

3

	background: #ddd; 

4

	border: 1px solid #ccc; 

5

	display: inline-block; 

6

	height: 19px; 

7

	text-indent: -9999px; 

8

	width: 19px; 

9

}

Thumbnail Gambar

Sekarang, kita akan menambahkan style ke bagian Keterangan Gambar.

1

2

#image-caption { 

3

	padding: 32px 32px 40px; 

4

} 

5

#image-caption ul { 

6

	list-style: none; 

7

	padding: 0; 

8

	margin: 0; 

9

} 

10

#image-caption ul li { 

11

	display: inline-block; 

12

	width: 270px; 

13

	vertical-align: top; 

14

	height: 190px; 

15

	background: #fff; 

16

	border: 5px solid #ddd; 

17

	cursor: pointer; 

18

	box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .2); 

19

	position: relative; 

20

	overflow: hidden; 

21

}

Kami juga menghapus ruang putih antara gambar dan keterangan.

1

2

#image-caption img { 

3

	display: block;  

4

}

Thumbnail akan memiliki tampilan pola yang sudah kami iris sebelumnya.

1

2

.pattern-overlay { 

3

	background: url('images/thumbnail-pattern.png') repeat; 

4

	height: 190px; 

5

	width: 270px; 

6

	position: absolute; 

7

	z-index: 1; 

8

}

Seperti yang kita lihat pada gambar di atas, gambar thumbnail berdempet. Kita perlu beberapa margin untuk membuat jarak di antaranya. Daripada mendefinisikan margin ini untuk masing-masing thumbnail, kami akan menentukan bahwa hanya gambar tengah memilikinya menggunakan nth-child.

nth-child adalah pseudo-class css untuk memilih elemen anak tertentu menggunakan rumus. Untuk mendapatkan wawasan lebih di pseudo-class ini, Anda dapat membaca penjelasan komprehensif ini.

Baiklah, pertama kita akan memilih gambar di tengah, dalam hal ini gambar thumbnail nomor 2, 5 dan kelipatannya.

1

2

.thumbnail:nth-child(3n+2) { 

3

	margin: 0 23px; 

4

}

Setelah itu, kita memilih hanya tiga gambar pertama yang memiliki margin-bottom. Jadi, baris yang pertama dan kedua juga akan memiliki celah di antaranya.

1

2

.thumbnail:nth-child(-n+3) { 

3

	margin-bottom: 33px; 

4

}

Keterangan Thumbnail

Mengacu pada desain kami, keterangan umumnya akan memiliki warna hijau dengan sedikit transparansi dan rounded border.

1

2

.thumbnail figcaption { 

3

	background: rgba(136,184,88,0.9); 

4

	margin: 10px; 

5

	border-radius: 3px; 

6

	padding: 10px; 

7

	width: 230px; 

8

	color: #fff; 

9

	font-size: 10pt; 

10

}

Beberapa keterangan akan memiliki heading tingkat 3 (H3) dan di sini kita menentukan style h3.

1

2

.thumbnail figcaption h3 { 

3

	font-size: 14pt; 

4

	font-weight: normal; 

5

}

Teks di dalam keterangan dibungkus dalam tag paragraph (p). Jadi kita juga menentukan ruang di antara judul dan paragraf menggunakan margin.

1

2

.thumbnail figcaption p, .thumbnail figcaption h3 { 

3

	margin: 3px; 

4

	padding: 0; 

5

}

Dan untuk style footer, kita hanya meletakkan teks di tengah.

1

2

footer { 

3

	width: 960px; 

4

	text-align: center; 

5

	margin: 0 auto; 

6

	color: #777; 

7

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

8

	font-size: 10pt; 

9

}

Baiklah, kita telah menyelesaikan semua style yang diperlukan dan sejauh ini Anda dapat mengharapkan hasilnya yang terlihat seperti ini:

Efek

Di bagian ini kita akan mulai untuk menerapkan beberapa efek ke situs web yang menggunakan properti transisi dan transformasi.

Bagaimana Properti Ini Bekerja?

Saya asumsikan Anda akan telah menemukan beberapa posting yang sudah membahas properti ini (transformasi & transisi), terutama jika Anda adalah pembaca reguler blog jaringan Tuts+. Ijinkan saya menjelaskan sedikit tentang sifat-sifat ini untuk rekap cepat.

Transform adalah properti CSS baru yang termasuk dalam spesifikasi CSS3. Menggunakan properti ini kita dapat menerapkan berbagai transformasi seperti translating (gerakan), memutar, membuat condong dan skala elemen.

Transformasi dapat dicapai dengan menggunakan fungsi css berikut; transform: transform-method(value). Untuk metode-transformasi kita dapat menggunakan translate, scale, rotate dan skew. Untuk tujuan demonstratif kami akan menerapkan setiap metode tersebut untuk keterangan gambar kami.

Sementara transisi juga merupakan bagian dari spesifikasi CSS3, ini akan memungkinkan kami untuk menciptakan efek animasi bertahap bukannya perubahan instan. Dalam format short hand, efek dapat diterapkan dengan menggunakan fungsi berikut:

transition: <property> <duration> <timing-function> <delay>

Mari menerapkannya ke keterangan gambar kita untuk pemahaman yang lebih baik.

Transisi Warna

Di bagian navigasi, kami akan menunjukkan contoh sederhana dari efek transisi. Kami akan mengubah menu warna dari putih (#FFFFFF) ke oranye (#FFB400) dengan lancar dengan menetapkan transition-property ketika kita hover ke menu.

Mari kita lihat pada aturan CSS berikut;

1

2

#site-nav li a { 

3

	transition: color 500ms; 

4

} 

5

#site-nav li a:hover { 

6

	color: #ffb400; 

7

}

Aturan CSS di atas hanya akan menentukan properti warna yang akan dialihkan dengan durasi 500ms. Dan perhatikan bahwa saya tidak menambahkan timing-function tertentu. Jika kita tidak menentukan itu, browser akan menggunakan ease secara default.

Sekarang kita akan melangkah ke bagian berikutnya, lebih menantang.

Efek Keterangan Gambar

Dalam bagian ini kami akan menerapkan berbagai transformasi dan efek transisi untuk keterangan gambar. Untuk memulainya, kita menetapkan aturan umum untuk transisi thumbnail gambar.

1

2

.thumbnail img { 

3

	transition: all 350ms; 

4

}

Kami tidak menambahkan properti tertentu dalam aturan, sebaliknya, kami menggunakan "all" untuknya. Ini berarti efek transisi akan diterapkan ke semua properti di sekitar gambar.

Dalam kasus ini, gambar akan 30% transparan ketika kita hover ke atasnya.

1

2

.thumbnail:hover img { 

3

	opacity: 0.3; 

4

}

Dalam langkah berikut kami akan menentukan setiap perilaku transisi keterangan.

Keterangan 1: Bergerak ke Atas

Keterangan gambar pertama akan memiliki timing-function linier, sehingga gerakannya stabil dari awal sampai akhir.

1

2

.thumbnail-1 figcaption { 

3

	transition: all 350ms linear; 

4

	margin: 0 10px 0 10px; 

5

}

Kemudian, ketika kita hover kursor ke thumbnail, keterangannya akan bergerak ke atas. Kita dapat mencapai gerakan ini menggunakan metode translate. Metode translate akan membuat elemen berpindah dari satu titik ke titik lain yang ditetapkan dalam nilai translate.

1

2

.thumbnail-1:hover figcaption { 

3

	transform: translateY(-100%); 

4

	margin-top: -10px; 

5

}

Kami menggunakan persentase untuk translation daripada memberikan nilai tertentu berupa unit piksel. Dengan cara ini, keterangan akan bergerak relatif terhadap tinggi gambar, terlepas dari nilai dari ketinggian sebenarnya. Juga, perhatikan bahwa kita menambahkan margin-top.

Keterangan 2: Bergerak ke Bawah & Penundaan Transisi

Keterangan kedua akan memiliki tinggi dan lebar penuh sehingga akan menutupi thumbnail gambar. Kami akan menggunakan ease-in untuk keterangan sehingga diharapkan keterangan untuk memulai secara perlahan-lahan. Kita juga menambahkan transition-delay sekitar 350ms, yang berarti efek akan dimulai tepat setelah transisi gambar selesai.

1

2

.thumbnail-2 figcaption { 

3

	transition: all 350ms ease-in 350ms; 

4

	height: 150px; 

5

	position: absolute; 

6

	top: -190px; 

7

}

Kemudian, ketika kita hover kursor ke thumbnail, keterangan akan akhirnya bergerak ke bawah.

1

2

.thumbnail-2:hover figcaption { 

3

	transform: translateY(190px); 

4

}

Keterangan 3: Efek Zoom-in

Untuk keterangan ketiga, kita akan menggunakan ease-out. Menggunakan ini akan membuat transisi keterangan berakhir perlahan-lahan. Kami berencana untuk zoom-in keterangan ketika kita hover kursor ke thumbnail masing-masing, jadi kami menentukan skala keterangan dengan nol untuk memulai.

1

2

.thumbnail-3 figcaption { 

3

	transition: all 350ms ease-out; 

4

	transform: scale(0); 

5

	height: 150px; 

6

	opacity: 0; 

7

	position: absolute; 

8

	top: 0; 

9

}

Dan di bawah adalah set CSS untuk aturan kondisi hover. Ketika kita hover kursor ke thumbnail ketiga, keterangan akan menskala naik, kembali ke dimensi yang asli.

1

2

.thumbnail-3:hover figcaption { 

3

	transform: scale(1); 

4

	opacity: 1; 

5

}

Keterangan 4: Beberapa Transformasi

Keterangan keempat akan memiliki transformasi berputar dan agar teks tidak terbalik kami akan merotasi keterangan pertama kali -180 derajat.

Semua keterangan dan teks di dalamnya akan memiliki properti transisi dan kali ini kita akan menggunakan ease-in-out. Menilai dari nama fungsinya, Anda dapat menebak, dia akan membuat transisi efek mulai dan berakhir perlahan-lahan.

1

2

.thumbnail-4 figcaption { 

3

	transition: all 500ms ease-in-out; 

4

	transform: rotate(-180deg); 

5

	overflow: hidden; 

6

	max-height: 150px; 

7

	position: relative; 

8

}

Sejak itu, kami berencana untuk membuat efek zoom-out untuk teks, pertama kali kita mengubah teks untuk skala naik hingga 300% dan menyembunyikannya secara visual dengan menurunkan opacity.

1

2

.thumbnail-4 figcaption p { 

3

	transition: all 350ms ease-in-out 500ms; 

4

	transform: scale(3); 

5

	opacity: 0; 

6

}

Kemudian, ketika kita hover kursor ke thumbnail, keterangan akan akhirnya bergerak ke atas dari posisi awal dan memutar pada waktu yang sama. Ini adalah contoh praktis sederhana, bagaimana kita dapat menerapkan beberapa transformasi dalam satu elemen.

1

2

.thumbnail-4:hover figcaption { 

3

	transform: rotate(0deg) translateY(-100%); 

4

	margin-top: -10px; 

5

}

Untuk transformasi teks, dia akan menjadi zoom-out seperti yang telah disebutkan sebelumnya.

1

2

.thumbnail-4:hover figcaption p { 

3

	transform: scale(1); 

4

	opacity: 1; 

5

}

Keterangan 5: Bermain dengan Cubic-bezier

Berbicara tentang transisi timing-function, kita sudah menggunakan ease, linear, ease-in, ease-out serta ease-in-out. Kata kunci tersebut adalah representasi sebenarnya dari nilai-nilai tertentu dari kurva bezier. Seperti:

• linear sama dengan cubic-bezier(0,0,1,1)
• ease sama dengan cubic-bezier(0.25,0.1,0.25,1)
• ease-in sama dengan cubic-bezier(0.42,0,1,1)
• ease-out sama dengan cubic-bezier(0,0,0.58,1)
• ease-in-out sama dengan cubic-bezier(0.42,0,0.58,1)

Saat ini, untuk keterangan ini, kita akan mencoba untuk menggunakan cubic-bezier dengan nilai kustom. Benar-benar sangat sulit untuk memprediksi bagaimana perubahannya bekerja jika kita tidak melihat tindakan yang sebenarnya. Untungnya, ada alat yang berguna dan bermanfaat untuk bermain dengan cubic-bezier, sehingga kita dapat melihat hasil perubahan yang instan.

Kunjungi cubic-bezier.com di mana Anda dapat bermain di sekitar dengan kurva bezier, dibuat oleh Lea Verou, orang yang sama di balik prefix-free.

CSS berikut, aku telah menetapkan nilai cubic-bezier untuk menjalankan transisi cukup cepat di awal dan secara signifikan lebih lambat pada akhir.

1

2

.thumbnail-5 figcaption, .thumbnail-5 img { 

3

	transition: all 350ms cubic-bezier(.1,.72,.68,.68); 

4

}

Kemudian, ketika thumbnail yang sedang di-hover di atasnya, kami ingin gambar dan keterangan untuk bergerak ke atas sejajar.

1

2

.thumbnail-5:hover figcaption, .thumbnail-5:hover img { 

3

	transform: translateY(-90px); 

4

}

Keterangan 6: Transformasi Asal.

Kami telah menerapkan metode skala dan memutar untuk keterangan sebelumnya. Anda mungkin telah memperhatikan bahwa rotasi dan skala dimulai dari titik pusat dari elemen. Ini adalah karena transform-origin adalah 50% 50% secara default.

transform-origin adalah sebuah properti yang memungkinkan kita untuk menentukan titik awal transformasi dalam elemen. Ini dapat dicapai dengan menggunakan sintaks berikut transform-origin: x y.

Dalam keterangan keenam kita akan mengubah asal ke 0 0(x y).

1

2

.thumbnail-6 figcaption { 

3

	top:0; 

4

	position: absolute; 

5

	height: 150px; 

6

	transform: scale(0); 

7

	transform-origin: 0 0; 

8

	opacity: 0; 

9

}

Dan keterangan dan gambar akan memiliki efek transisi.

1

2

.thumbnail-6 figcaption, .thumbnail-6 img { 

3

	transition: all 500ms; 

4

}

Kemudian, ketika kita hover kursor ke thumbnail, gambar dan keterangan akan berubah pada saat yang sama.

1

2

.thumbnail-6:hover img { 

3

	transform: scale(0);	 

4

	transform-origin: 0 0; 

5

	opacity: 0; 

6

} 

7

.thumbnail-6:hover figcaption { 

8

	transform: scale(1); 

9

	transform-origin: 0 0; 

10

	opacity: 1; 

11

}

Efek Gambar Slider

Kita telah bermain-main dengan properti transformasi dan transisi cukup banyak. Dalam langkah ini kita akan menerapkannya dalam Slider Gambar kita.

Pertama, kita mengatur gambar dan keterangan. Di sini kita mengatur gambar untuk mempunyai efek transisi fade-in.

1

2

#image-slider li img { 

3

	transition: all 1s linear; 

4

} 

5

6

#image-slider li figcaption { 

7

	transition: all 500ms ease-in-out 300ms; 

8

}

Serta menentukan transisi navigasi slider.

1

2

.nav-slider li a { 

3

	transition: all 1s ease-out; 

4

}

Pengenalan singkat ke pseudo-class :target

Slider Gambar akan dioperasikan oleh klik. Ketika kita klik pada slider menu, masing-masing gambar slide akan akhirnya muncul, biasanya dengan efek slide-in atau fade-in. Navigasi semacam ini dan efek slider umumnya dibangun menggunakan teknologi JavaScript atau Flash.

Namun, dalam tutorial ini, kita akan mencoba untuk mencapainya menggunakan CSS secara eksklusif, yaitu dengan menggunakan pseudo-class :target.

:target adalah salah satu fitur khas di CSS3 yang akan memungkinkan kita untuk memilih sebuah elemen dalam dokumen HTML dengan id tertentu yang cocok dengan fragmen pengenal di URI.

Sebagai contoh, URI; http://www.somedomain.com/page/#section-1 akan memilih sebuah elemen dengan id="section-1" pada halaman. Dengan demikian, demikian juga dengan :hover, style apapun disekitar :target akan diterapkan.

Baiklah, mari kita lihat di aturan CSS berikut:

Aturan CSS di bawah ini akan mengubah opacity gambar menjadi 1 ketika li masing-masing bertindak sebagai :target. Ingat bahwa kami mark up slide/gambar menggunakan tag unordered list.

1

2

#image-slider li:target img { 

3

	opacity: 1; 

4

}

Keterangan di dalamnya seharusnya men-slide sampai dengan 100% lebar; tolong, jangan menghilangkan deklarasi !important. Ini adalah !important.

1

2

#image-slider li:target figcaption { 

3

	transform: translateY(-100%) !important; 

4

}

Oke, coba hasilnya di browser Anda.

Efek Navigasi Slider

Properti transisi dapat diterapkan secara khusus dalam selector, seperti :hover dan :active.

Kami juga telah mendefinisikan transisi untuk .nav-slider li a di atas, tapi kita juga akan menentukan timing-function yang berbeda dalam kondisi tertentu pada perilaku pengguna.

Bila kita hover di atas navigasi slider, menu akan berubah warna menjadi hijau dengan ease-in 300ms.

1

2

.nav-slider li a:hover { 

3

	background: #89c53f; 

4

	border: 1px solid #467536; 

5

	transition: all 300ms ease-in; 

6

}

Ketika kita mengkliknya, menu berubah menjadi hijau gelap sangat cepat sekitar 50ms.

1

2

.nav-slider li a:active { 

3

	background: #467536; 

4

	border: 1px solid #20411d; 

5

	transition: all 50ms; 

6

}

Dan ketika menu tidak ada aktivitas pengguna, dia akan kembali ke kondisi aslinya sangat lambat, dengan sekitar 1s seperti yang telah kita tetapkan dalam .nav-slider li a diatas.

Batasan

Seperti halnya teknologi lain, CSS ini tidaklah berbeda. Masih memiliki beberapa keterbatasan.

Jika Anda me-refresh browser Anda (saya asumsikan Anda masih berada pada halaman praktek tutorial ini), Anda akan melihat bahwa judul dalam slide pertama tidak muncul setelah load halaman pertama. Baiklah, ini adalah karena kita hanya menyatakan dalam CSS untuk muncul keterangan setelah li ditargetkan. Jadi, di sini kita perlu menambahkan tranlation tertentu untuk keterangan.

Kita memilih slide yang pertama menggunakan selector :first-child dan men-translate keterangan untuk bergerak ke atas 100% dari ketinggiannya.

1

2

#image-slider li:first-child figcaption { 

3

	transform: translateY(-100%); 

4

}

Refresh browser Anda, sekarang keterangan pertama seharusnya muncul saat load pertama. Ingat bahwa kita telah menambahkan penundaan transisi 300ms di langkah sebelumnya, sehingga keterangan akan mulai muncul setelah jumlah waktu tersebut.

Meskipun, ada satu masalah, pernyataan CSS di atas akan membuat keterangan tetap di tempat, meskipun kita menavigasikan ke slide lain. Jadi, kita perlu membuat aturan penghalangan untuknya.

Kami akan menambahkan sebuah class .hide untuk keterangan (dalam slide pertama) dan menetapkannya untuk kembali ke posisi awal.

1

2

#image-slider li:first-child figcaption.hide { 

3

	transform: translateY(0); 

4

}

Tunggu, kita menambahkan class menyembunyikan di keterangan?

Tidak, tidak.

Sebaliknya kita akan menambahkannya secara kondisional dari jQuery (sayangnya). Class menyembunyikan akan diterapkan, jika pengguna menavigasi ke slide lain.

Tempatkan link jQuery berikut dari Google Library di bagian bawah halaman sebelum menutup tag body. Versi jQuery saat ini adalah 1.7.1.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Pertama kali kita menciptakan variabel untuk unsur-unsur yang dipilih.

1

2

var firstcaption = $('.slide:first-child figcaption'), 

3

	otherslides	= $('.nav-slider li:nth-child(n+2)');

Dan kemudian membuat sebuah fungsi untuk menambahkan class hide ketika pengguna mengklik pada menu untuk menavigasi ke slide lain.

1

2

otherslides.click(function(){ 

3

		firstcaption.addClass("hide"); 

4

	});

Jangan lupa untuk membungkus semua kode di atas dalam tag <script>.

1

2

<script> 

3

$(function() { 

4

  	var 	firstcaption = $('.slide:first-child figcaption'), 

5

		otherslides	= $('.nav-slider li:nth-child(n+2)'); 

6

7

		otherslides.click(function(){ 

8

		firstcaption.addClass("hide"); 

9

	}); 

10

 }); 

11

</script>

Membungkus Semuanya

Baiklah, kita telah menulis sejumlah kode dalam tutorial ini, jadi mari kita rekap.

Markup HTML

1

2

<!doctype html> 

3

<html lang="en"> 

4

<head> 

5

	<meta charset="utf-8"> 

6

	<title>Practical Use of CSS3: Transforms and Transitions - Webdesigntuts+</title> 

7

	<link href="normalize.css" rel="stylesheet" type="text/css" /> 

8

	<link href="style.css" rel="stylesheet" type="text/css" /> 

9

	<link href="effects.css" rel="stylesheet" type="text/css" /> 

10

</head> 

11

<body> 

12

	<!-- site navigation --> 

13

	<header> 

14

		<div> 

15

		<h1 class="home"><a href="/">the resto.</a></h1> 

16

		<nav id="site-nav"> 

17

			<ul class="menu"> 

18

				<li><a href="#">About</a></li> 

19

				<li><a href="#">Contact</a></li> 

20

				<li><a href="#">Restaurant</a></li> 

21

				<li><a href="#">Store</a></li> 

22

			</ul> 

23

		</nav> 

24

		</div> 

25

	</header> 

26

	<!-- content section --> 

27

	<div id="content"> 

28

	<!-- image slider --> 

29

	<section id="image-slider"> 

30

		<div class="hidden"> 

31

		<span class="shine"></span> 

32

		<ul> 

33

			<li id="slide-1" class="slide"> 

34

				<figure> 

35

					<img src="images/slide/grilled-chicken.jpg" /> 

36

					<figcaption> 

37

						<p>Faworki cotton candy apple pie lollipop. Jelly beans apple pie sweet roll pie cheesecake.</p> 

38

					</figcaption> 

39

				</figure> 

40

			</li> 

41

			<li id="slide-2" class="slide"> 

42

				<figure> 

43

					<img src="images/slide/pasta.jpg" /> 

44

					<figcaption> 

45

						<p>Sesame snaps caramels powder muffin applicake chocolate cake.</p> 

46

					</figcaption> 

47

				</figure> 

48

			</li> 

49

			<li id="slide-3" class="slide"> 

50

				<figure> 

51

					<img src="images/slide/steak.jpg" /> 

52

					<figcaption> 

53

						<p>Pie danish applicake sugar plum sweet roll faworki cookie lollipop carrot cake.  

54

						Chupa chups jujubes cupcake tart. </p> 

55

					</figcaption> 

56

				</figure> 

57

			</li> 

58

			<li id="slide-4" class="slide"> 

59

				<figure> 

60

					<img src="images/slide/cappuccino.jpg" /> 

61

					<figcaption> 

62

						<p>Lollipop dessert toffee apple pie liquorice chocolate marzipan.</p> 

63

					</figcaption> 

64

				</figure> 

65

			</li> 

66

		</ul> 

67

		</div> 

68

		<!-- image slider navigation --> 

69

		<nav class="nav-slider"> 

70

			<ul> 

71

				<li><a href="#slide-1">1</a></li> 

72

				<li><a href="#slide-2">2</a></li> 

73

				<li><a href="#slide-3">3</a></li> 

74

				<li><a href="#slide-4">4</a></li> 

75

			</ul> 

76

		</nav> 

77

	</section> 

78

79

	<!--  image caption --> 

80

	<section id="image-caption"> 

81

		<ul> 

82

			<li class="thumbnail thumbnail-1"> 

83

			<figure> 

84

				<span class="pattern-overlay"></span> 

85

				<img src="images/thumbnail/women-at-dinnner.jpg"/> 

86

				<figcaption> 

87

					<p>Lemon drops dessert</p> 

88

				</figcaption> 

89

			</figure> 

90

			</li> 

91

			<li class="thumbnail thumbnail-2"> 

92

			<figure>	 

93

				<span class="pattern-overlay"></span> 

94

				<img src="images/thumbnail/cooked-breakfast.jpg"/> 

95

				<figcaption> 

96

					<hr /><h3>Apple pie chupa</h3> 

97

					<p>Apple pie chupa chups pudding cheesecake pie cake topping jelly-o.  

98

					Icing sweet roll toffee.</p> 

99

					<p>Lemon drops toffee pastry cookie marzipan carrot cake tart sweet roll tiramisu.</p> 

100

				</figcaption> 

101

			</figure> 

102

			</li> 

103

			<li class="thumbnail thumbnail-3"> 

104

			<figure> 

105

				<span class="pattern-overlay"></span> 

106

				<img src="images/thumbnail/steamed-dumplings.jpg"/> 

107

				<figcaption> 

108

					<hr /><h3>Jelly beans</h3> 

109

					<p>Jelly beans icing macaroon pudding carrot cake.  

110

					Sweet roll halvah pudding cookie candy canes cake jelly marshmallow.</p>  

111

					<p>Chupa chups halvah tiramisu sugar plum.</p> 

112

				</figcaption> 

113

			</figure>	 

114

			</li> 

115

			<li class="thumbnail thumbnail-4"> 

116

			<figure> 

117

				<span class="pattern-overlay"></span> 

118

				<img src="images/thumbnail/salad.jpg"/> 

119

				<figcaption> 

120

					<p>Gummies chocolate bar tootsie roll oat cake gummies. Sesame snaps faworki ice cream tootsie roll pastry.</p> 

121

				</figcaption> 

122

			</figure> 

123

			</li> 

124

			<li class="thumbnail thumbnail-5"> 

125

			<figure> 

126

				<span class="pattern-overlay"></span> 

127

				<img src="images/thumbnail/table-in-restaurant.jpg"/> 

128

				<figcaption> 

129

					<p>Wypas cheesecake sweet ice cream faworki macaroon sweet pie.  

130

					Tart sweet muffin pastry cotton candy ice cream chocolate gummi bears.</p> 

131

				</figcaption> 

132

			</figure> 

133

			</li> 

134

			<li class="thumbnail thumbnail-6"> 

135

			<figure> 

136

				<span class="pattern-overlay"></span> 

137

				<img src="images/thumbnail/pizza.jpg"/> 

138

				<figcaption> 

139

					<hr /><h3>Chocolate chocolate</h3> 

140

					<p>Chocolate chocolate cake wafer halvah jelly ice cream fruitcake wypas.  

141

					Sweet topping candy sugar plum bear claw sugar plum bonbon. </p> 

142

					<p>Croissant sweet roll apple pie cotton candy bear claw marshmallow cheesecake ice cream chocolate bar</p> 

143

				</figcaption> 

144

			</figure> 

145

			</li> 

146

		</ul> 

147

		</section> 

148

	</div> 

149

	<!-- site footer --> 

150

	<footer> 

151

	<p>Envato &copy; 2012. All rights reserved</p> 

152

	</footer> 

153

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

154

<script src="prefixfree.js"></script> 

155

<script> 

156

$(function() { 

157

  	//Define variables 

158

	var firstcaption = $('.slide:first-child figcaption'), 

159

		otherslides = $('.nav-slider li:nth-child(n+2)'); 

160

    //Add class "hide" when the other slides are clicked 

161

		otherslides.click(function(){ 

162

		firstcaption.addClass("hide"); 

163

	}); 

164

 }); 

165

</script> 

166

</body> 

167

</html>

CSS

Kita memisahkan style menjadi dua file. Pertama, file style.css akan menyimpan semua aturan CSS yang mempengaruhi tampilan website.

1

2

/* Apply a background in the body tag */ 

3

body { 

4

	background:url('images/grid-noise.png') repeat; 

5

	font: 12pt Tahoma, Geneva, sans-serif; 

6

} 

7

/* @font-face */ 

8

@font-face { 

9

	font-family: 'ChunkFiveRegular'; 

10

	src: url('fonts/Chunkfive-webfont.eot'); 

11

	src: url('fonts/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), 

12

		 url('fonts/Chunkfive-webfont.woff') format('woff'), 

13

		 url('fonts/Chunkfive-webfont.ttf') format('truetype'), 

14

		 url('fonts/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); 

15

	font-weight: normal; 

16

	font-style: normal; 

17

} 

18

@font-face { 

19

	font-family: 'TitilliumText22LRegular'; 

20

	src: url('fonts/TitilliumText22L003-webfont.eot'); 

21

	src: url('fonts/TitilliumText22L003-webfont.eot?#iefix') format('embedded-opentype'), 

22

		 url('fonts/TitilliumText22L003-webfont.woff') format('woff'), 

23

		 url('fonts/TitilliumText22L003-webfont.ttf') format('truetype'), 

24

		 url('fonts/TitilliumText22L003-webfont.svg#TitilliumText22LRegular') format('svg'); 

25

	font-weight: normal; 

26

	font-style: normal; 

27

} 

28

/* Header */ 

29

header { 

30

	background: url('images/nav-bg.png') repeat-x; 

31

	padding: 0; 

32

	height: 70px; 

33

	border-bottom: 2px solid #000; 

34

	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .5); 

35

	width: 100%; 

36

} 

37

header > div { 

38

	width: 960px; 

39

	margin: 0 auto; 

40

} 

41

header .home { 

42

	margin: 0; 

43

	font: 36pt/60pt 'ChunkFiveRegular', Arial, sans-serif; 

44

	text-shadow: 0px 2px 0px #000; 

45

	float: left; 

46

} 

47

header a { 

48

	text-decoration: none; 

49

	color: #fff; 

50

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

51

	transition: all 300ms ease-out; 

52

} 

53

header nav { 

54

	float: right; 

55

} 

56

header nav ul { 

57

	padding: 0; 

58

	margin-right: 6px; 

59

} 

60

header nav li { 

61

	display: inline; 

62

	font: 12pt/35pt 'TitilliumText22LRegular', Arial, sans-serif; 

63

	margin-left: 25px; 

64

	text-transform: uppercase; 

65

} 

66

/* Content */ 

67

#content { 

68

	width: 960px; 

69

	height: auto; 

70

	margin: 25px auto 0; 

71

	background: #f3f3f3; 

72

	border: 1px solid #bbb; 

73

	box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .3); 

74

} 

75

/* Image Slider Section */ 

76

#image-slider { 

77

	height: 425px; 

78

	width: 960px; 

79

} 

80

#image-slider ul { 

81

	list-style: none; 

82

	margin: 0; 

83

	padding: 0; 

84

} 

85

#image-slider img { 

86

	display: block; /** For removing white space **/ 

87

} 

88

#image-slider figcaption { 

89

	background-color: rgba(0,0,0,.7); 

90

	color: #fff; 

91

	padding: 10px 20px; 

92

	position: relative; 

93

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

94

	width: 920px; 

95

	bottom: 0; 

96

} 

97

#image-slider .slide { 

98

	position: absolute; 

99

} 

100

#image-slider .slide img { 

101

	position: relative; 

102

	opacity: 0; 

103

} 

104

#image-slider .slide:first-child img { 

105

	opacity: 1; 

106

} 

107

#image-slider .hidden { 

108

	height: 380px; 

109

	overflow: hidden; 

110

	position: relative; 

111

	width: 960px; 

112

	border-bottom: 1px solid #aaa; 

113

} 

114

#image-slider .shine { 

115

	height: 300px; 

116

	margin: 0 auto; 

117

	position: absolute; 

118

	right: -60px; 

119

	top: -58px; 

120

	transform: rotate(-20deg); 

121

	background: linear-gradient(45deg, rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); 

122

	width: 1500px; 

123

	z-index: 5; 

124

} 

125

/* Slide Navigation Section */ 

126

.nav-slider { 

127

	text-align: center; 

128

	padding-top: 15px; 

129

	border-top: 1px solid #fff; 

130

} 

131

.nav-slider li { 

132

	display: inline; 

133

	margin: 0 5px; 

134

} 

135

.nav-slider li a { 

136

	background: #ddd; 

137

	border: 1px solid #ccc; 

138

	display: inline-block; 

139

	height: 19px; 

140

	text-indent: -9999px; 

141

	width: 19px; 

142

} 

143

/* Image Caption Section */ 

144

#image-caption { 

145

	padding: 32px 32px 40px; 

146

} 

147

#image-caption ul { 

148

	list-style: none; 

149

	padding: 0; 

150

	margin: 0; 

151

} 

152

#image-caption ul li { 

153

	display: inline-block; 

154

	width: 270px; 

155

	vertical-align: top; 

156

	height: 190px; 

157

	background: #fff; 

158

	border: 5px solid #ddd; 

159

	cursor: pointer; 

160

	box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .2); 

161

	position: relative; 

162

	overflow: hidden; 

163

} 

164

#image-caption img { 

165

	display: block; /** Remove white space **/ 

166

} 

167

.pattern-overlay { 

168

	background: url('images/thumbnail-pattern.png') repeat; 

169

	height: 190px; 

170

	width: 270px; 

171

	position: absolute; 

172

	z-index: 1; 

173

} 

174

.thumbnail:nth-child(3n+2) /** Select only the the middle images (2,5,...etc)**/ { 

175

	margin: 0 23px; 

176

} 

177

.thumbnail:nth-child(-n+3) /** Select only the first 3 images **/ { 

178

	margin-bottom: 33px; 

179