{"id":60708,"date":"2023-09-10T03:01:23","date_gmt":"2023-09-09T17:01:23","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=60708"},"modified":"2023-09-08T10:29:00","modified_gmt":"2023-09-08T00:29:00","slug":"css3-grid-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-grid-primer-tutorial\/","title":{"rendered":"CSS3 Grid Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/grid_bb_nine.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS3 Grid Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/grid_bb_nine.jpg\" title=\"CSS3 Grid Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS3 Grid Primer Tutorial<\/p><\/div>\n<p>Continuing on with some of the styling themes from <a title='CSS3 Multi Columns Primer Tutorial' href='#css3mcpt'>CSS3 Multi Columns Primer Tutorial<\/a>, today, we present a tutorial aboout CSS Grid Styling, primarily, thanking W3school&#8217;s excellent <a target=_blank href='https:\/\/www.w3schools.com\/css\/tryit.asp?filename=trycss_grid'>https:\/\/www.w3schools.com\/css\/tryit.asp?filename=trycss_grid<\/a> for ideas.<\/p>\n<p>The lesson is that HTML table element designs do not have to be the go, to display tabular datasets.  And there is the responsive design consideration where HTML table element arrangements sometimes fall down.  As you might expect, there are a myriad of CSS properties that come into play, and perhaps it is best for us to let you explore some possibilities playing around with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/grid_bb_nine.html_GETME\">&#8220;proof of concept&#8221; grid_bb_nine.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/grid_bb_nine.html\" title=\"Click picture\">Playing Around with Grids<\/a> web application also available, below &#8230;<\/p>\n<p><iframe style=\"width:100%;height:1200px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/grid_bb_nine.html\"><\/iframe><\/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\/css3-grid-primer-tutorial\/'>CSS3 Grid Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='css3mcpt'>Previous relevant <a target=_blank title='CSS3 Multi Columns Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css3-multi-columns-primer-tutorial\/'>CSS3 Multi Columns 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\/newspaper.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS3 Multi Columns Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/newspaper.jpg\" title=\"CSS3 Multi Columns Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS3 Multi Columns Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s &#8220;catch up&#8221; with <a target=_blank title='CSS3 information from w3schools' href='http:\/\/www.w3schools.com\/css\/css3_intro.asp'>CSS3<\/a> styling of web applications, adding onto yesterday&#8217;s <a title='CSS3 Border Image Primer Tutorial' href='#css3bipt'>CSS3 Border Image Primer Tutorial<\/a>, involves <a target=_blank title='Multi Columns CSS3 information' href='https:\/\/www.tutorialspoint.com\/css\/css3_multi_columns.htm'>Multi Columns<\/a> (thanks, TutorialsPoint) styling that does not require any work with the HTML table element.   Typically, what we are talking about here, is styling as you would find in a newspaper or magazine, set out in columns.<\/p>\n<p>To do the research on this we took and added Javascript DOM thoughts to the code at the Tutorial Points webpage above to end up with (a proof of concept) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/newspaper.html\" title='Click picture'>live run<\/a>&#8216;s HTML and CSS<font size=1>3<\/font> and Javascript DOM &#8220;make it dynamic&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/newspaper.html_GETME\" title='newspaper.html'>newspaper.html<\/a> source code.<\/p>\n<p>We are going to illustrate this dynamism below as well to show you a Javascript DOM approach to changing the styling properties (randomly) &#8230;<\/p>\n<ul>\n<li>column-count<font color=blue><span id='column_count'>: 4;<\/span><\/font><\/li>\n<li>column-gap<font color=blue><span id='column_gap'>: 40px;<\/span><\/font><\/li>\n<li>column-rule-style<font color=blue><span id='column_rule_style'>: solid;<\/span><\/font><\/li>\n<\/ul>\n<div id=\"newspaperdiv\" class=\"multi\" onload=\"testofdiv(this);\" style=\"color:blue; width:100%; -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid;\">\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo nibh et aliquet molestie. Phasellus vehicula arcu ut convallis facilisis. Etiam interdum mollis massa, dapibus sollicitudin sem condimentum a. Aliquam viverra enim eget faucibus vulputate. Suspendisse cursus magna a ultricies finibus. Phasellus at eros aliquam, iaculis sem at, pharetra dui. Praesent scelerisque tellus leo, ac consequat ante convallis sit amet. In libero tellus, luctus sit amet velit quis, laoreet mollis urna. Aliquam aliquet tristique pharetra. Praesent quis cursus mauris. Etiam a ipsum euismod, rutrum erat vel, tincidunt enim. Sed a lorem magna. Sed odio libero, ultricies in nibh a, rutrum venenatis nisi. Pellentesque aliquet nibh augue, eget congue ante rhoncus sed. Maecenas ut ante nec erat scelerisque rutrum. Curabitur at lacinia velit, non ultricies ante.<\/p>\n<p>Nam tortor nisi, porttitor eget tincidunt eu, faucibus in libero. Maecenas sed nulla non sapien facilisis porta semper eu neque. Aliquam imperdiet purus consectetur bibendum vehicula. Nam risus ex, iaculis eget lorem in, fermentum tempor augue. Aliquam semper viverra neque, nec finibus arcu porta sit amet. Proin sollicitudin risus et magna condimentum, ut vestibulum lacus euismod. Nulla eu mattis enim. Praesent ultrices faucibus tortor, eget scelerisque ante faucibus vel. Proin ullamcorper nulla ut tellus cursus blandit. Duis mattis vestibulum sem. Fusce laoreet enim quis nunc egestas, ultricies finibus orci cursus. Nam auctor eros faucibus orci scelerisque viverra. Quisque at diam fermentum mauris venenatis elementum. Integer lobortis dolor sed rutrum varius. Duis non odio massa.<\/p>\n<p>Aliquam erat volutpat. Nunc ante turpis, vehicula et scelerisque sed, tincidunt eu metus. Aliquam ut augue tincidunt, lobortis lectus commodo, sagittis nunc. Fusce mattis elit maximus, ullamcorper justo quis, varius nisi. Donec risus orci, fringilla non posuere at, laoreet ac ligula. Phasellus molestie, tortor in porttitor euismod, tellus lacus convallis lacus, nec condimentum sapien nisl quis sapien. Duis iaculis dolor turpis, et feugiat dui commodo quis. Proin vehicula accumsan sapien vitae facilisis. Morbi et dignissim odio, volutpat posuere sem. Vestibulum interdum feugiat enim vel molestie.<\/p>\n<p>Proin sit amet dolor quis mi maximus eleifend at et enim. Cras nec augue massa. Mauris nec nisi quis arcu ullamcorper commodo. Donec molestie leo varius mi dignissim pretium. Integer eu metus quis sapien dignissim ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi tristique dui ac pretium vestibulum. Duis maximus, tortor et sodales sagittis, ante nulla mattis felis, sit amet sollicitudin orci nisi a eros. Curabitur ac nibh condimentum risus euismod vulputate sed non felis. Vivamus eget purus interdum, euismod nisi sed, maximus ante. Nam magna erat, condimentum id posuere vel, suscipit vel ante. Praesent vel faucibus tortor. Cras sit amet nulla tempus, ultricies velit tristique, interdum tellus. Mauris in commodo orci. Pellentesque sapien libero, tempus in tincidunt nec, accumsan id sem.\n<\/p><\/div>\n<p><script type='text\/javascript'>\n         function testofdiv() {\n          var odiv=document.getElementById('newspaperdiv');\n          if (odiv != null) {\n            var crs=['solid','dotted','dashed','double','groove','ridge','inset','outset'];\n            var ourcc=eval(Math.floor(Math.random() * 7) + 1);\n            document.getElementById('column_count').innerHTML=': ' + ourcc + ';';\n            var ourcg='' + eval(Math.floor(Math.random() * 80) + 10) + 'px';\n            document.getElementById('column_gap').innerHTML=': ' + ourcg + ';';\n            odiv.style.columnCount=ourcc;\n            odiv.style.columnGap=ourcg;\n            var documenttitle=crs[Math.floor(Math.random() * crs.length)];\n            document.getElementById('column_rule_style').innerHTML=': ' + documenttitle + ';';\n            odiv.style.columnRuleStyle='' + documenttitle;\n            setTimeout(testofdiv,2000);\n          }\n         }\n\t\t testofdiv();\n<\/script><\/p>\n<p>Food for thought, we hope?!<\/p>\n<hr>\n<p id='css3bipt'>Previous relevant <a target=_blank title='CSS3 Border Image Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-border-image-primer-tutorial\/'>CSS3 Border Image 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\/border_image.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS3 Border Image Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/border_image.jpg\" title=\"CSS3 Border Image Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS3 Border Image Primer Tutorial<\/p><\/div>\n<p>Adding to our recent <a title='CSS3 Filters Primer Tutorial' href='#css3fpt'>CSS3 Filters Primer Tutorial<\/a>, today, we&#8217;d like to delve further into the great things <a target=_blank title='CSS3 information from w3schools' href='http:\/\/www.w3schools.com\/css\/css3_intro.asp'>CSS3<\/a> brought to the client side &#8220;aesthetics&#8221; of web application work.  Today&#8217;s &#8220;proof of concept&#8221; web application&#8217;s topic is <i>border images<\/i>.  How often when developing a webpage or blog post via HTML, if you are into that kind of <strike>thang<\/strike>thing, have you wanted to enhance something and make it stand out, but were satisfied enough with its content?  Lots, I&#8217;d imagine, and perhaps you put a <i>normal<\/i> border around it from the CSS days.   That can be impactive, and there are lots of styling choices here.  But what if you wanted to &#8220;theme&#8221; the content via the &#8220;look&#8221; of its border?  You can pattern a normal border via dashed and dotted styles, and other methods, but unless the content is about Morse Code, or some such content, it is unlikely there, that you have &#8220;themed&#8221; your content to align with the &#8220;look&#8221; of your border.  That is where CSS3&#8217;s <i>border images<\/i> can come to the fore.  Today, we don&#8217;t &#8220;theme&#8221; and match with the &#8220;look&#8221;, as we just try to make things &#8220;stand out&#8221;, and this can be good with these <i>border image<\/i> styling approaches too.<\/p>\n<p>Researching this topic, we lobbed onto the great resource that <a target=_blank title='TutorialsPoint' href='https:\/\/www.tutorialspoint.com\/css\/css3_boarder_image.htm'>TutorialsPoint<\/a> provides and based our HTML and CSS<font size=1>3<\/font> and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/border_image.html\" title='Click picture'>live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/border_image.html_GETME\" title='border_image.html'>border_image.html<\/a> source code off their example code, so thanks.<\/p>\n<p>You&#8217;ll see the <b>border image<\/b> CSS<font size=1>3<\/font> parts to this proof of concept code below &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n         #borderimg1 {<br \/>\n            border: 10px solid transparent;<br \/>\n            padding: 15px;<br \/>\n            <b>border-image-source: url(body_systems.jpg);<br \/>\n            border-image-repeat: round;<br \/>\n            border-image-slice: 30;<br \/>\n            border-image-width: 10px;<\/b><br \/>\n            height:150px;<br \/>\n            background-color: yellow;<br \/>\n            text-align: center;<br \/>\n         }<br \/>\n         #borderimg2 {<br \/>\n            border: 10px solid transparent;<br \/>\n            padding: 15px;<br \/>\n            <b>border-image-source: url(body_systems.jpg);<br \/>\n            border-image-repeat: round;<br \/>\n            border-image-slice: 30;<br \/>\n            border-image-width: 20px;<\/b><br \/>\n            height:150px;<br \/>\n            background-color: yellow;<br \/>\n            text-align: center;<br \/>\n         }<br \/>\n         #borderimg3 {<br \/>\n            border: 10px solid transparent;<br \/>\n            padding: 15px;<br \/>\n            <b>border-image-source: url(body_systems.jpg);<br \/>\n            border-image-repeat: round;<br \/>\n            border-image-slice: 30;<br \/>\n            border-image-width: 30px;<\/b><br \/>\n            height:150px;<br \/>\n            background-color: yellow;<br \/>\n            text-align: center;<br \/>\n         }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; which sets up the &#8220;static&#8221; first up scenario, but to add some randomness into the web application workings, we use some Javascript DOM (kicked off via a document.body <i>onload<\/i> event call and then perpetuated by good ol&#8217; <a target=_blank title='Javascript setTimeout() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> method calls) as below to make the web application more dynamic, using images used with our &#8220;one image webpage&#8221; <a target=_blank title='Ephemeral' href='http:\/\/www.rjmprogramming.com.au\/ephemeral'>Ephemeral<\/a> &#8230;<\/p>\n<p><code><br \/>\n function randomize() {<br \/>\n   var choice=Math.floor(Math.random() * border_images.length);<br \/>\n   <b>document.getElementById('borderimg1').style.borderImageSource=\"url(\" + border_images[choice] + \")\";<\/b><br \/>\n   choice=Math.floor(Math.random() * 100);<br \/>\n   <b>document.getElementById('borderimg1').style.borderImageWidth='' + choice + 'px';<\/b><br \/>\n   choice=Math.floor(Math.random() * 100);<br \/>\n   <b>document.getElementById('borderimg1').style.borderImageSlice='' + choice;<\/b><br \/>\n   document.getElementById('borderimg1').style.backgroundColor='rgba(' + Math.floor(Math.random() * 256) + \",\" + Math.floor(Math.random() * 256) + \",\" + Math.floor(Math.random() * 256) + \",\" + eval(Math.floor(Math.random() * 10) \/ 10) + \")\";<br \/>\n   choice=Math.floor(Math.random() * border_images.length);<br \/>\n   <b>document.getElementById('borderimg2').style.borderImageSource=\"url(\" + border_images[choice] + \")\";<\/b><br \/>\n   choice=Math.floor(Math.random() * 100);<br \/>\n   <b>document.getElementById('borderimg2').style.borderImageWidth='' + choice + 'px';<\/b><br \/>\n   choice=Math.floor(Math.random() * 100);<br \/>\n   <b>document.getElementById('borderimg2').style.borderImageSlice='' + choice;<\/b><br \/>\n   document.getElementById('borderimg2').style.backgroundColor='rgba(' + Math.floor(Math.random() * 256) + \",\" + Math.floor(Math.random() * 256) + \",\" + Math.floor(Math.random() * 256) + \",\" + eval(Math.floor(Math.random() * 10) \/ 10) + \")\";<br \/>\n   choice=Math.floor(Math.random() * border_images.length);<br \/>\n   <b>document.getElementById('borderimg3').style.borderImageSource=\"url(\" + border_images[choice] + \")\";<\/b><br \/>\n   choice=Math.floor(Math.random() * 100);<br \/>\n   <b>document.getElementById('borderimg3').style.borderImageWidth='' + choice + 'px';<\/b><br \/>\n   choice=Math.floor(Math.random() * 100);<br \/>\n   <b>document.getElementById('borderimg3').style.borderImageSlice='' + choice;<\/b><br \/>\n   document.getElementById('borderimg3').style.backgroundColor='rgba(' + Math.floor(Math.random() * 256) + \",\" + Math.floor(Math.random() * 256) + \",\" + Math.floor(Math.random() * 256) + \",\" + eval(Math.floor(Math.random() * 10) \/ 10) + \")\";<br \/>\n   <i>setTimeout(randomize, 5000);<\/i><br \/>\n }<br \/>\n<\/code><\/p>\n<p>We hope this &#8220;aesthetic&#8221; is something you might be interested in applying, on occasions, to your blog postings or webpages yourself.<\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank  href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-border-image-primer-tutorial\/'>CSS3 Border Image Primer Tutorial<\/a>.<\/p>\n<hr>\n<p id='css3fpt'>Previous relevant <a target=_blank title='CSS3 Filters Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-filters-primer-tutorial\/'>CSS3 Filters 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\/css_filters.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS3 Filters Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_filters.jpg\" title=\"CSS3 Filters Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS3 Filters Primer Tutorial<\/p><\/div>\n<p>It&#8217;s not just the image editor <a target=_blank title='Gimp image editor' href='http:\/\/www.gimp.org\/'>Gimp<\/a> that has &#8220;filters&#8221; as tools to create effects with image data (files), as you might see with tutorials like <a title='Gimp Decor Filters Revisit Tutorial' href='#gdfrt'>Gimp Decor Filters Revisit Tutorial<\/a>.  These days, with CSS, and with <a target=_blank title='CSS3 information from w3schools' href='http:\/\/www.w3schools.com\/css\/css3_intro.asp'>CSS3<\/a> these days, there are some great &#8220;filters&#8221; to play around with, that modify an image there and then with CSS and\/or Javascript DOM (as per the HTML select &#8220;dropdown&#8221; element <i>onchange<\/i> event logic &#8230;<\/p>\n<p><code><br \/>\nfunction selchange(selo) {<br \/>\n  var bs=\"\";<br \/>\n  if (selo == null) {<br \/>\n  if (document.getElementById(\"sh-shadow\").value != \"\" && document.getElementById(\"sv-shadow\").value != \"\") {<br \/>\n  if (document.getElementById(\"xblur\").value != \"\") bs+=document.getElementById(\"xblur\").value + document.getElementById(\"xblur\").title + \" \";<br \/>\n  if (document.getElementById(\"sspread\").value != \"\") bs+=document.getElementById(\"sspread\").value + document.getElementById(\"sspread\").title + \" \";<br \/>\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 + \")\");<br \/>\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 + \")\";<br \/>\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 + \")\";<br \/>\n  }<br \/>\n  } else if (selo.id.substring(1) == 'h-shadow') {<br \/>\n  if (document.getElementById(\"sv-shadow\").value != \"\") {<br \/>\n  if (document.getElementById(\"xblur\").value != \"\") bs+=document.getElementById(\"xblur\").value + document.getElementById(\"xblur\").title + \" \";<br \/>\n  if (document.getElementById(\"sspread\").value != \"\") bs+=document.getElementById(\"sspread\").value + document.getElementById(\"sspread\").title + \" \";<br \/>\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 + \")\";<br \/>\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 + \")\";<br \/>\n  }<br \/>\n  } else if (selo.id.substring(1) == 'v-shadow') {<br \/>\n  if (document.getElementById(\"sh-shadow\").value != \"\") {<br \/>\n  if (document.getElementById(\"xblur\").value != \"\") bs+=document.getElementById(\"xblur\").value + document.getElementById(\"xblur\").title + \" \";<br \/>\n  if (document.getElementById(\"sspread\").value != \"\") bs+=document.getElementById(\"sspread\").value + document.getElementById(\"sspread\").title + \" \";<br \/>\n  \/\/alert(\"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + selo.value + selo.title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\");<br \/>\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 + \")\";<br \/>\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 + \")\";<br \/>\n  }<br \/>\n  } else if (selo.id == 'xblur') {<br \/>\n  if (document.getElementById(\"sh-shadow\").value != \"\" && document.getElementById(\"sv-shadow\").value != \"\") {<br \/>\n  if (document.getElementById(\"xblur\").value != \"\") bs+=document.getElementById(\"xblur\").value + document.getElementById(\"xblur\").title + \" \";<br \/>\n  if (document.getElementById(\"sspread\").value != \"\") bs+=document.getElementById(\"sspread\").value + document.getElementById(\"sspread\").title + \" \";<br \/>\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 + \")\";<br \/>\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 + \")\";<br \/>\n  }<br \/>\n  } else if (selo.id.substring(1) == 'spread') {<br \/>\n  if (document.getElementById(\"sh-shadow\").value != \"\" && document.getElementById(\"sv-shadow\").value != \"\") {<br \/>\n  if (document.getElementById(\"xblur\").value != \"\") bs+=document.getElementById(\"xblur\").value + document.getElementById(\"xblur\").title + \" \";<br \/>\n  if (document.getElementById(\"sspread\").value != \"\") bs+=document.getElementById(\"sspread\").value + document.getElementById(\"sspread\").title + \" \";<br \/>\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 + \")\";<br \/>\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 + \")\";<br \/>\n  }<br \/>\n  } else {<br \/>\n  document.getElementById(\"myimage\").style.filter = selo.id.substring(1) + \"(\" + selo.value + selo.title + \")\";<br \/>\n  document.getElementById(\"myimage\").style.WebkitFilter = selo.id.substring(1) + \"(\" + selo.value + selo.title + \")\";<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>) &#8230; or jQuery means by which to make this happen with a lot of the modern web browsers.  If you see &#8220;CSS3&#8221; mentioned, then don&#8217;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<p>Today&#8217;s simple (really) proof of concept web application owes a debt of gratitude to this <a target=_blank title='https:\/\/www.w3schools.com\/cssref\/css3_pr_filter.asp' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_filter.asp'>very useful link<\/a>, which gave us the parameters by which we could construct today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_filters.html\" title='Click picture'>live run<\/a> with its pretty simple HTML and CSS (via CSS3) and Javascript DOM <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_filters.html_GETME\" title=\"css_filters.html\">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<ul>\n<li>blur(px)<\/li>\n<li>brightness(%)<\/li>\n<li>contrast(%)<\/li>\n<li>drop-shadow(h-shadow v-shadow blur spread color)<\/li>\n<li>grayscale(%)<\/li>\n<li>hue-rotate(deg)<\/li>\n<li>invert(%)<\/li>\n<li>opacity(%)<\/li>\n<li>saturate(%)<\/li>\n<li>sepia(%)<\/li>\n<\/ul>\n<p> &#8230; which are mostly self explanatory we hope.  Let&#8217;s just say you&#8217;re me &#8230; &#8220;You&#8217;re me.&#8221; &#8230; ta &#8230; please explain &#8220;drop shadow&#8221; &#8230; oh &#8230; you mean &#8230; me?<\/p>\n<blockquote cite=\"https:\/\/en.wikipedia.org\/wiki\/Drop_shadow\"><p>\nIn graphic design, a drop shadow is a visual effect consisting of a drawing element which looks like the shadow of an object, giving the impression that the object is raised above the objects behind it.\n<\/p><\/blockquote>\n<p> &#8230; thanks, <a target=_blank title='Drop shadow information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Drop_shadow'>Wikipedia<\/a>.<\/p>\n<p>As you can imagine, this opening up of this functionality to the client-side web developer opens up lots of opportunities to make your webpages stand out.<\/p>\n<hr>\n<p id='gdfrt'>Previous relevant <a target=_blank title='Gimp Decor Filters Revisit Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-decor-filters-revisit-tutorial\/'>Gimp Decor Filters Revisit Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_decor.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Gimp Decor Filters Revisit Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/gimp_decor.jpg\" title=\"Gimp Decor Filters Revisit Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Gimp Decor Filters Revisit Tutorial<\/p><\/div>\n<p>Today we return to the wonderful, marvellous and stupendous <a target=_blank title='Gimp image editor' href='http:\/\/www.gimp.org\/'>Gimp<\/a> image editor and examine some more of its filters, following up on concepts last discussed with <a target=_blank title='Gimp Decor Border Filters Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-decor-border-filters-primer-tutorial\/'>Gimp Decor Border Filters Primer Tutorial<\/a> in the &#8220;Decor&#8221; category, namely &#8230;<\/p>\n<ul>\n<li>Fuzzy Border<\/li>\n<li>Coffee Stain<\/li>\n<li>Old Photo &#8230; in the tutorial picture &#8230; plus below &#8230;<\/li>\n<li>Add Bevel<\/li>\n<li>Add Border<\/li>\n<li>Slide<\/li>\n<li>Rounded Corners<\/li>\n<\/ul>\n<p> &#8230; which create quite good effects we feel, especially the Fuzzy Border filter, as it is quite difficult, otherwise to create a &#8220;smudged&#8221; border effect, perhaps for vignetting purposes, without this filter.  We imagine an old map photo could be glamourized using &#8220;Coffee Stain&#8221; (for the accident prone) or &#8220;Old Photo&#8221;.<\/p>\n<p>These &#8220;Decor&#8221; filters are available off Gimp&#8217;s Filter menu as a submenu containing these and some other effects.  They use <a target=_blank title='Gimp Script-Fu' href='https:\/\/docs.gimp.org\/en\/gimp-concepts-script-fu.html'>&#8220;Script-Fu&#8221;<\/a> based on the Scheme interpretive language.  These &#8220;Script-Fu&#8221; filters are not only powerful and useful for what they are, but also for how you can introduce predictability with your effects, in that you can record settings you use, make them public, as necessary, to help create a unified creative but predictable set of effects in the photographs you are applying filters to.<\/p>\n<p>So we&#8217;ll leave you with a photo of our house &#8230;<\/p>\n<p><img src='http:\/\/www.rjmprogramming.com.au\/GIMP\/house.jpg' title='Our house, in the middle of our street'><\/img><\/p>\n<p> &#8230; with &#8230;<\/p>\n<ul>\n<li>Fuzzy Border &#8230;<br \/>\n<img src='http:\/\/www.rjmprogramming.com.au\/GIMP\/house_fb.jpg' title='Our house, in Fuzzy Border'><\/img>\n<\/li>\n<li>Coffee Stain (&#8220;Darken only&#8221; unchecked) &#8230; probably not so apt for this image&#8217;s subject matter &#8230;<br \/>\n<img src='http:\/\/www.rjmprogramming.com.au\/GIMP\/house_cs.jpg' title='Our house, in Coffee Stain'><\/img>\n<\/li>\n<li>Old Photo (&#8220;Defocus&#8221;, &#8220;Sepia&#8221;, &#8220;Mottle&#8221; all checked) &#8230;<br \/>\n<img src='http:\/\/www.rjmprogramming.com.au\/GIMP\/house_op.jpg' title='Our house, in Old Photo'><\/img>\n<\/li>\n<li>Add Bevel (30, &#8220;Keep bump layer&#8221; checked) &#8230;<br \/>\n<img src='http:\/\/www.rjmprogramming.com.au\/GIMP\/house_abev.jpg' title='Our house, in Add Bevel'><\/img>\n<\/li>\n<li>Add Border (37 x and 37 y width, 85 delta value on default blue colour) &#8230;<br \/>\n<img src='http:\/\/www.rjmprogramming.com.au\/GIMP\/house_abdr.jpg' title='Our house, in Add Border'><\/img>\n<\/li>\n<li>Slide (62) &#8230;<br \/>\n<img src='http:\/\/www.rjmprogramming.com.au\/GIMP\/house_slide.jpg' title='Our house, in Slide'><\/img>\n<\/li>\n<li>Rounded Corners (Edge radius 30, Shadow x offset 15, y 15, Blur radius 25) &#8230;<br \/>\n<img src='http:\/\/www.rjmprogramming.com.au\/GIMP\/house_rc.jpg' title='Our house, in Rounded Corners'><\/img>\n<\/li>\n<\/ul>\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='#d21761' onclick='var dv=document.getElementById(\"d21761\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gimp\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d21761' 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='#31927' onclick='var dv=document.getElementById(\"d31927\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/filter\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d31927' 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='#d32042' onclick='var dv=document.getElementById(\"d32042\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/border\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d32042' 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='#d32056' onclick='var dv=document.getElementById(\"d32056\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/newspaper\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d32056' 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='#d60708' onclick='var dv=document.getElementById(\"d60708\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/grid\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60708' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Continuing on with some of the styling themes from CSS3 Multi Columns Primer Tutorial, today, we present a tutorial aboout CSS Grid Styling, primarily, thanking W3school&#8217;s excellent https:\/\/www.w3schools.com\/css\/tryit.asp?filename=trycss_grid for ideas. The lesson is that HTML table element designs do not &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-grid-primer-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,14,37],"tags":[230,281,282,290,4477,2298,576,997,1761,1991,1075,4478,1209,1212,1238,3312,1319],"class_list":["post-60708","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-column","tag-css","tag-css3","tag-data","tag-gap","tag-grid","tag-html","tag-programming","tag-prompt","tag-responsive-design","tag-row","tag-spacing","tag-style","tag-styling","tag-table","tag-tabular","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60708"}],"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=60708"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60708\/revisions"}],"predecessor-version":[{"id":60710,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/60708\/revisions\/60710"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=60708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=60708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=60708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}