سیزده فیلتر CSS در طراحی وب سایت حرفه ای
سیزده فیلتر CSS که می توان برای طراحی وب سایت حرفه استفاده کرد. این سیزده دستور را به سادگی میتوان در برای افکت های زیبا استفاده کرد
طراحی وب سایت حرفه ای چگونه به راحتی می توان انجام داد؟ یکی از مواردی که طراحان وب سایت حرفه ای به آن علاقه مند هستند این است که بتوانند با استفاده از CSS افکت های بسیار زیبایی تولید کنند، برای مثال اکثر افکت هایی که روی عکس انجام می گیرد، امروزه خیلی راحت می تواند با عکس تولید کرد. تکنولوژی های جدیدی که در CSS اضافه شده است، طراحی وب سایت حرفه ای را نسبت به قبل آسان تر کرده است.
قبلا اگر شما میخواستید که اقدام به طراحی وب سایت حرفه ای پر از افکت کنید، باید از فلش استفاده می کردید یا آن ها را از قبل در فتوشاپ یا نرم افزارهای مربوط طراحی کرده و بعد کد داخل سورس برنامه خود قرار می دادید. اما الان فیلتر های CSS زیادی به وجود آمده است که کارایی همان افکتهایی را که شما با فتوشاپ ایجاد میکردید را دارد. در این چند ساله شاهد تحول عظیمی در طراحی وب سایت حرفه ای بوده ایم.
فیلتر CSS برای طراحی وب سایت حرفه ای چیست؟
فیلترهای CSS خصوصیاتی هستند که روی ارائه و اجرای عناصر قبل از اینکه نشان داده شوند، اثر میگذارد.
این فیلترها می توانند بر بیشتر عناصر مانند عکس، ویدئو، iframe ، متن و غیره لحاظ شوند. البته این نکته را باید بدانید که اثر این فیلتر ممکن است برهر عنصر متفاوت باشد و همچنین میتوانید دو فیلتر را باهم ترکیب کرده و برروی یک عنصر به کار ببرید.
هدف شما ایجاد یک طراحی وب سایت حرفه ای است. پس شما به عنوان یک طراح خیلی مهم است که با این موارد آشنایی داشته باشید.
در ادامه ما سیزده فیلتر CSS را برای طراحی و ب سایت حرفه ای مورد بررسی قرار خواهیم.
اما لیست این سیزده فیلتر عبارت است از:
•Brightness()
•Contrast()
•Blur()
•Drop-shadow()
•Grayscale()
•Hue-rotate()
•Invert()
•Opacity()
•Sepia()
•Saturate()
•url()
•custom()
اما نوع نوشتن پیشفرض فیلترهای CSS به صورت زیر است:
Filter:<filter-function>[<filter-function>]*|none
حالا به بررسی تک تک این فیلترها میپردازیم:
Brightness
همانطور که از نامش پیداست، برای میزان روشنایی عکس استفاده میشود که به صورت زیر نوشته می شود:
{[<Filter:brightness([<number>|<percentage
شما میتوانید از برای تنظیم روشنایی از مقدار عددی یا درصدی استفاده کنید. این مقدار بازه بین 0 تا 100 را دارد. اگر از 100% یا بیشتر از آن استفاده کنید، عکس شما کاملا سفید خواهد شد و اگر از مقدار 0 استفاده کنید، عکس شما کاملا سیاه خواهد گردید.
دستور CSS آن به صورت زیر است:
}Img
;(webkit-filter:brightness(25%
;(Filter:brightness(25%
}

Contrast
این فیلتر برای کنترل کردن تضاد در عکس استفاده می شود و به صورت زیر نوشته می شود:
{[<Filter:contrast([<number>|<percentage
مقادیر به کار رفته برای این فیلتر، مانند قبلی است.
دستور CSS آن به صورت زیر نوشته می شود:
}Img
;(webkit-filter:contrast(25%
;(Filter:contrast(25%
}

Blur
از این فیلتر برای میزان تار شدگی در عکس استفاده می شود و به صورت زیر نوشته می شود:
(<Filter:blur( <length
در فیلد مقدار، میتوان از هر واحدی به جز درصد استفاده کرد و مقدار پیشفرض برای آن صفر می باشد.
دستور CSS آن برای طراحی وب سایت به صورت زیر است:
}Img
;(webkit-filter:blur(5px
;(Filter:blur(5px
{

Drop-shadow
این شبیه به box-shadow است اما با این تفاوت که میتوانید برای هر نوع شکلی در طراحی سایت آن را به کار ببرید و به صورت زیر نوشته می شود:
(<Filter:drop-shadow(<lenght>{1,2}<color
پارامترهای آن کاملا شبیه به box-shadow است و دستور CSS آن به صورت زیر است:
}Img
;((webkit-filter:drop-shadow(10px 10px 10px rgba(0,0,0,0.9
;((Filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.9
{

Grayscale
از این فیلتر برای طوسی رنگ تر کردن عکسها استفاده می شود و به صورت زیر نوشته می شود:
([<Filter:grayscale([<number>|<percentage
مقادیر به کار رفته مانند مقادیر در فیلتر brightness است و دستور CSS آن به صورت زیر است:
}Img
;(webkit-filter:grayscale(50%
;(Filter:grayscale(50%
}

Hue-rotate
در این فیلتر شما میتوانید پیکسلهای رنگ عکس را جابجا کنید و به صورت زیر نوشته می شود:
Filter:hue-rotate(
مقداری که این فیلتر میتواند بگیرد بین 0تا 360 درجه است.مقدار بیشتر از 360 باعث چرخش دوباره میشود یعنی 45 درجه با 405 درجه هیچ فرقی ندارند. دستور CSSآن به صورت زیر نوشته می شود:
Img{
-webkit-filter:hue-rotate(45deg);
Filter:hue-rotate(45deg);
{

Invert
از این فیلتر برای تغییر رنگ بندی داخل عکس استفاده می شود و به صورت زیر نوشته می شود:
{[<Filter:invert([<number>|<percentage
مقادیر آن مانند فیلتر brightness است و دستور CSS آن به صورت زیر است:
}Img
;(webkit-filter:invert(50%
;(Filter:invert(50%
}

Opacity
در این فیلتر مقدار وضوح تصویر نشان داده می شود و به صورت زیر نوشته می شود:
{[<Filter:opacity([<number>|<percentage
مقادیر آن مانند فیلتر قبلی است.این فیلتر همانند دستور opacity ساده در CSS است اما با این تفاوت که در مرورگرها بهتر اجرا می شود. دستور CSS آن به صورت زیر نوشته می شود:
}Img
;(webkit-filter:opacity(50%
;(Filter:opacity(50%
}

Sepia
از این فیلتر برای سیاه و سفید کردن حرفه عکس ها در طراحی وب سایت استفاده می شود و به صورت زیر نوشته می شود:
{[<Filter:sepia([<number>|<percentage
مقادیر آن مانند فیلتر قبلی است و دستور CSS آن به صورت زیر نوشته می شود:
}Img
;(webkit-filter:sepia(50%
;(Filter:sepia(50%
}

Saturate
این فیلتر میزان خلوصیت رنگ را بررسی میکند و همانند فیلتر قبلی و مقدار گذاری میشود:
{[<Filter:saturate([<number>|<percentage
دستور CSS:
}Img
;(webkit-filter:saturate(50%
;(Filter:saturate(50%
}

Url
اگر میخواهید که فیلتر اختصاصی خودتان را قرار دهید، از این فیلتر استفاده می کنید. این فیلتر، فایل XML جایگذاری میکند و به صورت زیر نوشته میشود:
(<Filter:url(<url
دستور CSS آن به صورت زیر است:
Img{
;('webkit-filter:url('#filter
;('Filter: url('#filter
}

ترکیب فیلترها برای طراحی وب سایت حرفه ای
در طراحی وب سایت حرفه ای، بهتر است از چند فیلتر استفاده کنید. دستور CSS شما به صورت زیر نوشته می شود:
}img
;(webkit-filter:hue-rotate(25deg) contrast(2) brightness(120%
;(filter:hue-rotate(25deg) contrast(2) brightness(120%
{

فقط کافی است نکات گفته شده در بالا را به خوبی رعایت کنید.
Custom
این فیلتر، یک نوع مجزا از بقیه است و هنوز در حال توسعه و تحقیق است و به کاربر اجازه میدهد که فیلتر سینماتیک خود را تولید کند.