{"id":31927,"date":"2017-08-04T03:01:29","date_gmt":"2017-08-03T17:01:29","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=31927"},"modified":"2017-08-04T07:05:19","modified_gmt":"2017-08-03T21:05:19","slug":"css3-filters-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-filters-primer-tutorial\/","title":{"rendered":"CSS3 Filters Primer Tutorial"},"content":{"rendered":"
\"CSS3<\/a>

CSS3 Filters Primer Tutorial<\/p><\/div>\n

It’s not just the image editor Gimp<\/a> that has “filters” as tools to create effects with image data (files), as you might see with tutorials like Gimp Decor Filters Revisit Tutorial<\/a>. These days, with CSS, and with CSS3<\/a> these days, there are some great “filters” to play around with, that modify an image there and then with CSS and\/or Javascript DOM (as per the HTML select “dropdown” element onchange<\/i> event logic …<\/p>\n


\nfunction selchange(selo) {
\n var bs=\"\";
\n if (selo == null) {
\n if (document.getElementById(\"sh-shadow\").value != \"\" && document.getElementById(\"sv-shadow\").value != \"\") {
\n if (document.getElementById(\"xblur\").value != \"\") bs+=document.getElementById(\"xblur\").value + document.getElementById(\"xblur\").title + \" \";
\n if (document.getElementById(\"sspread\").value != \"\") bs+=document.getElementById(\"sspread\").value + document.getElementById(\"sspread\").title + \" \";
\n \/\/alert(\"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + document.getElementById(\"sv-shadow\").value + document.getElementById(\"sv-shadow\").title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\");
\n document.getElementById(\"myimage\").style.filter = \"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + document.getElementById(\"sv-shadow\").value + document.getElementById(\"sv-shadow\").title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\";
\n document.getElementById(\"myimage\").style.WebkitFilter = \"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + document.getElementById(\"sv-shadow\").value + document.getElementById(\"sv-shadow\").title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\";
\n }
\n } else if (selo.id.substring(1) == 'h-shadow') {
\n if (document.getElementById(\"sv-shadow\").value != \"\") {
\n if (document.getElementById(\"xblur\").value != \"\") bs+=document.getElementById(\"xblur\").value + document.getElementById(\"xblur\").title + \" \";
\n if (document.getElementById(\"sspread\").value != \"\") bs+=document.getElementById(\"sspread\").value + document.getElementById(\"sspread\").title + \" \";
\n document.getElementById(\"myimage\").style.filter = \"drop-shadow(\" + selo.value + selo.title + \" \" + document.getElementById(\"sv-shadow\").value + document.getElementById(\"sv-shadow\").title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\";
\n document.getElementById(\"myimage\").style.WebkitFilter = \"drop-shadow(\" + selo.value + selo.title + \" \" + document.getElementById(\"sv-shadow\").value + document.getElementById(\"sv-shadow\").title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\";
\n }
\n } else if (selo.id.substring(1) == 'v-shadow') {
\n if (document.getElementById(\"sh-shadow\").value != \"\") {
\n if (document.getElementById(\"xblur\").value != \"\") bs+=document.getElementById(\"xblur\").value + document.getElementById(\"xblur\").title + \" \";
\n if (document.getElementById(\"sspread\").value != \"\") bs+=document.getElementById(\"sspread\").value + document.getElementById(\"sspread\").title + \" \";
\n \/\/alert(\"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + selo.value + selo.title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\");
\n document.getElementById(\"myimage\").style.filter = \"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + selo.value + selo.title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\";
\n document.getElementById(\"myimage\").style.WebkitFilter = \"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + selo.value + selo.title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\";
\n }
\n } else if (selo.id == 'xblur') {
\n if (document.getElementById(\"sh-shadow\").value != \"\" && document.getElementById(\"sv-shadow\").value != \"\") {
\n if (document.getElementById(\"xblur\").value != \"\") bs+=document.getElementById(\"xblur\").value + document.getElementById(\"xblur\").title + \" \";
\n if (document.getElementById(\"sspread\").value != \"\") bs+=document.getElementById(\"sspread\").value + document.getElementById(\"sspread\").title + \" \";
\n document.getElementById(\"myimage\").style.filter = \"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + document.getElementById(\"sv-shadow\").value + document.getElementById(\"sv-shadow\").title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\";
\n document.getElementById(\"myimage\").style.WebkitFilter = \"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + document.getElementById(\"sv-shadow\").value + document.getElementById(\"sv-shadow\").title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\";
\n }
\n } else if (selo.id.substring(1) == 'spread') {
\n if (document.getElementById(\"sh-shadow\").value != \"\" && document.getElementById(\"sv-shadow\").value != \"\") {
\n if (document.getElementById(\"xblur\").value != \"\") bs+=document.getElementById(\"xblur\").value + document.getElementById(\"xblur\").title + \" \";
\n if (document.getElementById(\"sspread\").value != \"\") bs+=document.getElementById(\"sspread\").value + document.getElementById(\"sspread\").title + \" \";
\n document.getElementById(\"myimage\").style.filter = \"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + document.getElementById(\"sv-shadow\").value + document.getElementById(\"sv-shadow\").title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\";
\n document.getElementById(\"myimage\").style.WebkitFilter = \"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + document.getElementById(\"sv-shadow\").value + document.getElementById(\"sv-shadow\").title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\";
\n }
\n } else {
\n document.getElementById(\"myimage\").style.filter = selo.id.substring(1) + \"(\" + selo.value + selo.title + \")\";
\n document.getElementById(\"myimage\").style.WebkitFilter = selo.id.substring(1) + \"(\" + selo.value + selo.title + \")\";
\n }
\n}
\n<\/code><\/p>\n

) … or jQuery means by which to make this happen with a lot of the modern web browsers. If you see “CSS3” mentioned, then don’t expect everything to work on super-old web browsers, but expect that anything you implement could be aesthetically interesting or pleasing, as it would not have taken until CSS3 to come along if it was a dead set simple thing to have implemented in the early days of the internet.<\/p>\n

Today’s simple (really) proof of concept web application owes a debt of gratitude to this very useful link<\/a>, which gave us the parameters by which we could construct today’s live run<\/a> with its pretty simple HTML and CSS (via CSS3) and Javascript DOM css_filters.html<\/a> source code for you to peruse, and make of what you will. So what (CSS3) filters are we talking about here?<\/p>\n