{"id":55656,"date":"2022-05-08T03:01:34","date_gmt":"2022-05-07T17:01:34","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=55656"},"modified":"2022-05-11T15:09:03","modified_gmt":"2022-05-11T05:09:03","slug":"text-background-clip-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/text-background-clip-primer-tutorial\/","title":{"rendered":"Text Background Clip Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Text Background Clip Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.jpg\" title=\"Text Background Clip Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Text Background Clip Primer Tutorial<\/p><\/div>\n<p>Again, today, we&#8217;re cloning and modifying a new <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.php_GETME\" title=\"overlay_emoji.php\">&#8220;proof of concept&#8221;<\/a> version of a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.php?words=Hello\" title=\"overlay_emoji.php.php\">&#8220;Text Background Clip&#8221; server web application<\/a> &#8230;<\/p>\n<ul>\n<li>based on the PHP of <a title='Simple Emoji Border Card Primer Tutorial' href='#sebcpt'>Simple Emoji Border Card Primer Tutorial<\/a> &#8230; and &#8230;<\/li>\n<li>a lot of CSS help from <a target=_blank title=https:\/\/codepen.io\/shshaw\/pen\/ELBayz href='https:\/\/codepen.io\/shshaw\/pen\/ELBayz'>Emoji + background-clip:text<\/a> and <a target=_blank title='Lorem Picsum' href='https:\/\/picsum.photos'>Lorem Picsum<\/a>, thanks<\/li>\n<\/ul>\n<p>And, again, it&#8217;s that &#8220;interactive input duo&#8221; of &#8230;<\/p>\n<ul>\n<li>words<\/li>\n<li>CSS styling, especially <a target=_blank title='CSS property background-clip property' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_background-clip.asp'>background-clip<\/a>:text;<\/li>\n<\/ul>\n<p> &#8230; forming that shareable dataset (helped out by diff and ed command line commands via PHP <a target=_blank title='PHP exec() method information' href='http:\/\/php.net\/manual\/en\/function.exec.php'>exec<\/a> and <a target=_blank title='PHP shell_exec() method information' href='http:\/\/php.net\/manual\/en\/function.shell-exec.php'>shell_exec<\/a>) whereby you can email or SMS your &#8220;creations&#8221; to other interested parties.<\/p>\n<p>And, again, there is a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.html_GETME\" title=\"overlay_emoji.htm\">&#8220;proof of concept&#8221;<\/a> version of a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/overlay_emoji.htm\" title=\"overlay_emoji.php.htm\">&#8220;Text Background Clip&#8221; client web application<\/a> choice of usage here, for you to try for yourself!<\/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\/text-background-clip-primer-tutorial\/'>Text Background Clip Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eapt'>Previous relevant <a target=_blank title='Emoji Animation Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-animation-primer-tutorial\/'>Emoji Animation 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\/PHP\/emoji_animation.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Animation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.jpg\" title=\"Emoji Animation Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Emoji Animation Primer Tutorial<\/p><\/div>\n<p>Today we&#8217;re cloning and modifying a new <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.php_GETME\" title=\"emoji_animation.php\">&#8220;proof of concept&#8221;<\/a> version of an <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.php?words=Hi\" title=\"emoji_animation.php\">&#8220;Emoji Animation&#8221; server web application<\/a> (or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.html_GETME\" title=\"emoji_animation.htm\">&#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.htm\" title=\"emoji_animation.htm\">client web application<\/a>) &#8230;<\/p>\n<ul>\n<li>based on the PHP of <a title='Simple Emoji Border Card Primer Tutorial' href='#sebcpt'>Simple Emoji Border Card Primer Tutorial<\/a> &#8230; and &#8230;<\/li>\n<li>a lot of CSS help from <a target=_blank title=https:\/\/dev.to\/anthonyjdella\/how-to-animate-an-emoji-with-css-5eb9 href='https:\/\/dev.to\/anthonyjdella\/how-to-animate-an-emoji-with-css-5eb9'>How to Animate an Emoji with CSS<\/a>, thanks<\/li>\n<\/ul>\n<p>We generally corral commonalities today when we think about cloning, and its here in spades regarding &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/simple-emoji-border-card-primer-tutorial\/'>\n<p>We break the &#8220;user controllable&#8221; components of the card into &#8230;<\/p>\n<p><\/p>\n<ol>\n<li>wording of the card<\/li>\n<li>emoji <font size=1>(maybe)<\/font> border of card CSS styling<\/li>\n<\/ol>\n<\/blockquote>\n<p> &#8230; but just substitute &#8220;animation&#8221; for &#8220;border of card&#8221; or just &#8220;card&#8221; above.  With help regarding the CSS above we&#8217;d like to thank <a target=_blank title=https:\/\/dev.to\/anthonyjdella\/how-to-animate-an-emoji-with-css-5eb9 href='https:\/\/dev.to\/anthonyjdella\/how-to-animate-an-emoji-with-css-5eb9'>How to Animate an Emoji with CSS<\/a>.<\/p>\n<p>We hope you try it out, creating your own webpages!<\/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\/emoji-animation-primer-tutorial\/'>Emoji Animation Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='sebcpt'>Previous relevant <a target=_blank title='Simple Emoji Border Card Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/simple-emoji-border-card-primer-tutorial\/'>Simple Emoji Border Card 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\/PHP\/simple_card.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Simple Emoji Border Card Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.jpg\" title=\"Simple Emoji Border Card Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Simple Emoji Border Card Primer Tutorial<\/p><\/div>\n<p>We were really happy to stumble upon <a target=_blank href='https:\/\/stackoverflow.com' title='StackOverflow'>StackOverflow<\/a>&#8216;s excellent <a target=_blank href='https:\/\/stackoverflow.com\/questions\/41199841\/use-emoji-as-css-border' title='Use Emoji as CSS Border'>Use Emoji as CSS Border<\/a> webpage <font size=1>(of dreams and ideas)<\/font> the other day, and immediately want to &#8230;<\/p>\n<ul>\n<li>start <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.php_GETME\" title=\"simple_card.php\">&#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.php\" title=\"Click picture\">Simple Emoji Border Card<\/a> creating today &#8230; ready for &#8230;<\/li>\n<li>whatever the future may hold, into the future, because we smell a <i>tool<\/i> coming on<\/li>\n<\/ul>\n<p>We break the &#8220;user controllable&#8221; components of the card into &#8230;<\/p>\n<ol>\n<li>wording of the card<\/li>\n<li>emoji <font size=1>(maybe)<\/font> border of card CSS styling<\/li>\n<\/ol>\n<p> &#8230; used by the user via some HTML textarea content they could edit to click a &#8220;Post&#8221; button creating their tailored (left hand table cell containing) HTML div element, that if double clicked (or just clicked within the surrounding table cell below the HTML &#8220;card&#8221; div) opens the user&#8217;s created card, alone, in a new window.<\/p>\n<hr>\n<p id='eacssbt'>Previous relevant <a target=_blank title='Emoji Animation CSS Block Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-animation-css-block-tutorial\/'>Emoji Animation CSS Block Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Animation CSS Block Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation_css_block.jpg\" title=\"Emoji Animation CSS Block Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Emoji Animation CSS Block Tutorial<\/p><\/div>\n<p>Do you recall a few days back, with <a target=_blank title='Simple Emoji Border Card Sharing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/simple-emoji-border-card-sharing-tutorial\/'>Simple Emoji Border Card Sharing Tutorial<\/a> how we avoided &#8220;too long&#8221; mailto: and\/or sms: &#8220;a&#8221; link href arrangements, before we harnessed the command line combination of &#8230;<\/p>\n<ul>\n<li>diff<\/li>\n<li>ed<\/li>\n<\/ul>\n<p> &#8230; the latter of which worked fine on this macOS system where we are writing this blog, but, sadly, not on our RJM Programming Linux web server?  Well, we could install &#8220;ed&#8221;, but decided, instead, to &#8220;act like <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=fi37OSY6kXo'><strike>mister<\/strike><\/a> ed&#8221; with a new PHP function, which, today, caters for &#8220;ed asks&#8221; that might involve more than one line of change, with some &#8220;comma usages&#8221; can be seen explained, here, at <a target=_blank title='ed' href='https:\/\/www.ibm.com\/docs\/en\/zos\/2.2.0?topic=descriptions-ed-use-ed-line-oriented-text-editor'>ed &#8211; Use ed line oriented text editor &#8211; IBM Documentation<\/a>.  Here is the PHP function for your perusal &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nfunction viacolon($instuff) {<br \/>\n<br \/>\n\/\/21c<br \/>\n\/\/  background: url(\"data:image\/svg+xml,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' height='30' width='30'&gt;&lt;text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle'&gt;&lt;\/text&gt;&lt;\/svg&gt;\");<br \/>\n\/\/.<br \/>\n\/\/13,14c<br \/>\n\/\/.box:after {<br \/>\n\/\/  content: \"Well I never\";<br \/>\n\/\/.<br \/>\n\/\/w<br \/>\n<br \/>\n  $sprevln=\"\";<br \/>\n  $ldm=\";\";<br \/>\n  $prevln='';<br \/>\n  $inlns=explode(\"\\n\", $instuff);<br \/>\n  $lns=file('\/tmp\/emoji_animation.diff');<br \/>\n  foreach ($lns as $line_num =&gt; $ln) {<br \/>\n    $lastinteresting=false;<br \/>\n    if (($ln == 'w' || $ln == \"w\\n\") && strpos($prevln, \"d\") !== false && strlen($prevln) &lt;= 10 && strpos(trim($prevln), ' ') === false && strpos($prevln, \",\") !== false) {<br \/>\n       if (1 == 2) { $lastinteresting=true; }<br \/>\n      $fromi=explode(\",\", explode(\"d\", $prevln)[0])[0];<br \/>\n      $toi=explode(\",\", explode(\"d\", $prevln)[0])[1];<br \/>\n      for ($fromtoi=$fromi; $fromtoi&lt;=$toi; $fromtoi++) {<br \/>\n        $instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + $fromtoi]), \" \", $instuff);<br \/>\n      }<br \/>\n    }<br \/>\n    if (!$lastinteresting && $ln != '.' && $ln != 'w' && $ln != \".\\n\" && $ln != \"w\\n\") {<br \/>\n    if (strpos($ln, ':') !== false && (strpos($ln, ';') !== false || strpos($ln, '{') !== false)) {<br \/>\n      if (strpos($ln, 'background:') === false) {<br \/>\n        $bg=explode(':', $ln);<br \/>\n        if (strpos($instuff, $bg[0] . ':') !== false) {<br \/>\n          $ldm=\";\";<br \/>\n          if (strpos($bg[1], \";\") === false && strpos($bg[1], \"{\") !== false) { $ldm=\"{\"; }<br \/>\n          \/\/if (strpos($bg[0], \".box\") !== false) {  file_put_contents('ax.ax', $instuff . \"\\n\\n\\n\" . $bg[0] . ':' . explode($ldm, explode($bg[0] . ':', $instuff)[1])[0] . ':' . \"\\n\\n\\n\" . $bg[0] . ':' . explode($ldm, explode($bg[0] . ':', file_get_contents('\/tmp\/emoji_animation.diff'))[1])[0] . \"\\n\\n\\n\" . str_replace($bg[0] . ':' . explode($ldm, explode($bg[0] . ':', $instuff)[1])[0],$bg[0] . ':' . explode($ldm, explode($bg[0] . ':', file_get_contents('\/tmp\/emoji_animation.diff'))[1])[0],$instuff));    }<br \/>\n          $instuff=str_replace_once($bg[0] . ':' . explode($ldm, explode($bg[0] . ':', $instuff)[1])[0],$bg[0] . ':' . explode($ldm, explode($bg[0] . ':', file_get_contents('\/tmp\/emoji_animation.diff'))[1])[0],$instuff);<br \/>\n        } else if (strpos($prevln, \"a\") !== false) {<br \/>\n          $fromi=explode(\",\", explode(\"a\", $prevln)[0])[0];<br \/>\n          $toi=$fromi;<br \/>\n          $prefx=explode($inlns[-1 + explode(\"a\", $prevln)[0]], $instuff)[0];<br \/>\n          $instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + explode(\"a\", $prevln)[0]]), str_replace(\"\\n\", \"\", $inlns[-1 + explode(\"a\", $prevln)[0]]) . \" \" . $bg[0] . ':' . explode(';', explode($bg[0] . ':', file_get_contents('\/tmp\/emoji_animation.diff'))[1])[0] . '; ', $instuff);<br \/>\n          $inlns[-1 + explode(\"a\", $prevln)[0]]=$inlns[-1 + explode(\"a\", $prevln)[0]] . \" \" . $bg[0] . ':' . explode(';', explode($bg[0] . ':', file_get_contents('\/tmp\/emoji_animation.diff'))[1])[0] . '; ';<br \/>\n          if (('' . $toi) == '1') {<br \/>\n            \/\/$instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + $toi + $fromi]), \" \", $instuff);<br \/>\n            $sprevln=\"\";<br \/>\n          } else {<br \/>\n            $toi--;<br \/>\n            \/\/$instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + $toi + $fromi]), \" \", $instuff);<br \/>\n            $sprevln=\"\" . $fromi . \"a\";<br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    if (strlen($ln) &lt;= 10 && str_replace(\"\\n\",\"\", str_replace(\"d\",\"\", str_replace(\"c\",\"\", str_replace(\"a\",\"\", str_replace(\",\",\"\", str_replace(\"0\",\"\", str_replace(\"1\",\"\", str_replace(\"2\",\"\", str_replace(\"3\",\"\", str_replace(\"4\",\"\", str_replace(\"5\",\"\", str_replace(\"6\",\"\", str_replace(\"7\",\"\", str_replace(\"8\",\"\", str_replace(\"9\",\"\",$ln))))))))))))))) == \"\") {<br \/>\n      if (str_replace(\"\\n\",\"\", str_replace(\"c\",\"\", str_replace(\"a\",\"\", str_replace(\",\",\"\", str_replace(\"0\",\"\", str_replace(\"1\",\"\", str_replace(\"2\",\"\", str_replace(\"3\",\"\", str_replace(\"4\",\"\", str_replace(\"5\",\"\", str_replace(\"6\",\"\", str_replace(\"7\",\"\", str_replace(\"8\",\"\", str_replace(\"9\",\"\",$ln)))))))))))))) != \"\") {<br \/>\n       $prevln=$ln;<br \/>\n      }<br \/>\n    }<br \/>\n    \/\/if (strlen($ln) &lt;= 10 && str_replace(\"\\n\",\"\", str_replace(\"c\",\"\", str_replace(\"a\",\"\", str_replace(\",\",\"\", str_replace(\"0\",\"\", str_replace(\"1\",\"\", str_replace(\"2\",\"\", str_replace(\"3\",\"\", str_replace(\"4\",\"\", str_replace(\"5\",\"\", str_replace(\"6\",\"\", str_replace(\"7\",\"\", str_replace(\"8\",\"\", str_replace(\"9\",\"\",$ln)))))))))))))) == \"\") {<br \/>\n    if (strlen($ln) &lt;= 10 && str_replace(\"\\n\",\"\", str_replace(\"d\",\"\", str_replace(\"c\",\"\", str_replace(\"A\",\"\", str_replace(\",\",\"\", str_replace(\"0\",\"\", str_replace(\"1\",\"\", str_replace(\"2\",\"\", str_replace(\"3\",\"\", str_replace(\"4\",\"\", str_replace(\"5\",\"\", str_replace(\"6\",\"\", str_replace(\"7\",\"\", str_replace(\"8\",\"\", str_replace(\"9\",\"\",$ln))))))))))))))) == \"\") {<br \/>\n      $instuff=$instuff;<br \/>\n    } else if (strpos($prevln, \"d\") !== false && strlen($prevln) &lt;= 10 && strpos(trim($prevln), ' ') === false && strpos($prevln, \",\") === false) {<br \/>\n      $instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + explode(\"d\", $prevln)[0]]), \" \", $instuff);<br \/>\n    } else if (strpos($prevln, \"a\") !== false && strlen($prevln) &lt;= 10 && strpos(trim($prevln), ' ') === false && strpos($prevln, \",\") === false) {<br \/>\n      $fromi=explode(\",\", explode(\"a\", $prevln)[0])[0];<br \/>\n      $lnbig=\"\";<br \/>\n      $lni=(-1 + explode(\"a\", $prevln)[0]);<br \/>\n      $toi=$fromi;<br \/>\n      $isok=true;<br \/>\n      while (('' . $toi) != '0' && $isok) {<br \/>\n      \/\/$prefx=explode($inlns[-1 + explode(\"a\", $prevln)[0]], $instuff)[0];<br \/>\n      if ($ln == '.' || $ln == 'w' || $ln == \".\\n\" || $ln == \"w\\n\") {<br \/>\n      $isok=false;<br \/>\n      $sprevln=$ln; \/\/\"\";<br \/>\n      } else if ($ln != '.' && $ln != 'w' && $ln != \".\\n\" && $ln != \"w\\n\") {<br \/>\n      \/\/file_put_contents('\/tmp\/emoji_animation.zzz', $ln);<br \/>\n      \/\/file_put_contents('\/tmp\/emoji_animation.yyy', $prevln);<br \/>\n      \/\/$instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + explode(\"a\", $prevln)[0]]), str_replace(\"\\n\", \"\", $inlns[-1 + explode(\"a\", $prevln)[0]]) . \" \" . $ln, $instuff);<br \/>\n      \/\/if (!file_exists('\/tmp\/emoji_animation.www')) { file_put_contents('\/tmp\/emoji_animation.www', $instuff); }<br \/>\n      $lnbig.=' ' . str_replace(\"\\n\", \"\", $ln) . ' '; \/\/$inlns[-1 + explode(\"a\", $prevln)[0]]=$inlns[-1 + explode(\"a\", $prevln)[0]] . \" \" . $ln;<br \/>\n      }<br \/>\n      if (('' . $toi) == '1') {<br \/>\n            \/\/$instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + $toi + $fromi]), \" \", $instuff);<br \/>\n            \/\/$instuff=str_replace_once(str_replace(\"\\n\", \"\", $ln), \" \", $instuff);<br \/>\n            $sprevln=$ln; \/\/\"\";<br \/>\n            $toi--;<br \/>\n            $ln=$lns[($fromi - $toi) + $line_num];<br \/>\n      } else {<br \/>\n            $toi--;<br \/>\n            \/\/$instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + $toi + $fromi]), \" \", $instuff);<br \/>\n            \/\/$instuff=str_replace_once(str_replace(\"\\n\", \"\", $ln), \" \", $instuff);<br \/>\n            $sprevln=\"\" . $fromi . \"a\";<br \/>\n            $ln=$lns[($fromi - $toi) + $line_num];<br \/>\n      }<br \/>\n      }<br \/>\n      $instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[$lni]), str_replace(\"\\n\", \"\", $inlns[$lni]) . \" \" . $lnbig, $instuff);<br \/>\n      \/\/$inlns[$lni]=$inlns[$lni] . \" \" . $lnbig;<br \/>\n      $sprevln=' ';<br \/>\n    } else if (strpos($prevln, \"c\") !== false && strlen($prevln) &lt;= 10 && strpos(trim($prevln), ' ') === false && strpos($prevln, \",\") === false) {<br \/>\n      $instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + explode(\"c\", $prevln)[0]]), str_replace(\"\\n\", \"\", $ln), $instuff);<br \/>\n    } else if (strpos($prevln, \"d\") !== false && strlen($prevln) &lt;= 10 && strpos(trim($prevln), ' ') === false && strpos($prevln, \",\") !== false) {<br \/>\n      $fromi=explode(\",\", explode(\"d\", $prevln)[0])[0];<br \/>\n      $toi=explode(\",\", explode(\"d\", $prevln)[0])[1];<br \/>\n      for ($fromtoi=$fromi; $fromtoi&lt;=$toi; $fromtoi++) {<br \/>\n        $instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + $fromtoi]), \" \", $instuff);<br \/>\n      }<br \/>\n      \/\/$instuff=str_replace(str_replace(\"\\n\", \"\", $inlns[-1 + $fromi]), \" \", $instuff);<br \/>\n      \/\/if ($fromi != $toi) {<br \/>\n      \/\/  $fromi++;<br \/>\n      \/\/  $sprevln=\"\" . $fromi . \",\" . $toi . \"d\";<br \/>\n      \/\/} else {<br \/>\n        $sprevln=$ln;<br \/>\n      \/\/}<br \/>\n    } else if (strpos($prevln, \"c\") !== false && strlen($prevln) &lt;= 10 && strpos(trim($prevln), ' ') === false && strpos($prevln, \",\") !== false) {<br \/>\n      $origln=$ln;<br \/>\n      $lnbig='';<br \/>\n      $isokay=true;<br \/>\n      $fromi=explode(\",\", explode(\"c\", $prevln)[0])[0];<br \/>\n      $toi=explode(\",\", explode(\"c\", $prevln)[0])[1];<br \/>\n      $one=1;<br \/>\n      $ln=$lns[$one + $line_num];<br \/>\n      while ($ln != '.' && $ln != 'w' && $ln != \".\\n\" && $ln != \"w\\n\") {<br \/>\n            $lnbig.=' ' . str_replace(\"\\n\", \"\", $ln) . ' ';<br \/>\n            $one++;<br \/>\n            $ln=$lns[$one + $line_num];<br \/>\n      }<br \/>\n      $instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + $fromi]), str_replace(\"\\n\", \"\", $origln) . $lnbig, $instuff);<br \/>\n      if ($fromi != $toi) {<br \/>\n        $fromi++;<br \/>\n        $sprevln=\"\" . $fromi . \",\" . $toi . \"c\";<br \/>\n      for ($fromtoi=$fromi; $fromtoi&lt;=$toi; $fromtoi++) {<br \/>\n        $instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + $fromtoi]), \" \", $instuff);<br \/>\n      }<br \/>\n      } else {<br \/>\n        $sprevln=$ln;<br \/>\n      }<br \/>\n    }<br \/>\n    if ($sprevln != \"\") {<br \/>\n      $prevln=$sprevln;<br \/>\n      $sprevln=\"\";<br \/>\n    } else {<br \/>\n      $prevln=$ln;<br \/>\n    }<br \/>\n    if (strpos($prevln, \"d\") !== false && strlen($prevln) &lt;= 10 && strpos(trim($prevln), ' ') === false && strpos($prevln, \",\") === false) {<br \/>\n      $instuff=str_replace_once(str_replace(\"\\n\", \"\", $inlns[-1 + explode(\"d\", $prevln)[0]]), \" \", $instuff);<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n  return $instuff;<br \/>\n}<br \/>\n<br \/>\nfunction str_replace_once($needle, $replace, $haystack) { \/\/ thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/1252693\/using-str-replace-so-that-it-only-acts-on-the-first-match' href='https:\/\/stackoverflow.com\/questions\/1252693\/using-str-replace-so-that-it-only-acts-on-the-first-match'>https:\/\/stackoverflow.com\/questions\/1252693\/using-str-replace-so-that-it-only-acts-on-the-first-match<\/a><br \/>\n$newstring=$haystack;<br \/>\n$pos = strpos($haystack, $needle);<br \/>\nif ($pos !== false) {<br \/>\n    $newstring = substr_replace($haystack, $replace, $pos, strlen($needle));<br \/>\n}<br \/>\nreturn $newstring;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; improving on yesterday&#8217;s <a title='Emoji Animation Primer Tutorial' href='#eapt'>Emoji Animation Primer Tutorial<\/a>.<\/p>\n<p>That work not only helped out with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.php-GETME\" title=\"emoji_animation.php\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.php-GETME\" title=\"emoji_animation.php\">&#8220;proof of concept&#8221;<\/a>  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.php?words=Hi\" title=\"emoji_animation.php\">Emoji Animation server web application<\/a>, but also with (its &#8220;clone partner&#8221;) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.html--GETME\" title=\"simple_card.htm\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.html--GETME\" title=\"simple_card.htm\">&#8220;proof of concept&#8221;<\/a>  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.htm\" title=\"simple_card.htm\">Card with Emoji Border Design client web application<\/a>.<\/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\/emoji-animation-css-block-tutorial\/'>Emoji Animation CSS Block Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eapt'>Previous relevant <a target=_blank title='Emoji Animation Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-animation-primer-tutorial\/'>Emoji Animation 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\/PHP\/emoji_animation.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Animation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.jpg\" title=\"Emoji Animation Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Emoji Animation Primer Tutorial<\/p><\/div>\n<p>Today we&#8217;re cloning and modifying a new <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.php_GETME\" title=\"emoji_animation.php\">&#8220;proof of concept&#8221;<\/a> version of an <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.php?words=Hi\" title=\"emoji_animation.php\">&#8220;Emoji Animation&#8221; server web application<\/a> (or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.html_GETME\" title=\"emoji_animation.htm\">&#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_animation.htm\" title=\"emoji_animation.htm\">client web application<\/a>) &#8230;<\/p>\n<ul>\n<li>based on the PHP of <a title='Simple Emoji Border Card Primer Tutorial' href='#sebcpt'>Simple Emoji Border Card Primer Tutorial<\/a> &#8230; and &#8230;<\/li>\n<li>a lot of CSS help from <a target=_blank title=https:\/\/dev.to\/anthonyjdella\/how-to-animate-an-emoji-with-css-5eb9 href='https:\/\/dev.to\/anthonyjdella\/how-to-animate-an-emoji-with-css-5eb9'>How to Animate an Emoji with CSS<\/a>, thanks<\/li>\n<\/ul>\n<p>We generally corral commonalities today when we think about cloning, and its here in spades regarding &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/simple-emoji-border-card-primer-tutorial\/'>\n<p>We break the &#8220;user controllable&#8221; components of the card into &#8230;<\/p>\n<p><\/p>\n<ol>\n<li>wording of the card<\/li>\n<li>emoji <font size=1>(maybe)<\/font> border of card CSS styling<\/li>\n<\/ol>\n<\/blockquote>\n<p> &#8230; but just substitute &#8220;animation&#8221; for &#8220;border of card&#8221; or just &#8220;card&#8221; above.  With help regarding the CSS above we&#8217;d like to thank <a target=_blank title=https:\/\/dev.to\/anthonyjdella\/how-to-animate-an-emoji-with-css-5eb9 href='https:\/\/dev.to\/anthonyjdella\/how-to-animate-an-emoji-with-css-5eb9'>How to Animate an Emoji with CSS<\/a>.<\/p>\n<p>We hope you try it out, creating your own webpages!<\/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\/emoji-animation-primer-tutorial\/'>Emoji Animation Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='sebcpt'>Previous relevant <a target=_blank title='Simple Emoji Border Card Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/simple-emoji-border-card-primer-tutorial\/'>Simple Emoji Border Card 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\/PHP\/simple_card.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Simple Emoji Border Card Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.jpg\" title=\"Simple Emoji Border Card Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Simple Emoji Border Card Primer Tutorial<\/p><\/div>\n<p>We were really happy to stumble upon <a target=_blank href='https:\/\/stackoverflow.com' title='StackOverflow'>StackOverflow<\/a>&#8216;s excellent <a target=_blank href='https:\/\/stackoverflow.com\/questions\/41199841\/use-emoji-as-css-border' title='Use Emoji as CSS Border'>Use Emoji as CSS Border<\/a> webpage <font size=1>(of dreams and ideas)<\/font> the other day, and immediately want to &#8230;<\/p>\n<ul>\n<li>start <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.php_GETME\" title=\"simple_card.php\">&#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.php\" title=\"Click picture\">Simple Emoji Border Card<\/a> creating today &#8230; ready for &#8230;<\/li>\n<li>whatever the future may hold, into the future, because we smell a <i>tool<\/i> coming on<\/li>\n<\/ul>\n<p>We break the &#8220;user controllable&#8221; components of the card into &#8230;<\/p>\n<ol>\n<li>wording of the card<\/li>\n<li>emoji <font size=1>(maybe)<\/font> border of card CSS styling<\/li>\n<\/ol>\n<p> &#8230; used by the user via some HTML textarea content they could edit to click a &#8220;Post&#8221; button creating their tailored (left hand table cell containing) HTML div element, that if double clicked (or just clicked within the surrounding table cell below the HTML &#8220;card&#8221; div) opens the user&#8217;s created card, alone, in a new window.<\/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='#d55541' onclick='var dv=document.getElementById(\"d55541\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/card\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55541' 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='#d55637' onclick='var dv=document.getElementById(\"d55637\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/animation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55637' 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='#d55648' onclick='var dv=document.getElementById(\"d55648\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/comma\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55648' 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='#d55656' onclick='var dv=document.getElementById(\"d55656\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/background-clip\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55656' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Again, today, we&#8217;re cloning and modifying a new &#8220;proof of concept&#8221; version of a &#8220;Text Background Clip&#8221; server web application &#8230; based on the PHP of Simple Emoji Border Card Primer Tutorial &#8230; and &#8230; a lot of CSS help &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/text-background-clip-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":[84,3970,2486,3095,2503,2509,3533,281,2276,342,385,405,576,932,970,997,2141,1122,3942,1209,1212,1226,1262,1319,1583,2308,1622],"class_list":["post-55656","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-animation-2","tag-background-clip","tag-block","tag-card","tag-clone","tag-cloning","tag-comma","tag-css","tag-delimitation","tag-div","tag-emoji","tag-exec","tag-html","tag-php","tag-post","tag-programming","tag-range","tag-server","tag-shell_exec","tag-style","tag-styling","tag-svg","tag-textarea","tag-tutorial","tag-window","tag-wording","tag-words"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55656"}],"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=55656"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55656\/revisions"}],"predecessor-version":[{"id":55697,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55656\/revisions\/55697"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=55656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=55656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=55656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}