ColorClass Webpage Coloring And Image Filter Script

First follow the steps blew:

- Copy one the js file (colorclass-1.7.js) into your javascripts folder.

- Patch the file in your HTML code.

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

Your page is ready and here’s the usage instruction:

- Add a class like: t#5b8930 into your tag’s class attribute, without any CSS code. Example:

%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="fr fr-check t#5b8930"%26gt;%26lt;/i%26gt; it is a green font-icon

- Add a class like b#19b5fe into your tag, without any CSS code. Example:

%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;

- Add a class like t%50 or t%5 into your tag, without any CSS code. Example:

%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;

- Add a class like b%50 or b%5 into your tag, without any CSS code. Example:

%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;

- Add a class like i%50 or i%5 into your tag, without any CSS code. Example:

%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;

-%26nbsp; Simply add a class which starts with "i#gbisdc" and change the specifications of your image. in this feature you can set the 6 item of an image:

1-%26nbsp; %26nbsp;g: Grayscale (0 to f in hexadecimal unit [0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f])

2- %26nbsp;%26nbsp;b: Blur (0 to f)

3-%26nbsp;%26nbsp; i: Invert color (negative - 0 to f)

4- %26nbsp;s: Sepia color (0 to f)

5- %26nbsp;d: Darkness (0 to f)

6- %26nbsp;c: Low contrast (0 to f)

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;

- For text hover or background color hover hover, add a = after the color code and then add the hove color code (Example: **b#000=fff**)

%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;

Style Tag:

%26lt;style%26gt;

.test

{

$cc:b#333; /*backgorund-color*/

$cc:t#00F800; /*color*/

}

%26lt;/style%26gt;

%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)