ColorClass script sets the text color, background color, text and background opacity, hover and image filters simply with adding a command in the class attribute.
Price:
Other projects from this group
With the ColorClass script, you will be able to set the text color, background color, text and background opacity, hover and image filters simply with adding some command in the class attribute.
ColorClass is a javascript code for coloring the html elements such as “div”, “p”, “h1”, “h2” and etc. Also has image filters.
This lightweight script has four exclusive specifications:
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)