View difference between Paste ID: Czg7Eq8N and Jq4Yqi26
SHOW: | | - or go back to the newest paste.
1
<!--
2
[คู่มือการแก้ไขโคด]
3
สีพื้นหลัง (ที่เฟดกับรูปบนสุด) : --btf-bg: #000;
4
สีตัวอักษร : --btf-txt: #fff;
5
สีหลัก (สีเขียวทั้งหมด) : --btf-primary: #30f035;
6
สีไอคอนดาวที่ใต้รูป : --btf-icon: #000;
7
สีพื้นหลังไอคอนดาว : --btf-icon-bg: #fff;
8
9
[ส่วนเฮด] แก้ที่ class="btf-head"
10
ภาพเฮด : --btf-head: url(https://i.imgur.com/mvoMoUz.png); (อัตราส่วน 1600:857)
11-
สีตัวอักษร/สีผีเสื้อ (ส่วนที่ไม่ใช่สีเขียว) : --btf-txt: #fff;
11+
12
[ส่วนในกรอบ]
13
คำบรรยาย : ถ้าจะเพิ่มย่อหน้า ให้เพิ่ม <p>ย่อหน้า n</p> ต่อไปเรื่อย ๆ
14-
ภาพในกรอบ : <div class="btf-pic" style="--btf-pic: url(ลิงก์รูปภาพ);"></div> (อัตราส่วน 800:274)
14+
15
[ส่วนที่คลิกได้]
16
รูปพื้นหลังปุ่ม : <div class="btf-img" style="--btf-pic: url(ลิงก์รูปภาพ);"></div> (อัตราส่วน 3:4)
17
ข้อความใต้ภาพ : <div class="btf-alt">Lorem Ipsum</div>
18
* ถ้ากดที่พื้นรอบ ๆ ข้อมูลจะถูกพับเก็บ
19
20
[ส่วนรายละเอียด]
21
ถ้าต้องการใส่สีเขียวที่ข้อความสามารถใส่ <c></c> ครอบได้เลย สีจะเปลี่ยนตามสีหลัก
22
23
ตำแหน่งภาพ : เพิ่ม --btf-pos: 50% 50%; ต่อท้ายลิงก์รูปที่ต้องการปรับ
24
 - เลขตัวแรกคือการขยับซ้าย - ขวา โดย 0% = ชิดซ้าย 100% = ชิดขวา
25
 - เลขตัวแรกคือการขยับขึ้น - ลง โดย 0% = ชิดบน 100% = ชิดล่าง
26
27
ขนาดภาพ : เพิ่ม --btf-size: cover; ต่อท้ายลิงก์รูปที่ต้องการปรับ
28
 - cover คือ ขยายเต็มพื้นที่
29
 - 100% คือ ขนาดเดิมของรูป
30
 - มากกว่า 100% คือ ขนาดใหญ่ขึ้น
31
 - น้อยกว่า 100% คือ ขนาดเล็กลง
32
-->
33
34
<link href="https://dl.dropbox.com/scl/fi/45ce9ff5ms3v4fkhi92kl/btfeffect.css?rlkey=1lrzjmjc81irtasiucme0guka&st=t51zynbs" rel="stylesheet">
35
<div id="zzzcode"><a href="https://discord.com/users/625292873914515456/"></a><div id="butterfly-effect" data-group="1">
36
<input type="radio" name="btfeffect-data-1" data-item="none" id="none-1" checked />
37
<input type="radio" name="btfeffect-data-1" data-item="obj1" id="obj1-1" />
38
<input type="radio" name="btfeffect-data-1" data-item="obj2" id="obj2-1" />
39
<input type="radio" name="btfeffect-data-1" data-item="obj3" id="obj3-1" />
40
<input type="radio" name="btfeffect-data-1" data-item="obj4" id="obj4-1" />
41
<label for="none-1" class="btf-container" style="--btf-bg: #000;--btf-txt: #fff;--btf-primary: #30f035;--btf-icon: #000;--btf-icon-bg: #fff;">
42
<div class="btf-head" style="--btf-head: url(https://i.imgur.com/mvoMoUz.png);--btf-txt: #fff;"></div>
43
<div class="btf-pad" style="margin-block-start: -12vw;">
44-
<div class="btf-head" style="--btf-head: url(https://i.imgur.com/mvoMoUz.png);--btf-txt: #fff;">
44+
<h1 style="font-family: 'August Stories Serif', serif;font-size: 2.3vw;">The Walking Dead</h1>
45-
<i class="btf-butterfly"></i>
45+
<h2 style="visibility: hidden;">: Chapter 01 :</h2>
46-
<div class="btf-actname">Butterfly<br><c>Effect</c></div>
46+
47-
<div class="btf-chapter">01</div>
47+
48
<div class="btf-content" style="padding-block-start: 3rem;">
49-
<div class="btf-pad">
49+
50-
<h1>The Walking Dead</h1>
50+
51-
<h2>: Chapter 01 :</h2>
51+
52
<label for="obj1-1">
53
<div class="btf-img" style="--btf-pic: url(https://static.wikia.nocookie.net/walkingdead/images/f/f7/RickS11Crop.png);"></div>
54-
<div class="btf-pic" style="--btf-pic: url(https://i.imgur.com/hbc4Z3B.png);"></div>
54+
55-
<div class="btf-place"><div>Place สถานที่</div></div>
55+
56-
<div class="btf-content">
56+
57
<div class="btf-img" style="--btf-pic: url(https://static.wikia.nocookie.net/walkingdead/images/7/71/DarylS11Crop.png);"></div>
58
<div class="btf-alt">Lorem Ipsum</div>
59
</label>
60
<label for="obj3-1">
61
<div class="btf-img" style="--btf-pic: url(https://static.wikia.nocookie.net/walkingdead/images/3/39/MaggieS11Crop.png);"></div>
62
<div class="btf-alt">Lorem Ipsum</div>
63
</label>
64
<label for="obj4-1">
65
<div class="btf-img" style="--btf-pic: url(https://static.wikia.nocookie.net/walkingdead/images/2/20/NeganS11Crop.png);"></div>
66
<div class="btf-alt">Lorem Ipsum</div>
67
</label>
68
</div>
69
<div class="btf-data" obj="obj1">ข้อมูลรูป 1</div>
70
<div class="btf-data" obj="obj2">ข้อมูลรูป 2</div>
71
<div class="btf-data" obj="obj3">ข้อมูลรูป 3</div>
72
<div class="btf-data" obj="obj4">ข้อมูลรูป 4</div>
73
</div></div>
74
<br><c>รายละเอียดกิจกรรม :</c> บลา ๆๆๆ
75
</div>
76
</label></div></div>