Dégradé bbcode sur un texte

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Dégradé bbcode sur un texte

Message par Ea le Mar 24 Juil 2012 - 21:02

gradé bbcode sur un texte


Voici une page permettant de faire un dégradé de couleur ou bien de taille en bbcode :

http://js01.fra.co/h2-

P
our l'utiliser, il suffit de rentrer la valeur de départ, d'arrivée et d'entrer la précision ( en choisissant un chiffre de précision plus grand, il y aura moins de balise mais ce sera moins précis ).


Vous pouvez utiliser le lien donné directement, ou bien mettre le code suivant sur une page html de votre forum ( si une correction de l'astuce devait être faite, elle ne serait effectuée que dans ce tutoriel et dans la page dont le lien est donné ci-dessus ) :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml" id="min-width" xml:lang="fr" lang="fr" dir="ltr">
  <head>
    <title>Dégradé bbcode sur un texte</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <style type="text/css">
body { font-family: Arial, sans-serif }
.title {
    font-size: 20px;
    border-bottom: 1px solid #aaa;
}
.content {
    font-size: 13px;
    color: #333;
    padding: 20px;
    overflow: hidden;
}
.content input { border: 1px solid #aaa }
.content textarea {
    border: 1px solid #aaa;
    width: 90%;
    height: 100px;
}
.miniColors-trigger {
    height: 22px;
    width: 22px;
    background: url(http://i.imgur.com/KKaXy.png) center no-repeat;
    vertical-align: middle;
    margin: 0 .25em;
    display: inline-block;
    outline: none;
}
.miniColors-selector {
    position: absolute;
    width: 175px;
    height: 150px;
    background: #FFF;
    border: solid 1px #BBB;
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, .25);
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .25);
    box-shadow: 0 0 6px rgba(0, 0, 0, .25);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 5px;
    z-index: 999999;
}
.miniColors-selector.black {
    background: #000;
    border-color: #000;
}
.miniColors-colors {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 150px;
    height: 150px;
    background: url(http://i.imgur.com/Ekxy2.png) center no-repeat;
    cursor: crosshair;
}
.miniColors-hues {
    position: absolute;
    top: 5px;
    left: 160px;
    width: 20px;
    height: 150px;
    background: url(http://i.imgur.com/JmyPi.png) center no-repeat;
    cursor: crosshair;
}
.miniColors-colorPicker {
    position: absolute;
    width: 11px;
    height: 11px;
    background: url(http://i.imgur.com/j36Lh.gif) center no-repeat;
}
.miniColors-huePicker {
    position: absolute;
    left: -3px;
    width: 26px;
    height: 3px;
    background: url(http://i.imgur.com/QJ574.gif) center no-repeat;
}
    </style>
    <script type="text/javascript">
jQuery && function(d) {
  d.extend(d.fn, {miniColors:function(k, i) {
    var B = function(a, b) {
      var e = l(a.val());
      e || (e = "ffffff");
      var c = r(e), g = d('<a class="miniColors-trigger" style="background-color: #' + e + '" href="#"></a>');
      g.insertAfter(a);
      a.addClass("miniColors").data("original-maxlength", a.attr("maxlength") || null).data("original-autocomplete", a.attr("autocomplete") || null).data("letterCase", "uppercase").data("trigger", g).data("hsb", c).data("change", b.change ? b.change : null).attr("maxlength", 7).attr("autocomplete", "off").val("#" + m(e, b.letterCase));
      b.readonly && a.prop("readonly", !0);
      b.disabled && s(a);
      g.bind("click.miniColors", function(b) {
        b.preventDefault();
        "" === a.val() && a.val("#");
        t(a)
      });
      a.bind("focus.miniColors", function() {
        "" === a.val() && a.val("#");
        t(a)
      });
      a.bind("blur.miniColors", function() {
        var b = l(a.val());
        a.val(b ? "#" + m(b, a.data("letterCase")) : "")
      });
      a.bind("keydown.miniColors", function(b) {
        9 === b.keyCode && j(a)
      });
      a.bind("keyup.miniColors", function() {
        o(a)
      });
      a.bind("paste.miniColors", function() {
        setTimeout(function() {
          o(a)
        }, 5)
      })
    }, s = function(a) {
      j(a);
      a.prop("disabled", !0).data("trigger").css("opacity", 0.5)
    }, t = function(a) {
      if(a.prop("disabled")) {
        return!1
      }
      j();
      var b = d('<div class="miniColors-selector"></div>');
      b.append('<div class="miniColors-colors" style="background-color: #FFF;"><div class="miniColors-colorPicker"></div></div>').append('<div class="miniColors-hues"><div class="miniColors-huePicker"></div></div>').css({top:a.is(":visible") ? a.offset().top + a.outerHeight() : a.data("trigger").offset().top + a.data("trigger").outerHeight(), left:a.is(":visible") ? a.offset().left : a.data("trigger").offset().left, display:"none"}).addClass(a.attr("class"));
      var e = a.data("hsb");
      b.find(".miniColors-colors").css("backgroundColor", "#" + p(n({h:e.h, s:100, b:100})));
      var c = a.data("colorPosition");
      c || (c = u(e));
      b.find(".miniColors-colorPicker").css("top", c.y + "px").css("left", c.x + "px");
      (c = a.data("huePosition")) || (c = v(e));
      b.find(".miniColors-huePicker").css("top", c.y + "px");
      a.data("selector", b).data("huePicker", b.find(".miniColors-huePicker")).data("colorPicker", b.find(".miniColors-colorPicker")).data("mousebutton", 0);
      d("BODY").append(b);
      b.fadeIn(100);
      b.bind("selectstart", function() {
        return!1
      });
      d(document).bind("mousedown.miniColors touchstart.miniColors", function(b) {
        a.data("mousebutton", 1);
        d(b.target).parents().andSelf().hasClass("miniColors-colors") && (b.preventDefault(), a.data("moving", "colors"), w(a, b));
        d(b.target).parents().andSelf().hasClass("miniColors-hues") && (b.preventDefault(), a.data("moving", "hues"), x(a, b));
        d(b.target).parents().andSelf().hasClass("miniColors-selector") ? b.preventDefault() : d(b.target).parents().andSelf().hasClass("miniColors") || j(a)
      });
      d(document).bind("mouseup.miniColors touchend.miniColors", function(b) {
        b.preventDefault();
        a.data("mousebutton", 0).removeData("moving")
      }).bind("mousemove.miniColors touchmove.miniColors", function(b) {
        b.preventDefault();
        1 === a.data("mousebutton") && ("colors" === a.data("moving") && w(a, b), "hues" === a.data("moving") && x(a, b))
      })
    }, j = function(a) {
      a || (a = ".miniColors");
      d(a).each(function() {
        var a = d(this).data("selector");
        d(this).removeData("selector");
        d(a).fadeOut(100, function() {
          d(this).remove()
        })
      });
      d(document).unbind(".miniColors")
    }, w = function(a, b) {
      var e = a.data("colorPicker");
      e.hide();
      var c = {x:b.pageX, y:b.pageY};
      b.originalEvent.changedTouches && (c.x = b.originalEvent.changedTouches[0].pageX, c.y = b.originalEvent.changedTouches[0].pageY);
      c.x = c.x - a.data("selector").find(".miniColors-colors").offset().left - 5;
      c.y = c.y - a.data("selector").find(".miniColors-colors").offset().top - 5;
      -5 >= c.x && (c.x = -5);
      144 <= c.x && (c.x = 144);
      -5 >= c.y && (c.y = -5);
      144 <= c.y && (c.y = 144);
      a.data("colorPosition", c);
      e.css("left", c.x).css("top", c.y).show();
      e = Math.round(0.67 * (c.x + 5));
      0 > e && (e = 0);
      100 < e && (e = 100);
      c = 100 - Math.round(0.67 * (c.y + 5));
      0 > c && (c = 0);
      100 < c && (c = 100);
      var d = a.data("hsb");
      d.s = e;
      d.b = c;
      q(a, d, !0)
    }, x = function(a, b) {
      var e = a.data("huePicker");
      e.hide();
      var c = {y:b.pageY};
      b.originalEvent.changedTouches && (c.y = b.originalEvent.changedTouches[0].pageY);
      c.y = c.y - a.data("selector").find(".miniColors-colors").offset().top - 1;
      -1 >= c.y && (c.y = -1);
      149 <= c.y && (c.y = 149);
      a.data("huePosition", c);
      e.css("top", c.y).show();
      e = Math.round(2.4 * (150 - c.y - 1));
      0 > e && (e = 0);
      360 < e && (e = 360);
      c = a.data("hsb");
      c.h = e;
      q(a, c, !0)
    }, q = function(a, b, e) {
      a.data("hsb", b);
      var c = p(n(b));
      e && a.val("#" + m(c, a.data("letterCase")));
      a.data("trigger").css("backgroundColor", "#" + c);
      a.data("selector") && a.data("selector").find(".miniColors-colors").css("backgroundColor", "#" + p(n({h:b.h, s:100, b:100})));
      a.data("change") && c !== a.data("lastChange") && (a.data("change").call(a.get(0), "#" + c, n(b)), a.data("lastChange", c))
    }, o = function(a) {
      a.val("#" + y(a.val()));
      var b = l(a.val());
      if(!b) {
        return!1
      }
      var b = r(b), e = a.data("hsb");
      if(b.h === e.h && b.s === e.s && b.b === e.b) {
        return!0
      }
      e = u(b);
      d(a.data("colorPicker")).css("top", e.y + "px").css("left", e.x + "px");
      a.data("colorPosition", e);
      e = v(b);
      d(a.data("huePicker")).css("top", e.y + "px");
      a.data("huePosition", e);
      q(a, b);
      return!0
    }, m = function(a, b) {
      return"lowercase" === b ? a.toLowerCase() : "uppercase" === b ? a.toUpperCase() : a
    }, u = function(a) {
      var b = Math.ceil(a.s / 0.67);
      0 > b && (b = 0);
      150 < b && (b = 150);
      a = 150 - Math.ceil(a.b / 0.67);
      0 > a && (a = 0);
      150 < a && (a = 150);
      return{x:b - 5, y:a - 5}
    }, v = function(a) {
      a = 150 - a.h / 2.4;
      0 > a && (h = 0);
      150 < a && (h = 150);
      return{y:a - 1}
    }, y = function(a) {
      return a.replace(/[^A-F0-9]/ig, "")
    }, l = function(a) {
      a = y(a);
      if(!a) {
        return null
      }
      3 === a.length && (a = a[0] + a[0] + a[1] + a[1] + a[2] + a[2]);
      return 6 === a.length ? a : null
    }, n = function(a) {
      var b, e, c;
      b = Math.round(a.h);
      var d = Math.round(255 * a.s / 100), a = Math.round(255 * a.b / 100);
      if(0 === d) {
        b = e = c = a
      }else {
        var d = (255 - d) * a / 255, f = (a - d) * (b % 60) / 60;
        360 === b && (b = 0);
        60 > b ? (b = a, c = d, e = d + f) : 120 > b ? (e = a, c = d, b = a - f) : 180 > b ? (e = a, b = d, c = d + f) : 240 > b ? (c = a, b = d, e = a - f) : 300 > b ? (c = a, e = d, b = d + f) : 360 > b ? (b = a, e = d, c = a - f) : c = e = b = 0
      }
      return{r:Math.round(b), g:Math.round(e), b:Math.round(c)}
    }, p = function(a) {
      var b = [a.r.toString(16), a.g.toString(16), a.b.toString(16)];
      d.each(b, function(a, c) {
        1 === c.length && (b[a] = "0" + c)
      });
      return b.join("")
    }, r = function(a) {
      var b = a, b = parseInt(-1 < b.indexOf("#") ? b.substring(1) : b, 16), a = b >> 16, d = (b & 65280) >> 8, b = b & 255, c = {h:0, s:0, b:0}, g = Math.min(a, d, b), f = Math.max(a, d, b), g = f - g;
      c.b = f;
      c.s = 0 !== f ? 255 * g / f : 0;
      c.h = 0 !== c.s ? a === f ? (d - b) / g : d === f ? 2 + (b - a) / g : 4 + (a - d) / g : -1;
      c.h *= 60;
      0 > c.h && (c.h += 360);
      c.s *= 100 / 255;
      c.b *= 100 / 255;
      0 === c.s && (c.h = 360);
      return c
    };
    switch(k) {
      case "readonly":
        return d(this).each(function() {
          d(this).hasClass("miniColors") && d(this).prop("readonly", i)
        }), d(this);
      case "disabled":
        return d(this).each(function() {
          d(this).hasClass("miniColors") && (i ? s(d(this)) : d(this).prop("disabled", !1).data("trigger").css("opacity", 1))
        }), d(this);
      case "value":
        if(void 0 === i) {
          if(!d(this).hasClass("miniColors")) {
            break
          }
          var z = d(this), A = l(z.val());
          return A ? "#" + m(A, z.data("letterCase")) : null
        }
        d(this).each(function() {
          d(this).hasClass("miniColors") && (d(this).val(i), o(d(this)))
        });
        return d(this);
      case "destroy":
        return d(this).each(function() {
          if(d(this).hasClass("miniColors")) {
            var a = d(this);
            j();
            a = d(a);
            a.data("trigger").remove();
            a.attr("autocomplete", a.data("original-autocomplete")).attr("maxlength", a.data("original-maxlength")).removeData().removeClass("miniColors").unbind(".miniColors");
            d(document).unbind(".miniColors")
          }
        }), d(this);
      default:
        return k || (k = {}), d(this).each(function() {
          "input" === d(this)[0].tagName.toLowerCase() && !d(this).data("trigger") && B(d(this), k, i)
        }), d(this)
    }
  }})
}(jQuery);
    </script>
    <script type="text/javascript">
var vcolor1 = {r:0, g:0, b:0}, vcolor2 = {r:0, g:0, b:0};
jQuery(function() {
  jQuery("#color1").miniColors({change:function(a, b) {
    vcolor1 = b;
    generate()
  }});
  jQuery("#color2").miniColors({change:function(a, b) {
    vcolor2 = b;
    generate()
  }});
  jQuery(".content input,.content textarea,.content select").change(function() {
    generate()
  });
  generate()
});
function color_dif(a, b) {
  return Math.abs(a.r - b.r) + Math.abs(a.g - b.g) + Math.abs(a.b - b.b)
}
function rgb_to_hex(a) {
  var b = "0123456789abcdef".split("");
  return b[Math.floor(a.r / 16)] + b[Math.floor(a.r % 16)] + b[Math.floor(a.g / 16)] + b[Math.floor(a.g % 16)] + b[Math.floor(a.b / 16)] + b[Math.floor(a.b % 16)]
}
function t_color(a, b, f) {
  return{r:Math.round(a.r + f * (b.r - a.r)), g:Math.round(a.g + f * (b.g - a.g)), b:Math.round(a.b + f * (b.b - a.b))}
}
function t_size(a, b, f) {
  return Math.round(a + f * (b - a))
}
function generate() {
  var a = jQuery("#src").val(), b = (a.match(/\s/g) || []).length;
  if(b = a.length - b) {
    var f = {}, h = {}, e;
    if(jQuery("#color-act").is(":checked")) {
      var g = jQuery("#color-sharp").val();
      h[0] = "[color=#" + rgb_to_hex(vcolor1) + "]";
      f[0] = '<span style="color:#' + rgb_to_hex(vcolor1) + '">';
      var c = vcolor1, d;
      for(e = 1;e < b;e++) {
        d = t_color(vcolor1, vcolor2, e / b), color_dif(d, c) >= g && (c = d, h[e] = "[/color][color=#" + rgb_to_hex(d) + "]", f[e] = '</span><span style="color:#' + rgb_to_hex(d) + '">')
      }
      h[b] = "[/color]"
    }else {
      g = jQuery("#size-sharp").val();
      c = parseInt(jQuery("#size1").val());
      d = parseInt(jQuery("#size2").val());
      h[0] = "[size=" + c + "]";
      f[0] = '<span style="font-size:' + c + 'px">';
      var i = c, j;
      for(e = 1;e < b;e++) {
        j = t_size(c, d, e / b), Math.abs(j - i) >= g && (i = j, h[e] = "[/size][size=" + j + "]", f[e] = '</span><span style="font-size:' + j + 'px">')
      }
      h[b] = "[/size]"
    }
    f[b] = "</span>";
    c = g = "";
    for(e = d = 0;d < b;) {
      (i = a.match(/^\s*/)[0].length) ? (g += a.substr(0, i), c += a.substr(0, i).replace(/\n/g, "<br>"), a = a.substr(i), e += i) : (h[d] && (g += h[d]), f[d] && (c += f[d]), g += a.substr(0, 1), c += a.substr(0, 1).replace(/&/g, "&amp;").replace(/</g, "<").replace(/>/g, ">"), a = a.substr(1), d += 1, e++)
    }
    h[d] && (g += h[d]);
    g += a;
    f[d] && (c += f[d]);
    c += a.replace(/\n/g, "<br>");
    jQuery("#result").val(g);
    jQuery("#dst").html(c)
  }else {
    jQuery("#result").val(""), jQuery("#dst").html("")
  }
};
    </script>
  </head>
  <body>
    <div id="content">
      <div id="color">
        <div class="title">Dégradé de couleur</div>
        <div class="content">
          <label>Activé <input type="checkbox" checked="checked" id="color-act" onclick="jQuery('#size-act').attr('checked','checked');jQuery('#size,#color').slideToggle(500);generate()" /></label> de <input type="text" id="color1" size="6" autocomplete="on" maxlength="10" value="#000000" /> à <input type="text" id="color2" size="6" autocomplete="on" maxlength="10" value="#000000" />avec une précision de
          <select id="color-sharp">
            <option value="1">1 couleur</option>
            <option value="2">2 couleurs</option>
            <option value="3">3 couleurs</option>
            <option value="4">4 couleurs</option>
            <option value="5">5 couleurs</option>
            <option value="10" selected="selected">10 couleurs</option>
            <option value="20">20 couleurs</option>
            <option value="30">30 couleurs</option>
            <option value="40">40 couleurs</option>
            <option value="50">50 couleurs</option>
            <option value="75">75 couleurs</option>
            <option value="100">100 couleurs</option>
            <option value="150">150 couleurs</option>
            <option value="200">200 couleurs</option>
            <option value="300">300 couleurs</option>
            <option value="400">400 couleurs</option>
            <option value="500">500 couleurs</option>
          </select>
        </div>
      </div>
      <div id="size" style="display:none">
        <div class="title">Dégradé de taille</div>
        <div class="content">
          <label>Activé <input type="checkbox" id="size-act" onclick="jQuery('#color-act').attr('checked','checked');jQuery('#size,#color').slideToggle(500);generate()" /></label> de
          <select id="size1">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="'4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12" selected="selected">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
          </select>
          à
          <select id="size2">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="'4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12" selected="selected">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
          </select>
          avec une précision de
          <select id="size-sharp">
            <option value="1">1 pixel</option>
            <option value="2">2 pixels</option>
            <option value="3">3 pixels</option>
            <option value="4">4 pixels</option>
            <option value="5">5 pixels</option>
            <option value="10">10 pixels</option>
          </select>
        </div>
      </div>
      <div class="title">
        Texte sur lequel agir
      </div>
      <div class="content">
        <textarea id="src"></textarea>
      </div>
      <div class="title">
        Résultat
      </div>
      <div class="content">
        <textarea id="result" readonly="true"></textarea>
      </div>
      <div class="title">
        Aperçu
      </div>
      <div class="content" id="dst"></div>
    </div>
  </body>
</html>


Ea
Aidactif
Aidactif

Messages : 23429
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum