ColorClass-Skript zum Färben und Bildfiltern von Webseiten

Mit dem ColorClass-Skript können Sie die Textfarbe, Hintergrundfarbe, Text- und Hintergrunddeckkraft sowie Hover- und Bildfilter festlegen, indem Sie einfach einen Befehl im Klassenattribut hinzufügen.

ColorClass ist ein Javascript-Code zum Färben von HTML-Elementen wie „div“, „p“, „h1“, „h2“ usw. Außerdem verfügt es über Bildfilter.

Dieses leichte ColorClass-Skript verfügt über vier exklusive Spezifikationen:

• Legt die Hintergrundfarbe fest, ohne CSS zu verwenden
• Legt die Textfarbe fest, ohne CSS zu verwenden
• Stellen Sie die Deckkraft des Hintergrunds ein, was vorher unmöglich war
• Und ist kompatibel mit JQuery und Javascript

Wie benutzt man ColorClass Webpage Coloring And Image Filter Script

Befolgen Sie zunächst die folgenden Schritte:

• Kopieren Sie eine der js-Dateien (colorclass-1.7.js) in Ihren Javascripts-Ordner.
• Patchen Sie die Datei in Ihren HTML-Code.

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

Ihre Seite ist fertig und hier ist die Gebrauchsanweisung:

• Fügen Sie eine Klasse wie: t#5b8930 ohne CSS-Code zum Klassenattribut Ihres Tags hinzu. Beispiel:

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

• Fügen Sie Ihrem Tag eine Klasse wie b#19b5fe hinzu, ohne CSS-Code. Beispiel:

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

• Fügen Sie Ihrem Tag eine Klasse wie t%50 oder t%5 hinzu, ohne CSS-Code. Beispiel:

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

• Fügen Sie Ihrem Tag eine Klasse wie b%50 oder b%5 hinzu, ohne CSS-Code. Beispiel:

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

• Fügen Sie Ihrem Tag eine Klasse wie i%50 oder i%5 hinzu, ohne CSS-Code. Beispiel:

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

Fügen Sie einfach eine Klasse hinzu, die mit „i#gbisdc“ beginnt, und ändern Sie die Spezifikationen Ihres Bildes. In dieser Funktion können Sie die 6 Elemente eines Bildes festlegen:

1- g: Graustufen (0 bis f in hexadezimaler Einheit [0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f])

2- b: Unschärfe (0 bis f)

3- i: Farbe umkehren (negativ – 0 bis f)

4- s: Sepiafarbe (0 bis f)

5- d: Dunkelheit (0 bis f)

6- c: Niedriger Kontrast (0 bis f)

i#000000 –> Graustufen (0 %), Unschärfe (0 Pixel), Invertieren (0 %), Sepia (0 %), Helligkeit (100 %), Kontrast (100 %);

i#ffffff –> Graustufen (100 %), Unschärfe (15 Pixel), Invertieren (100 %), Sepia (100 %), Helligkeit (0 %), Kontrast (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>

• Für Text-Hover oder Hintergrundfarben-Hover-Hover fügen Sie ein = nach dem Farbcode und dann den Hover-Farbcode hinzu (Beispiel: **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>

Stil-Tag:

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

Sie können das Skript im Folgenden herunterladen: