پروژه های دیگر از این گروه

اسکریپت کالرکلاس ColorClass Script - Javascript، مخصوص طراحی وب

اسکریپت فیلتر و رنگ آمیزی صفحه کالر کلاس ColorClass - جاوا اسکریپت، سی اس اس، اچ تی ام ال و طراحی صفحات وب

اسکریپت کالرکلاس، رنگ آمیزی و فیلتر تصاویر در طراحی وبسایت - نسخه 1.7


قیمت:

 

پروژه های دیگر از این گروه

 

با استفاده از این اسکریپت می­توانید رنگ متن، رنگ بکگراند، فیلتر تصویر، شفافیت رنگ متن و شفافیت رنگ بکگراند را با قرار دادن دستورات چند حرفی در اتریبیوت کلاس، تنظیم کنید.

برای استفاده از اسکریپت کالر کلس، ابتدا فایل فایل js اسکریپت (colorclass-1.7.js) را در فلدر جاوای وب پیج خود کپی کنید، سپس فایل را در کد اچ تی ام ال خود پچ کنید.

%26lt;script type="text/javascript" src="js/colorclass-1.7.js"%26gt;%26lt;/script%26gt;


رنگ متن: کلاس t#--- یا t#------ را اضافه کنید (بجای --- کد رنگ قرار دهید).

%26lt;div class="t#19b5fe"%26gt;it is a div with blue text%26lt;/div%26gt;

%26lt;p class="t#dc3023"%26gt;it is a paragraph with red text%26lt;/p%26gt;

%26lt;i class="fa fa-check t#5b8930"%26gt;%26lt;/i%26gt; it is a green font-icon%26gt;


رنگ بکگراند: کلاس b#--- یا b#------ را اضافه کنید (بجای --- کد رنگ قرار دهید).

%26lt;div class="col-md-12 b#19b5fe"%26gt;it is a div with blue background%26lt;/div%26gt;

%26lt;span class="b#dc3023"%26gt;it is a span with red background%26lt;/span%26gt;

%26lt;table class="b#5b8930"%26gt;it is a table with green background%26lt;/table%26gt;


شفافیت متن: کلاس t%- یا t%-- را اضافه کنید (بجای - دهم شفافیت و بجای -- درصد شفافیت را قرار دهید).

%26lt;div class="col-md-12 #19b5fe t%5"%26gt;it is a div with blue text and 0.5 text opacity%26lt;/div%26gt;

%26lt;span class="#dc3023 t%35"%26gt;it is a span with red text and 0.35 text opacity%26lt;/span%26gt;

%26lt;table class="t%90"%26gt;it is a table with css text and 0.9 text opacity%26lt;/table%26gt;


شفافیت بکگراند: کلاس b%- یا b%-- را اضافه کنید (بجای - دهم شفافیت و بجای -- درصد شفافیت را قرار دهید).

%26lt;div class="col-md-12 #19b5fe b%5"%26gt;it is a div with blue background and 0.5 opacity%26lt;/div%26gt;

%26lt;span class="#dc3023 b%35"%26gt;it is a span with red background and 0.35 opacity%26lt;/span%26gt;

%26lt;table class="b%90"%26gt;it is a table with css background and 0.9 opacity%26lt;/table%26gt;


شفافیت تصویر بکگراند: کلاس i%- یا i%-- را اضافه کنید (بجای - دهم شفافیت و بجای -- درصد شفافیت را قرار دهید).

%26lt;div class="col-md-12 i%5"%26gt;it is a DIV with image background and 0.5 opacity%26lt;/div%26gt;

%26lt;span class="b#dc3023 i%35"%26gt;it is a span with image background and 0.35 opacity%26lt;/span%26gt;

%26lt;table class="i%90"%26gt;it is a table with image background and 0.9 opacity%26lt;/table%26gt;


فیلتر تصویر بکگراند: کلاس i#gbisdc را اضافه کنید (بجای g مقدار تن خاکستری را به واحد هگز (0-f) قرار دهید، بجای b مقدار تاری را به واحد هگز قرار دهید، بجای i مقدار رنگ وارونه را به واحد هگز قرار دهید، بجای s مقدار تن قهوه ای-قرمز را به واحد هگز قرار دهید، بجای d مقدار تیرگی را به واحد هگز قرار دهید و بجای c مقدار کنتراست را به واحد هگز قرار دهید).

i#000000 --%26gt; grayscale(0%), blur(0px), invert(0%), sepia(0%), brightness(100%), contrast(100%);

i#ffffff --%26gt; grayscale(100%), blur(15px), invert(100%), sepia(100%), brightness(0%), contrast(0%);

%26lt;div class="col-md-12 i#f00000"%26gt;100% Grayscaled%26lt;/div%26gt;

%26lt;span class="i#0f0000"%26gt;15px blured, Compeletly blured%26lt;/span%26gt;

%26lt;img src="1.jpg" class="i#00f000" /%26gt;100% Inverted color, Negative

%26lt;span class="i#700000"%26gt;50% Grayscaled%26lt;/span%26gt;

%26lt;span class="i#f00"%26gt;100% Grayscaled and 15px blured%26lt;/span%26gt;


هاور: برای هاور از علامت = در انتهای دستور کالرکلاسی استفاده کنید و بعد از مقدار هاور را بنویسید.

%26lt;div class="col-md-12 b#000=fff"%26gt;it is a DIV with black background and white background on hover%26lt;/div%26gt;

%26lt;span class="t#cf000f=19b5fe"%26gt;it is a span with red text and blue text on hover%26lt;/span%26gt;

%26lt;table class="b%90=7"%26gt;it is a table with 0.9 background opacity and 0.7 background opacity on hover%26lt;/table%26gt;

%26lt;section class="t%4=67"%26gt;it is a section with 0.4 text opacity and 0.67 text opacity on hover%26lt;/section%26gt;

%26lt;body class="i%6=9"%26gt;it is a page with 0.6 background image opacity and 0.9 background image opacity on hover%26lt;/body%26gt;

* Specifications:

%26nbsp;* v 1.0.0

%26nbsp;*%26nbsp; 1--- Class, Reading all "class" tags (Example: %26lt;div class=""%26gt;%26lt;/div%26gt; )

%26nbsp;*%26nbsp; 2--- Function, "cc_fColorClass(15)" resets all of the cchtml text colors, opacities and hovers,

%26nbsp;*%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp; resets all of the cchtml background colors, opacities and hovers,

%26nbsp;*%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp; resets all of the cchtml background images color filters, opacities and hovers.

%26nbsp;*%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp; "cc_fColorClass(2)" resets all of the cchtml text colors and opacities.

%26nbsp;*%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp; "cc_fColorClass(4)" resets all of the cchtml background colors and opacities.

%26nbsp;*%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp; %26nbsp;"cc_fColorClass(6)" resets all of the cchtml text and backgrounds colors and opacities.

%26nbsp;*%26nbsp; 3--- Color, Text color t#[xxxxxx] or t#[xxx] (Example: %26lt;div class="t#f1b2af"%26gt;%26lt;/div%26gt;, t#f0f )

%26nbsp;*%26nbsp; 4--- Color, BackGround color b#[xxxxxx] or b#[xxx] (Example: b#ff00ff, b#f0f )

%26nbsp;*

%26nbsp;* v 1.1.0

%26nbsp;*%26nbsp; 5--- Opacity, BackGround opacity b%[xx] or b%[x] (Example: b%35 , b%05 , b%4 [or b%40] )

%26nbsp;*

%26nbsp;* v 1.2.0

%26nbsp;*%26nbsp; 6--- Opacity, Text opacity t%[xx] or t%[x] (Example: t%35 , t%05 , t%4 [or t%40] )

%26nbsp;*%26nbsp; 7--- Hover, Text color hover t#[xxx]=[xxx] or t#[xxxxxx]=[xxxxxx] (Example: t#f0f=0f0 , t#ff00ff=00ff00 )

%26nbsp;*%26nbsp; 8--- Hover, Text opacity hover t%[xx]=[xx] or t%[x]=[x] (Example: t%15=9 , t%5=100 [or t%5= ] )

%26nbsp;*%26nbsp; 9--- Hover, BackGround color hover b#[xxx]=[xxx] or b#[xxxxxx]=[xxxxxx] (Example: b#f0f=0f0 , b#ff00ff=00ff00 )

%26nbsp;*%26nbsp; 10-- Hover, BackGround opacity hover b%[xx]=[xx] or b%[x]=[x] (Example: b%15=9 , b%5=100 [or b%5= ] )

%26nbsp;*

%26nbsp;* v 1.3.0

%26nbsp;*%26nbsp; 11-- Improve, IE9+ and Chrome

%26nbsp;*

%26nbsp;* v 1.3.1

%26nbsp;*%26nbsp; 12-- Transition, Auto transition (all 0.3s)

%26nbsp;*

%26nbsp;* v 1.4.0 (*New Protocol: "#"=%26gt;"b#" , "%"=%26gt;"b%" , "@"=%26gt;"t#" , "!"=%26gt;"t%" )

%26nbsp;*%26nbsp; 13-- Opacity, background image opacity i%[xx] or%26nbsp; (Example: i%35 , i%05 , i%4 [or i%40] )

%26nbsp;*%26nbsp; 14-- Filter, background image color filter i%[x] and [ b#[xxxxxx] or b#[xxx] ] (Example: i%1 b#ff00ff, i%5 b#f0f )

%26nbsp;*%26nbsp; 15-- Hover, background image hover i%[xx]=[xx] or i%[x]=[x] (Example: i%15=9 , i%5=100 [or i%5= ] )

%26nbsp;*%26nbsp; 16-- Hover, background image color filter hover i%[x] and [ b#[xxx]=[xxx] or b#[xxxxxx]=[xxxxxx] ] (Example: i%2 g#f0f=0f0 , i%6 g#ff00ff=00ff00 )

%26nbsp;*%26nbsp; 17-- Hover, background image color filter opacity hover i%[x] and [ b%[xx]=[xx] or b%[x]=[x] ] (Example: i%5 b%15=9 , i%85 b%5=100 [or g%5= ] )

%26nbsp;*

%26nbsp;* v 1.5.0

%26nbsp;*%26nbsp; 18-- Opacity, "img" tag opacity i%[xx] or i%[x](Example: %26lt;img src="img/logo.png" class="i%3"%26gt; )

%26nbsp;*%26nbsp; 19-- Hover, "img" tag opacity i%[xx]=[xx] or i%[x]=[x](Example: %26lt;img src="img/logo.png" class="i%3="%26gt; )

%26nbsp;*%26nbsp; 20-- Color, Invert color (Example: b#ff00ff= means: b#ff00ff=00ff00 , t#=ff00ff means: t#t00ff00=ff00ff )

%26nbsp;*

%26nbsp;* v 1.5.1:

%26nbsp;*%26nbsp; 21-- Improve, IE9+ background image

%26nbsp;*

%26nbsp;* v 1.5.2:

%26nbsp;*%26nbsp; 22-- Improve, Bugs

%26nbsp;*

%26nbsp;* v 1.5.3:

%26nbsp;*%26nbsp; 23-- Transition, Auto transition (background color and image 0.3s, text 0.1s)

%26nbsp;*%26nbsp; 24-- Improve, Background images after resize

%26nbsp;*%26nbsp; 25-- Improve, Background image class (for JQuery)

%26nbsp;*

%26nbsp;* v 1.6.0:

%26nbsp;*%26nbsp; 26-- Improve, Background image class in chrome

%26nbsp;*%26nbsp; 27-- Filter, Background images Gray Scale filter

%26nbsp;*%26nbsp; 28-- Hover, Background images Gray Scale filter hover

%26nbsp;*%26nbsp; 29-- Improve, Background image class hover

%26nbsp;*

%26nbsp;* v 1.6.1:

%26nbsp;*%26nbsp; 30-- Filter, Compelete background image filter i#[gbisdl] from i#000000 to i#ffffff

%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp; g = grayscale

%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp; b = blur

%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp; %26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;i = invert

%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp; s = sepia color

%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp; d = darkness

%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp; l = low-contrast

%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp; Example: i#000000%26nbsp; means original image

%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp;%26nbsp; Example: i#800000%26nbsp; means 50% gray scaled image

%26nbsp;*%26nbsp; 31-- Hover, Compelete background image filter hover i#[gbisdl]=[gbisdl] (Example: i#020000=800000 )

%26nbsp;*%26nbsp; 32-- Improve, Background image filter in chrome, safari, ...

%26nbsp;*

%26nbsp;* This revision (v 1.7):

%26nbsp;*%26nbsp; 33-- ColorClass in %26lt;style%26gt; ($cc:b#000; --%26gt; background-color)

%26nbsp;*%26nbsp; 34-- ColorClass in %26lt;style%26gt; ($cc:t#000; --%26gt; text-color)


پروژه های مشابه: