Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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 - 8:02

gradé bbcode sur un texte


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


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>

avatar

Ea
Aidactif
Aidactif

Messages : 23536
Inscrit(e) le : 03/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