There are many facets of image manipulation that are now possible using HTML / CSS attributes that once were confined to specialist software. Recently I have had occasion to use the CSS "transform" property to match known shapes up with airborne images of missing aircraft parts floating in the sea. Yes, this gets quite sophisticated, as a plan 2d view has to be rotated and matched in 3d planes, including using the "perspective" property to see if a match is possible. Another source of image manipulation is that based by the current CSS "filter" selector, in which a multiple number of filters can be used in a CSS declaration to observe information contained within an image that otherwise would remain unseen. Available in the "filter" selector are the following functions:- filter: url() blur() brightness() contrast() drop-shadow() grayscale() hue-rotate() invert() opacity() saturate() sepia(); ... and they can be declared in a multiple statement - as above and as indicated by the "()" brackets as functions. I suggest you refer to:- https://developer.mozilla.org/en-US/docs/Web/CSS/filter ... where you will find details on how to declare those functions and the units they work with. In the meantime, I've created a test page which allows the dynamic implementation of six of those functions commonly used, so that a quick summation of how they work can be made by with input[range] slider selections:- http://countjustonce.com/test/css-rules.html This page will only render correctly when using an up to date version of the Firefox browser, and probably will in the other major browsers provided I spend some time adding vendor prefixes to a number of styles. Feel free to download the file and test it locally yourself. Any repeating image can be used, provided you change the existing "url('images/blue-grid.jpg)" in the #content:before CSS selector with a link to your image . You will be amazed with the combination of filters and their combined effects to the background image. To reset to the basic format, use Ctrl+F5 and you will note the input sliders will move to their preset positions. Barry

Barry, I've experimented with this, changed some of the format and uploaded my file. Viewing it in Firefox doesn't appear any different to IE or Chrome. What am I doing wrong? http://freepages.genealogy.rootsweb.ancestry.com/~boltongenealogy/bolton4.html Valerie On 13 October 2015 at 10:04, Barry Carlson via <[email protected]> wrote: > There are many facets of image manipulation that are now possible using > HTML / CSS attributes that once were confined to specialist software. > Recently I have had occasion to use the CSS "transform" property to > match known shapes up with airborne images of missing aircraft parts > floating in the sea. Yes, this gets quite sophisticated, as a plan 2d > view has to be rotated and matched in 3d planes, including using the > "perspective" property to see if a match is possible. > > Another source of image manipulation is that based by the current CSS > "filter" selector, in which a multiple number of filters can be used in > a CSS declaration to observe information contained within an image that > otherwise would remain unseen. Available in the "filter" selector are > the following functions:- > > filter: url() blur() brightness() contrast() drop-shadow() grayscale() > hue-rotate() invert() opacity() saturate() sepia(); > > ... and they can be declared in a multiple statement - as above and as > indicated by the "()" brackets as functions. > > I suggest you refer to:- > > https://developer.mozilla.org/en-US/docs/Web/CSS/filter > > ... where you will find details on how to declare those functions and > the units they work with. > > In the meantime, I've created a test page which allows the dynamic > implementation of six of those functions commonly used, so that a quick > summation of how they work can be made by with input[range] slider > selections:- > > http://countjustonce.com/test/css-rules.html > > This page will only render correctly when using an up to date version > of the Firefox browser, and probably will in the other major browsers > provided I spend some time adding vendor prefixes to a number of styles. > > Feel free to download the file and test it locally yourself. Any > repeating image can be used, provided you change the existing > "url('images/blue-grid.jpg)" in the #content:before CSS selector with a > link to your image . You will be amazed with the combination of filters > and their combined effects to the background image. To reset to the > basic format, use Ctrl+F5 and you will note the input sliders will move > to their preset positions. > > Barry > > > > ------------------------------- > To unsubscribe from the list, please send an email to > [email protected] with the word 'unsubscribe' without > the quotes in the subject and the body of the message >

My previous post on the CSS filters property provided a demonstration at:- http://freepages.rootsweb.ancestry.com/~bristowe/css-rules-valerie.html ... and I noted that it only operated correctly in Firefox 40+. Well, as I suspected the Chrome and Opera browsers came to life when the filter styles had the -webkit- vendor prefix added. The MS Edge browser was easier (though time consuming to detect the problem); being achieved by opening a new Tab and entering about:flags in the address field. The Experimental features has an "Enable CSS filter property" which needs to be "checked", and once done, close and reopen the browser. The MS Edge CSS filter properties are still experimental, and I have found there is a "zero value" bug in the opacity() function when the slider value is 0%. For some unknown reason it thinks it is 100%. A "work around" has been made to restrict its smallest value to 0.1% and it then behaves like the other browsers. In the following demo page the number of filters have been increased from 6 to 8 by adding the contrast() and brightness() functions. All these filter functions are now able to be "set" and then hidden, which allows the background-image to be captured by external software such as the FastStone Capture utility, or in Firefox the Awesome Screenshot add-on is an option. The "right-click" background-image Save function is not available in any of the browsers - for a very good reason; the background-image is in a "pseudo element" - #content::before, i.e. a fake or non existent element. Having "set" the filters and then hiding them by clicking on the [ hide ] link at the bottom of the displayed filters div, you can restore the filters again by clicking on the [ show ] link that will become visible if you hover the cursor pointer in the top left corner of the page. The filters can be reset to their default values using Ctrl+F5, and the slider movement is by dragging the slider thumb, or using the left/right keyboard arrows. Each slider thumb needs to be clicked on with the cursor to get the slider "in focus" for the arrow keys to recognise it, and the up/down keyboard arrows will also do the same job. http://freepages.rootsweb.ancestry.com/~bristowe/css-filter-functions.html or http://countjustonce.com/test/css-filter-functions.html A word about the saturate() function. Its default value is 100%, and when set to 0% the display is in grayscale, but at 200% the color saturation becomes excessive. With the background-image currently being used, a value of 140% gives an acceptable high saturation level. I haven't included a grayscale() function, as this can be achieved by setting saturation(0%) and adjusting contrast() and brightness() functions to suit. Similarly, the invert() function will provide an equally out of phase relationship when set to 50%; the result is grey [gray]. In the Firefox 40+ browser the F11 fullscreen mode will work correctly, but in MS Edge the fullscreen mode has not been implemented by Microsoft, and will be included as an early update to the browser. Barry

If you have Firebug addon for Firefox you can open the background image in a new tab and then save. Firebug is kind of like "View Source" on steroids. It opens an area below the page with the source in it. It has all sorts of neat features to help debug a webpage. On 10/18/2015 10:53 PM, Barry Carlson via wrote: > The "right-click" background-image Save function is > not available in any of the browsers - for a very good reason; the > background-image is in a "pseudo element" - #content::before, i.e. a > fake or non existent element. -- A cat is a puzzle with no solution. Cats are tiny little women in fur coats. When you get all full of yourself try giving orders to a cat. _ _... ..._ _ _._ ._ ..... ._.. ... .._

Hi I have a mail merge form as part of my website, and have only recently become aware of the fact that it is no longer works. Link to page with form below: http://freepages.history.rootsweb.ancestry.com/~cmahoney/Contact.htm The problem is with the Captcha screen that follows after clicking on the submit button, even though the correct text is being entered, I am just given a new Captcha screen. All I know is that there is currently one message in the file the form is supposed to change messages to, and that I have made no alterations to any of the files on this part of the website since that message was posted. Any suggestions as to what might be happening, and how to resolve it. Thanks