سلام.
ما با راهنمایی دوستان وردپرس پارسی یه کد جاوا اسکریپت نوشتیم که شاید به دردتون بخوره.
عملکرد این کد به این صورته که بدون نیاز به css میتونید رنگ بک گراند و متن رو کنترل کنید.
همچنین میتونید شفافیت (آلفای) بک گراند رو چه در حالت رنگ و چه در حالت عکس تعیین کنید.
برای شروع کافیه اسکریپت ColorClass رو در انتهای صفحه HTML و قبل از همه ی فایل های جاوا اسکریپت فراخوانی کنید.
فراخوانی از سرور ما:
نحوه استفاده:
همونطور که از اسم کالرکلاس پیداست این اسکریپت فقط روی کلاس های HTML تأثیر میذاره و چند ویژگی هر المان صفحه رو کنترل میکنه. اون ویژگی ها عبارتند از:
رنگ متن:
شما میتونید با دادن یک کلاس ساده مانند #t بدون نیاز به سی اس اس رنگ متن هر تگ HTML را تغییر یدید. به مثالهای زیر توجه کنید:
رنگ زمینه:
همچنین میتونید با دادن یک کلاس ساده مانند #b بدون نیاز به سی اس اس رنگ زمینه ی هر تگ HTML رو تغییر بدید. مثال:
شفافیت زمینه:
کالرکلاس میتونه با یک کلاس ساده مانند %b شفافیت زمینه رو به مقدار دلخواه تغییر بده. همونطور که میدونید این کار به تنهایی در css ممکن نیست.
شفافیت متن:
کالرکلاس میتونه با یک کلاس ساده مانند %t شفافیت خود متن رو به مقدار دلخواه تغییر بده. همونطور که میدونید این کار به تنهایی در css ممکن نیست.
شفافیت عکس زمینه:
کالرکلاس میتونه با یک کلاس ساده مانند %i شفافیت زمینه رو به مقدار دلخواه تغییر بده و این کار اصلا در css ممکن نیست.
فیلترهای عکس زمینه:
فیلتر های عکس زمینه:
کالرکلاس میتونه با یک کلاس ساده مانند #i شفافیت عکس زمینه رو به مقدار دلخواه تغییر بده . اما این مورد یه کم پیچیده تر از موارد قبلیه. در این مورد 6 ویژگی به ترتیب زیر کنترل میشه که ترتیبش مهمه:
اولی مربوط به سیاه و سفید، دومی بلور، سومی نگاتیو، چهارمی سوبیا، پنجمی درخشندگی و ششمی کنتراست هستن.
نحوه کد دهی در کلاس هم به این صورته که 6 تا کاراکتر مانند کد رنگ از 0 تا f پشت سر هم نوشته میشن:
مثال بیشتر:
هاور:
برای ایجاد هاور میتونید از = بعد از رنگ اصلی به صورت زیر استفاده کنید.
سایت اصلی : colorclass.ir
گیت هاب: https://github.com/j...ople/colorclass
رنگ های برگزیده: http://colorclass.ir/colors
این هم صفحه ی تست آنلاین: http://colorclass.ir/test
با نظرات خودتون میتونید در بهتر شدن این اسکریپت به ما کمک کنید.
خود اسکریپت هم پیوست شده.
ما با راهنمایی دوستان وردپرس پارسی یه کد جاوا اسکریپت نوشتیم که شاید به دردتون بخوره.
عملکرد این کد به این صورته که بدون نیاز به css میتونید رنگ بک گراند و متن رو کنترل کنید.
همچنین میتونید شفافیت (آلفای) بک گراند رو چه در حالت رنگ و چه در حالت عکس تعیین کنید.
برای شروع کافیه اسکریپت ColorClass رو در انتهای صفحه HTML و قبل از همه ی فایل های جاوا اسکریپت فراخوانی کنید.
فراخوانی از سرور ما:
HTML:
<script type="text/javascript" src="http://cdn.colorclass.ir/colorclass-latest.min.js"></script>نحوه استفاده:
همونطور که از اسم کالرکلاس پیداست این اسکریپت فقط روی کلاس های HTML تأثیر میذاره و چند ویژگی هر المان صفحه رو کنترل میکنه. اون ویژگی ها عبارتند از:
رنگ متن:
شما میتونید با دادن یک کلاس ساده مانند #t بدون نیاز به سی اس اس رنگ متن هر تگ HTML را تغییر یدید. به مثالهای زیر توجه کنید:
HTML:
<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> that was a green font-iconرنگ زمینه:
همچنین میتونید با دادن یک کلاس ساده مانند #b بدون نیاز به سی اس اس رنگ زمینه ی هر تگ HTML رو تغییر بدید. مثال:
HTML:
<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>شفافیت زمینه:
کالرکلاس میتونه با یک کلاس ساده مانند %b شفافیت زمینه رو به مقدار دلخواه تغییر بده. همونطور که میدونید این کار به تنهایی در css ممکن نیست.
HTML:
<div class="col-md-12 b#19b5fe b%5">it is a DIV with blue background and 0.5 opacity</div>
<span class="b#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>شفافیت متن:
کالرکلاس میتونه با یک کلاس ساده مانند %t شفافیت خود متن رو به مقدار دلخواه تغییر بده. همونطور که میدونید این کار به تنهایی در css ممکن نیست.
HTML:
<div class="col-md-12 t#19b5fe t%5">it is a DIV with blue text and 0.5 text opacity</div>
<span class="t#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 color and 0.9 text opacity</table>شفافیت عکس زمینه:
کالرکلاس میتونه با یک کلاس ساده مانند %i شفافیت زمینه رو به مقدار دلخواه تغییر بده و این کار اصلا در css ممکن نیست.
HTML:
<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 شفافیت عکس زمینه رو به مقدار دلخواه تغییر بده . اما این مورد یه کم پیچیده تر از موارد قبلیه. در این مورد 6 ویژگی به ترتیب زیر کنترل میشه که ترتیبش مهمه:
اولی مربوط به سیاه و سفید، دومی بلور، سومی نگاتیو، چهارمی سوبیا، پنجمی درخشندگی و ششمی کنتراست هستن.
نحوه کد دهی در کلاس هم به این صورته که 6 تا کاراکتر مانند کد رنگ از 0 تا f پشت سر هم نوشته میشن:
HTML:
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%)
HTML:
<div class="col-md-12 i#f00000">عکس زمینه کاملا سیاه و سفید میشود </div>
<span class="i#0f0000"> عکس زمینه کاملا بلور میشود </span>
<img src="1.jpg" class="i#00f000" /> عکس زمینه کاملا نگاتیو میشود
<span class="i#700000"> عکس زمینه 50 درصد خاکستری میشود </span>
<span class="i#f00"> در این حالت عکس کاملا بلور و سیاه و سفید می شود </span>هاور:
برای ایجاد هاور میتونید از = بعد از رنگ اصلی به صورت زیر استفاده کنید.
HTML:
<div class="col-md-12 b#000=fff">it is a DIV with black background and wite 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>
HTML:
b#000 // رنگ بکگراند مشکی باشه
t#000 // رنگ متن مشکی باشه
b%60 // شفافیت بکگراند 0.6 باشه
t%60 // شفافیت متن 0.6 باشه
i%60 // شفافیت عکس پس زمینه 0.6 باشه
b#000=fff // رنگ زمینه مشکیه که با اشاره ی ماوس سفید میشه
b%30=80 // شفافیت زمینه 0.3 هست که با اشاره ی ماوس 0.8 میشهسایت اصلی : colorclass.ir
گیت هاب: https://github.com/j...ople/colorclass
رنگ های برگزیده: http://colorclass.ir/colors
این هم صفحه ی تست آنلاین: http://colorclass.ir/test
با نظرات خودتون میتونید در بهتر شدن این اسکریپت به ما کمک کنید.
خود اسکریپت هم پیوست شده.
Last edited:
