سیزده فیلتر 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

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