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://savant777.github.io/zoecode/btfeffect.css" 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> |