CSS Var and CalC (Copy 8731) (Copy 8738)
✨ Jabont
<html> <head> <title>Let's Start </title> <style> body{ background:#eee; margin:0; font-family:sans-serif; } section{ background:linear-gradient( to bottom right, hsl( calc( calc( var(--sec) * 30 ) + 150 ) ,100%,50%), hsl( calc( calc( var(--sec) * 30 ) + 200 ) ,100%,50%) ); height:100vh; padding:1em; color:white; } </style> </head> <body> <section style="--sec:0"> <h1> ผิวน้ำ </h1> </section> <section style="--sec:1"> <h1> เริ่มดำน้ำ </h1> </section> <section style="--sec:2"> <h1> เริ่มลึกมั่ก </h1> </section> <section style="--sec:3"> <h1> เริ่มลึกมั่ก </h1> </section> </body> </html>