صنع محول أكواد للالوان بنظام Hexa داخل مدونتك

عدد مشاهدات الموضوع:

سنضيف اضافة جميلة لمدونتك لتجعل مدونتك مميزة دوماً وهي محرر الألوان للحصول على أكود اﻷلوان بنظام Hexa بدون الحاجة لتضمين موقع داخل مدونتك !!
 صنع محول أكواد للالوان بنظام Hexa داخل مدونتك
لاضافة المحول داخل مدونتك
1-البحث(CTRL+F) عن الوسم </head> ونلصق الكود التالي فوقه مباشرة

 /**
 * http://www.sweup.com
 */
function colorLuminance(hex, lum) {
    // Validate hex string
    hex = String(hex).replace(/[^0-9a-f]/gi, "");
    if (hex.length < 6) {
        hex = hex.replace(/(.)/g, '$1$1');
    }
    lum = lum || 0;
    // Convert to decimal and change luminosity
    var rgb = "#",
        c;
    for (var i = 0; i < 3; ++i) {
        c = parseInt(hex.substr(i * 2, 2), 16);
        c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
        rgb += ("00" + c).substr(c.length);
    }
    return rgb;
}
function rangeSlider(e,d){var k=document.documentElement,l=document.createElement("div"),a=document.createElement("span"),p=false,q,j,c,h;var f={value:0,vertical:false,rangeClass:"",draggerClass:"",drag:function(i){}};for(var g in f){if(typeof d[g]=="undefined"){d[g]=f[g]}}function m(r,s,i){if(r.addEventListener){r.addEventListener(s,i,false)}else{if(r.attachEvent){r.attachEvent("on"+s,i)}else{r["on"+s]=i}}}var o=d.vertical;e.className=(e.className+" range-slider "+(o?"range-slider-vertical":"range-slider-horizontal")).replace(/^ +/,"");l.className=("range-slider-track "+d.rangeClass).replace(/ +$/,"");a.className=("dragger "+d.draggerClass).replace(/ +$/,"");m(l,"mousedown",function(i){k.className=(k.className+" no-select").replace(/^ +/,"");q=l[!o?"offsetWidth":"offsetHeight"];j=l[!o?"offsetLeft":"offsetTop"];c=a[!o?"offsetWidth":"offsetHeight"];p=true;n(i);return false});m(document,"mousemove",function(i){n(i)});m(document,"mouseup",function(i){k.className=k.className.replace(/(^| )no-select( |$)/g,"");p=false});m(window,"resize",function(r){var i=a[!o?"offsetWidth":"offsetHeight"];a.style[!o?"left":"top"]=(((h/100)*l[!o?"offsetWidth":"offsetHeight"])-(i/2))+"px";p=false});function n(i){i=i||window.event;var r=!o?i.pageX:i.pageY;if(!r){r=!o?i.clientX+document.body.scrollLeft+document.documentElement.scrollLeft:i.clientY+document.body.scrollTop+document.documentElement.scrollTop}if(p&&r>=j&&r<=(j+q)){a.style[!o?"left":"top"]=(r-j-(c/2))+"px";h=Math.round(((r-j)/q)*100);d.drag(h)}}function b(){var i=a[!o?"offsetWidth":"offsetHeight"];h=((d.value/100)*l[!o?"offsetWidth":"offsetHeight"]);a.style[!o?"left":"top"]=(h-(i/2))+"px";d.drag(d.value)}l.appendChild(a);e.appendChild(l);b()};

var slider = document.getElementById('range-slider'),
    color = document.getElementById('hex-color-input'),
    preview = document.getElementById('preview-area');
rangeSlider(slider, {
    drag: function (v) {
        var lighter = colorLuminance(color.value, (v * 0.01)),
            darker = colorLuminance(color.value, -(v * 0.01));
        // Lighter...
        preview.children[0].style.backgroundColor = lighter;
        // Darker...
        preview.children[1].style.backgroundColor = darker;
        // Preview...
        preview.children[0].innerHTML = '<span>&uarr; ' + v + '% = ' + lighter + '</span>';
        preview.children[1].innerHTML = '<span>&darr; ' + v + '% = ' + darker + '<span>';
    }
}); 
2-نبحث(CTRL+F) عن الوسم ]]></b:skin> ونلصق الكود التالي فوقه مباشرة

 body {
    background-color:white;
    color:black;
    padding:30px;
}
#preview-area {
    height:100px;
    overflow:hidden;
}
#preview-area div {
    float:left;
    width:50%;
    height:inherit;
}
#preview-area div span {
    display:block;
    background-color:white;
}
p {
    display:block;
    margin:1em 0;
}
.range-slider {margin:0 auto 1em}
.range-slider-track {
  width:auto;
  height:20px;
  margin:0 auto;
  position:relative;
  cursor:e-resize;
}
.range-slider-track:before {
  content:"";
  display:block;
  position:absolute;
  top:9px;
  left:0;
  width:100%;
  height:2px;
  background-color:black;
}
.range-slider-track .dragger {
  display:block;
  width:10px;
  height:inherit;
  position:relative;
  z-index:2;
  background-color:red;
  cursor:inherit;
  /* opacity:.6; */
}
.range-slider-vertical {
  display:inline-block;
  vertical-align:middle;
  margin:0 1em 1em 0;
}
.range-slider-vertical .range-slider-track {
  cursor:n-resize;
  width:20px;
  height:100px;
}
.range-slider-vertical .range-slider-track:before {
  top:0;
  right:auto;
  left:9px;
  width:2px;
  height:100%;
}
.range-slider-vertical .range-slider-track .dragger {
  width:inherit;
  height:10px;
}
.no-select {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
 
3- نحفظ القالب ومبارك عليك
يمكنك تضمين محرر اﻷلوان في صفحة مستقلة او داخل مشاركاتك عبر محرر HTML باستخدام كود HTML التالي

 <div id="preview-area">
    <div></div>
    <div></div>
</div>
<p>Input:
    <input type="text" id="hex-color-input" value="#398" placeholder="#000000" />
</p>
<div id="range-slider"></div>
<div id="itempager" style="position:relative;"><a title="Variasi Blogger" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:35px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://sweup.com" target="_blank">&#9658;احصل عليها</a>
</div> 
معاينة حية  أدخل 6 خانات من الارقم والاحرف التالية (0,1,2,3,4,5,6,7,8,9,A,B,C,D,F,) وحرك السلايدر باللون اﻷحمر يسار ويمين لتحصل على درجات اللون الى هنا ينتهي درسنا وللحصول على جديدنا يمكنك الانضمام للمدونة من هنا واي مشاكل تواجهها يمكنك ترك تعليق أسفل التدوينة
الموضوع الاصلي /http://www.sweup.com/2014/09/hexa-encoding-color.html

هناك 3 تعليقات:

  1. اضافة رائعه شكرا على الطرح
    لكن لم افهم فائدتها للاسف

    ردحذف
    الردود
    1. ان كنت مصمم ويب فانت لابد ان تحتاج الى تضمين الوان في قالبك وهذه الاضافة من باب الاستغناء عن مواقع توليد الالوان بنظام HEXA

      حذف
    2. ممممم جيد جداً شكرا على ردك
      هيه ليست اضافة ضروريه كما اعتقد

      حذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية