Emoji Borders and Backgrounds for Image Tutorial

Emoji Borders and Backgrounds for Image Tutorial

Emoji Borders and Backgrounds for Image Tutorial

Yesterday’s Emoji Borders and Backgrounds Context Tutorial involved Emoji Borders and Backgrounds around some Text, and hosted the SVG producing PHP with an HTML/Javascript/CSS parent webpage, but today we’re diving back into the changed inline_svg.php PHP live run to allow for the bordered or backgrounded content be an image, staying within the SVG itself that the PHP code produces.

When image content becomes involved it might be best for you to see for yourself, below, how this new functionality might be used …

Tutorial Picture bordered by Doves of Peace (width=260=height)
Tutorial Picture bordered by Doves of Peace
Tutorial Picture
Tutorial Picture (width=260=height)
Yesterday’s changed emoji_border_background.html HTML Parent now Allows for an Image in SVG


Previous relevant Emoji Borders and Backgrounds Context Tutorial is shown below.

Emoji Borders and Backgrounds Context Tutorial

Emoji Borders and Backgrounds Context Tutorial

It’s all fine and good creating the Emoji Borders and Backgrounds of yesterday’s Emoji Borders and Backgrounds Primer Tutorial, but it’s the context of their use that we are starting to take an interest in with today’s …

  1. take yesterday’s table as a starting bit to our …
  2. “making use of” “proof of concept” emoji_border_background.html live run link for you to contextualize and make use of those table’s iframe contents from yesterday …

… as we figure out, perhaps, some better “tool like generics” here. We’ll see (we hope)!

But, so far, how would we assess the approach, here? Well, what we had to do today reminded us a lot of what we do here, often, at this blog, when we talk about “overlay” webpage design approaches. CSS position:absolute and opacity and Javascript [element].getBoundingClientRect() all made guest appearances!


Previous relevant Emoji Borders and Backgrounds Primer Tutorial is shown below.

Emoji Borders and Backgrounds Primer Tutorial

Emoji Borders and Backgrounds Primer Tutorial

Time for a new project into the new year. It’s an “old chestnut” project, for us. Being able to handle …

  • borders made up of emoji images (in the form of “image/svg+xml” mimetype data)
  • backgrounds made up of emoji images (in the form of “image/svg+xml” mimetype data)

… via “proof of concept” (at least for our “Primer” tutorial start) inline_svg.php‘s single violin emoji or …

Description Iframe
Line of Doves of Peace Emojis
Border of Train Emojis
Background Flag of Andorra Emojis

Cute, huh?!

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

This entry was posted in eLearning, Tutorials and tagged , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>