{"id":49892,"date":"2020-08-10T03:01:49","date_gmt":"2020-08-09T17:01:49","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=49892"},"modified":"2020-08-12T13:46:49","modified_gmt":"2020-08-12T03:46:49","slug":"css-gradient-creations-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-gradient-creations-tutorial\/","title":{"rendered":"CSS Gradient Creations Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Gradient Creations Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradientcreations.jpg\" title=\"CSS Gradient Creations Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Gradient Creations Tutorial<\/p><\/div>\n<p>The great CSS background &#8220;gradient&#8221; functionalities can come in four forms, those being &#8230;<\/p>\n<ul>\n<li>linear gradient (and repeating linear gradient)<\/li>\n<li>radial gradient (and repeating radial gradient)<\/li>\n<\/ul>\n<p> &#8230; as a means to add background interest, even to the point where the background can have some (different) transparency (level) compared to the foreground, <font color=blue>as per<\/font> example CSS like &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\nhtml::before {<br \/>\n background: <font color=blue>linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),<\/font>URL('\/\/www.rjmprogramming.com.au\/MyBusinessUnidad\/Welcome_files\/logo.jpg') repeat;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p>With tutorials like <a title='CSS Repeating Radial Gradients Primer Tutorial' href='#cssrrgpt'>CSS Repeating Radial Gradients Primer Tutorial<\/a> we allowed you to create some gradients, but we wanted a more detailed approach that was generic in its approach and left you with some CSS of use, which is often not the go with many other (albeit useful and inspiring) websites on the net.<\/p>\n<p>There are a whole range of what you might call &#8220;directional&#8221; nuances you can apply to your gradients.  There is opacity to allow for.  There are &#8220;hard colour stops&#8221; you can apply.  For linear gradients you can apply a variable angle.  For radial gradients there are positional nuances that can be applied.<\/p>\n<p>And then there are the colours.  We are not sure of the limits, but we allow for up to eight colours.  Enough to simulate the seven colours of the rainbow we go for with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradientcreations.jpg\" title=\"Tutorial picture\">tutorial picture<\/a> arrangement whereby it tweaked with us that the HTML input type=color elements are all well and good but we needed to allow our CSS be editable by nesting into an HTML div contenteditable=true elements that can be tweaked for exact rgb or rgba colour definitions (<a target=_blank title='Rainbow information from Wikipedia, thanks' href='https:\/\/simple.wikipedia.org\/wiki\/Rainbow'>thanks, Wikipedia<\/a>), as we could look up for the purposes of displaying a rainbow coloured gradient background (we hope you like)!<\/p>\n<p>Or see a repeating radial gradient example below &#8230;<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rrgc.jpg\" title=\"repeating radial gradient\" style=\"width:100%;\"><\/img><\/p>\n<p>So feel free to try our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.html_GETME\" title=\"gradient_creations.html\">gradient_creations.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradient_creations.html\" title=\"Click picture\">live run<\/a> link, to see what we mean.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-css-repeating-radial-gradients-primer-tutorial\/'>New CSS Repeating Radial Gradients Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cssrrgpt'>Previous relevant <a target=_blank title='CSS Repeating Radial Gradients Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/\"css-gradient-creations-tutorial\/'>&#8220;CSS Gradient Creations Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/radial_gradients.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Radial Gradients Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/radial_gradients.jpg\" title=\"CSS Radial Gradients Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Repeating Radial Gradients Primer Tutorial<\/p><\/div>\n<p>Way back when with <a title='HTML\/Javascript Canvas Rainbow Primer Tutorial' href='#html\/jcrpt'>HTML\/Javascript Canvas Rainbow Primer Tutorial<\/a> we talked about CSS <a target=_blank title='Linear gradients information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/linear-gradient'>linear gradients<\/a> and radial gradients in the one blog posting, but ever since then, it has so much more that linear gradients have been useful to us here at this blog.<\/p>\n<p>Today, though, we turn a bit of attention to radial gradients, specifically <a target=_blank title='Repeated radial gradients information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/repeating-radial-gradient'>repeated radial gradients<\/a>.<\/p>\n<p>We&#8217;ve got a simple web application to play around with them in terms of &#8230;<\/p>\n<ul>\n<li>ellipse versus circle<\/li>\n<li>coloured versus black and white<\/li>\n<li>extent keyword (closest-corner, closest-side, farthest-corner, farthest-side)<\/li>\n<\/ul>\n<p>Below is one example of the CSS &#8230;<\/p>\n<p><code><br \/>\n.circlefarthest-corner {<br \/>\n  background: repeating-radial-gradient(circle farthest-corner,<br \/>\n      red, black 5%, blue 5%, green 10%);<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Feel free to play away at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/radial_gradients.html\" title=\"Click picture\">live run<\/a> that has this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/radial_gradients.html_GETME\" title=\"radial_gradients.html\">radial_gradients.html<\/a> downloadable underlying HTML and CSS (and event logic Javascript that changes the HTML div element className property, to suit).<\/p>\n<hr>\n<p id='html\/jcrpt'>Previous relevant <a target=_blank title='HTML\/Javascript Canvas Rainbow Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-canvas-rainbow-primer-tutorial\/'>HTML\/Javascript Canvas Rainbow Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/canvasrainbow.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Canvas Rainbow Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/canvasrainbow.jpg\" title=\"HTML\/Javascript Canvas Rainbow Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Canvas Rainbow Primer Tutorial<\/p><\/div>\n<p>The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.<\/p>\n<p>In today&#8217;s tutorial we touch on a couple of the two dimensional Javascript functions to draw a rectangle or arc, but in the two dimensional context, canvas HTML elements can be used to draw text, lines, boxes and circles as well.  We also touch on two functions to create a <a target=_blank title='HTML canvas linear gradient' href='http:\/\/www.w3schools.com\/tags\/canvas_createlineargradient.asp'>linear<\/a> or <a target=_blank title='HTML canvas radial gradient' href='http:\/\/www.w3schools.com\/tags\/canvas_createradialgradient.asp'>radial<\/a> gradient to the fillStyle and\/or strokeStyle of your HTML element placed onto the canvas.<\/p>\n<p>You may want to read more at <a target=_blank title='HTML Canvas Reference' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>HTML Canvas Reference<\/a> as a generic reference, or here, at the tutorial <a target=_blank title='javascript - How do I add a simple onClick event handler to a canvas element? - Stack Overflow' href='http:\/\/stackoverflow.com\/questions\/9880279\/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element'>javascript &#8211; How do I add a simple onClick event handler to a canvas element? &#8211; Stack Overflow<\/a>.<\/p>\n<p>As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.<\/p>\n<p>Link to some downloadable HTML programming code &#8230; rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/canvasrainbow.html-GETME' title='canvasrainbow.html'>canvasrainbow.html<\/a>\n<\/p>\n<p>Here is a new link to some downloadable HTML programming source code explaining changes made (from <a target=_blank title='HTML\/Javascript Canvas Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=5539'>HTML\/Javascript Canvas Primer Tutorial<\/a>)  <a target=_blank title='canvasrainbow.html' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/canvasrainbow.html-GETME\">here<\/a>.<\/p>\n<p>You&#8217;ll notice heavy use of the Javascript <a target=_blank title='Javascript Math.random() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_random.asp'>Math.random()<\/a> function.<\/p>\n<p>We hope you enjoy this tutorial as a rainbow coloured <a target=_blank title='Canvas HTML element live run tutorial'  href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/canvasrainbow.html\">live run<\/a>.<\/p>\n<p>Yes &#8230; you&#8217;ve reached the end &#8230; have a top supportive rainbow coloured day!<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d5747' onclick='var dv=document.getElementById(\"d5747\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=59\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d5747' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d37372' onclick='var dv=document.getElementById(\"d37372\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d37372' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d49892' onclick='var dv=document.getElementById(\"d49892\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gradient\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49892' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The great CSS background &#8220;gradient&#8221; functionalities can come in four forms, those being &#8230; linear gradient (and repeating linear gradient) radial gradient (and repeating radial gradient) &#8230; as a means to add background interest, even to the point where the &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-gradient-creations-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[126,2442,281,3148,576,2020,997,2526,2527,1209,1319],"class_list":["post-49892","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-background","tag-contenteditable","tag-css","tag-gradient","tag-html","tag-linear-gradient","tag-programming","tag-radial-gradient","tag-repeated-radial-gradient","tag-style","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49892"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=49892"}],"version-history":[{"count":11,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49892\/revisions"}],"predecessor-version":[{"id":49937,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49892\/revisions\/49937"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=49892"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=49892"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=49892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}