jquery - horizontal - Obtener gradiente de color de fondo del elemento CSS3 con JS
css image background gradient (3)
Como apuntado, usa CSS Hooks para hacerlo.
Encontrará una muestra con sus necesidades aquí: http://www.webmuse.co.uk/articles/csshooks-in-jquery/ .
Por el momento, utilizo el siguiente JS (jQuery) para encontrar el color de fondo (como rgb) de varios otros divs:
$theColor = $(this).css("background-color");
Funciona perfectamente, excepto con degradados CSS3.
Como ejemplo, tengo el siguiente CSS para hacer que el fondo de un div parezca similar a una nota post-it:
background: #FFFAAD; /* old browsers */
background: -moz-linear-gradient(top, #FFFAAD 0%, #FFF47D 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFAAD), color-stop(100%,#FFF47D)); /* webkit */
background: gradient(linear, left top, left bottom, color-stop(0%,#FFFAAD), color-stop(100%,#FFF47D));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=''#FFFAAD'', endColorstr=''#FFF47D'',GradientType=0 ); /* ie */
jQuery no parece captar nada.
¿Cómo puedo usar jQuery para encontrar al menos uno de los colores utilizados en un gradiente css3? Soy relativamente nuevo en JS, así que por favor tengan paciencia conmigo ...
Gracias.
Puede extraer los colores utilizados en el degradado mirando la propiedad de background-image de fondo del elemento y luego extrayendo los colores listados. Aquí hay un ejemplo , está usando el ajuste de coincidencia de color CSS de esta publicación . Acabo de vincular el código al evento onclick de los elementos con el fondo:
$("div").bind("click", function() {
window.alert(''Background color: '' + ($(this).css(''background-color'')));
var re = /(#([0-9A-Fa-f]{3,6})/b)|(aqua)|(black)|(blue)|(fuchsia)|(gray)|(green)|(lime)|(maroon)|(navy)|(olive)|(orange)|(purple)|(red)|(silver)|(teal)|(white)|(yellow)|(rgb/(/s*/b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])/b/s*,/s*/b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])/b/s*,/s*/b([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])/b/s*/))|(rgb/(/s*(/d?/d%|100%)+/s*,/s*(/d?/d%|100%)+/s*,/s*(/d?/d%|100%)+/s*/))/g;
var colors = ($(this).css(''background-image'')).match(re);
for (var i=0; i < colors.length; i++) {
window.alert(''Gradient colour: '' + colors[i]);
}
});
Tenga en cuenta que el RegEx es para colores CSS2, por lo que no coincidirá con los rgba() o hsla() , pero debería ser posible extenderlo si es necesario.
Tendrá que crear un cssHook para gradiente (jQuery tiene, por ejemplo, un gancho implementado para opacidad ).
Ver: http://api.jquery.com/jQuery.cssHooks/
Como solicitó un código de ejemplo para recuperar los colores:
(function($){
if ( !$.cssHooks ){
//if not, output an error message
alert("jQuery 1.4.3 or above is required for this plugin to work");
return;
}
div = document.createElement( "div" ),
css = "background-image:gradient(linear,left top,right bottom, from(#9f9), to(white));background-image:-webkit-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-moz-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-o-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-ms-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:-khtml-gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:linear-gradient(left top,#9f9, white);background-image:-webkit-linear-gradient(left top,#9f9, white);background-image:-moz-linear-gradient(left top,#9f9, white);background-image:-o-linear-gradient(left top,#9f9, white);background-image:-ms-linear-gradient(left top,#9f9, white);background-image:-khtml-linear-gradient(left top,#9f9, white);";
div.style.cssText = css;
$.support.linearGradient =
div.style.backgroundImage.indexOf( "-moz-linear-gradient" ) > -1 ? ''-moz-linear-gradient'' :
(div.style.backgroundImage.indexOf( "-webkit-gradient" ) > -1 ? ''-webkit-gradient'' :
(div.style.backgroundImage.indexOf( "linear-gradient" ) > -1 ? ''linear-gradient'' : false));
if ( $.support.linearGradient)
{
$.cssHooks[''linearGradientColors''] = {
get: function(elem){
var currentStyle=$.css(elem, ''backgroundImage''),gradient,colors=[];
gradient=currentStyle.match(/gradient(/(.*/))/g);
if(gradient.length)
{
gradient=gradient[0].replace(/(linear|radial|from|/bto/b|gradient|top|left|bottom|right|/d*%)/g,'''');
colors= jQuery.grep(gradient.match(/(rgb/([^/)]+/)|#[a-z/d]*|[a-z]*)/g),function (s) { return jQuery.trim( s )!=''''})
}
return colors;
}
};
}
})(jQuery);
Como dije, es solo un ejemplo de cómo trabajar con cssHooks, no para uso de producción. Funciona para mí en ff, cromo, IE9, safari. Se puede encontrar una función de conjunto si sigue el enlace publicado por RickV.
Uso: $(''selector'').css(''linearGradientColors'')
Retorno: una matriz con los colores