- This topic is empty.
-
AuthorPosts
-
November 15, 2012 at 10:00 pm #40830domestikaMember
I have a 3 column fluid site [wordpress template]
and I have added a grayscale filter to all my images. simple and effecting.
there are a couple of issues that I am having and can’t figure out. so here goes.
– i had to disable the filter in firefox as is was loading blank images that only showed upon rollover
– loads fine in chrome, but when the user begins to scroll, random images flicker blank.
– the contrast in safari is outta control. is there any way to bring this in line with how it looks in chrome?
i used a simple comment marker to disable the firefox filter.
.item-image img {
/*filter: url(filters.svg#grayscale);
filter: gray;
-moz-filter: grayscale(100%);
-moz-transition: all .5s ease;
-moz-backface-visibility:hidden;*/
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
-moz-appearancewebkit-transition: all .5s ease; /* Fade to color for Chrome and Safari */
-webkit-backface-visibility: hidden; /* Fix for transition flickering */
display:block;
opacity:0;
}.item-image img:hover {
filter: none;
-webkit-filter: grayscale(0%);
}November 16, 2012 at 10:18 am #114547Paulie_DMemberI have no idea but your filter properties are in the wrong order.
The un-prefixed version should ALWAYS be last.
November 16, 2012 at 11:11 am #114558Paulie_DMemberYeah…I had a feeling it was only Chrome (beta) that was using it at the moment.
November 19, 2012 at 7:17 pm #114808domestikaMemberHey thanks for all your feedback. it’s truly appreciated.
This is one area that is still a little new to me, so i am learning as i go.
i’ll post if i have success.
thanks guys!
November 19, 2012 at 8:06 pm #114812domestikaMemberSo, here is what i figured out that works best for me.
I fixed the SVG filter for firefox.
to resolve the issues i was having in safari [far too much contrast] and the image flickering in chrome i did this:
.item-image img {
/*-webkit-filter: grayscale(100%);/* Chrome 19+ & Safari 6+ */
/*-webkit-transition: all .5s ease; /* Fade to color for Chrome and Safari */
/*-webkit-backface-visibility: hidden; /* Fix for transition flickering */
/*-moz-filter: grayscale(100%);*/
/*-moz-transition: all .5s ease;
-moz-backface-visibility:hidden;
ABOVE IS NOt TO BE USED – CAUSES FLICKERING IN CHROME AND EXCESS CONTRAST IN SAFARI*/
-webkit-filter: grayscale(1);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray;
filter: url(filters.svg#grayscale);
display:block;
opacity:0;
}.item-image img:hover {
-webkit-filter: grayscale(0);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;
}it seems that i needed to use the older webkit filter instead of the newer – strange because all my browsers are the latest. but it’s working.
January 26, 2014 at 2:39 pm #161161vero1988ParticipantGoodnight,
I have a problem reading this thread I hope you can help me.
I am making an app based OS Firefox, Gecko and would like to make effects like: sepia color, brightness, contrast and border radius.
Right now I have running grayscale and opacity, but these four that I comment I fail to make them work, and I know that is the subject of SVG do not know to put on .css as I have not found a minimal example of this…
Then I leave a piece of code, which refers to the effects, if anyone could help me.
Regards and thanks.
HTML
Grayscale <input type=”range” name=”slider-1″ value=”0″ step=”25″ min=”0″ max=”100″ onchange=”setEffect(‘grayscale’, this.value)” …
Border Radius <input type=”range” name=”slider-2″ value=”0″ step=”1″ min=”0″ max=”4″ onchange=”setEffect(‘borderRadius’, this.value)” …
Sepia Colour <input class=”sepia” type=”range” name=”slider-2″ id=”slider-2″ value=”0″ step=”1″ min=”0″ max=”4″ onchange=”setEffect(‘sepia’, this.value)” …
Brightness <input class=”brightness” type=”range” name=”slider-3″ id=”slider-3″ value=”0″ step=”1″ min=”0″ max=”4″ onchange=”setEffect(‘brightness’, this.value)” …
Contrast <input class=”contrast” type=”range” name=”slider-4″ id=”slider-4″ value=”0″ step=”1″ min=”0″ max=”4″ onchange=”setEffect(‘contrast’, this.value)” …
CSS
.grayscale_low { -webkit-filter: grayscale(25%); -moz-filter: url(“filter/grayscale_low.svg”); /* Firefox 3.5+ /; -o-filter: grayscale(25%); -ms-filter: grayscale(25%); filter: grayscale(25%); filter: url(“data:image/svg+xml;utf8,#grayscale”); / Firefox 10+, Firefox on Android */ }
.grayscale_medium { -webkit-filter: grayscale(50%); -moz-filter: grayscale(50%); -o-filter: grayscale(50%); -ms-filter: grayscale(50%); filter: grayscale(50%); filter: url(“data:image/svg+xml;utf8,#grayscale”); /* Firefox 10+, Firefox on Android */ }
.grayscale_medium_high { -webkit-filter: grayscale(75%); -moz-filter: grayscale(75%); -o-filter: grayscale(75%); -ms-filter: grayscale(75%); filter: grayscale(75%); filter: url(“data:image/svg+xml;utf8,#grayscale”); /* Firefox 10+, Firefox on Android */ }
.grayscale_high { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); filter: url(“data:image/svg+xml;utf8,#grayscale”); /* Firefox 10+, Firefox on Android */ }
/* ———————————- * Sepia (Color Sepia) * ———————————- */
.sepia_low { -webkit-filter: sepia(25%); -moz-filter: sepia(25%); -o-filter: sepia(25%); -ms-filter: sepia(25%); filter: sepia(25%); }
.sepia_medium { -webkit-filter: sepia(50%); -moz-filter: sepia(50%); -o-filter: sepia(50%); -ms-filter: sepia(50%); filter: sepia(50%); }
.sepia_medium_high { -webkit-filter: sepia(75%); -moz-filter: sepia(75%); -o-filter: sepia(75%); -ms-filter: sepia(75%); filter: sepia(75%); }
.sepia_high { -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%); filter: sepia(100%); filter: url(filters.svg#sepia); }
/* ———————————- * Brightness(Brillo) * ———————————- */
.brightness_low { -webkit-filter: brightness(0.25); -moz-filter: brightness(0.25); -o-filter: brightness(0.25); -ms-filter: brightness(0.25); filter: brightness(0.25); }
.brightness_medium { -webkit-filter: brightness(0.5); -moz-filter: brightness(0.5); -o-filter: brightness(0.5); -ms-filter: brightness(0.5); filter: brightness(0.5); }
.brightness_medium_high { -webkit-filter: brightness(0.75); -moz-filter: brightness(0.75); -o-filter: brightness(0.75); -ms-filter: brightness(0.75); filter: brightness(0.75); }
.brightness_high { -webkit-filter: brightness(1); -moz-filter: brightness(1); -o-filter: brightness(1); -ms-filter: brightness(1); filter: brightness(1); filter: url(filters.svg#brightness); }
/* ———————————- * Contrast (Contraste) * ———————————- */
.contrast_low { -webkit-filter: contrast(125%); -moz-filter: contrast(125%); -o-filter: contrast(125%); -ms-filter: contrast(125%); filter: contrast(125%); }
.contrast_medium { -webkit-filter: contrast(150%); -moz-filter: contrast(150%); -o-filter: contrast(150%); -ms-filter: contrast(150%); filter: contrast(150%); }
.contrast_medium_high { -webkit-filter: contrast(175%); -moz-filter: contrast(175%); -o-filter: contrast(175%); -ms-filter: contrast(175%); filter: contrast(175%); }
.contrast_high { -webkit-filter: contrast(200%); -moz-filter: contrast(200%); -o-filter: contrast(200%); -ms-filter: contrast(200%); filter: contrast(200%); filter: url(filters.svg#contrast); }
/* ———————————- * Border Radius (Bordes redondeados) * ———————————- */
.borderRadius_low { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.borderRadius_medium { -webkit-border-radius: 5%; -moz-border-radius: 5%; border-radius: 5%; }
.borderRadius_medium_high { -webkit-border-radius: 10%; -moz-border-radius: 10%; border-radius: 10%; }
.borderRadius_high{ -webkit-border-radius: 15%; -moz-border-radius: 15%; border-radius: 15%; filter: url(filters.svg#borderradius); }
…
JS
function setEffect(effect, value){ $(‘#pickImage’).css(effect, value); // For Opacity
var classToApply = ""; switch(effect){ case 'grayscale': switch(value){ case '0': $("#pickImage").removeClass("grayscale_low"); break; case '25': classToApply = "grayscale_low"; $("#pickImage").removeClass("grayscale_medium"); break; case '50': classToApply = "grayscale_medium"; $("#pickImage").removeClass("grayscale_low"); $("#pickImage").removeClass("grayscale_medium_high"); break; case '75': classToApply = "grayscale_medium_high"; $("#pickImage").removeClass("grayscale_medium"); $("#pickImage").removeClass("grayscale_high"); break; case '100': classToApply = "grayscale_high"; $("#pickImage").removeClass("grayscale_medium_high"); break; } break; case 'sepia': switch(value){ case '0': $("#pickImage").removeClass("sepia_low"); break; case '1': classToApply = "sepia_low"; $("#pickImage").removeClass("sepia_medium"); break; case '2': classToApply = "sepia_medium"; $("#pickImage").removeClass("sepia_low"); $("#pickImage").removeClass("sepia_medium_high"); break; case '3': classToApply = "sepia_medium_high"; $("#pickImage").removeClass("sepia_medium"); $("#pickImage").removeClass("sepia_high"); break; case '4': classToApply = "sepia_high"; $("#pickImage").removeClass("sepia_medium_high"); break; } break; case 'brightness': switch(value){ case '0': $("#pickImage").removeClass("brightness_low"); break; case '1': classToApply = "brightness_low"; $("#pickImage").removeClass("brightness_medium"); break; case '2': classToApply = "brightness_medium"; $("#pickImage").removeClass("brightness_low"); $("#pickImage").removeClass("brightness_medium_high"); break; case '3': classToApply = "brightness_medium_high"; $("#pickImage").removeClass("brightness_medium"); $("#pickImage").removeClass("brightness_high"); break; case '4': classToApply = "brightness_high"; $("#pickImage").removeClass("brightness_medium_high"); break; } break; case 'contrast': switch(value){ case '0': $("#pickImage").removeClass("contrast_low"); break; case '1': classToApply = "contrast_low"; $("#pickImage").removeClass("contrast_medium"); break; case '2': classToApply = "contrast_medium"; $("#pickImage").removeClass("contrast_low"); $("#pickImage").removeClass("contrast_medium_high"); break; case '3': classToApply = "contrast_medium_high"; $("#pickImage").removeClass("contrast_medium"); $("#pickImage").removeClass("contrast_high"); break; case '4': classToApply = "contrast_high"; $("#pickImage").removeClass("contrast_medium_high"); break; } break; case 'borderRadius': switch(value){ case '0': $("#pickImage").removeClass("borderRadius_low"); break; case '1': classToApply = "borderRadius_low"; $("#pickImage").removeClass("borderRadius_medium"); break; case '2': classToApply = "borderRadius_medium"; $("#pickImage").removeClass("borderRadius_low"); $("#pickImage").removeClass("borderRadius_medium_high"); break; case '3': classToApply = "borderRadius_medium_high"; $("#pickImage").removeClass("borderRadius_medium"); $("#pickImage").removeClass("borderRadius_high"); break; case '4': classToApply = "borderRadius_high"; $("#pickImage").removeClass("borderRadius_medium_high"); break; } break; } console.log("Input effect: " + effect + "(" + value + ") -> classToApply: " + classToApply); $("#pickImage").addClass(classToApply);
}
January 27, 2014 at 6:51 am #161200vero1988ParticipantI’ve achieved the effects I work in the simulator which complements the Firefox browser. At issue is that the device did not work either. When I worked itself before grayscale and opacity … In App Manager not working me I like the effects required Gecko with url (…).
Anybody can tell me why it works in the simulator and not otherwise?
What if you can help me, code is updated in github: https://github.com/vero1988/CamAppImages
Thank you.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.