Forum : [Contribution] Génerateur de dégrader en css3

Un petit générateur de dégrader en css3. Seulement pour Webkit pour le moment. Je rajouterais le support des autres navigateurs plus tard.

[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js">
</script>

/Make by Raficraft/

/*Fonction Gradiant*/

        $.fn.Gradient = function(){                    
         var countInput = $(".gradient").length; 
         var orient = $('#orient option:selected').val();           
         var angle = $('input[name=angle]').val();           
         var arr =[];

      if (orient == 'left'){ var arr = ['-webkit-linear-gradient(left ']}
      else if (orient == 'top'){ var arr = ['-webkit-linear-gradient(top ']}
      else if (orient == 'radial'){var arr = ['-webkit-radial-gradient(center, ellipse cover'];} 
      else if (orient == 'diag'){var arr = ['-webkit-linear-gradient('+angle+'deg '];} 

      for (var i = 1; i<countInput+1; i++) {              

          color = $("input[name=gradient_color_"+i+"]").val();
          opacity = $("input[name=gradient_opacity_"+i+"]").val();

            var redHex = color.substring(1, 3);
            var greenHex = color.substring(3, 5);
            var blueHex = color.substring(5, 7);

            var redDec = parseInt(redHex, 16);
            var greenDec = parseInt(greenHex, 16);
            var blueDec = parseInt(blueHex, 16);

            var colorRgb = 'rgba(' + redDec + ', ' + greenDec + ', ' + blueDec + ', ' + opacity + ')';

          position = $("input[name=gradient_position_"+i+"]").val()+'%';

           Gradient = colorRgb+' '+position;

         arr[i] = Gradient;              

       }        

       cssGradient = arr.join(", ")+')';
       $("#text").text(cssGradient);
        $("#cible").css('background' , cssGradient);
     }

jQuery().ready(function(){

   /*Ajout d'un champs de degrader*/

 $(document).on("click", ".add_gradient", function(event){        
 event.preventDefault();
 idLink = $(this).attr('id');
 arrLink =  idLink.split('_');     
 posLink = arrLink[1];
 countInput = $(".gradient").length;
 forInput = parseInt(posLink) + 1 ;   
 hex = $(this).siblings(".gradient_H" ).val();
 opa  = $(this).siblings(".gradient_O" ).val();
 pos =  $(this).siblings(".gradient_P" ).val();

    $("#gradient_"+posLink+"").after("<div id=\"gradient_"+forInput+"\" class=\"gradient\"><input type=\"color\" class=\"gradient_H\" name=\"gradient_color_"+forInput+"\" value=\""+hex+"\"/><input type=\"text\" class=\"gradient_O\" name=\"gradient_opacity_"+forInput+"\" value=\""+opa+"\"/><input type=\"text\" class=\"gradient_P\" name=\"gradient_position_"+forInput+"\" value=\""+pos+"\"/><a href=\"\" id=\"add_"+forInput+"\" class=\"add_gradient\">+</a><a href=\"\" id=\"suppr_"+forInput+"\" class=\"suppr_gradient\">-</a></div>");                   

        /*Renommage des attribut des input*/   
           i= 0;
               $(".gradient").each(function(){  
           i++;  

                 $(this).attr({ id: "gradient_"+i+""  });
                 $(this).children(".gradient_H" ).attr({ name: "gradient_color_"+i+""  });
                 $(this).children(".gradient_O" ).attr({ name: "gradient_opacity_"+i+""  });
                 $(this).children(".gradient_P" ).attr({ name: "gradient_position_"+i+""  });
                 $(this).children(".add_gradient" ).attr({ id: "add_"+i+""  });
                 $(this).children(".suppr_gradient" ).attr({ id: "suppr_"+i+""  });

               });

  });  

        /*Suppression d'un champs de degrader*/

  $(document).on("click", ".suppr_gradient", function(event){           
 event.preventDefault();
 idLink = $(this).attr('id');
 arrLink =  idLink.split('_');     
 posLink = arrLink[1];

     $("#gradient_"+posLink+"").remove();

        /*Renommage des attribut des input*/   
           i= 0;
               $(".gradient").each(function(){  
           i++;  

                 $(this).attr({ id: "gradient_"+i+""  });
                 $(this).children(".gradient_H" ).attr({ name: "gradient_color_"+i+""  });
                 $(this).children(".gradient_O" ).attr({ name: "gradient_opacity_"+i+""  });
                 $(this).children(".gradient_P" ).attr({ name: "gradient_position_"+i+""  });
                 $(this).children(".add_gradient" ).attr({ id: "add_"+i+""  });
                 $(this).children(".suppr_gradient" ).attr({ id: "suppr_"+i+""  });

               });

$("#css_gradient").Gradient();
});

  //***Detecte les changements sur la liste d'input**/

   $("#css_gradient").change(function(event){  

        $("#css_gradient").Gradient();

   }).trigger('change');

});

</script>

</head>
<body>

<h1>Generateur de gradient CSS3. Pour navigateur Webkit.</h1>

<div id="css_gradient" style="float : left; margin : 20px; width : 100%;">
<select id='orient'>
<option value="left">horizontal</option>
<option value="top">vertical</option>
<option value="radial">radial</option>
<option value="diag">diagonal</option>

</select>
</br>
<label for="angle">Angle : </label><input type="text" name="angle"/>

<div id="gradient_1" class="gradient">
    <input type="color" class="gradient_H" name="gradient_color_1"/>
    <input type="text" class="gradient_O" name="gradient_opacity_1" value="1"/>
    <input type="text" class="gradient_P" name="gradient_position_1" value="0"/>
    <a href="" id="add_1" class="add_gradient">+</a>
    <a href="" id="suppr_1" class="suppr_gradient" style="display : none;">-</a>

</div>

<div id="gradient_2" class="gradient">
    <input type="color" class="gradient_H" name="gradient_color_2" value="#FFFFFF"/>
    <input type="text" class="gradient_O" name="gradient_opacity_2" value="1"/>
    <input type="text" class="gradient_P" name="gradient_position_2" value="100"/>
    <a href="" id="add_2" class="suppr_gradient" style="display : none;">-</a>
    <a href="" id="suppr_2" class="suppr_gradient" style="display : none;">-</a>

</div>

</div>

<div id ="text" 
     style="vertical-align: middle; min-height: 120px ;width : 700px; padding: 20px; float : left; border : 6px solid #000000; margin : 50px; clear : right; border-radius : 35px; -webkit-box-shadow: 0px 0px 10px 8px #9b9b9b;"></div>

</div>
</div>

[/code]

[Contribution] Génerateur de dégrader en css3

Aucune réponse