{"id":31907,"date":"2017-08-23T03:01:30","date_gmt":"2017-08-22T17:01:30","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=31907"},"modified":"2017-08-02T14:10:56","modified_gmt":"2017-08-02T04:10:56","slug":"css-blend-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-blend-primer-tutorial\/","title":{"rendered":"CSS Blend Primer Tutorial"},"content":{"rendered":"
\"CSS<\/a>

CSS Blend Primer Tutorial<\/p><\/div>\n

We read a great website<\/a>, thanks, the other day, talking about CSS (multiple background, and other) “blending”, basically concerning behaviours that happen when two colours “overlap” in a webpage. This webpage talked about this in terms of your predictable HTML element types, and also with the canvas element introduced with HTML5, and for which we couldn’t be more keen, if we tried … and we’ve been told how trying we are … boom, boom!<\/font><\/p>\n

In this context, regarding canvas elements, we’d never used<\/b> …<\/p>\n


\nvar canvas = document.getElementById('canvas');
\nvar ctx = canvas.getContext('2d');
\nctx.globalCompositeOperation = 'multiply';<\/b>
\n<\/code><\/p>\n

Wow! Nala said.<\/font> Bow! I replied.<\/font> … Down, girl! Besides, shouldn’t you be curtsying?!<\/font><\/p>\n

And in that webpage, guess what caught my eye (sorry, Nala sees in black and white) was the Venn Diagram, and so, thought we’d try this technique on our own Venn Diagram application, that uses a canvas element, last talked about at HTML\/Javascript\/PHP Canvas Venn Diagram Import Tutorial<\/a> as shown below. It’s a subtle change that you can see play out with venn_diagram.html<\/a> (changed this way<\/a>), but we’re pleased that this functionality is “out there”, and hope ideas spring eternal from your cranium regarding ideas here. You can see this subtlety in play at the top and left parts of today’s tutorial picture<\/a>.<\/p>\n

So what’s with the mountains web application at the bottom right? Well, do you remember HTML\/CSS\/Javascript Sliding Menus Primer Tutorial<\/a>? It had an h1<\/i> heading. Well, we replace that h1<\/i> (by blanking its innerHTML<\/i> property using Javascript DOM) and put in another, mainly adding<\/b> new CSS as per<\/p>\n


\n@import url(https:\/\/fonts.googleapis.com\/css?family=Alegreya+Sans+SC:900);
\n<\/b>
\nbody {
\n background-color: #cdcdcd;
\n color: red;
\n text-align:center;
\n height: 600px;
\n
\n padding: 20;<\/b>
\n}
\n
\nheader {
\n padding: 120px 50px 170px;
\n background-size: cover;
\n}
\nheader h1 {
\n position: absolute;
\n top:10px;
\n left:0px;
\n z-index: -6;
\n font-family: 'Alegreya Sans SC', sans-serif;
\n font-size: 40px;
\n color: red;
\n opacity: 1.0;
\n mix-blend-mode: screen;<\/i>
\n padding: 0;
\n margin: 0;
\n width:100%;
\n text-align:center;
\n line-height: 0.5;
\n}
\n<\/b>
\n<\/code><\/p>\n

… into sliding_menus.html<\/a> (changed this way<\/a>), with the “star” line of (CSS) code “mix-blend-mode: screen;<\/i><\/b>“.<\/p>\n

Another important CSS thing to note here, to help “import” a Google<\/a> font, thanks, is the use of CSS “import” (that the Mac iWeb template based RJM Programming landing page<\/a> also makes use of) rule<\/a>s … okay?!<\/p>\n

\n

Previous relevant HTML\/Javascript\/PHP Canvas Venn Diagram Import Tutorial<\/a> is shown below.<\/p>\n

\"HTML\/Javascript\/PHP<\/a>

HTML\/Javascript\/PHP Canvas Venn Diagram Import Tutorial<\/p><\/div>\n

It’s been a year and a half since the last HTML\/Javascript Canvas Venn Diagram Email Tutorial<\/a> as shown below concerning our web application that can create online Venn Diagrams. On that last occasion we set up a system of sharing email communication regarding these Venn Diagrams, and the screenshot of that Venn Diagram took the form of an email body containing a link to an RJM Programming web server png<\/i> image file, effectively Exporting the Venn Diagram. With what we know now email possibilities involve …<\/p>\n