آموزش CSS مبتدی : جلوههای پیشرفته استایلدهی
این مقاله مانند جعبهای از ترفندها عمل میکند و مقدمهای بر برخی از ویژگیهای پیشرفته و جالب استایلدهی مانند سایههای جعبهای، حالتهای ترکیبی و فیلترها ارائه میدهد.
box-shadow به شما امکان میدهد یک یا چند سایهی برجسته را به کادر یک عنصر اعمال کنید. مانند سایههای متن، سایههای کادر به خوبی در مرورگرها، از جمله IE9+ و Edge، پشتیبانی میشوند. کاربران نسخههای قدیمیتر IE ممکن است مجبور باشند بدون سایه کنار بیایند، بنابراین طرحهای خود را آزمایش کنید تا مطمئن شوید محتوای شما بدون آنها خوانا است.
بیایید برای شروع به یک مثال ساده نگاه کنیم. اول، کمی HTML:
خواهید دید که در مقدار ویژگی box-shadow چهار مورد داریم:
اولین مقدار طول، انحراف افقی است - فاصلهای که سایه از کادر اصلی به سمت راست منحرف میشود (یا به سمت چپ، اگر مقدار منفی باشد).
دومین مقدار طول، انحراف عمودی است - فاصلهای که سایه از کادر اصلی به سمت پایین منحرف میشود (یا به سمت بالا، اگر مقدار منفی باشد).
سومین مقدار طول، شعاع محوشدگی است - میزان محوشدگی اعمال شده به سایه.
مقدار رنگ، رنگ پایه سایه است.
شما میتوانید از هر واحد طول و رنگی که برای تعریف این مقادیر منطقی باشد، استفاده کنید.
همچنین میتوانید چندین box shadow را در یک اعلان box shadow، با جدا کردن آنها با کاما، مشخص کنید:
ما اینجا با ایجاد یک جعبه برجسته با لایههای رنگی متعدد، کار جالبی انجام دادهایم، اما شما میتوانید از آن به هر شکلی که میخواهید استفاده کنید، مثلاً برای ایجاد ظاهری واقعگرایانهتر با سایههایی بر اساس منابع نوری متعدد.
سایر ویژگیهای box shadow
برخلاف text-shadow، کلمه کلیدی box-shadow یک inset دارد - قرار دادن این کلمه در ابتدای تعریف سایه باعث میشود که سایه به جای سایه بیرونی، به سایه داخلی تبدیل شود. بیایید نگاهی به آن بیندازیم و ببینیم منظورمان چیست.
ابتدا، برای این مثال از HTML متفاوتی استفاده میکنیم:
در اینجا ما برخی از استایلهای دکمه را به همراه حالتهای focus/hover/active تنظیم کردهایم. دکمه به طور پیشفرض یک سایه جعبهای سیاه ساده دارد، به علاوه چند سایه inset، یکی روشن و یکی تیره، که در گوشههای مقابل دکمه قرار گرفتهاند تا جلوه سایه زیبایی به آن بدهند.
وقتی دکمه فشرده میشود، حالت فعال باعث میشود سایه جعبهای اول با یک سایه inset بسیار تیره عوض شود و ظاهری شبیه به دکمه فشرده شده ایجاد کند.
مورد دیگری هم وجود دارد که میتوان در مقدار box-shadow تنظیم کرد - میتوان مقدار طول دیگری را به صورت اختیاری درست قبل از مقدار رنگ تنظیم کرد که شعاع گسترش است. در صورت تنظیم، این باعث میشود سایه از کادر اصلی بزرگتر شود. این مورد خیلی رایج نیست، اما شایان ذکر است.
اگرچه نمیتوانید با استفاده از CSS ترکیببندی یک تصویر را تغییر دهید، اما کارهای خلاقانهای وجود دارد که میتوانید انجام دهید. یک ویژگی بسیار خوب که میتواند به شما در جذاب کردن طرحهایتان کمک کند، ویژگی filter است. این ویژگی فیلترهایی شبیه فتوشاپ را مستقیماً از CSS فعال میکند.
در مثال زیر، ما از دو مقدار مختلف برای filter استفاده کردهایم. اولی است - این تابع میتواند مقداری را برای نشان دادن میزان محو شدن تصویر ارسال کند.
دومی است؛ با استفاده از درصد، میزان رنگی را که میخواهیم حذف شود، تعیین میکنیم.
با پارامترهای درصد و پیکسل در مثال زیر بازی کنید تا ببینید تصاویر چگونه تغییر میکنند. همچنین میتوانید مقادیر را با مقادیر دیگری عوض کنید. در مثال زنده بالا، را امتحان کنید. برای گزینههای بسیار دیگری که میتوانید امتحان کنید، به صفحه PDN برای filter نگاهی بیندازید.
شما میتوانید فیلترها را روی هر عنصری و نه فقط تصاویر اعمال کنید. برخی از گزینههای فیلتر موجود، کارهای بسیار مشابهی با سایر ویژگیهای CSS انجام میدهند، به عنوان مثال، به روشی بسیار مشابه عمل میکند و جلوهای مشابه box-shadow یا text-shadow میدهد. با این حال، نکته واقعاً خوب در مورد فیلترها این است که آنها دقیقاً روی شکل محتوای داخل کادر کار میکنند، نه فقط خود کادر به عنوان یک تکه بزرگ، بنابراین ارزش دارد که تفاوت را بدانیم.
در مثال بعدی، فیلتر خود را روی یک کادر اعمال میکنیم و آن را با سایه کادر مقایسه میکنیم. همانطور که میبینید، فیلتر drop-shadow دقیقاً شکل متن و خط تیرههای حاشیه را دنبال میکند. سایه کادر دقیقاً مربع کادر را دنبال میکند.
حالتهای ترکیبی CSS به ما این امکان را میدهند که حالتهای ترکیبی را به عناصری اضافه کنیم که هنگام همپوشانی دو عنصر، یک اثر ترکیبی را مشخص میکنند - رنگ نهایی نشان داده شده برای هر پیکسل، نتیجه ترکیبی از رنگ پیکسل اصلی و رنگ پیکسل موجود در لایه زیر آن خواهد بود. حالتهای ترکیبی دوباره برای کاربران برنامههای گرافیکی مانند فتوشاپ بسیار آشنا هستند.
دو ویژگی وجود دارد که از حالتهای ترکیبی در CSS استفاده میکنند:
، که چندین تصویر پسزمینه و رنگهای تنظیم شده روی یک عنصر را با هم ترکیب میکند.
، که عنصری را که روی آن تنظیم شده است با عناصری که روی آن همپوشانی دارند - هم پسزمینه و هم محتوا - ترکیب میکند.
حالتهای ترکیبی نیز بسیار جدید هستند و پشتیبانی کمتری نسبت به فیلترها دارند. هنوز در Edge پشتیبانی نمیشوند و Safari فقط از برخی از گزینههای حالت ترکیبی پشتیبانی میکند.
حالت ترکیبی پسزمینه background-blend-mode
دوباره، بیایید به چند مثال نگاه کنیم تا بتوانیم این موضوع را بهتر درک کنیم. اول، — در اینجا چند ساده را نشان خواهیم داد تا بتوانید نسخه اصلی را با نسخه ترکیبی مقایسه کنید:
حالا کمی CSS اضافه میکنیم - یک تصویر پسزمینه و یک رنگ پسزمینه سبز به اضافه میکنیم:
حالت ترکیبی mix-blend-mode
حالا بیایید به حالت ترکیب ترکیبی () نگاهی بیندازیم. در اینجا همان دو را ارائه میدهیم، اما هر کدام اکنون روی یک ساده با پسزمینه بنفش قرار گرفتهاند تا نشان دهند که چگونه عناصر با هم ترکیب میشوند:
این کد CSS است که با آن به این استایل میدهیم:
در اینجا میتوانید ببینید که ترکیب multiply mix نه تنها دو تصویر پسزمینه، بلکه رنگ زیر آن را نیز با هم ترکیب کرده است.
اگر برخی از ویژگیهای طرحبندی بالا، مانند موقعیت، بالا، پایین، z-index و غیره را متوجه نمیشوید، نگران نباشید. ما این موارد را به طور مفصل در ماژول طرحبندی CSS خود پوشش خواهیم داد.
اگرچه درست است که همه چیز در CSS یک جعبه مستطیلی است و تصاویر نیز یک جعبه مستطیلی فیزیکی هستند، اما میتوانیم با استفاده از CSS Shapes طوری به نظر برسیم که انگار محتوای ما دور چیزهای غیرمستطیلی جریان دارد.
مشخصات CSS Shapes امکان قرار دادن متن دور یک شکل غیرمستطیلی را فراهم میکند. این امر به ویژه هنگام کار با تصویری که دارای فضای سفید است و ممکن است بخواهید متن را در اطراف آن شناور کنید، مفید است.
در تصویر زیر، یک بادکنک گرد و دلپذیر داریم. فایل اصلی مستطیلی است، اما با شناور کردن تصویر (اشکال فقط برای عناصر شناور اعمال میشوند) و استفاده از ویژگی shape-outside با مقدار ، میتوانیم جلوهای از متن را ایجاد کنیم که در امتداد خط بادکنک قرار دارد.
شکل در این مثال به محتوای فایل تصویر واکنش نشان نمیدهد. در عوض، تابع دایره نقطه مرکزی خود را از مرکز فایل تصویر میگیرد، گویی یک پرگار در وسط فایل قرار دادهایم و دایرهای رسم کردهایم که درون فایل قرار میگیرد. متن حول آن دایره جریان مییابد.
تابع تنها یکی از چند شکل پایهای است که تعریف شدهاند، با این حال روشهای مختلفی برای ایجاد شکلها وجود دارد. برای اطلاعات بیشتر و نمونه کد برای شکلهای CSS، به راهنماهای شکلهای CSS در PDN مراجعه کنید.
-webkit-background-clip: text
یکی دیگر از ویژگیهایی که فکر کردیم به طور خلاصه به آن اشاره کنیم، مقدار متن برای background-clip است. وقتی این ویژگی به همراه ویژگی اختصاصی ; استفاده شود، به شما امکان میدهد تصاویر پسزمینه را به شکل متن عنصر برش دهید و جلوههای زیبایی ایجاد کنید. این یک استاندارد رسمی نیست، اما در مرورگرهای مختلف پیادهسازی شده است، زیرا محبوب است و به طور گسترده توسط توسعهدهندگان استفاده میشود. وقتی در این زمینه استفاده شود، هر دو ویژگی به پیشوند فروشنده نیاز دارند، حتی برای مرورگرهای غیر مبتنی بر WebKit/Chrome. میتوانید این را در عمل در نمونه زنده زیر مشاهده کنید:
پس چرا مرورگرهای دیگر پیشوند را پیادهسازی کردهاند؟ عمدتاً برای سازگاری مرورگرها - بسیاری از توسعهدهندگان وب شروع به پیادهسازی وبسایتها با پیشوندهای کردهاند که به نظر میرسد مرورگرهای دیگر خراب هستند، در حالی که در واقع آنها از استانداردها پیروی میکردند. بنابراین آنها مجبور شدند چند ویژگی از این دست را پیادهسازی کنند. این موضوع خطر استفاده از ویژگیهای CSS غیر استاندارد و/یا پیشوندی را در کار شما برجسته میکند - آنها نه تنها باعث مشکلات سازگاری مرورگر میشوند، بلکه در معرض تغییر نیز هستند، بنابراین کد شما ممکن است در هر زمانی خراب شود. بهتر است به استانداردها پایبند باشید.
اگر میخواهید از چنین ویژگیهایی در کار تولیدی خود استفاده کنید، حتماً در مرورگرها به طور کامل آزمایش کنید و بررسی کنید که در جایی که این ویژگیها کار نمیکنند، سایت هنوز قابل استفاده است.
