CSS Var and CalC (Copy 8731) (Copy 8754)
✨ ARNAKORN RAKROUM
<html> <head> <title>Let's Start </title> <style> :root{ --h:330; } body{ background:hsl(var(--h),50%,90%); margin:1rem; font-family:sans-serif; color:hsl(var(--h),80%,40%); } body[data-jabont-font-size="small"]{ font-size:.75rem; } body[data-jabont-font-size="large"]{ font-size:1.2rem; } button{ color:white; border-radius:5px; border:2px solid; background:hsl(var(--h),80%,50%); text-transform: uppercase; cursor:pointer; font-size:15px; box-shadow:2px 4px 0px 0px hsl(var(--h),70%,40%); ; } </style> </head> <body data-jabont-font-size="small"> <button onclick="document.body.dataset.jabontFontSize = 'small'"> small </button> <button onclick="document.body.dataset.jabontFontSize = 'medium'"> medium </button> <button onclick="document.body.dataset.jabontFontSize = 'large'"> large </button> <br> <br> <br> <label> Theme Color </label> <input type="range" id="huebar" min="0" max="360" onchange="document.body.style.setProperty('--h',this.value)" oninput="document.body.style.setProperty('--h',this.value)" > <br> <button style="--h:270" onclick="document.body.style.setProperty('--h',this.style.getPropertyValue('--h'))"> Jabont </button> <button style="--h:330" onclick="document.body.style.setProperty('--h',this.style.getPropertyValue('--h'))"> Black Pink </button> <button style="--h:0" onclick="document.body.style.setProperty('--h',this.style.getPropertyValue('--h'))"> velvet </button> <button style="--h:80" onclick="document.body.style.setProperty('--h',this.style.getPropertyValue('--h'))"> Leaf </button> <button style="--h:190" onclick="document.body.style.setProperty('--h',this.style.getPropertyValue('--h'))"> Sea </button> <br> <br> <br> <h1> Hello Welcome~ </h1> <p> โรลออนแลนด์โค้ก บู๊ จิ๊กซอว์เซาท์ เป่ายิงฉุบเก๊ะ สหัชญาณเกรย์วิกแฟรนไชส์ฮ็อต อึ้มตุ๊ดซิ่งผิดพลาดเปราะบาง ออโต้เดอะไวกิ้งยูวี ภารตะฮาร์ดเฮีย มอลล์ ฮ่องเต้คาแรคเตอร์นาฏยศาลา ฮิแชมพูนิรันดร์ พริตตี้วอลซ์ราชานุญาตซีนีเพล็กซ์ซัพพลาย คอร์รัปชั่นเยลลี่ นายแบบอินดอร์เยอร์บีร่า โหงวเฮ้งโกลด์สลัมโปรโมทเดอะ ไฟลต์บัลลาสต์คอมเมนท์ </p> <p> สแตนดาร์ดดยุคซัพพลายเออร์ ซีนมาเฟียเกจิ อีสต์เจได สึนามิโรแมนติกฟลุก บ๊อกซ์แชมปิยองเอาต์พาร์ตเนอร์แครกเกอร์ แคชเชียร์คลาสสิก นายแบบบอยคอตต์โจ๋โกลด์ตุ๊ด ฟีเวอร์อีโรติก เอ็นจีโอ หม่านโถวรีสอร์ท หมั่นโถว ดีลเลอร์แอสเตอร์เจ็ตคีตกวีแอคทีฟ พูล อุปการคุณวืดรีพอร์ทออร์แกนิค ฟินิกซ์อะติ๋ม ละอ่อน </p> <p> โปลิศฟอยล์เหมย ดิสเครดิตกัมมันตะบ๋อยทิป มาร์จินดอกเตอร์วีไอพี เฟิร์มตี๋ไคลแม็กซ์รุมบ้าคอนเซ็ปต์ โคโยตีชาร์จจิตเภท แอดมิชชั่น โฮมสต็อกกาญจนาภิเษกจิ๊กซอว์ นายพรานฮัมสหรัฐสตรอเบอรี อะรีพอร์ทสเตริโอ เดโมซิตี้ไฮไลท์เจ๊าะแจ๊ะพรีเซ็นเตอร์ ฮัม ราเม็งโทร ฟรุตแซ็กคลิปไบโอ สเตริโอโอเคออร์เดอร์ต่อยอด เมจิคราชบัณฑิตยสถานเจ็ตคาแรคเตอร์ โคโยตีสคริปต์ไมค์แพทยสภาออดิทอเรียม </p> <p> ภควัมปติสปิริตวอล์กงั้นบลูเบอร์รี่ โคโยตี้ เคลมชาร์จริกเตอร์แทงโก้พงษ์ โอเคโมเต็ลโอเพ่นเอฟเฟ็กต์ตุ๊ด ดิกชันนารีเพนกวิน เลคเชอร์ รีโมทซีดานแทงกั๊กแอคทีฟ โคโยตี เชฟเพนตากอน คีตราชันโอยัวะดีกรีนู้ด เซ่นไหว้จ๊าบฮิบรูอีสต์เซ่นไหว้ ดีลเลอร์ละติน ราชบัณฑิตยสถานฮิบรูกีวี คอนโดมิเนียม ซูเปอร์ ฮัมเอ็กซ์โป </p> <p> นู้ดอพาร์ตเมนต์แรงผลัก โหลยโท่ย ศิลปากรกษัตริยาธิราชติงต๊องซิลเวอร์ต่อยอด เสือโคร่งจ๊าบไฮเวย์ดีพาร์ตเมนท์ โซลาร์ โอเค ไฮเวย์โมจิ ยาวีอุรังคธาตุมั้งเวิร์ลด์ กรีนออร์แกนิคบุญคุณ คอนโดเมี่ยงคำเบบี้สังโฆ อาว์รีวิวบูติค ดีพาร์ตเมนท์ปาสคาลอึมครึมคันธาระมายาคติ เด้อ อยุติธรรมแต๋ว ดั๊มพ์ซิงอพาร์ตเมนท์ ดิกชันนารีรีวิว </p> </body> </html>