صفحه کاربری
آکادمی بنو
نویسنده: بهنام نوبخت
آموزش‌های جامع و کاربردی برنامه‌نویسی، طراحی سایت، توسعه اپلیکیشن موبایل و مهندسی نرم‌افزار؛ از مباحث پایه تا پیشرفته، همراه با آموزش‌های پروژه‌محور برای یادگیری اصولی و کسب مهارت‌های تخصصی.
آموزش CSS
۲۷ مقاله
Pseudo-Class و Pseudo-Element در CSS
تا اینجا با Selectorهای پایه CSS مانند Type، Class، ID و Universal Selector آشنا شدیم و سپس ویژگی‌هایی مانند float ، clear و overflow را یاد گرفتیم. اما در طراحی واقعی صفحات وب، خیلی وقت‌ها لازم است چیزی را انتخاب کنیم که صرفاً با نام تگ، کلاس یا شناسه قابل شناسایی نیست. برای مثال، ممکن است بخواهیم وقتی کاربر ماوس را روی یک دکمه قرار می‌دهد، رنگ آن تغییر کند. یا وقتی یک Input فعال می‌شود، Border متفاوتی داشته باشد. شاید بخواهیم اولین آیتم یک لیست را متفاوت از بقیه نمایش دهیم. حتی ممکن است بخواهیم بدون اضافه کردن یک تگ HTML جدید، یک آیکون، خط تزئینی یا علامت خاصی قبل یا بعد از یک عنصر قرار دهیم.
Attribute Selector و ترکیب Selectorها در CSS
تا اینجا با Selectorهای پایه مانند tag ، class و id و همچنین Pseudo-Classها و Pseudo-Elementها آشنا شدیم. اما در پروژه‌های واقعی، گاهی انتخاب یک عنصر فقط بر اساس نام تگ یا کلاس کافی نیست. برای مثال ممکن است بخواهیم فقط فیلدهای ایمیل یک فرم را تغییر دهیم، فقط لینک‌هایی که در تب جدید باز می‌شوند را مشخص کنیم، یا فقط عناصری را انتخاب کنیم که یک Attribute خاص دارند. در چنین شرایطی Attribute Selector به کمک ما می‌آید. علاوه بر آن، CSS به ما اجازه می‌دهد عناصر را بر اساس رابطه‌ای که با یکدیگر دارند انتخاب کنیم؛ مثلاً تمام p های داخل یک بخش، فقط فرزندان مستقیم یک عنصر، یا پاراگرافی که بلافاصله بعد از یک عنوان قرار گرفته است. در این مقاله ابتدا Attribute Selectorها را یاد می‌گیریم و سپس با Combinatorها آشنا می‌شویم تا بتوانیم Selectorهای دقیق‌تر و حرفه‌ای‌تری بنویسیم.
Inheritance و Specificity در CSS
یکی از اولین مشکلاتی که هنگام کار جدی با CSS با آن روبه‌رو می‌شویم این است که گاهی یک قانون CSS را می‌نویسیم، اما مرورگر آن‌طور که انتظار داریم عمل نمی‌کند. ممکن است رنگ یک متن تغییر نکند، اندازه فونت از قانون دیگری گرفته شود یا یک Style جدید روی عنصر اعمال نشود. در بسیاری از این موارد مشکل از اشتباه تایپی نیست؛ بلکه چند قانون CSS همزمان یک عنصر را هدف قرار داده‌اند و مرورگر باید تصمیم بگیرد که کدام قانون را اعمال کند. برای درک این رفتار باید با سه مفهوم مهم آشنا شویم: Inheritance یا ارث‌بری، Cascade یا آبشاری بودن CSS و Specificity یا میزان اختصاصی بودن Selector . این سه مفهوم پایه بسیاری از رفتارهای CSS هستند و درک درست آن‌ها باعث می‌شود به‌جای استفاده مکرر از !important یا Selectorهای بسیار پیچیده، بتوانیم دلیل رفتار CSS را پیدا و مشکل را اصولی برطرف کنیم.
متغیرها و توابع CSS
در پروژه‌های کوچک، نوشتن مقادیر CSS به‌صورت مستقیم معمولاً مشکلی ایجاد نمی‌کند؛ اما وقتی یک پروژه بزرگ‌تر می‌شود، استفاده مکرر از رنگ‌ها، فاصله‌ها، اندازه فونت‌ها، شعاع گوشه‌ها و سایر مقادیر باعث می‌شود مدیریت CSS دشوارتر شود. تصور کنید رنگ اصلی یک وب‌سایت در ده‌ها یا حتی صدها بخش مختلف استفاده شده باشد. اگر بخواهید این رنگ را تغییر دهید، تغییر دادن تمام این مقادیر به‌صورت دستی هم زمان‌بر است و هم احتمال خطا را افزایش می‌دهد. CSS برای حل چنین مشکلاتی قابلیتی به نام Custom Properties یا CSS Variables دارد. با استفاده از این قابلیت می‌توانیم یک مقدار را در یک محل تعریف کنیم و سپس در قسمت‌های مختلف CSS از آن استفاده کنیم. علاوه بر متغیرها، CSS مجموعه‌ای از توابع مانند var() ، calc() ، min() ، max() و clamp() دارد که امکان ساخت استایل‌های انعطاف‌پذیرتر و Responsive را فراهم می‌کنند. در این مقاله ابتدا مفهوم متغیرهای CSS را یاد می‌گیریم و سپس با توابع مهم CSS آشنا می‌شویم و در پایان یک پروژه کوچک و کاربردی ایجاد خواهیم کرد.
CSS3 چیست؟ آشنایی با CSS3 و امکانات آن
در مقاله‌های قبلی با CSS، Selectorها، Box Model، Position، Pseudo-Classها، متغیرهای CSS و همچنین روش‌های حرفه‌ای ساختاردهی فایل‌های CSS آشنا شدیم. تا اینجا یاد گرفتیم چگونه ظاهر عناصر HTML را کنترل کنیم، اما CSS فقط به تغییر رنگ و اندازه محدود نمی‌شود. با پیشرفت وب، نیاز طراحان به امکاناتی مانند گوشه‌های گرد، سایه‌ها، Gradient، انیمیشن، Transition، Transform و طراحی Responsive بیشتر شد. مجموعه‌ای از قابلیت‌های مهم CSS در دوره‌ای که معمولاً با نام CSS3 شناخته می‌شود، پاسخ بسیاری از این نیازها را فراهم کرد. البته یک نکته مهم وجود دارد: امروزه بهتر است CSS3 را یک «زبان کاملاً جدا از CSS» در نظر نگیریم. CSS به‌صورت مجموعه‌ای از ماژول‌های مستقل توسعه پیدا می‌کند و هر ماژول می‌تواند سطح یا نسخه مخصوص خود را داشته باشد. بنابراین اصطلاح CSS3 بیشتر یک اصطلاح تاریخی و آموزشی برای اشاره به نسل مهمی از قابلیت‌های CSS است، نه نام یک زبان جداگانه.
Box Shadow و Text Shadow در CSS
تا اینجا با Border و border-radius آشنا شدیم و توانستیم ظاهر کلی عناصر را کنترل کنیم. اما اگر بخواهیم یک کارت، دکمه، تصویر یا بخش خاصی از صفحه از پس‌زمینه جدا به نظر برسد، فقط Border کافی نیست. یکی از مهم‌ترین ابزارهای CSS برای ایجاد عمق بصری ، سایه یا Shadow است. با استفاده از Shadow می‌توانیم یک کارت ساده را به یک کامپوننت مدرن تبدیل کنیم، برای دکمه‌ها حالت برجسته ایجاد کنیم، برای عنوان‌ها جلوه بصری بسازیم و حتی با ترکیب چند سایه، طراحی‌های پیچیده‌تری ایجاد کنیم.
Gradientها در CSS
در طراحی رابط کاربری مدرن، استفاده از رنگ فقط به انتخاب یک رنگ ثابت برای پس‌زمینه یا متن محدود نمی‌شود. بسیاری از وب‌سایت‌های حرفه‌ای برای ایجاد عمق بصری، جذابیت بیشتر و انتقال بهتر تمرکز کاربر از Gradient یا گرادیان استفاده می‌کنند. گرادیان در CSS به ما اجازه می‌دهد بدون استفاده از یک فایل تصویری، انتقال تدریجی بین دو یا چند رنگ ایجاد کنیم. به همین دلیل می‌توان از آن برای طراحی پس‌زمینه Hero، دکمه‌ها، کارت‌ها، Borderها، Overlay روی تصاویر، متن‌های رنگی و حتی المان‌های تزئینی استفاده کرد.
Transform در CSS
در طراحی رابط کاربری مدرن، فقط قرار دادن عناصر در صفحه کافی نیست. گاهی لازم است یک کارت هنگام Hover کمی بالا بیاید، یک دکمه کمی بزرگ‌تر شود، یک آیکون بچرخد یا یک تصویر هنگام تعامل کاربر تغییر اندازه دهد. برای انجام بسیاری از این تغییرات، CSS ویژگی قدرتمندی به نام transform در اختیار ما قرار می‌دهد. با transform می‌توانیم ظاهر و موقعیت بصری یک عنصر را بدون تغییر دادن ساختار اصلی Layout تغییر دهیم. CSS Transform امکان جابه‌جایی، چرخش، تغییر اندازه و کج کردن عناصر را در فضای دوبعدی و سه‌بعدی فراهم می‌کند.
Transition در CSS
در طراحی رابط کاربری، بسیاری از تغییرات CSS به‌صورت فوری اتفاق می‌افتند. مثلاً وقتی کاربر ماوس را روی یک دکمه قرار می‌دهد، رنگ پس‌زمینه، رنگ متن یا اندازه آن می‌تواند بلافاصله تغییر کند. این رفتار از نظر فنی کاملاً درست است، اما در بسیاری از طراحی‌های مدرن، تغییر ناگهانی عناصر ظاهر چندان جذابی ندارد. CSS با استفاده از ویژگی Transition امکان ایجاد تغییرات تدریجی و نرم بین دو وضعیت را فراهم می‌کند. به کمک Transition می‌توان مشخص کرد یک تغییر چه مدت طول بکشد، با چه سرعتی انجام شود، روی کدام ویژگی‌ها اعمال شود و آیا با تأخیر شروع شود یا خیر.
Animation و Keyframes در CSS
در مقاله قبل با Transition آشنا شدیم و یاد گرفتیم چگونه تغییرات بین دو وضعیت، مانند حالت عادی و hover ، را نرم و تدریجی کنیم. اما Transition برای همه نیازهای ما کافی نیست. فرض کنید بخواهیم یک دکمه: به‌صورت خودکار حرکت کند، چند مرحله مختلف داشته باشد، چند بار تکرار شود، به‌صورت بی‌نهایت اجرا شود، در هر بار اجرا جهت خود را تغییر دهد، یا بدون هیچ تعامل کاربر از ابتدا اجرا شود. در چنین شرایطی CSS Animation ابزار مناسب‌تری است.