خانه / مقالات / برنامه نویسی / برنامه نویسی وب / مَستِر کردن فیلتر های CSS

مَستِر کردن فیلتر های CSS

استفاده از فیلتر های CSS برای افزودن به اطلاعات و داده ها، واکنش پذیری سایت شما را کاهش می دهد. آن چیزی که کمتر شناخته شده است، این است که شما می توانید از ابتدا با ترکیب قسمت های مختلف فیلتر SVG در یک فیلتر CSS، در زمان بالا رفتن ترافیک مشاهده یا شرایط پیچیده ی دیگر، عملکرد قابل قبولی از سایت خود را مشاهده کنید. در این مقاله، روش ساختن یک فیلتر چند مرحله ای (با استفاده از نور، صدا و تیرگی) برای ایجاد جلوه های ویژه ی سه بعدی جذاب بر روی متن ها، توضیح داده شده است. فیلتر های CSS، ابزار بی نظیری برای تغییر شرایط نمایش متن های قرار داده شده بر روی سایت شما هستند. هر کدام از این بلوک های ساخته شده، مانند یک آجر بوده و هنگامی که در کنار یکدیگر قرار می گیرند، یک ساختمان زیبا را می سازند. بهتر از همه این است که شما می توانید این آجر ها را به سلیقه ی خودتان در کنار یکدیگر قرار داده تا فیلتر CSS مورد نظرتان را بسازید. اما چگونه؟ در این مقاله، ساختن چنین فیلتر هایی را توضیح خواهیم داد.
در ابتدا نگاهی به SVG خواهیم داشت. در حقیقت SVG یک زبان گرافیکی برداری است که در تمام مرورگر های جدید HTML5 قرار داده شده و یکی از ویژگی های بی نظیر آن، فیلتر ها می باشند. در حقیقت SVG شامل یک <filter> و تعداد زیادی فیلتر ابتدایی (مقدماتی) است. می توان گفت فیلتر های ابتدایی SVG همان آجر هایی هستند که ساختمان مورد نظر ما را می سازند. هدف ما این است که تعدادی از آن ها را در کنار هم قرار داده و از آن ها در وب سایت خود استفاده کنیم.
هنگامی که آجر های خود را در فیلتر مورد نظرمان قرار بدهیم، می توانیم با استفاده از انتخاب کننده های CSS، به آن ها مراجعه کرده تا در وب سایت ما به کار گرفته شوند. در ابتدا یک نمونه ی بسیار ساده را بیان کرده و در ادامه به نمونه ی پیچیده تری اشاره خواهیم داشت.

ساختن یک فیلتر تابش (Glow Filter)
در نخستین نمونه، ساختن فیلتری را شرح می دهیم که با استفاده از آن می توان یک تابش یا برافروختگی ایجاد کرد. برای ساختن این فیلتر، از چهار فیلتر مقدماتی feGaussianBlur (ایجاد کننده ی اثر تیرگی)، feFlood (پُر کننده ی یک محدوده با یک رنگ مشخص)، feComposite (ترکیب کننده ی پیکسل ها) و feMerge (ترکیب کننده ی محتویات مورد نظر با فیلتر به منظور به دست آوردن نتیجه ی مورد نظر)، استفاده خواهیم کرد.
نخستین چیزی که به آن نیاز داریم این است که یک تصویر (snapshot) از متن مورد نظر تهیه کرده و آن را به رنگ سفید تبدیل کنیم (زیرا در ادامه از متن سفید شده برای ایجاد تابش یا برافروختگی استفاده خواهیم کرد). از کد فیلتر SVG زیر برای ایجاد متن سفید رنگ استفاده می کنیم:

<filter id=”white”> <feFlood flood-color=”white” /> <feComposite in2=”SourceAlpha” operator=”in” result=”white”/></filter>

این فیلتر شامل دو بلوک است. نخستین بلوک، فیلتر feFlood است که محدوده ی مورد نظر را با رنگ سفید پُر می کند (فیلتر ها از یک تصویر خارج از صفحه ی مستطیلی برای ایجاد هر اثر در زنجیره ی اثر های مورد نظر استفاده می کنند). دومین فیلتر مورد استفاده، اثر فیلتر feComposite است که برای ترکیب پیکسل های متن اصلی و پیکسل های خروجی از یک فیلتر دیگر (با استفاده از برخی قوانین ترکیب) به کار گرفته می شود.
در این جا، می بایست بیان کرد که فیلتر های SVG به یک ترتیب مشخص شده کار کرده و به همین دلیل مانند حلقه های زنجیر، به یکدیگر متصل می شوند. وقتی ما از اثر این فیلتر بر روی متن خود استفاده می کنیم، ابتدا اثر فیلتر feFlood اجرا شده و سپس اثر feComposite، خروجی به دست آمده از feFlood را به عنوان یک ورودی، مورد استفاده قرار می دهد.
فیلتر FeComposite از عملگر in استفاده می کند که همان قانون ترکیب «ایجاد تصویر از ورودی مورد نظر با استفاده از پیکسل های داخلی متن اصلی» می باشد. در حقیقت باید توجه داشت که این قوانین، از اصول ریاضی پیروی می کنند. نتیجه ی استفاده از این فیلتر این است که تصویر مستطیل شکل سفید رنگ، اثر همان چیزی که مورد نظر ما است را به خود می گیرد.
در چنین شرایطی، متن سفید رنگ ما، زیر پوشش اثر مورد نظر قرار خواهد گرفت. روش انتخاب متن، استفاده از یک انتخاب کننده ی CSS برای انتخاب متن (محتویات) مورد نظر است. برای آشنایی بیشتر می توانیم به نمونه ی زیر اشاره داشته باشیم:

.white { -webkit-filter: url(#white); filter: url(#white); }

در چنین حالتی، اثر فیلتر مورد نظر بر روی تمامی محتویاتی که با یک CSS سفید رنگ («white») مشخص شده اند، قابل مشاهده خواهد بود. البته استفاده از چنین فیلتری بر روی صفحه ای که رنگ آن سفید است، چندان مناسب نبوده و بهتر است یک زمینه ی رنگی را به آن اضافه کنیم:
.bluebg { background-color: lightblue; } <div class=”bluebg”> <h1 class=”white”>WHITE GLOW FILTER</h1> </div>
اکنون که مرحله های ابتدایی و اساسی ایجاد یک فیلتر دو مرحله ای را مشاهده کرده ایم، زمان آن رسیده است که چگونگی استفاده از فیلتر های بیشتر را بررسی کنیم.

ساختن یک فیلتر تیرگی (Blurred Filter)
برای ایجاد تابش یا برافروختگی بر روی متن مورد نظرمان، می بایست متن سفید رنگ به دست آمده از زنجیره ی فیلتر بالا را گرفته و فیلتر تیرگی را بر روی آن قرار دهیم. در حقیقت این فیلتر، اساس ایجاد برافروختگی مورد نظرمان را تشکیل می دهد. برای به کار بردن فیلتر تیرگی از
<filter id=”whiteblur”> <feFlood flood-color=”white” /> <feComposite in2=”SourceAlpha” operator=”in” /> <feGaussianBlur stdDeviation=”۴” /> </filter>
استفاده می کنیم. همان طور که مشاهده می کنیم، از یک اثر اضافی feGaussianblur استفاده کرده ایم. این اثر، متن سفید رنگ ایجاد شده از مراحل قبل را گرفته و آن را تیره می کند:

.whiteblur { -webkit-filter: url(#whiteblur); filter: url(#whiteblur); } <div class=”bluebg”> <h1 class=”whiteblur”>WHITE GLOW FILTER</h1></div>

برای برجسته تر شدن تیرگی، لازم است اثر تیرگی را بیشتر کنیم. برای انجام این کار از feComponentTransfer استفاده می کنیم. در حقیقت این همان فیلتری است که امکان بازی کردن با رنگ ها و کانال های آلفا را در تصویر خارج از صفحه (offscreen)، به تمامی روش های ممکن، فراهم می کند.
اکنون می خواهیم یک تصویر تیره شده را با استفاده از کانال آلفا، درخشان تر کنیم. در چنین شرایطی، زنجیره ی فیلتر ما به این شکل خواهد بود:

<filter id=”whitetransfer”> <feFlood flood-color=”white” /> <feComposite in2=”SourceAlpha” operator=”in” /> <feGaussianBlur stdDeviation=”۴” />
<feComponentTransfer><feFuncA type=”linear” slope=”۳” intercept=”۰” /></feComponentTransfer> </filter>
توجه می کنید که از اثر feFuncA استفاده کرده ایم. با استفاده از این اثر، کانال آلفا به وسیله ی افزایش سه برابری مقادیر، بهبود داده می شود. چگونگی استفاده از این فیلتر، به این ترتیب است:

whitetransfer { -webkit-filter: url(#whitetransfer); filter: url(#whitetransfer); } <div class=”bluebg”> <h1 class=”whitetransfer”>WHITE GLOW FILTER</ h1> </div>
تنها می بایست با استفاده از اثر فیلتر feMerge، نتایج به دست آمده از فیلتر ها را با متن اصلی مورد نظرمان ترکیب کنیم. نسخه ی نهایی زنجیره ی فیلتر ما، به این شکل تمام می شود:

<filter id=”whiteglow”> <feFlood flood-color=”white” /> <feComposite in2=”SourceAlpha” operator=”in” /> <feGaussianBlur stdDeviation=”۴” /> <feComponentTransfer> <feFuncA type=”linear” slope=”۳” intercept=”۰” /> </feComponentTransfer> <feMerge> <feMergeNode /> <feMergeNode in=”SourceGraphic” /> </feMerge> </filter>

در انتها می توانیم برای مشخص کردن اثر مورد نظر، از کُد زیر استفاده کنیم:

.whiteglow { -webkit-filter: url(#whiteglow); filter: url(#whiteglow); } <div class=”bluebg”><h1 class=”whiteglow”>WHITE GLOW FILTER</h1> </div>

ساختن یک فیلتر برجستگی (Chiselled Filter)
در این قسمت از مقاله، چگونگی استفاده از اثر فیلتر ها برای ایجاد یک نمایش سه بعدی برجسته را شرح خواهیم داد. آن دسته از فیلتر های SVG که از آن ها استفاده می کنیم، شامل نور پردازی ها، شکل ها و صدا های مختلف می باشند و اگر چه ممکن است پیچیده به نظر برسند اما استفاده از آن ها بسیار آسان است. برای استفاده از این فیلتر باید سه مرحله ی مختلف را با یکدیگر ترکیب کرد که در هر کدام از آن ها از چند فیلتر مختلف استفاده شده است. برای استفاده از این فیلتر، مراحل زیر را انجام خواهیم داد:
۱٫ یک تصویر را به bump map (نقشه ی برجسته) تبدیل می کنیم (برای توضیحات بیشتر به قسمت «نگاه دقیق تر» همین مقاله مراجعه کنید).
۲٫ یک ظاهر برجسته از متن مورد نظرمان ایجاد می کنیم.
۳٫ با ایجاد یک سایه در پشت متن مورد نظر، یک ظاهر سه بعدی از آن ایجاد می کنیم.
فیلتر برجستگی: نقشه های برجسته و روشن شدن، برای ایجاد یک ظاهر سه بعدی با یکدیگر ترکیب می شوند
نکته ی شگفت انگیز در مورد اثر فیلتر ها این است که هیچ محدودیتی برای استفاده از آن ها وجود ندارد!

ساختن یک نقشه ی برجسته (Bump Map)
نقشه های برجسته (Bump Map ها) که در بازی های سه بعدی مورد استفاده قرار می گیرند را می توانید مانند سطح نا هموار پارچه یا تخته سنگ تصور کنید که هر پیکسل آن یک ارتفاع مشخص را نشان می دهد.
برای ایجاد bump map، چند فیلتر مختلف را در کنار هم قرار می دهیم. برای این که با کُد مورد استفاده برای ایجاد bump map ها آشنا شوید، به قسمت «نگاه دقیق تر» مراجعه کنید. بعد از ایجاد bump map، از این فیلتر استفاده می کنیم:

.bumps { -webkit-filter: url(#bumps); filter: url(#bumps); } <div class=”bumps”> <h1>CHISELLED EFFECT</h1> </div>

ساختن یک نمایش برجسته ی طلایی (Gold Embossed)
برای اینکه متن مورد نظر ما یک ظاهر سه بعدی طلایی برجسته ی خوش رنگ داشته باشد، باید از فیلتر feComponentTransfer در کنار چند فیلتر دیگر مانند feComposite و feBlend استفاده کنیم.
در فیلتر feBlend، حالت های ترکیب رنگی که در بیشتر برنامه های شناخته شده ی دسکتاپ مانند Photoshop و Inkscape (inkscape.org) به کار رفته است مورد استفاده قرار می گیرد. این ویژگی، امکان استفاده از ترکیبات رنگی زیبا و گوناگون را برای کاربران فراهم کرده است. برای ایجاد رنگ طلایی، ابتدا باید رنگ متن مورد نظرمان را با استفاده از ویژگی های CSS، به رنگ طلایی تبدیل کنیم. سپس به وسیله ی screen و multiply از فیلتر feBlend استفاده می کنیم. در چنین شرایطی امکان ترکیب رنگ های لایه های مختلف و پیکسل های تصویر های ورودی گوناگون نیز وجود خواهد داشت. می توانید کُد مربوط به ایجاد نمایش برجسته ی طلایی را از netm.ag/gold-250 دانلود کنید.

ساختن یک سایه ی برجسته (Drop Shadow)
در انتها، چگونگی ایجاد یک سایه ی برجسته را با استفاده از اثر فیلتر شرح می دهیم. برای ایجاد سایه از feMorphology (که کم رنگ کننده ی تصویر است)، feGaussianBlur (که برای ایجاد فیلتر تابشی یا برافروختگی مورد استفاده قرار می گیرد)، feOffset (که جای تصویر را تغییر می دهد) و فیلتر پُر کاربرد feComposite در کنار یکدیگر استفاده می کنیم.
می توانید کُد اثر فیلتر برای ایجاد سایه ی برجسته را از netm.ag/drop-250 دانلود کرده و نتیجه را به این شکل به کار ببرید:

shadowbumps { -webkit-filter: url(#shadowbumps); filter: url(#shadowbumps); } <div class=”shadowbumps”> <h1>CHISELLED EFFECT</h1> </div>

نکته ی شگفت انگیز در مورد اثر فیلتر ها این است که هیچ محدودیتی برای استفاده از آن ها وجود ندارد. شما می توانید تمام بلوک های اثر فیلتر های SVG را به هر شکلی که می خواهید با یکدیگر ترکیب کرده تا انواع مختلف زنجیره های فیلتر را ایجاد کنید.
با استفاده از فیلتر های CSS می توانید جذابیت های وب سایت خودتان را بیشتر کرده تا چشم تمام بازدید کنندگان را خیره کنید.

نگاه دقیق تر
نقشه ی برجسته (Bump Map)
اگر چه نقشه های برجسته در بازی های سه بعدی استفاده می شوند اما می توان با استفاده از اثر های فیلتر، نقشه های برجسته را ایجاد کرد:
<filter id=”bumps”> <feTurbulence type=”turbulence” baseFrequency=”۰٫۱” numOctaves=”۲” result=”texture”/> <feMerge result=”textureAndGraphic”> <feMergeNode /> <feMergeNode in=”SourceGraphic” /> </feMerge> <feColorMatrix type=”luminanceToAlpha” in=”texture” result=”textureMap”/> <feGaussianBlur in=”SourceAlpha” stdDeviation=”۶” result=”blur”/> <feDiffuseLighting in=”textureMap” surfaceScale=”۲” lighting-color=”white” diffuseConstant=”۱” result=”backgroundDiff”> <feSpotLight id=”spotLight” x=”۵۰” y=”۵۰” z=”۱۵۰” pointsAtX=”۱۵۰” pointsAtY=”۱۵۰” pointsAtZ=”۰” specularExponent=”۸” /> </feDiffuseLighting> <feDiffuseLighting in=”blur” surfaceScale=”۶” lighting-color=”white” diffuseConstant=”۱٫۲” result=”foregroundDiffAll”> <feDistantLight id=”distantLight” azimuth=”-۱۳۵” elevation=”۴۰” /> </feDiffuseLighting> <feComponentTransfer> <feFuncR type=”gamma” amplitude=”۱” exponent=”۳” offset=”۰”/> <feFuncG type=”gamma” amplitude=”۱” exponent=”۳” offset=”۰”/> <feFuncB type=”gamma” amplitude=”۱” exponent=”۳” offset=”۰”/> </feComponentTransfer> <feComposite operator=”in” in2=”SourceAlpha”/> <feConvolveMatrix order=”۳” kernelMatrix=”۰٫۰۶۲۵ ۰٫۰۶۲۵ ۰٫۰۶۲۵ ۰٫۰۶۲۵ ۰٫۵ ۰٫۰۶۲۵ ۰٫۰۶۲۵ ۰٫۰۶۲۵ ۰٫۰۶۲۵” result=”foregroundDiff”/> </filter>
در این قسمت، از چند بلوک جدید مانند feTurbulence، feColorMatrix، feDiffuseLighting و feSpotLight استفاده کرده ایم. جزئیات دقیق تری از تمام پارامتر های این فیلتر ها در یک مقاله ی کوتاه قابل بیان نبوده و به همین دلیل در این جا به بیان چند ترفند ساده پرداخته ایم.

——————

برگردان : حمید یوسفی نژاد

دیدگاهتان را ثبت کنید

آدرس ایمیل شما منتشر نخواهد شدعلامتدارها لازمند *

*

x

شاید بپسندید

ux_User experience تجربه کاربری - ماهنامه کامپیوتری رایانه

UX یا تجربه کاربری چیست؟

UX چیست؟ چرا مهم است؟ وبهترین ابزارها برای طراحی تجارب بزرگ وب ...