Sebagai CSS3 telah mulai mendapatkan popularitas lebih dan lebih. Browser mulai mendukung itu, banyak interaksi umum yang Anda harapkan dari sebuah situs web yang dibuat menggunakan JavaScript. Sekarang sedang digantikan oleh solusi CSS murni.
Hari ini saya akan menunjukkan cara untuk membuat tab konten animasi hanya menggunakan CSS.
berikut kodenya
HTML:
CSS:
Download di sini
source : http://www.onextrapixel.com/2013/07/31/creating-content-tabs-with-pure-css/
Hari ini saya akan menunjukkan cara untuk membuat tab konten animasi hanya menggunakan CSS.
berikut kodenya
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <ul class="tabs"> <li> <input type="radio" checked name="tabs" id="tab1"> <label for="tab1">tab 1</label> <div id="tab-content1" class="tab-content animated fadeIn"> ... </div> </li> <li> <input type="radio" name="tabs" id="tab2"> <label for="tab2">tab 2</label> <div id="tab-content2" class="tab-content animated fadeIn"> ... </div> </li> <li> <input type="radio" name="tabs" id="tab3"> <label for="tab3">tab 3</label> <div id="tab-content3" class="tab-content animated fadeIn"> ... </div> </li></ul> |
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| body, html { height: 100%; margin: 0; -webkit-font-smoothing: antialiased; font-weight: 100; background: #aadfeb; text-align: center; font-family: helvetica; } .tabs input[type=radio] { position: absolute; top: -9999px; left: -9999px; } .tabs { width: 650px; float: none; list-style: none; position: relative; padding: 0; margin: 75px auto; } .tabs li{ float: left; } .tabs label { display: block; padding: 10px 20px; border-radius: 2px 2px 0 0; color: #08C; font-size: 24px; font-weight: normal; font-family: 'Lily Script One', helveti; background: rgba(255,255,255,0.2); cursor: pointer; position: relative; top: 3px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .tabs label:hover { background: rgba(255,255,255,0.5); top: 0; } [id^=tab]:checked + label { background: #08C; color: white; top: 0; } [id^=tab]:checked ~ [id^=tab-content] { display: block; } .tab-content{ z-index: 2; display: none; text-align: left; width: 100%; font-size: 20px; line-height: 140%; padding-top: 10px; background: #08C; padding: 15px; color: white; position: absolute; top: 53px; left: 0; box-sizing: border-box; -webkit-animation-duration: 0.5s; -o-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; } |
Download di sini
source : http://www.onextrapixel.com/2013/07/31/creating-content-tabs-with-pure-css/
Tags
Skript CSS