{"id":32042,"date":"2017-08-10T03:01:09","date_gmt":"2017-08-09T17:01:09","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=32042"},"modified":"2017-08-10T19:37:54","modified_gmt":"2017-08-10T09:37:54","slug":"css3-border-image-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css3-border-image-primer-tutorial\/","title":{"rendered":"CSS3 Border Image Primer Tutorial"},"content":{"rendered":"
\"CSS3<\/a>

CSS3 Border Image Primer Tutorial<\/p><\/div>\n

Adding to our recent CSS3 Filters Primer Tutorial<\/a>, today, we’d like to delve further into the great things CSS3<\/a> brought to the client side “aesthetics” of web application work. Today’s “proof of concept” web application’s topic is border images<\/i>. How often when developing a webpage or blog post via HTML, if you are into that kind of thang<\/strike>thing, have you wanted to enhance something and make it stand out, but were satisfied enough with its content? Lots, I’d imagine, and perhaps you put a 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 “theme” the content via the “look” 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 “themed” your content to align with the “look” of your border. That is where CSS3’s border images<\/i> can come to the fore. Today, we don’t “theme” and match with the “look”, as we just try to make things “stand out”, and this can be good with these border image<\/i> styling approaches too.<\/p>\n

Researching this topic, we lobbed onto the great resource that TutorialsPoint<\/a> provides and based our HTML and CSS3<\/font> and Javascript live run<\/a>‘s border_image.html<\/a> source code off their example code, so thanks.<\/p>\n

You’ll see the border image<\/b> CSS3<\/font> parts to this proof of concept code below …<\/p>\n


\n<style>
\n #borderimg1 {
\n border: 10px solid transparent;
\n padding: 15px;
\n border-image-source: url(body_systems.jpg);
\n border-image-repeat: round;
\n border-image-slice: 30;
\n border-image-width: 10px;<\/b>
\n height:150px;
\n background-color: yellow;
\n text-align: center;
\n }
\n #borderimg2 {
\n border: 10px solid transparent;
\n padding: 15px;
\n border-image-source: url(body_systems.jpg);
\n border-image-repeat: round;
\n border-image-slice: 30;
\n border-image-width: 20px;<\/b>
\n height:150px;
\n background-color: yellow;
\n text-align: center;
\n }
\n #borderimg3 {
\n border: 10px solid transparent;
\n padding: 15px;
\n border-image-source: url(body_systems.jpg);
\n border-image-repeat: round;
\n border-image-slice: 30;
\n border-image-width: 30px;<\/b>
\n height:150px;
\n background-color: yellow;
\n text-align: center;
\n }
\n<\/style>
\n<\/code><\/p>\n

… which sets up the “static” first up scenario, but to add some randomness into the web application workings, we use some Javascript DOM (kicked off via a document.body onload<\/i> event call and then perpetuated by good ol’ setTimeout<\/i><\/a> method calls) as below to make the web application more dynamic, using images used with our “one image webpage” Ephemeral<\/a> …<\/p>\n


\n function randomize() {
\n var choice=Math.floor(Math.random() * border_images.length);
\n document.getElementById('borderimg1').style.borderImageSource=\"url(\" + border_images[choice] + \")\";<\/b>
\n choice=Math.floor(Math.random() * 100);
\n document.getElementById('borderimg1').style.borderImageWidth='' + choice + 'px';<\/b>
\n choice=Math.floor(Math.random() * 100);
\n document.getElementById('borderimg1').style.borderImageSlice='' + choice;<\/b>
\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) + \")\";
\n choice=Math.floor(Math.random() * border_images.length);
\n document.getElementById('borderimg2').style.borderImageSource=\"url(\" + border_images[choice] + \")\";<\/b>
\n choice=Math.floor(Math.random() * 100);
\n document.getElementById('borderimg2').style.borderImageWidth='' + choice + 'px';<\/b>
\n choice=Math.floor(Math.random() * 100);
\n document.getElementById('borderimg2').style.borderImageSlice='' + choice;<\/b>
\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) + \")\";
\n choice=Math.floor(Math.random() * border_images.length);
\n document.getElementById('borderimg3').style.borderImageSource=\"url(\" + border_images[choice] + \")\";<\/b>
\n choice=Math.floor(Math.random() * 100);
\n document.getElementById('borderimg3').style.borderImageWidth='' + choice + 'px';<\/b>
\n choice=Math.floor(Math.random() * 100);
\n document.getElementById('borderimg3').style.borderImageSlice='' + choice;<\/b>
\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) + \")\";
\n setTimeout(randomize, 5000);<\/i>
\n }
\n<\/code><\/p>\n

We hope this “aesthetic” is something you might be interested in applying, on occasions, to your blog postings or webpages yourself.<\/p>\n

You can also see this play out at WordPress 4.1.1’s CSS3 Border Image Primer Tutorial<\/a>.<\/p>\n

\n

Previous relevant CSS3 Filters Primer Tutorial<\/a> is shown below.<\/p>\n

\"CSS3<\/a>

CSS3 Filters Primer Tutorial<\/p><\/div>\n

It’s not just the image editor Gimp<\/a> that has “filters” as tools to create effects with image data (files), as you might see with tutorials like Gimp Decor Filters Revisit Tutorial<\/a>. These days, with CSS, and with CSS3<\/a> these days, there are some great “filters” to play around with, that modify an image there and then with CSS and\/or Javascript DOM (as per the HTML select “dropdown” element onchange<\/i> event logic …<\/p>\n


\nfunction selchange(selo) {
\n var bs=\"\";
\n if (selo == null) {
\n if (document.getElementById(\"sh-shadow\").value != \"\" && document.getElementById(\"sv-shadow\").value != \"\") {
\n if (document.getElementById(\"xblur\").value != \"\") bs+=document.getElementById(\"xblur\").value + document.getElementById(\"xblur\").title + \" \";
\n if (document.getElementById(\"sspread\").value != \"\") bs+=document.getElementById(\"sspread\").value + document.getElementById(\"sspread\").title + \" \";
\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 + \")\");
\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 + \")\";
\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 + \")\";
\n }
\n } else if (selo.id.substring(1) == 'h-shadow') {
\n if (document.getElementById(\"sv-shadow\").value != \"\") {
\n if (document.getElementById(\"xblur\").value != \"\") bs+=document.getElementById(\"xblur\").value + document.getElementById(\"xblur\").title + \" \";
\n if (document.getElementById(\"sspread\").value != \"\") bs+=document.getElementById(\"sspread\").value + document.getElementById(\"sspread\").title + \" \";
\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 + \")\";
\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 + \")\";
\n }
\n } else if (selo.id.substring(1) == 'v-shadow') {
\n if (document.getElementById(\"sh-shadow\").value != \"\") {
\n if (document.getElementById(\"xblur\").value != \"\") bs+=document.getElementById(\"xblur\").value + document.getElementById(\"xblur\").title + \" \";
\n if (document.getElementById(\"sspread\").value != \"\") bs+=document.getElementById(\"sspread\").value + document.getElementById(\"sspread\").title + \" \";
\n \/\/alert(\"drop-shadow(\" + document.getElementById(\"sh-shadow\").value + document.getElementById(\"sh-shadow\").title + \" \" + selo.value + selo.title + \" \" + bs + document.getElementById(\"mycolour\").value + \")\");
\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 + \")\";
\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 + \")\";
\n }
\n } else if (selo.id == 'xblur') {
\n if (document.getElementById(\"sh-shadow\").value != \"\" && document.getElementById(\"sv-shadow\").value != \"\") {
\n if (document.getElementById(\"xblur\").value != \"\") bs+=document.getElementById(\"xblur\").value + document.getElementById(\"xblur\").title + \" \";
\n if (document.getElementById(\"sspread\").value != \"\") bs+=document.getElementById(\"sspread\").value + document.getElementById(\"sspread\").title + \" \";
\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 + \")\";
\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 + \")\";
\n }
\n } else if (selo.id.substring(1) == 'spread') {
\n if (document.getElementById(\"sh-shadow\").value != \"\" && document.getElementById(\"sv-shadow\").value != \"\") {
\n if (document.getElementById(\"xblur\").value != \"\") bs+=document.getElementById(\"xblur\").value + document.getElementById(\"xblur\").title + \" \";
\n if (document.getElementById(\"sspread\").value != \"\") bs+=document.getElementById(\"sspread\").value + document.getElementById(\"sspread\").title + \" \";
\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 + \")\";
\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 + \")\";
\n }
\n } else {
\n document.getElementById(\"myimage\").style.filter = selo.id.substring(1) + \"(\" + selo.value + selo.title + \")\";
\n document.getElementById(\"myimage\").style.WebkitFilter = selo.id.substring(1) + \"(\" + selo.value + selo.title + \")\";
\n }
\n}
\n<\/code><\/p>\n

) … or jQuery means by which to make this happen with a lot of the modern web browsers. If you see “CSS3” mentioned, then don’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

Today’s simple (really) proof of concept web application owes a debt of gratitude to this very useful link<\/a>, which gave us the parameters by which we could construct today’s live run<\/a> with its pretty simple HTML and CSS (via CSS3) and Javascript DOM 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