رنگ، پس‌زمینه و جلوه‌ها
رنگ نخستین چیزی است که بازدیدکننده می‌بیند. این درس نشان می‌دهد رنگ‌ها را چگونه بنویسید، چطور پس‌زمینه‌ای با چند لایه و رنگ‌شیب بسازید، تصویرها را چگونه در جعبه‌شان جا بدهید و چه جلوه‌هایی مثل محو شدن، شیشه‌ی مات، آمیختگی، ماسک و متن شکل‌دار دارید. هر نمونه زیرش اجرا می‌شود.
رنگ و شفافیت
رنگ مقداری است در یکی از چند نمادگذاری که درون گیومه‌ی یک ویژگی می‌نویسید. نام رنگ مثل tomato خواناترین است و حدود ۱۴۰ تا از آن‌ها هست؛ در پرونده‌ی فارسی نام‌های فارسی مثل قرمز و آبی هم کار می‌کنند. کد هگز مثل #0f766e قرمز و سبز و آبی است، هر کدام دو رقم، و جفت چهارم شفافیت را اضافه می‌کند (#0f766e80). rgb(37 99 235) همان سه مؤلفه را به‌صورت عددهای ۰ تا ۲۵۵ می‌دهد. hsl(280 70% 40%) فام را به‌صورت زاویه‌ای از ۰ تا ۳۶۰ می‌دهد و بعد اشباع و روشنی را، و برای تنظیم دستی راحت‌ترین نمادگذاری است: فام را نگه دارید و روشنی را کم کنید تا نسخه‌ی تیره‌تری بگیرید. یک علامت / کانال آلفا را به rgb و hsl اضافه می‌کند، مثل rgb(15 118 110 / 40%). دو مقدار ویژه شفاف و currentcolor هستند که یعنی رنگ خود متن.
رنگ رنگ متن است. به ارث می‌رسد، پس گذاشتنش روی یک ظرف همه‌ی متن‌های درونش را رنگ می‌کند. رنگ پس‌زمینه رنگ ساده‌ی پشت عنصر است. همیشه بررسی کنید که این دو آن‌قدر با هم فرق داشته باشند که خواندن راحت باشد: متن اصلی دست‌کم به نسبت تضاد ۴٫۵ به ۱ با پس‌زمینه‌اش نیاز دارد و یک ابزار رایگان سنجش تضاد این عدد را به شما می‌گوید.
صفحه:
عنوان = "رنگ و شفافیت"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پس زمینه = "#e2e8f0" پایان
جعبه:
نمایش = "فلکس" شکاف = 10 پیچش آرایش = "پیچیده"
جعبه: رنگ پس‌زمینه = "tomato" رنگ = "سفید" فاصله = 14 محتوا = "نام رنگ" پایان
جعبه: رنگ پس‌زمینه = "#0f766e" رنگ = "سفید" فاصله = 14 محتوا = "کد هگز" پایان
جعبه: رنگ پس‌زمینه = "rgb(37 99 235)" رنگ = "سفید" فاصله = 14 محتوا = "rgb" پایان
جعبه: رنگ پس‌زمینه = "hsl(280 70% 40%)" رنگ = "سفید" فاصله = 14 محتوا = "hsl" پایان
پایان
پاراگراف: محتوا = "شفافیت کل جعبه را کم‌رنگ می‌کند، ولی رنگ شفاف فقط خود رنگ را." پایان
جعبه:
نمایش = "فلکس" شکاف = 10
جعبه: شفافیت = 0.4 رنگ پس‌زمینه = "#0f766e" رنگ = "سیاه" وزن قلم = "پررنگ" فاصله = 14 محتوا = "شفافیت ۰٫۴" پایان
جعبه: رنگ پس‌زمینه = "rgb(15 118 110 / 40%)" رنگ = "سیاه" وزن قلم = "پررنگ" فاصله = 14 محتوا = "آلفا ۴۰٪" پایان
پایان
پایاندو جعبه‌ی پایین پیش‌نمایش شبیه هم‌اند ولی رفتارشان فرق دارد. شفافیت عددی از ۰ تا ۱ است و کل عنصر را کم‌رنگ می‌کند، با متن و فرزندانش، پس متن پررنگ جعبه‌ی راست هم کم‌رنگ شده است. رنگ شفاف مثل rgb(15 118 110 / 40%) فقط همان یک رنگ را کم‌رنگ می‌کند و متن را کامل نگه می‌دارد. شفافیت را برای محو یا ظاهر کردن یک کارت کامل به کار ببرید و رنگ شفاف را وقتی متن باید خوانا بماند.
فرزند هرگز نمی‌تواند از والدش پررنگ‌تر باشد. اگر والدی شفافیت = 0.5 داشته باشد، هیچ تنظیمی روی فرزند آن را به قدرت کامل برنمی‌گرداند. اگر فقط پس‌زمینه‌ی کم‌رنگ می‌خواهید، به‌جایش رنگ پس‌زمینه‌ی شفاف بگذارید.
ویژگی‌های پس‌زمینه
پشت یک عنصر می‌تواند یک رنگ و هر تعداد تصویر باشد و هر بخش ویژگی خودش را دارد. رنگ پس‌زمینه رنگ ساده‌ی پایین‌ترین لایه است. تصویر پس‌زمینه فهرستی از تصویرها یا رنگ‌شیب‌هاست که روی آن کشیده می‌شوند. اندازه پس‌زمینه بزرگی تصویر را می‌گوید: یک پهنا و بلندی، یک درصد، پوشاندن (پر کردن جعبه و بریدن بقیه) یا جا دادن (نشان دادن همه‌اش و گذاشتن نوارهای خالی). موقعیت پس‌زمینه جایش را تعیین می‌کند و موقعیت افقی پس‌زمینه و موقعیت عمودی پس‌زمینه هر کدام یک جهت را. تکرار پس‌زمینه آن را کاشی‌وار پهن می‌کند، با مقدارهای تکراری، بدون تکرار، تکرار افقی، تکرار عمودی، فاصله‌دار و گرد.
سه ویژگی دیگر معلوم می‌کنند رنگ کجا برود. مبدا پس‌زمینه می‌گوید موقعیت از کدام جعبه اندازه گرفته شود و برش پس‌زمینه می‌گوید رنگ تا کجا برسد: زیر کادر، فقط زیر فاصله‌ی داخلی یا فقط زیر محتوا. پیوست پس‌زمینه انتخاب می‌کند تصویر به چه چیزی چسبیده باشد: پیمایشی آن را با عنصر نگه می‌دارد، ثابت هنگام حرکت صفحه ساکنش می‌کند و محلی آن را با محتوای پیمایش‌شده‌ی خود عنصر می‌برد. حالت آمیختگی پس‌زمینه لایه‌ها را با هم می‌آمیزد و پایین‌تر آمده است.
پس زمینه کوتاه‌نویسی همه‌ی این‌هاست. بخش‌ها را به هر ترتیب می‌گیرد و میان موقعیت و اندازه یک / می‌گذارید:
جعبه: ارتفاع = 80 رنگ = "سفید" پس زمینه = "linear-gradient(#0ea5e9, #1d4ed8) center / cover no-repeat" محتوا = "کوتاه‌نویسی" پایانکوتاهنویسی هر بخشی را که ننوشته‌اید دوباره به حالت پیش‌فرض می‌برد. اگر تصویر پس‌زمینه بنویسید و یک خط بعد پس زمینه = "#eee"، تصویر از بین می‌رود، چون کوتاه‌نویسی تصویر را هیچ می‌کند. اول کوتاه‌نویسی و بعد ویژگی‌های جزئی را بنویسید، یا فقط از ویژگی‌های جزئی استفاده کنید.
چند لایه
بیشتر ویژگی‌های پس‌زمینه فهرستی جدا شده با ویرگول می‌گیرند، یک مورد برای هر لایه. نخستین لایه‌ی فهرست رویی‌ترین است. در نمونه‌ی زیر لایه‌ای از نقطه‌های سفید روی یک رنگ‌شیب کشیده شده: مورد اول هر فهرست مال نقطه‌هاست و مورد دوم مال رنگ‌شیب. فهرست‌ها به ترتیب جفت می‌شوند و فهرست کوتاه‌تر تکرار می‌شود تا برسد. فقط لایه‌ی آخر می‌تواند رنگ ساده داشته باشد و برای همین کوتاه‌نویسی رنگ را آخر می‌گذارد.
پایا نقطه‌ها := "url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2718%27 height=%2718%27%3E%3Ccircle cx=%279%27 cy=%279%27 r=%272%27 fill=%27white%27 fill-opacity=%27.6%27/%3E%3C/svg%3E')"
صفحه:
عنوان = "لایه‌های پس‌زمینه"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
جعبه:
ارتفاع = 150
فاصله = 20
گردی کادر = 12
رنگ = "سفید"
اندازه قلم = 22
تصویر پس‌زمینه = نقطه‌ها + ", linear-gradient(135deg, #0f766e, #1d4ed8)"
تکرار پس‌زمینه = "تکراری, بدون تکرار"
اندازه پس‌زمینه = "18px 18px, پوشاندن"
موقعیت پس‌زمینه = "0 0, وسط"
محتوا = "دو لایه: نقطه‌ها روی یک رنگ‌شیب"
پایان
پاراگراف:
محتوا = "اولین لایه‌ی فهرست، رویی‌ترین لایه است."
پایان
پایاننقطهها یک تصویر SVG هستند که مستقیم درون صفحه به‌صورت نشانی داده (data URL) نوشته شده، پس پرونده‌ای برای بارگیری نیست. نویسه‌هایی که در نشانی معنای ویژه دارند با کد درصدی نوشته می‌شوند: %3C برای <، %3E برای >، %23 برای # و %27 برای نقل قول تکی. رشته‌ی بلندی مثل این را در یک ثابت بالای بلوک صفحه: نگه دارید و نام ثابت را در ویژگی به کار ببرید.
نمونه‌ی بعد برش پس‌زمینه و مبدا پس‌زمینه را روی جعبه‌هایی با کادر خط‌چین نشان می‌دهد. سه جعبه‌ی اول یک رنگ را زیر کادر، فقط زیر فاصله‌ی داخلی و فقط زیر محتوا می‌کشند. جعبه‌ی آخر رنگ‌شیبی دارد که از لبه‌ی بیرونی کادر شروع می‌شود و نه از فاصله‌ی داخلی.
صفحه:
عنوان = "برش و مبدا پس‌زمینه"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
جعبه:
نمایش = "فلکس" شکاف = 10 پیچش آرایش = "پیچیده" رنگ = "سفید" وزن قلم = "پررنگ"
جعبه: عرض = 100 فاصله = 12 کادر = "8px خط‌چین #0f172a" پس زمینه = "#0f766e" برش پس‌زمینه = "جعبه کادر" محتوا = "کادر" پایان
جعبه: عرض = 100 فاصله = 12 کادر = "8px خط‌چین #0f172a" پس زمینه = "#0f766e" برش پس‌زمینه = "جعبه فاصله" محتوا = "فاصله" پایان
جعبه: عرض = 100 فاصله = 12 کادر = "8px خط‌چین #0f172a" پس زمینه = "#0f766e" برش پس‌زمینه = "جعبه محتوا" محتوا = "محتوا" پایان
جعبه:
عرض = 100 فاصله = 12 کادر = "8px خط‌چین #0f172a"
پس زمینه = "linear-gradient(#f97316, #1d4ed8)"
مبدا پس‌زمینه = "جعبه کادر"
برش پس‌زمینه = "جعبه کادر"
محتوا = "مبدا"
پایان
پایان
پایانرنگشیبها
رنگ‌شیب تصویری است که مرورگر می‌سازد، پس هر جا تصویر پذیرفته شود می‌نشیند: تصویر پس‌زمینه، تصویر ماسک، منبع تصویر کادر و تصویر نشانه فهرست. linear-gradient رنگ‌ها را در امتداد یک خط می‌آمیزد: یک زاویه مثل 90deg (یک چهارم دور، از چپ به راست) یا یک جهت مثل to right بدهید و بعد رنگ‌ها را. radial-gradient از یک نقطه به بیرون به شکل دایره یا بیضی پخش می‌شود و circle at 30% 30% مرکزش را جابه‌جا می‌کند. conic-gradient مثل عقربه‌ی ساعت دور یک نقطه می‌چرخد و راه کشیدن نمودار دایره‌ای و چرخ رنگ است. نسخه‌های repeating- الگو را بی‌پایان تکرار می‌کنند.
هر ایستگاه رنگ می‌تواند موقعیت داشته باشد. دو ایستگاه در یک موقعیت به‌جای آمیختگی لبه‌ای تیز می‌سازند، که جعبه‌ی «مرز تیز» دو نیمه‌ی تخت را همین‌طور می‌کشد، و ایستگاهی مثل #0f766e 0 10px یک بازه را می‌پوشاند، که راه‌راه‌ها همین‌طور ساخته می‌شوند.
صفحه:
عنوان = "رنگ‌شیب‌ها"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
جعبه:
نمایش = "شبکه" شکاف = 10 ستون های شبکه = "repeat(auto-fit, minmax(130px, 1fr))" تراز متن = "وسط" رنگ = "سفید" وزن قلم = "پررنگ"
جعبه: ارتفاع = 90 فاصله = 8 پس زمینه = "linear-gradient(90deg, #f97316, #db2777)" محتوا = "خطی" پایان
جعبه: ارتفاع = 90 فاصله = 8 پس زمینه = "radial-gradient(circle at 30% 30%, #fde047, #ea580c)" محتوا = "دایره‌ای" پایان
جعبه: ارتفاع = 90 فاصله = 8 پس زمینه = "conic-gradient(from 0deg, #2563eb, #9333ea, #db2777, #2563eb)" محتوا = "مخروطی" پایان
جعبه: ارتفاع = 90 فاصله = 8 پس زمینه = "repeating-linear-gradient(45deg, #0f766e 0 10px, #134e4a 10px 20px)" محتوا = "تکرارشونده" پایان
جعبه: ارتفاع = 90 فاصله = 8 پس زمینه = "linear-gradient(90deg, #2563eb 50%, #f59e0b 50%)" محتوا = "مرز تیز" پایان
پایان
پایانرنگشیب می‌تواند حرف‌ها را هم پر کند. به عنصر پس‌زمینه‌ی رنگ‌شیب بدهید، با برش پس‌زمینه = "متنی" پس‌زمینه را به شکل متن ببرید و رنگ متن را شفاف کنید تا پس‌زمینه از زیر دیده شود.
صفحه:
عنوان = "متن رنگ‌شیب"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
سرتیتر:
اندازه = 1
اندازه قلم = 56
فضا = 0
پس زمینه = "linear-gradient(90deg, #f97316, #db2777, #7c3aed)"
برش پس‌زمینه = "متنی"
رنگ = "شفاف"
محتوا = "سلام"
پایان
پاراگراف: محتوا = "رنگ‌شیب پس‌زمینه‌ی جعبه است که به شکل حرف‌ها بریده شده، و رنگ متن را شفاف کرده‌ایم تا رنگ‌شیب از زیرش دیده شود." پایان
پایانجا دادن تصویر در جعبه
عنصر تصویر همان اندازه‌ای را دارد که با عرض و ارتفاع می‌دهید، و عکس درونش کمتر هم‌شکل آن است. جاگیری شیء تصمیم می‌گیرد چه شود. پر کردن عکس را به اندازه‌ی جعبه می‌کشد و کج‌ومعوجش می‌کند. جا دادن کل عکس را نشان می‌دهد و نوار خالی می‌گذارد. پوشاندن جعبه را پر می‌کند و آنچه جا نشد می‌برد، که برای عکس در ردیفی از کارت‌ها همان چیزی است که می‌خواهید. هیچ اندازه‌ی طبیعی را نگه می‌دارد و scale-down کوچک‌تر از هیچ و جا دادن را برمی‌دارد. وقتی عکس بریده می‌شود، موقعیت شیء با همان مقدارهای موقعیت پس‌زمینه انتخاب می‌کند کدام بخش بماند. آخرین عکس نمونه سمت راستش را نگه داشته است.
پایا عکس := "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAA8AgMAAADkulcnAAAADFBMVEX94Ec4vfgVgD0WZTT6OgVDAAABG0lEQVR42tWTPU7EMBBGn2eNZInGSIjaQqLaS/gIW7D38SW4BcUeIUfhCOmJFAon9mQzFKkQKewkzzPf/NldsR/h34Pvz1/AbR5MMMNoggkmE4wwH4tqAIa/KkkG8iGLCM4EHrwJHMQOgiIXlzt4VeDhXYmXcjBBIdkgbNQVSDufy3eBYgGBexExCqJA6Lk/bUDqtjlrUNriiAp0M/wqIr20AeCCy1ZUrnZwBam9+hawNFko9bRrYHWX6ujURVRbw3I43ldJFvd+H1VsoXE6w8f6//xY95cvEG30tuzP1VXQt6/5Et2hQQ28qJ7OOgjZXvDeRlFo1LUUpT3oW6VGcN5kKl172syKdImbblgWLE8QJViewEvaBwvgfgAayyTvlJJ3aQAAAABJRU5ErkJggg=="
صفحه:
عنوان = "جاگیری تصویر"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
جعبه:
نمایش = "فلکس" شکاف = 12 پیچش آرایش = "پیچیده" تراز متن = "وسط"
جعبه:
تصویر: نشانی = عکس جایگزین = "پر کردن" عرض = 130 ارتفاع = 130 جاگیری شیء = "پر کردن" کادر = "1px solid #94a3b8" پایان
پاراگراف: محتوا = "پر کردن" پایان
پایان
جعبه:
تصویر: نشانی = عکس جایگزین = "جا دادن" عرض = 130 ارتفاع = 130 جاگیری شیء = "جا دادن" کادر = "1px solid #94a3b8" پایان
پاراگراف: محتوا = "جا دادن" پایان
پایان
جعبه:
تصویر: نشانی = عکس جایگزین = "پوشاندن" عرض = 130 ارتفاع = 130 جاگیری شیء = "پوشاندن" کادر = "1px solid #94a3b8" پایان
پاراگراف: محتوا = "پوشاندن" پایان
پایان
جعبه:
تصویر: نشانی = عکس جایگزین = "پوشاندن، راست" عرض = 130 ارتفاع = 130 جاگیری شیء = "پوشاندن" موقعیت شیء = "راست وسط" کادر = "1px solid #94a3b8" پایان
پاراگراف: محتوا = "پوشاندن، راست" پایان
پایان
پایان
پایانعکسهای این نمونه‌ها تصویرهای کوچک PNG و SVG درون خود صفحه‌اند، چون صفحه می‌تواند هر جا نشانی تصویر می‌پذیرد نشانی data:image/... بدهد. انواع دیگر نشانی data: را مترجم با خطا رد می‌کند، چون می‌توانند کد اجرا کنند.
نمایش تصویر تعیین می‌کند عکس هنگام تغییر اندازه چگونه دوباره نمونه‌برداری شود. پیش‌فرض هموار است. پیکسلی پیکسل‌های مربعی تیز را نگه می‌دارد، که برای پیکسل‌آرت و کد QR درست است. جهت‌گیری تصویر مشخص می‌کند عکس بر پایه‌ی چرخشی که دوربین ثبت کرده بچرخد یا نه: from-image می‌چرخاند و در مرورگرهای امروزی پیش‌فرض است، و none پیکسل‌ها را همان‌طور که ذخیره شده‌اند نشان می‌دهد. جعبه دید شیء که تازه‌تر است بخش دیده‌شده‌ی عکس را بدون تغییر جعبه می‌برد و بزرگ می‌کند، ولی هنوز همه‌ی مرورگرها پشتیبانی‌اش نمی‌کنند.
پایا نماد := "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAH0lEQVR4nGP4DwS31cvBGAQYQIzf51+AMYiNKYCuBQCwzDJ17qOzggAAAABJRU5ErkJggg=="
صفحه:
عنوان = "نمایش تصویر"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
جعبه:
نمایش = "فلکس" شکاف = 24 تراز متن = "وسط"
جعبه:
تصویر: نشانی = نماد جایگزین = "هموار" عرض = 128 ارتفاع = 128 نمایش تصویر = "خودکار" پایان
پاراگراف: محتوا = "خودکار" پایان
پایان
جعبه:
تصویر: نشانی = نماد جایگزین = "پیکسلی" عرض = 128 ارتفاع = 128 نمایش تصویر = "پیکسلی" پایان
پاراگراف: محتوا = "پیکسلی" پایان
پایان
پایان
پاراگراف: محتوا = "این تصویر فقط ۴ در ۴ پیکسل است. حالت پیکسلی لبه‌های مربعی آن را هنگام بزرگ شدن نگه می‌دارد." پایان
پایانپالایهها
پالایه یک جلوه‌ی گرافیکی را روی عنصر و همه‌ی درونش اعمال می‌کند. هر جلوه یک تابع است: blur(2px)، grayscale(1)، sepia(0.9)، hue-rotate(120deg)، brightness(1.3)، contrast(1.4)، saturate(3)، invert(1)، opacity(0.5) و drop-shadow(6px 6px 4px black). چند تا را با فاصله پشت هم بنویسید تا از چپ به راست اعمال شوند، پس ترتیب نتیجه را عوض می‌کند. پیش‌نمایش یک عکس را هشت بار نشان می‌دهد. بخش کاشی بالای پرونده یک عبارت و یک پالایه می‌گیرد، پس هر کاشی یک خط کوتاه است.
پایا عکس := "data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20160%20100%27%3E%3Crect%20width=%27160%27%20height=%27100%27%20fill=%27%2338bdf8%27/%3E%3Ccircle%20cx=%27122%27%20cy=%2725%27%20r=%2714%27%20fill=%27%23fde047%27/%3E%3Cpath%20d=%27M0%20100L50%2040L100%20100Z%27%20fill=%27%23166534%27/%3E%3Cpath%20d=%27M60%20100L110%2055L160%20100Z%27%20fill=%27%2315803d%27/%3E%3C/svg%3E"
بخش کاشی(عبارت، اثر):
جعبه:
تصویر: نشانی = عکس جایگزین = "" عرض = 120 پالایه = اثر پایان
پاراگراف: محتوا = عبارت فضا = "4px 0" پایان
پایان
پایان
صفحه:
عنوان = "پالایه‌ها"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
جعبه:
نمایش = "فلکس" شکاف = 12 پیچش آرایش = "پیچیده" تراز متن = "وسط" اندازه قلم = 13
کاشی: عبارت = "none" اثر = "none" پایان
کاشی: عبارت = "blur(2px)" اثر = "blur(2px)" پایان
کاشی: عبارت = "grayscale(1)" اثر = "grayscale(1)" پایان
کاشی: عبارت = "sepia(0.9)" اثر = "sepia(0.9)" پایان
کاشی: عبارت = "hue-rotate(120deg)" اثر = "hue-rotate(120deg)" پایان
کاشی: عبارت = "brightness(1.3) contrast(1.4)" اثر = "brightness(1.3) contrast(1.4)" پایان
کاشی: عبارت = "invert(1)" اثر = "invert(1)" پایان
کاشی: عبارت = "saturate(3)" اثر = "saturate(3)" پایان
پایان
پایانمقدار پالایه می‌تواند هنگام اجرای صفحه عوض شود. نمونه‌ی بعد دو لغزنده را می‌خواند و هر بار که یکی حرکت کند مقدار تازه‌ی پالایه را برای جعبه می‌نویسد. هر دو لغزنده را با هم امتحان کنید.
واردسازی دام
تابع تازه():
محو := دام.دریافت مقدار(دام.با شناسه("blur"))
چرخش := دام.دریافت مقدار(دام.با شناسه("hue"))
دام.تنظیم سبک(دام.با شناسه("pic")، "filter"، "blur(" + محو + "px) hue-rotate(" + چرخش + "deg)")
دام.تنظیم متن(دام.با شناسه("out")، "blur(" + محو + "px) hue-rotate(" + چرخش + "deg)")
پایان
صفحه:
عنوان = "پالایه‌ی زنده"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
جعبه:
شناسه = "pic"
عرض = 220
ارتفاع = 120
گردی کادر = 12
پس زمینه = "radial-gradient(circle at 70% 30%, #fde047 0 14%, transparent 15%), linear-gradient(#38bdf8, #0ea5e9 60%, #166534 60%)"
پایان
جعبه:
فضا = "12px 0"
برچسب: محتوا = "محوی " پایان
ورودی: نوع = "بازه" شناسه = "blur" کمینه = 0 بیشینه = 10 مقدار = 0 ورودی = تازه پایان
پایان
جعبه:
برچسب: محتوا = "چرخش فام " پایان
ورودی: نوع = "بازه" شناسه = "hue" کمینه = 0 بیشینه = 360 مقدار = 0 ورودی = تازه پایان
پایان
پاراگراف: شناسه = "out" محتوا = "blur(0px) hue-rotate(0deg)" پایان
پایانbackdrop filter همان تابع‌ها را می‌گیرد ولی آن‌ها را روی آنچه پشت عنصر است اعمال می‌کند و از بخش‌های شفاف عنصر دیده می‌شود. همراه با پس‌زمینه‌ی نیمه‌شفاف، شیشه‌ی مات می‌سازد. کارت باید پس‌زمینه‌ای داشته باشد که کاملاً مات نیست، وگرنه چیزی برای دیدن از پشتش نیست.
صفحه:
عنوان = "شیشه‌ی مات"
سراسری: گزینشگر = "body" فضا = 0 خانواده قلم = "Tahoma, system-ui, sans-serif" پایان
جعبه:
موقعیت = "نسبی"
ارتفاع = 220
سرریز = "پنهان"
پس زمینه = "linear-gradient(120deg, #f97316, #db2777 50%, #4f46e5)"
جعبه: موقعیت = "مطلق" چپ = 30 بالا = 30 عرض = 90 ارتفاع = 90 گردی کادر = "50%" پس زمینه = "#fde047" پایان
جعبه: موقعیت = "مطلق" راست = 40 پایین = 20 عرض = 120 ارتفاع = 120 گردی کادر = "50%" پس زمینه = "#22d3ee" پایان
جعبه:
موقعیت = "مطلق" چپ = 60 بالا = 60 راست = 60 پایین = 40
فاصله = 20
رنگ = "سفید"
کادر = "1px solid rgb(255 255 255 / 50%)"
گردی کادر = 16
پس زمینه = "rgb(255 255 255 / 18%)"
backdrop filter= "blur(10px) saturate(1.4)"
سرتیتر: اندازه = 3 فضا = 0 محتوا = "شیشه‌ی مات" پایان
پاراگراف: محتوا = "دایره‌های پشت این کارت محو شده‌اند." پایان
پایان
پایان
پایانمحو کردن برای مرورگر پرهزینه است، به‌خصوص محوی بزرگ روی ناحیه‌ای بزرگ. آن را روی عنصرهای کوچک به کار ببرید و سرعت پیمایش را روی گوشی زیر نظر داشته باشید. drop-shadow شکل واقعی محتوا را با پیکسل‌های شفافش دنبال می‌کند، ولی سایه کادر (درس بعد) شکل جعبه را.
حالت‌های آمیختگی و جداسازی
معمولاً جعبه آنچه را پشتش است می‌پوشاند. حالت آمیختگی به‌جایش دو رنگ را با هم می‌آمیزد. حالت آمیختگی روی خود عنصر و آنچه پشتش است کار می‌کند و حالت آمیختگی پس‌زمینه میان لایه‌های پس‌زمینه‌ی یک عنصر. ضرب همیشه نتیجه‌ی تیره‌تری می‌دهد، مثل دو طلق رنگی شفاف که روی هم می‌گذارید، و screen روشن‌تر. overlay، difference، color-dodge و بقیه هم ارزش امتحان دارند، چون فرمول‌هایشان دیدنی‌تر از خواندنی است.
به‌طور پیش‌فرض آمیختگی به هر چیزی پشت عنصر می‌رسد، تا خود صفحه. جداسازی = "جدا" عنصر را گروهی مستقل می‌کند، پس آمیختگی درونش درون می‌ماند. نمونه‌ی راست جدا شده است: دو دایره با هم و با کارت سفید ضرب می‌شوند و هیچ چیز دیگری در صفحه عوض نمی‌شود.
پایا عکس := "data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20160%20100%27%3E%3Crect%20width=%27160%27%20height=%27100%27%20fill=%27%23fde68a%27/%3E%3Ccircle%20cx=%2780%27%20cy=%2750%27%20r=%2740%27%20fill=%27%23f87171%27/%3E%3C/svg%3E"
صفحه:
عنوان = "حالت‌های آمیختگی"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
جعبه:
نمایش = "فلکس" شکاف = 24 پیچش آرایش = "پیچیده" ترازعمودی = "وسط"
جعبه:
جداسازی = "جدا" موقعیت = "نسبی" عرض = 150 ارتفاع = 110 پس زمینه = "سفید"
جعبه: موقعیت = "مطلق" چپ = 10 بالا = 10 عرض = 80 ارتفاع = 80 گردی کادر = "50%" پس زمینه = "#06b6d4" حالت آمیختگی = "ضرب" پایان
جعبه: موقعیت = "مطلق" چپ = 50 بالا = 10 عرض = 80 ارتفاع = 80 گردی کادر = "50%" پس زمینه = "#ec4899" حالت آمیختگی = "ضرب" پایان
پایان
جعبه:
عرض = 150 ارتفاع = 100
تصویر پس‌زمینه = "url('" + عکس + "')"
اندازه پس‌زمینه = "پوشاندن"
رنگ پس‌زمینه = "#2563eb"
حالت آمیختگی پس‌زمینه = "ضرب"
پایان
پایان
پاراگراف: محتوا = "راست: دو دایره که در هم ضرب شده‌اند. چپ: تصویری که در رنگ زیرش ضرب شده است." پایان
پایانبرش، ماسک و متن شکل‌دار
مسیر برش عنصر را به یک شکل می‌برد. هر چه بیرون شکل باشد کشیده نمی‌شود و کلیک هم نمی‌گیرد. شکل‌ها circle(50%)، ellipse(50% 40% at 50% 50%)، inset(10% 0 10% 0 round 20px) و polygon(...) هستند، فهرستی از نقطه‌ها به‌صورت جفت‌های x و y که ستاره‌ی نمونه ده نقطه دارد. چون برش دقیق است، هر چه بیرون جعبه کشیده شود، مثل سایه، بریده می‌شود.
صفحه:
عنوان = "مسیر برش"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
جعبه:
نمایش = "فلکس" شکاف = 14 پیچش آرایش = "پیچیده"
جعبه: عرض = 100 ارتفاع = 100 پس زمینه = "linear-gradient(135deg, #f97316, #db2777)" مسیر برش = "circle(50%)" پایان
جعبه: عرض = 100 ارتفاع = 100 پس زمینه = "linear-gradient(135deg, #0ea5e9, #6366f1)" مسیر برش = "polygon(50% 0, 100% 100%, 0 100%)" پایان
جعبه: عرض = 100 ارتفاع = 100 پس زمینه = "linear-gradient(135deg, #eab308, #f97316)" مسیر برش = "polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)" پایان
جعبه: عرض = 100 ارتفاع = 100 پس زمینه = "linear-gradient(135deg, #10b981, #0f766e)" مسیر برش = "inset(10% 0 10% 0 round 20px)" پایان
جعبه: عرض = 140 ارتفاع = 100 پس زمینه = "linear-gradient(135deg, #a855f7, #ec4899)" مسیر برش = "ellipse(50% 40% at 50% 50%)" پایان
پایان
پایانماسک کار مشابهی با لبه‌های نرم می‌کند. تصویرش معلوم می‌کند هر نقطه‌ی عنصر چقدر دیده شود. جایی که ماسک پُر است عنصر دیده می‌شود و جایی که شفاف است پنهان، پس رنگ‌شیبی از سیاه به شفاف یک محو شدن است. تصویر ماسک، اندازه ماسک، موقعیت ماسک، تکرار ماسک، مبدا ماسک و برش ماسک مثل هم‌خانواده‌های پس‌زمینه‌شان کار می‌کنند. حالت ماسک انتخاب می‌کند شفافیت (alpha) به حساب بیاید یا روشنایی (luminance)، ترکیب ماسک می‌گوید چند لایه‌ی ماسک چگونه ترکیب شوند و نوع ماسک فقط برای ماسک‌هایی است که با عنصر mask در SVG ساخته شده‌اند.
پایا ستاره := "url('data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20100%20100%27%3E%3Cpath%20d=%27M50%205L61%2038H96L68%2059L79%2093L50%2072L21%2093L32%2059L4%2038H39Z%27/%3E%3C/svg%3E')"
صفحه:
عنوان = "ماسک‌ها"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
جعبه:
نمایش = "فلکس" شکاف = 16 پیچش آرایش = "پیچیده"
جعبه:
عرض = 160 ارتفاع = 110
پس زمینه = "linear-gradient(90deg, #f97316, #7c3aed)"
تصویر ماسک = "linear-gradient(to right, black 30%, transparent)"
پایان
جعبه:
عرض = 120 ارتفاع = 120
پس زمینه = "linear-gradient(135deg, #facc15, #db2777)"
تصویر ماسک = ستاره
اندازه ماسک = "جا دادن"
تکرار ماسک = "بدون تکرار"
موقعیت ماسک = "وسط"
پایان
پایان
پایانآخرین ابزار شکل به‌جای جعبه، متن را عوض می‌کند. شناوری معمولاً متن را دور مستطیلش می‌پیچاند. بیرونی شکل کاری می‌کند متن شکل دیگری را دنبال کند، مثل circle(50%)، پس سطرها کنار انحنا فرو می‌روند. فضا شکل میان شکل و واژه‌ها جا باز می‌کند. وقتی شکل یک تصویر یا رنگ‌شیب است، آستانه تصویر شکل می‌گوید پیکسل چقدر باید مات باشد تا حساب شود. شکل فقط پیچیدن متن را عوض می‌کند، پس جعبه برای گرد دیده شدن باز هم گردی کادر یا مسیر برش لازم دارد.
صفحه:
عنوان = "متن دور یک شکل"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, serif" فضا = "1.5rem" بیشینه عرض = "34rem" ارتفاع خط = 1.6 پایان
جعبه:
شناوری = "راست"
عرض = 150
ارتفاع = 150
فضا = "0 0 0 12px"
پس زمینه = "radial-gradient(circle at 35% 35%, #fde047, #ea580c)"
گردی کادر = "50%"
بیرونی شکل = "circle(50%)"
فضا شکل = 10
پایان
پاراگراف:
محتوا = "متن معمولاً دور مستطیل یک جعبه‌ی شناور می‌پیچد. با «بیرونی شکل» به‌جای مستطیل دور دایره می‌پیچد، پس سطرها زیر انحنا فرو می‌روند و گوشه‌های خالی هم به کار می‌آیند. «فضا شکل» میان شکل و واژه‌ها کمی فاصله می‌اندازد، و این پاراگراف آن‌قدر بلند است که اثر آن را کنار خورشید در هر سطر ببینید."
پایان
پایانرنگ برای کنترل‌های فرم
مرورگرها تیک، دکمه‌ی رادیویی، لغزنده و نوار پیشرفت را خودشان می‌کشند. رنگ تاکید بخش فعال همه‌ی آن‌ها را با یک ویژگی عوض می‌کند و بومی نگهشان می‌دارد، پس دسترس‌پذیر می‌مانند. رنگ نشانگر متن نشانگر چشمک‌زن درون فیلد متن را رنگ می‌کند. تیک نمونه به کلیک هم واکنش می‌دهد: تابعش ویژگی checked جعبه را از مرورگر می‌پرسد و پاسخ را در یک پاراگراف می‌نویسد.
واردسازی دام
تابع بررسی():
اگر دام.دریافت خاصیت منطقی(دام.با شناسه("agree")، "checked"):
دام.تنظیم متن(دام.با شناسه("state")، "پذیرفته شد")
وگرنه:
دام.تنظیم متن(دام.با شناسه("state")، "هنوز نپذیرفته‌اید")
پایان
پایان
صفحه:
عنوان = "رنگ تاکید و رنگ نشانگر"
سراسری: گزینشگر = "body" خانواده قلم = "Tahoma, system-ui, sans-serif" فضا = "1.5rem" پایان
جعبه:
ورودی: نوع = "تیک" شناسه = "agree" رنگ تاکید = "#db2777" تغییر = بررسی پایان
برچسب: برای = "agree" محتوا = " شرط‌ها را می‌پذیرم" پایان
پایان
پاراگراف: شناسه = "state" محتوا = "هنوز نپذیرفته‌اید" پایان
ورودی: نوع = "متنی" رنگ نشانگر متن = "#db2777" جانگهدار = "اینجا بنویسید، نشانگر صورتی است" عرض = 260 فاصله = 8 پایان
پایانرنگ را تنها راه گفتن یک چیز نکنید. متن قرمز برای خطا برای کسی که قرمز و سبز را از هم تشخیص نمی‌دهد دیده نمی‌شود، پس یک کلمه یا نماد هم کنارش بگذارید. در صفحه‌ای که حالت تاریک را پشتیبانی می‌کند، هر جفت رنگ را در هر دو پوسته آزمایش کنید.
مرجع: رنگ، پس‌زمینه و جلوه‌ها
هر ویژگی این درس زیر با مقدارهایی که می‌پذیرد و یک نمونه‌ی کوتاه آمده است. نمونه‌ها را مترجم بررسی کرده است، پس هر کدام را می‌توانید درون یک بلوک صفحه: بگذارید. اگر مقداری به ویژگی نخورد، ساخت با خطایی که نام ویژگی و مقدار را می‌گوید متوقف می‌شود، پس غلط تایپی پیش از باز شدن صفحه پیدا می‌شود. چگونگی‌اش در درس بعد توضیح داده شده است.
رنگ و شفافیت
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
رنگcolor color | رنگ متن، و رنگ پیش‌فرض کادر و سایه‌ی عنصر. به ارث می‌رسد، پس گذاشتنش روی یک ظرف همه‌ی متن‌های درونش را رنگ می‌کند. نمادگذاری‌ها: نام (crimson)، هگز (#be123c)، rgb()، hsl() و بیشتر. [color] | پاراگراف: رنگ = "#be123c" محتوا = "متن به رنگ زرشکی" پایان |
شفافیتopacity opacity | عنصر با همه‌ی محتوایش چقدر شفاف باشد، از 0 (نامرئی) تا 1 (کامل). درصد هم می‌شود: 50%. متن و فرزندها را با هم کم‌رنگ می‌کند؛ برای کم‌رنگ کردن فقط یک رنگ از رنگ شفاف استفاده کنید. [number / percentage] | جعبه: شفافیت = 0.5 فاصله = 16 پس زمینه = "#2563eb" رنگ = "سفید" محتوا = "نیمه‌پیدا" پایان |
رنگ پس‌زمینهbackground color background-color | رنگ ساده‌ی پشت عنصر، زیر هر تصویر پس‌زمینه. رنگی در هر نمادگذاری می‌پذیرد، یا شفاف که پیش‌فرض است. [color] | جعبه: فاصله = 16 رنگ پس‌زمینه = "#dcfce7" محتوا = "سبز کم‌رنگ" پایان |
رنگ تاکیدaccent color accent-color | رنگی که مرورگر برای بخش فعال تیک، دکمه‌ی رادیویی، لغزنده و نوار پیشرفت به کار می‌برد. هر رنگی می‌پذیرد، یا خودکار برای آبی خود مرورگر. [color / auto] | ورودی: نوع = "تیک" تیک خورده = true رنگ تاکید = "#db2777" پایان |
رنگ نشانگر متنcaret color caret-color | رنگ نشانگر چشمک‌زن متن در ورودی‌ها و متن‌های بلند. رنگی می‌پذیرد، یا خودکار برای رنگ خود متن. [color / auto] | ورودی: نوع = "متنی" رنگ نشانگر متن = "#db2777" جانگهدار = "اینجا بنویسید" پایان |
پس‌زمینه
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
پس زمینهbackground background | چند ویژگی پس‌زمینه را در یک مقدار می‌گذارد: رنگ، تصویر، موقعیت، اندازه، تکرار، پیوست، مبدا و برش. لایه‌ها با ویرگول جدا می‌شوند و فقط لایه‌ی آخر می‌تواند رنگ داشته باشد. بخشی که ننویسید مقدار پیش‌فرضش را می‌گیرد. علامت / موقعیت را از اندازه جدا می‌کند. [comma list] | جعبه: ارتفاع = 80 رنگ = "سفید" پس زمینه = "linear-gradient(#0ea5e9, #1d4ed8) center / cover no-repeat" محتوا = "کوتاه‌نویسی" پایان |
تصویر پس‌زمینهbackground image background-image | یک یا چند تصویر یا رنگ‌شیب که روی رنگ پس‌زمینه کشیده می‌شوند. هر کدام url(...) یا یک تابع رنگ‌شیب است، با ویرگول جدا می‌شوند و اولی رویی‌ترین است. هیچ تصویر را برمی‌دارد. [image / none; comma list] | جعبه: ارتفاع = 80 تصویر پس‌زمینه = "linear-gradient(90deg, #f43f5e, #f59e0b)" پایان |
اندازه پس‌زمینهbackground size background-size | اندازه‌ی تصویر پس‌زمینه: یک طول یا درصد برای پهنا و بلندی، خودکار برای اندازه‌ی طبیعی، پوشاندن برای پر کردن جعبه (با بریدن) و جا دادن برای نشان دادن کل تصویر (با حاشیه‌ی خالی). [length / percentage / auto, cover, contain; up to 2 values; comma list] | جعبه: ارتفاع = 80 تصویر پس‌زمینه = "linear-gradient(135deg, #f97316 50%, #fed7aa 50%)" اندازه پس‌زمینه = "30px 30px" پایان |
موقعیت پس‌زمینهbackground position background-position | جای تصویر پس‌زمینه درون جعبه. یک یا دو مقدار می‌گیرد، یا تا چهار مقدار برای اندازه‌گیری از لبه‌های انتخابی (right 20px bottom 10px). کلمه‌ها چپ، وسط، راست، بالا و پایین هستند و طول و درصد هم کار می‌کنند. [length / percentage; up to 4 values; comma list] | جعبه: ارتفاع = 100 تصویر پس‌زمینه = "radial-gradient(circle, #f43f5e 0 20px, transparent 21px)" تکرار پس‌زمینه = "بدون تکرار" موقعیت پس‌زمینه = "right 20px bottom 10px" محتوا = "نقطه کنار گوشه" پایان |
موقعیت افقی پس‌زمینهbackground position x background-position-x | فقط موقعیت افقی پس‌زمینه. چپ، وسط، راست، یک طول یا یک درصد می‌گیرد و 0% لبه‌ی چپ است. [length / percentage / left, center, right; comma list] | جعبه: ارتفاع = 80 تصویر پس‌زمینه = "radial-gradient(circle, #6366f1 0 18px, transparent 19px)" تکرار پس‌زمینه = "بدون تکرار" موقعیت افقی پس‌زمینه = "30%" موقعیت عمودی پس‌زمینه = "وسط" پایان |
موقعیت عمودی پس‌زمینهbackground position y background-position-y | فقط موقعیت عمودی پس‌زمینه. بالا، وسط، پایین، یک طول یا یک درصد می‌گیرد و 0% لبه‌ی بالاست. [length / percentage / top, center, bottom; comma list] | جعبه: ارتفاع = 80 تصویر پس‌زمینه = "radial-gradient(circle, #10b981 0 18px, transparent 19px)" تکرار پس‌زمینه = "بدون تکرار" موقعیت افقی پس‌زمینه = "وسط" موقعیت عمودی پس‌زمینه = "پایین" پایان |
تکرار پس‌زمینهbackground repeat background-repeat | آیا تصویر و چگونه کاشی‌وار تکرار شود: تکراری (پیش‌فرض)، بدون تکرار، تکرار افقی، تکرار عمودی، فاصله‌دار (کاشی‌های کامل با فاصله میانشان) و گرد (کاشی‌ها کشیده می‌شوند تا کامل جا شوند). دو مقدار جهت افقی و عمودی را جدا می‌گذارد. [repeat, no-repeat, repeat-x, repeat-y, space, round; up to 2 values; comma list] | جعبه: ارتفاع = 80 تصویر پس‌زمینه = "linear-gradient(90deg, #0f766e 50%, #99f6e4 50%)" اندازه پس‌زمینه = "40px 100%" تکرار پس‌زمینه = "تکرار افقی" پایان |
پیوست پس‌زمینهbackground attachment background-attachment | می‌گوید پس‌زمینه به چه چیزی چسبیده است. پیمایشی (پیش‌فرض) آن را با خود عنصر نگه می‌دارد، ثابت هنگام پیمایش صفحه ساکنش می‌کند و محلی آن را با محتوای پیمایش‌شده‌ی خود عنصر می‌برد. بعضی مرورگرهای موبایل ثابت را مثل پیمایشی رفتار می‌کنند. [scroll, fixed, local; comma list] | جعبه: ارتفاع = 100 تصویر پس‌زمینه = "linear-gradient(#fde68a, #f59e0b)" پیوست پس‌زمینه = "ثابت" محتوا = "چسبیده به صفحه" پایان |
مبدا پس‌زمینهbackground origin background-origin | موقعیت پس‌زمینه از کجا اندازه گرفته می‌شود: جعبه کادر (لبه‌ی بیرونی)، جعبه فاصله (پیش‌فرض) یا جعبه محتوا. برای تصویرهایی که تکرار نمی‌شوند اهمیت دارد. [border-box, padding-box, content-box; comma list] | جعبه: فاصله = 20 کادر = "10px نقطه‌چین #0f766e" تصویر پس‌زمینه = "linear-gradient(#a7f3d0, #34d399)" مبدا پس‌زمینه = "جعبه کادر" تکرار پس‌زمینه = "بدون تکرار" اندازه پس‌زمینه = "50% 100%" محتوا = "از کادر شروع می‌شود" پایان |
برش پس‌زمینهbackground clip background-clip | پس‌زمینه تا کجا رنگ می‌شود: جعبه کادر (زیر کادر، پیش‌فرض)، جعبه فاصله، جعبه محتوا یا متنی که فقط درون حرف‌ها رنگ می‌کند و با رنگ شفاف برای متن رنگ‌شیب به کار می‌رود. [border-box, padding-box, content-box, text; comma list] | جعبه: فاصله = 16 کادر = "8px خط‌چین #334155" پس زمینه = "#fde68a" برش پس‌زمینه = "جعبه فاصله" محتوا = "رنگ تا فاصله می‌آید" پایان |
تصویر
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
جاگیری شیءobject fit object-fit | تصویر یا ویدیو وقتی شکل جعبه‌اش فرق دارد چگونه آن را پر کند: پر کردن (کشیدن، پیش‌فرض)، جا دادن (همه‌اش، با نوار خالی)، پوشاندن (پر کردن جعبه و بریدن بقیه)، هیچ (اندازه‌ی طبیعی) و scale-down (کوچک‌تر از هیچ و جا دادن). [fill, contain, cover, none, scale-down] | تصویر: منبع = "/photo.jpg" جایگزین = "یک عکس" عرض = 160 ارتفاع = 100 جاگیری شیء = "پوشاندن" پایان |
موقعیت شیءobject position object-position | جای تصویر درون جعبه‌اش وقتی جاگیری شیء جا باقی می‌گذارد یا می‌برد، با همان مقدارهای موقعیت پس‌زمینه. پیش‌فرض 50% 50% یعنی وسط است. [length / percentage; up to 4 values] | تصویر: منبع = "/photo.jpg" جایگزین = "یک عکس" عرض = 160 ارتفاع = 100 جاگیری شیء = "پوشاندن" موقعیت شیء = "چپ بالا" پایان |
جعبه دید شیءobject view box object-view-box | بخش دیده‌شده‌ی تصویر یا ویدیو را بدون تغییر جعبه‌اش می‌برد و بزرگ می‌کند، با inset()، rect() یا xywh(). پیش‌فرض هیچ است. پشتیبانی هنوز به بعضی مرورگرها محدود است. [inset(), xywh(), rect() / none] | تصویر: منبع = "/photo.jpg" جایگزین = "یک عکس" عرض = 160 ارتفاع = 100 جعبه دید شیء = "inset(10% 20%)" پایان |
نمایش تصویرimage rendering image-rendering | تصویر هنگام تغییر اندازه چگونه دوباره نمونه‌برداری شود: خودکار (هموار)، smooth، high-quality، crisp-edges و پیکسلی که پیکسل‌های مربعی تیز را نگه می‌دارد و برای پیکسل‌آرت خوب است. [auto, smooth, high-quality, crisp-edges, pixelated] | تصویر: منبع = "/icon-16.png" جایگزین = "" عرض = 64 نمایش تصویر = "پیکسلی" پایان |
جهت‌گیری تصویرimage orientation image-orientation | آیا تصویر بر پایه‌ی چرخشی که دوربین در عکس ثبت کرده می‌چرخد. from-image (پیش‌فرض در مرورگرهای امروزی) آن را رعایت می‌کند و none پیکسل‌ها را همان‌طور که ذخیره شده‌اند نشان می‌دهد. [from-image, none] | تصویر: منبع = "/photo.jpg" جایگزین = "یک عکس" عرض = 160 جهت‌گیری تصویر = "from-image" پایان |
پالایه و آمیختگی
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
پالایهfilter filter | جلوه‌های گرافیکی را روی عنصر و همه‌ی درونش اعمال می‌کند: blur()، brightness()، contrast()، grayscale()، hue-rotate()، invert()، opacity()، saturate()، sepia() و drop-shadow(). چند تا را با فاصله پشت هم بنویسید تا از چپ به راست اعمال شوند. [up to 99 values] | جعبه: عرض = 80 ارتفاع = 80 پس زمینه = "linear-gradient(135deg, #f97316, #7c3aed)" پالایه = "hue-rotate(90deg) saturate(1.5)" پایان |
backdrop filterbackdrop filter backdrop-filter | فیلتری را روی آنچه پشت عنصر است اعمال می‌کند و از بخش‌های شفاف عنصر دیده می‌شود. همان تابع‌های پالایه را می‌پذیرد. کاربرد رایجش کارت شیشه‌ی مات است: محوکردن همراه با پس‌زمینه‌ی نیمه‌شفاف. [up to 99 values] | جعبه: فاصله = 20 پس زمینه = "rgb(255 255 255 / 25%)" backdrop filter = "blur(8px)" محتوا = "شیشه" پایان |
حالت آمیختگیmix blend mode mix-blend-mode | عنصر چگونه با آنچه پشتش است آمیخته شود: عادی، ضرب (تیره‌تر)، screen (روشن‌تر)، overlay، difference، color-dodge و بیشتر. جداسازی را روی والد بگذارید تا اثر درون آن بماند. [normal, multiply, screen, overlay, darken, lighten, ...] | جعبه: عرض = 80 ارتفاع = 80 پس زمینه = "#ec4899" حالت آمیختگی = "ضرب" پایان |
حالت آمیختگی پس‌زمینهbackground blend mode background-blend-mode | چگونگی آمیخته شدن لایه‌های پس‌زمینه‌ی یک عنصر با هم و با رنگ پس‌زمینه‌اش: عادی، ضرب، screen، overlay، darken، lighten و بیشتر. برای هر لایه یک حالت، جدا شده با ویرگول. [normal, multiply, screen, overlay, darken, lighten, ...; comma list] | جعبه: ارتفاع = 80 رنگ پس‌زمینه = "#f97316" تصویر پس‌زمینه = "linear-gradient(#22d3ee, #6366f1)" حالت آمیختگی پس‌زمینه = "ضرب" پایان |
جداسازیisolation isolation | جدا عنصر را گروهی مستقل می‌کند، پس حالت‌های آمیختگی درونش فقط با آنچه درون آن است آمیخته می‌شوند و نه با صفحه‌ی پشتش. خودکار پیش‌فرض است. [auto, isolate] | جعبه: جداسازی = "جدا" موقعیت = "نسبی" فاصله = 16 محتوا = "آمیختگی‌ها درون این جعبه می‌مانند" پایان |
برش، ماسک و شکل
| ویژگی | کار آن و مقدارهای قابل قبول | نمونه |
|---|---|---|
مسیر برشclip path clip-path | عنصر را به شکلی می‌برد؛ هر چه بیرون آن باشد کشیده نمی‌شود و کلیک هم نمی‌گیرد. شکل‌ها circle()، ellipse()، inset()، polygon() و path() هستند و پیش‌فرض هیچ است. [CSS-wide keywords only] | جعبه: عرض = 100 ارتفاع = 100 پس زمینه = "#7c3aed" مسیر برش = "polygon(50% 0, 100% 100%, 0 100%)" پایان |
ماسکmask mask | کوتاه‌نویسی ویژگی‌های ماسک: تصویر، حالت، موقعیت، اندازه، تکرار، مبدا، برش و ترکیب در یک مقدار. جایی که ماسک پُر است عنصر دیده می‌شود و جایی که شفاف است پنهان. [comma list] | جعبه: عرض = 140 ارتفاع = 80 پس زمینه = "#0f766e" ماسک = "linear-gradient(black, transparent) وسط / 100% 100% بدون تکرار" پایان |
برش ماسکmask clip mask-clip | ماسک تا کجا می‌رسد: جعبه کادر (پیش‌فرض)، جعبه فاصله، جعبه محتوا یا no-clip برای بی‌محدودیت. بیرون از آن ناحیه عنصر پنهان است. [border-box, padding-box, content-box, no-clip, fill-box, stroke-box, ...; comma list] | جعبه: فاصله = 20 پس زمینه = "#0ea5e9" تصویر ماسک = "linear-gradient(black, black)" برش ماسک = "جعبه محتوا" محتوا = "فقط محتوا دیده می‌شود" پایان |
ترکیب ماسکmask composite mask-composite | چند لایه‌ی ماسک چگونه ترکیب شوند: add (پیش‌فرض)، subtract، intersect و exclude. با subtract لایه‌های بعدی از لایه‌های پیشین بریده می‌شوند. [add, subtract, intersect, exclude; comma list] | جعبه: عرض = 120 ارتفاع = 120 پس زمینه = "#db2777" تصویر ماسک = "linear-gradient(black, black), radial-gradient(circle, black 40%, transparent 41%)" ترکیب ماسک = "subtract" پایان |
تصویر ماسکmask image mask-image | تصویر یا رنگ‌شیبی که ماسک است. شفافیتش (یا با حالت ماسک، روشنایی‌اش) تعیین می‌کند چه چیزی دیده شود. url(...)، رنگ‌شیب یا هیچ می‌پذیرد. [image / none; comma list] | جعبه: عرض = 120 ارتفاع = 120 پس زمینه = "linear-gradient(135deg, #f59e0b, #db2777)" تصویر ماسک = "radial-gradient(circle, black 60%, transparent 61%)" پایان |
حالت ماسکmask mode mask-mode | کدام ویژگی تصویر ماسک به حساب می‌آید: alpha شفافیتش را، luminance روشنایی‌اش را (سفید دیده می‌شود، سیاه پنهان) و match-source بسته به نوع تصویر یکی را برمی‌دارد. [alpha, luminance, match-source; comma list] | جعبه: عرض = 140 ارتفاع = 80 پس زمینه = "#16a34a" تصویر ماسک = "linear-gradient(90deg, black, white)" حالت ماسک = "luminance" پایان |
مبدا ماسکmask origin mask-origin | جعبه‌ای که موقعیت ماسک از آن اندازه گرفته می‌شود: جعبه کادر، جعبه فاصله (پیش‌فرض)، جعبه محتوا و جعبه‌های SVG یعنی fill-box، stroke-box و view-box. [border-box, padding-box, content-box, fill-box, stroke-box, view-box; comma list] | جعبه: فاصله = 20 پس زمینه = "#7c3aed" تصویر ماسک = "radial-gradient(circle, black 70%, transparent 71%)" تکرار ماسک = "بدون تکرار" مبدا ماسک = "جعبه محتوا" محتوا = "ماسک‌شده" پایان |
موقعیت ماسکmask position mask-position | جای تصویر ماسک در عنصر، با همان مقدارهای موقعیت پس‌زمینه: کلمه‌ها، طول‌ها، درصدها یا تا چهار مقدار. [length / percentage; up to 4 values; comma list] | جعبه: عرض = 140 ارتفاع = 80 پس زمینه = "#ea580c" تصویر ماسک = "linear-gradient(black, black)" اندازه ماسک = "50% 100%" تکرار ماسک = "بدون تکرار" موقعیت ماسک = "راست وسط" پایان |
تکرار ماسکmask repeat mask-repeat | آیا تصویر ماسک کاشی‌وار تکرار شود، با همان مقدارهای تکرار پس‌زمینه: تکراری، بدون تکرار، تکرار افقی، تکرار عمودی، فاصله‌دار و گرد. [repeat, no-repeat, repeat-x, repeat-y, space, round; up to 2 values; comma list] | جعبه: عرض = 160 ارتفاع = 60 پس زمینه = "#0891b2" تصویر ماسک = "radial-gradient(circle, black 60%, transparent 61%)" اندازه ماسک = "20px 20px" تکرار ماسک = "تکرار افقی" پایان |
اندازه ماسکmask size mask-size | اندازه‌ی تصویر ماسک، با همان مقدارهای اندازه پس‌زمینه: طول، درصد، خودکار، پوشاندن و جا دادن. [length / percentage / auto, cover, contain; up to 2 values; comma list] | جعبه: عرض = 140 ارتفاع = 80 پس زمینه = "#be123c" تصویر ماسک = "linear-gradient(black, black)" تکرار ماسک = "بدون تکرار" اندازه ماسک = "60% 60%" موقعیت ماسک = "وسط" پایان |
نوع ماسکmask type mask-type | فقط برای ماسک‌هایی که با عنصر <mask> در SVG ساخته شده‌اند: luminance روشنایی را می‌خواند (پیش‌فرض) و alpha شفافیت را. برای تصویر ماسک روی عنصر معمولی از حالت ماسک استفاده کنید. [luminance, alpha] | جعبه: عرض = 100 ارتفاع = 60 پس زمینه = "#4f46e5" نوع ماسک = "alpha" پایان |
آستانه تصویر شکلshape image threshold shape-image-threshold | وقتی بیرونی شکل از یک تصویر یا رنگ‌شیب گرفته شود، شفافیتی که بالاتر از آن پیکسل جزو شکل است. عددی از 0 تا 1؛ پیش‌فرض 0 است. [number / percentage] | جعبه: شناوری = "راست" عرض = 100 ارتفاع = 100 پس زمینه = "#0ea5e9" بیرونی شکل = "linear-gradient(135deg, black 50%, transparent 50%)" آستانه تصویر شکل = 0.5 پایان |
فضا شکلshape margin shape-margin | فاصله میان بیرونی شکل یک عنصر شناور و متنی که دورش می‌پیچد. یک طول یا درصد. [length / percentage] | جعبه: شناوری = "راست" عرض = 100 ارتفاع = 100 گردی کادر = "50%" پس زمینه = "#f59e0b" بیرونی شکل = "circle(50%)" فضا شکل = 16 پایان |
بیرونی شکلshape outside shape-outside | شکلی که متن دورش می‌پیچد، برای عنصری که شناوری دارد. circle()، ellipse()، inset()، polygon()، تصویر یا رنگ‌شیب، یا هیچ (خود جعبه) می‌پذیرد. فقط پیچیدن متن را عوض می‌کند، نه آنچه کشیده می‌شود: برای هماهنگ شدن تصویر مسیر برش یا گردی کادر هم بگذارید. [CSS-wide keywords only] | جعبه: شناوری = "راست" عرض = 100 ارتفاع = 100 گردی کادر = "50%" پس زمینه = "#f59e0b" بیرونی شکل = "circle(50%)" پایان |
خودتان امتحان کنید
- یک بنر اصلی با رنگ‌شیب مورب، لایه‌ای از نقطه‌ها روی آن و متن سفید بسازید و بررسی کنید خواندن متن راحت باشد.
- کارت عکسی با
جاگیری شیء = "پوشاندن"و نوشته‌ای روی نواری از شیشه‌ی مات در پایینش بسازید. - با یک
conic-gradientوگردی کادر۵۰٪ نمودار دایره‌ای بکشید. بعد باتصویر ماسکوترکیب ماسکوسطش را سوراخ کنید. - به نمونه‌ی پالایه لغزنده‌ای اضافه کنید که
brightnessرا هم عوض کند.