ColorClass Usage Instruction

By ColorClass Web Design Team | November 2015

image

ColorClass usage is so easy and this script has so many abilities regarding background coloring. For using of this script, follow this tutorial and Know that We will with you step by step for making your website more beautiful. There is three ways for using ColorClass:

Download

Download The minified ColorClass
This compact file contains an empty Bootstrap 3.0+ project which is ready to use (Contains css, js, img, font and index.html)
Download The Full ColorClass

installation

First way easiest

  • Place the following code at the end of your "Body" tag, before other "Script" tags:
  • Then you've done and click on this button for usage:

Second way standard

Follow the steps below

  • Download javascript file and copy into your javascripts folder (Choose one of files).
  • Patch the file in your HTML code.
  • Your page is ready and you can see the usage instruction:

Third way The Best SEO

If you care to your website SEO, Follow the steps below:

  • Open the first js file which you've patched at the end of your page.
  • Copy the ClassColor script at the start of your js file.
  • Your page is ready and you can see the usage instruction:

How to use ColorClass

ColorClass controls the text color, the background color and the background opacity.

Text color:

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

Background color:

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

Text opacity:

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

Background opacity:

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

Note: In this case, just the background Alpha would be changed and the entire contents of the box would be with one hundred percent clearly displayed.

Background image opacity:

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

Background Image Filter:

Simply add a class which starts with "i#gbisdc" and change the specifications of your image. in this future you can set 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 (nagative - 0 to f)
4- s: Sepia color (0 to f)
5- d: Darkness (0 to f)
6- c: Low contrast (0 to f)

So class="i#12073b" means: an image which is 6% gray scaled, 2 px blured, 0% Inverted color, 50% sepia colored, 20% Darker and with 75% lower contrast.

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

Hover:

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)

Note: b#f0f= Means: b#f0f=0f0 and b%8= Means: b%8=100

Please wait for our updates ;)

Thanks!

MVT and MMK Iran

Co-Founders and CEOs of ColorClass design team

November 2015

ColorClass ColorClass