ColorClass Webpage Coloring And Image Filter Script

Electronics and Programming tutorials and projects

ColorClass Webpage Coloring And Image Filter Script

colorclass script

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 ColorClass script has four exclusive specifications:

  • Sets the background color without using CSS
  • Sets the text color without using CSS
  • Set the background opacity which was impossible before
  • And is compatible with JQuery and javascript

How to use 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.

<script type=”text/javascript” src=”js/colorclass-1.7.js”></script>

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:

<div class=”t#19b5fe”>it is a div with blue text</div>

<p class=”t#dc3023″>it is a paragraph with red text</p>

<i class=”fr fr-check t#5b8930″>a green font-icon</i>

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

<div class=”col-md-12 b#19b5fe”>div with blue background</div>

<span class=”b#dc3023″>a span with red background</span>

<table class=”b#5b8930″>and a table with green background</table>

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

<div class=”col-md-12 #19b5fe t%5″>also a div with blue text and 0.5 text opacity</div>

<span class=”#dc3023 t%35″>a span with red text and 0.35 text opacity</span>

<table class=”t%90″>a table with css text and 0.9 text opacity</table>

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

<div class=”col-md-12 #19b5fe b%5″>it is a div with blue background and 0.5 opacity</div>

<span class=”#dc3023 b%35″>a span with red background and 0.35 opacity</span>

<table class=”b%90″>a table with css background and 0.9 opacity</table>

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

<div class=”col-md-12 i%5″>it is a DIV with image background and 0.5 opacity</div>

<span class=”b#dc3023 i%35″> a span with image background and 0.35 opacity</span>

<table class=”i%90″>it is a table with image background and 0.9 opacity</table>

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-   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-   b: Blur (0 to f)

3-   i: Invert color (negative – 0 to f)

4-  s: Sepia color (0 to f)

5-  d: Darkness (0 to f)

6-  c: Low contrast (0 to f)

i#000000 –> grayscale(0%), blur(0px), invert(0%), sepia(0%), brightness(100%), contrast(100%);

i#ffffff –> grayscale(100%), blur(15px), invert(100%), sepia(100%), brightness(0%), contrast(0%);

<div class=”col-md-12 i#f00000″>100% Grayscaled</div>

<span class=”i#0f0000″>15px blured, Compeletly blured</span>

<img src=”1.jpg” class=”i#00f000″ />100% Inverted color, Negative

<span class=”i#700000″>50% Grayscaled</span>

<span class=”i#f00″>100% Grayscaled and 15px blured</span>

– 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**)

<div class=”col-md-12 b#000=fff”>it is a DIV with black background and white background on hover</div>

<span class=”t#cf000f=19b5fe”>a span with red text and blue text on hover</span>

<table class=”b%90=7″>also a table with 0.9 background opacity and 0.7 background opacity on hover</table>

<section class=”t%4=67″>a section with 0.4 text opacity and 0.67 text opacity on hover</section>

<body class=”i%6=9″>also a page with 0.6 background image opacity and 0.9 background image opacity on hover</body>

Style Tag:

<style>
.test
{
$cc:b#333; /*backgorund-color*/
$cc:t#00F800; /*color*/
}
</style>

You can download the script in the following:

 

Leave a Reply

Your email address will not be published. Required fields are marked *

5 + five =