الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكود
<!DOCTYPE html> <html> <head> <style> :root { --fast: 0.3s; --slow: 1s; } input[name="search"] { width: 100px; transition: all ease-in-out var(--slow); } input[name="search"]:focus { width: 100%; } </style> </head> <body> <h1>CSS Variables</h1> <p>The transition will take 1 seconds to be finished because it is using the --slow variable as its transition-duration.</p> <form> <input type="text" name="search" placeholder="Search.."> </form> </body> </html>
الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكودالصفحة الرئيسيةتحميل الكودتغيير الألوانتغيير العرضتغيير حجم العرضتشغيل الكود