RootsWeb.com Mailing Lists
Total: 1/1
    1. Re: [FreeHelp] A Different Sort of Linear Background
    2. Barry Carlson
    3. Back in January 2012, I made mention of advances in CSS3 being implemented in Webkit browsers, i.e. Google Chrome, Safari and the Mac O/S browser Omniweb. I made the point that creating your own designed headings using the many special free fonts that can be found at sites such as - http://fontsquirrel.com - is truely possible. Up until recently web fonts could be colored, but not made transparent or receive any other type of fill such as an image. That has all changed, and without the aid of Photoshop you can create stunning headings that allow an image or a "linear/radial-gradient" design to be the "fill" for your font color. My original post can be found here:- http://archiver.rootsweb.com/th/read/Freepages-Help/2012-01/1326320003 A recent test page I made uses the CSS3 "radial-gradient" property to provide the fill for the Kingsthings Petrock font, and the same page uses a "radial-gradient / linear-gradient" background. Once again, if you are not using a recent Webkit browser, an image will be substituted for the CSS your browser doesn't understand, and you'll see a note to that effect. The "box-shadow" property has been implemented round the content div and the color of that shadow has been declared in rgba format, where the "a" is the alpha or opacity value that helps make the rendered shadow more realistic. http://countjustonce.com/css3-gradients.html If you check the code, you'll find I've used a mixture of color formats and have found the following site provides an easy to use generator capable of output in any of the standard formats. http://www.workwithcolor.com/hsl-color-picker-01.htm Finally, a complex graphic [TV Test Card] produced using HTML / CSS3 techniques results in a total page load of 2KB, and this includes a few extra bytes covering meta content plus keyword descriptions. Note there is no Javascript or jQuery in this final version, and the original table creating the white grid on a near black background has gone in favour of a "linear-gradient" background. This renders correctly in all the modern browsers including IE10, but progessively degrades (badly) in older versions of IE. Those of you who have IE9 installed will be able to click F12 and select the browser version from the top bar of the drop-down menu. You will note some differences as you go back to IE7. Don't forget to reselect IE9 after experimenting! However, the page uses some SSI browser detection and has provision to show a .png image if requested. Note, the image is not loaded during the page load, being loaded on clicking the 'View Image' button via an Iframe. http://countjustonce.com/test-pattern/index.html Whereas the same graphic captured as a .png image of 800 by 600 pixels and loaded into a basic HTML5 page, results in a total page load of about 48KB. Fit for all browsers :-) http://countjustonce.com/test-pattern/zl-image.html So its quite clear that images are costly regarding bandwidth, and a good quality mixed text and images PDF file will probably result in a page load about 10 times that of the same page using HTML / CSS. Barry

    05/24/2012 08:07:43