برنامه نویسی 26 بازدید

CSS یک زبان خاص است که در نگاه نخست ممکن است کاملاً ساده به نظر برسد؛ اما برخی جلوه‌های خاص که از نظر تئوری و به ظاهر ساده هستند در اغلب موارد در هنگام پیاده‌سازی عملی پیچیده می‌شوند. در این مقاله چند نکته و ترفند مفید CSS را ارائه کرده‌ایم که به شما کمک می‌کنند تا بهبود قابل توجهی در مسیر توسعه پروژه‌های خود به دست بیاورید.

در این مقاله قصد نداریم در مورد میزان پیچیده بودن CSS صحبت کنیم؛ بلکه قصد داریم برخی ترفندهای مفید را با شما به اشتراک بگذاریم که فکر می‌کنیم احتمال یافتن آن‌ها در راهنماهای دیگر کمتر است.

فوتر چسبنده

فوتر چسبنده یا Sticky Footer یکی از موارد بسیار رایج است که ممکن است پیاده‌سازی آن برای افراد مبتدی دشوار باشد. در اغلب پروژه‌ها به یک فوتر نیاز داریم که صرف نظر از محتوای صفحه در انتهای صفحه همواره بر جای خود باقی بماند. اگر محتوای صفحه از حوزه دید خارج شود، فوتر باید سازگار شود.

تا پیش از CSS3 طراحی این جلوه بدون دانستن ارتفاع دقیق فوتر کار دشواری بود و با این که آن را فوتر چسبنده می‌نامیم؛ اما رسیدن به این تأثیر صرفاً با استفاده از position: sticky ممکن نیست، چون این خصوصیت می‌تواند کل محتوا را مسدود کند.

امروزه سازگارترین راه‌حل استفاده از Flexbox است. نکته کلیدی، استفاده از مشخصه کمتر شناخته شده flex-grow روی div شامل محتوای اصلی صفحه است. در مثال زیر ما از تگ main به این منظور استفاده کرده‌ایم.

مشخصه flex-grow به کنترل میزان پر شدن کانتینر از سوی آیتم flex در رابطه با عناصر flex دیگر می‌پردازد. با تعیین مقدار آن به صورت 0 دیگر نمی‌تواند رشد یابد و بنابراین باید آن را به میزان 1 یا بیشتر تعیین کنیم. در مثال زیر ما از مشخصه میانبر flex: auto استفاده کرده‌ایم که به صورت پیش‌فرض مقدار flex-grow را برابر با 1 تنظیم می‌کند.

برای جلوگیری از هر گونه رفتار ناخواسته می‌توانیم flex-shrink: 0 را نیز به footer اضافه کنیم. flex-shrink عملاً مخالف مشخصه flex-grow است و مقدار جمع شدگی یک عنصر برای قرار گرفتن در کانتینرش را مشخص می‌کند. تعیین آن به میزان 0 از کوچک شدن فوتر به طور کلی ممانعت می‌کند و بدین ترتیب مطمئن می‌شویم که ابعاد خود را حفظ خواهد کرد.

کد HTML

کد CSS

 ترفند مفید CSS

بزرگنمایی تصاویر هنگام قرار گرفتن ماوس

جلوه zoom-on-hover روشی عالی برای جلب توجه به تصاویر قابل کلیک است و زمانی که کاربر ماوس خود را روی یک تصویر می‌برد، تصویر کمی بزرگ‌تر می‌شود؛ اما ابعاد آن حفظ می‌شود. برای رسیدن به این جلوه باید یک div پوششی داشته باشیم که پیرامون تگ img نرمال ما در HTML قرار گیرد.

برای این که این جلوه عملیاتی شود باید مشخصه‌های width و height عنصر والد را تعیین کنیم و مطمئن شویم که overflow به صورت hidden تنظیم شده است. سپس می‌توانیم هر نوع انیمیشن تبدیل که می‌خواهیم روی تصویر اصلی اعمال کنیم.

کد HTML

کد CSS

 ترفند مفید CSS

حالت شب به صورت آنی

اگر قصد دارید روش سریعی برای اعمال پوسته «حالت شب» در وب‌سایت خود طراحی کنید، می‌توانید از فیلترهای invert و hue-rotate استفاده کنید.

()filter: invert روی مقیاسی از 0 تا 1 عمل می‌کند که 1 سفید را به سیاه تبدیل می‌کند. ()filter: hue-rotate محتوای رنگی عناصر ما را به ترتیبی تغییر می‌دهد که کمابیش همان سطح از جداسازی از همدیگر را حفظ کنند. مقادیر آن از 0deg تا 360deg متغیر است.

با ترکیب کردن این جلوه‌ها روی تگ body می‌توانید به سرعت یک نسخه تاریک از سایت خود ایجاد کنید. دقت کنید که برای تأثیر گرفتن پس‌زمینه باید به آن یک رنگ اختصاص داده باشید.

مثالی از این وضعیت به صورت زیر است:

با استفاده از این تنظیمات، می‌توانیم صفحه اصلی وب‌سایت گوگل را به صورت آنی به شکل زیر دربیاوریم:

 ترفند مفید CSS
در مرورگر کروم یا فایرفاکس با زدن دکمه F12 به پنل «ابزارهای توسعه‌دهنده» بروید و از آنجا می‌توانید CSS هر وب‌سایتی را دستکاری کنید.

نقطه‌های گلوله‌ای سفارشی

برای ایجاد «نقطه‌های گلوله‌ای» (Bullet points) سفارشی برای یک لیست نامرتب می‌توانید از مشخصه content به همراه شبه عنصر ::before استفاده کنید. در CSS زیر ما از دو کلاس complete. و incomplete. برای ایجاد تمایز بین دو نوع مختلف از نقاط گلوله‌ای استفاده کرده‌ایم.

کد HTML

کد CSS

 ترفند مفید CSS

 

کاربرد دیگر: مسیرهای ناوبری

روش‌های مفید زیادی برای بهره‌مندی از مزیت مشخصه content وجود دارد. از آنجا که کاراکتر (/) و دیگر نمادها برای جداسازی مسیرهای ناوبری به صورت نمادین استفاده می‌شوند، تعریف کردن آن‌ها در CSS کمک زیادی به معنابخشی کد ما می‌کند. مانند اغلب مثال‌های دیگر این نوشته، در این جلوه نیز از شبه کلاس استفاده کرده‌ایم که امکان استفاده آن تنها در CSS3 وجود دارد.

کد HTML

کد CSS

تصاویر Parallax

این جلوه چشم‌نواز محبوبیت فزاینده‌ای در وب یافته است و از آن می‌توان برای حیات بخشیدن به هر صفحه در زمان اسکرول شدن از سوی کاربر استفاده کرد. با این که تصاویر نرمال یک صفحه با اسکرول شدن از سوی کاربر حرکت می‌کنند؛ اما تصاویر Parallax به نظر ثابت می‌آیند و تنها پنجره‌ای که آن‌ها را از میان آن می‌بینیم، حرکت می‌کند.

مثال با استفاده صرف از CSS

مشخصه ضروری برای این جلوه، background-attachment: fixed است که موقعیت تصویر پس‌زمینه را بدون ویو-پورت تثبیت می‌کند. جلوه معکوس از طریق background-attachment: scroll به دست می‌آید.

کد HTML

کد CSS

مثال CSS به همراه جاوا اسکریپت

برای دستیابی به یک جلوه پیشرفته‌تر می‌توانید از جاوا اسکریپت برای افزودن حرکت به تصویر در زمان اسکرول شدن استفاده کنید.

کد HTML

کد CSS

کد جاوا اسکریپت

 ترفند مفید CSS

انیمیشن با تصاویر برش یافته

تا پیش از CSS3 برش دادن تصاویر نیز همانند فوتر چسبنده کار دشواری بود. اینک دو مشخصه به نام‌های object-fit و object-position در اختیار داریم که موجب شده کار برش دادن آسان شود و هنگامی که با همدیگر استفاده شوند، امکان تغییر ابعاد یک تصویر بدون تأثیر روی نسبت ابعاد را فراهم می‌سازند.

تا پیش از معرفی شدن این مشخصه‌ها، همواره امکان برش دادن تصاویر در نرم‌افزارهای ویرایش عکس وجود داشته است؛ اما مزیت بزرگ برش دادن تصاویر در یک مرورگر، امکانی است که موجب می‌شود بتوانیم تصاویر را به صورت بخشی از یک انیمیشن تغییر اندازه بدهیم.

برای نمایش تا حد امکان ساده این جلوه، در مثال زیر این افکت با استفاده از یک تگ <“input type=”checkbox> فعال می‌شود. بدین ترتیب می‌توانیم از مزیت شبه کلاس checked: در CSS بهره‌مند شویم و نیازی به هیچ کد جاوا اسکریپت هم نداریم.

کد HTML

کد CSS

 ترفند CSS

حالت‌های Blend

اگر تاکنون از فتوشاپ استفاده کرده باشید، احتمالاً می‌دانید که حالت‌های مختلف ترکیب (Blend) آن تا چه حد قدرتمند است و می‌توان جلوه‌های جالبی با آن خلق کرد. اما آیا می‌دانید که بسیاری از جلوه‌های ترکیب تصاویر فتوشاپ در CSS نیز ممکن هستند؟

در تصویر زیر صفحه اصلی وب‌سایت مدیوم را می‌بینید که در آن تصاویر دارای خصوصیات background-color به صورت lightblue و همچنین blend-mode:difference هستند.

 ترفند مفید CSS

به علاوه باید بدانید که تصاویر پس‌زمینه تنها روش برای بهره‌مندی از مزیت حالت‌های Blend نیستند. مشخصه mix-blend-mode امکان ترکیب عناصر با پس‌زمینه موجودشان را می‌دهد. بنابراین در مثال زیر می‌توان جلوه‌هایی مانند زیر را با استفاده از mix-blend-mode:color-dodge و پس‌زمینه lightsalmon به دست آورد.

 ترفند مفید CSS
تا پیش از CSS3 تصور این که وب‌سایت‌ها می‌توانند این چنین باشند، بسیار دشوار بود!

نکته: در حال حاضر یک باگ در کروم نسخه 58 به بعد وجود دارد که mix-blend-mode روی عناصری که دارای تگ‌های <body> یا <html> شفاف هستند اعمال نمی‌شود. یک راه‌حل سریع این است که به این تگ‌ها background-color به صورت while بدهیم.

کد HTML

کد CSS

 ترفند مفید CSS

صفحه تصاویر به سبک پینترست

شبکه CSS و Flexbox امکان طراحی انواع مختلفی از طرح‌بندی‌های واکنش‌گرا را تسهیل کرده‌اند و به ما امکان می‌دهند که به سادگی عناصر را به صورت مرکزی روی صفحه قرار دهیم که تا قبل از آن کار دشواری محسوب می‌شد.

با این وجود یک سبک از طرح‌بندی وجود دارد که کار آسانی نیست و پینترست از آن استفاده می‌کند و آن موقعیت‌یابی عمودی تغییرات همه عناصر بر مبنای ارتفاع عناصر بالای آن عنصر است.

 CSS

بهترین روش برای رسیدن به این جلوه استفاده از مجموعه مشخصه‌های ستون CSS است. این مشخصه‌ها به طور متداول برای ایجاد ستون‌های متنی شبیه به روزنامه مورد استفاده قرار می‌گیرند؛ اما این نیز یک کاربرد عالی دیگر محسوب می‌شود. برای این که به این تأثیر برسیم باید عناصر را در یک div قرار دهیم و به این پوشش یک مشخصه column-width و column-gap بدهیم.

سپس برای اجتناب از تقسیم شدن عناصر بین دو ستون یک مشخصه column-break-inside: avoid به تک تک عناصر صفحه اضافه می‌کنیم. در مثال زیر می‌توانید این جلوه را مشاهده کنید.

کد HTML

کد CSS

 ترفند مفید CSS

مثال فوق همچنین نمونه‌ای عالی از شبه کلاس ()not: در CSS محسوب می‌شود. از این شبکه کلاس به همراه :hover استفاده شده است تا همه عناصر به جز آن که ماوس روی آن قرار دارد محو شوند.

سخن پایانی

در پایان امیدواریم نمونه‌های فوق توانسته باشند برخی جلوه‌های مشخص CSS را برای شما روشن‌تر سازند و شاید حتی توجه شما را به برخی از ویژگی‌های CSS که نمی‌دانستید جلب کرده باشند. تصمیم‌گیری در مورد این که کدام ترفندهای CSS را در این نوشته ارائه کنیم کار دشواری بوده است، چون چندین جلوه دیگر نیز وجود دارد که بسیار مفید هستند. این موارد شامل ویژگی‌هایی مانند انیمیشن با استفاده از کی‌فریم، اسنپینگ اسکرول، نوارهای ناوبری پیچیده‌تر، جلوه‌های 3 بعدی و استفاده از CSS برای پرینت است.

اما ویژگی‌هایی از این دست در نوشته‌ای با موضوع ترفندهای ساده جای نمی‌گیرند و باید در مقالات پیشرفته‌تری ارائه شوند که در مطالب آینده مجله فرادرس می‌توانید در مورد آن‌ها بیشتر بخوانید.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

آیا این مطلب برای شما مفید بود؟

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *