اسکریپت رنگ آمیزی صفحات وب کالرکلاس ColorClass-Web Design
با استفاده از اسکریپت رنگ آمیزی صفحات وب کالرکلاس (ColorClass) میتوانید رنگ متن، رنگ بکگراند، فیلتر تصویر، شفافیت رنگ متن و شفافیت رنگ بکگراند را با قرار دادن دستورات چند حرفی در اتریبیوت کلاس، تنظیم کنید.
راهنمای اسکریپت رنگ آمیزی
برای استفاده از اسکریپت رنگ آمیزی کالر کلس، ابتدا فایل فایل js اسکریپت (colorclass-1.7.js) را در فلدر جاوای وب پیج خود کپی کنید، سپس فایل را در کد اچ تی ام ال خود پچ کنید.
<script type=”text/javascript” src=”js/colorclass-1.7.js”></script>
رنگ متن: کلاس t#— یا t#—— را اضافه کنید (بجای — کد رنگ قرار دهید).
<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=”fa fa-check t#5b8930″></i> it is a green font-icon>
رنگ بکگراند: کلاس b#— یا b#—— را اضافه کنید (بجای — کد رنگ قرار دهید).
<div class=”col-md-12 b#19b5fe”>it is a div with blue background</div>
<span class=”b#dc3023″>it is a span with red background</span>
<table class=”b#5b8930″>it is a table with green background</table>
شفافیت متن: کلاس t%- یا t%– را اضافه کنید (بجای – دهم شفافیت و بجای — درصد شفافیت را قرار دهید).
<div class=”col-md-12 #19b5fe t%5″>it is a div with blue text and 0.5 text opacity</div>
<span class=”#dc3023 t%35″>it is a span with red text and 0.35 text opacity</span>
<table class=”t%90″>it is a table with css text and 0.9 text opacity</table>
شفافیت بکگراند: کلاس b%- یا b%– را اضافه کنید (بجای – دهم شفافیت و بجای — درصد شفافیت را قرار دهید).
<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″>it is a span with red background and 0.35 opacity</span>
<table class=”b%90″>it is a table with css background and 0.9 opacity</table>
شفافیت تصویر بکگراند: کلاس i%- یا i%– را اضافه کنید (بجای – دهم شفافیت و بجای — درصد شفافیت را قرار دهید).
<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″>it is 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>
فیلتر تصویر بکگراند:
کلاس i#gbisdc را اضافه کنید (بجای g مقدار تن خاکستری را به واحد هگز (0-f) قرار دهید، بجای b مقدار تاری را به واحد هگز قرار دهید، بجای i مقدار رنگ وارونه را به واحد هگز قرار دهید، بجای s مقدار تن قهوه ای-قرمز را به واحد هگز قرار دهید، بجای d مقدار تیرگی را به واحد هگز قرار دهید و بجای c مقدار کنتراست را به واحد هگز قرار دهید).
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>
هاور: برای هاور از علامت = در انتهای دستور کالرکلاسی استفاده کنید و بعد از مقدار هاور را بنویسید.
<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”>it is a span with red text and blue text on hover</span>
<table class=”b%90=7″>it is a table with 0.9 background opacity and 0.7 background opacity on hover</table>
<section class=”t%4=67″>it is a section with 0.4 text opacity and 0.67 text opacity on hover</section>
<body class=”i%6=9″>it is a page with 0.6 background image opacity and 0.9 background image opacity on hover</body>
دانلود اسکریپت:
نوشته شده توسط: محمد مهدی کفش کنان – مهندس الکترونیک و برنامه نویسی فول استک و بنیانگذار WiCardTech