You’re wonderful Archibald. 
I got Lucy completed. I’m pleased with the results… She’s in the somewhat inelegantly titled
file (shape-outside_URL)_01.html. Tell me what y’all think!
I’ll return to my Merton now. 
—s
<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<title><shape-outside: URL> by semicodin ᰄ This code Courtesy of “Deep Archibald” of the Sitepoint Forums</title>
<style>
body {
width: 1080px;
margin: 0; /* note this doesn’t work with FLOATS :( */
padding: 0;
border: 0;
outline: 0;
color: black;
font-size: 100%;
background: #ffffee;
vertical-align: text-top;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 1.02;
font-weight: 600;
}
p {line-height: 1}
* {box-sizing: border-box}
.crim {color: crimson}
.undr {text-decoration: underline}
.lead {
color: blue;
margin: 2.75rem 0 0 0;
text-align: center;
font-family: 'solway', serif;
font-weight: bold;
font-size: 3.13rem;
line-height: 1.1;
}
.wrapper {
margin: 0rem 0 1rem 0;
}
.main {
margin: 3rem 3.13rem 3rem 3.13rem;
background-color: #ffffee;
font-style: normal;
text-align: left;
color: black;
font-family: 'solway', serif;
font-size: 2.5rem;
line-height: 1.02;
font-weight: 600;
}
.lucy {
float: left;
width: 620px;
height: 1310px;
shape-margin: 1.25rem;
margin: 0;
shape-image-threshold: 0.5;
shape-outside: url(https://semicodin.nekoweb.org/vault/lucy_1310.png);
}
.hilite {
color: yellow;
background-color: crimson;
vertical-align: baseline;
padding-top: .5rem;
padding-right: .6rem;
padding-bottom: .4rem;
padding-left: .7rem;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 1.02;
font-weight: 800;
}
.henpen {
text-align: center;
color: blue;
margin: 1rem 0 2rem 0;
font-size: 6rem;
line-height: 1.02;
font-weight: 700;
font-family: 'Henny Penny', cursive;
}
.contact {
margin: 0;
padding: 0rem 0rem 7rem 0rem;
background-color: #d4d4ff;
font-style: normal;
text-align: left;
color: black;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.here {
color: black;
text-align: center;
padding-top: 5rem;
margin: 0rem 0 1rem 0;
font-family: 'solway', serif;
font-size: 4rem;
line-height: 1.1;
font-weight: bold;
}
.thanks {
color: black;
text-align: center;
margin: 0rem 4rem 1rem 4rem;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: bold;
}
.quest {
color: black;
text-align: center;
margin: 2.25rem 2rem 2.25rem 2rem;
font-family: 'solway', serif;
font-size: 3rem;
line-height: 1.05;
font-weight: bold;
}
.end {
color: black;
text-align: center;
margin: 1rem 4rem 2.5rem 4rem;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: bold;
}
a:active {color: blue}
a:hover {color: crimson}
a:link {color: blue}
a:visited {color: blue}
/*▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬*/
</style>
</head>
<body>
<div class="lead">
CSS <shape‑outside: (URL)>
</div>
<div class="wrapper">
<img class="lucy" src="https://semicodin.nekoweb.org/vault/lucy_1310.png" alt="Lucy">
<div class="main">
This short intro will
not get you started
with <shape-
outside (URL)>.
For that you need to read Razvan Caliman’s 23-Page <span class="blu"><a href="https://web.dev/articles/shapes-getting-started">
Primer on the <shape‑outside: (URL)> property here</a>.</span> I’ve included the entire article as a .PDF in your .ZIP file! My small contribution is to put you in the way of tools you will need to wrap text around an image, and what graphic types will not work with the <shape‑outside> property.
<p></p><p></p>
Briefly, the CSS <shape‑outside> property allows you to structure text flow around a user-defined shape that has <span class="crim">TRANSPARENCY</span>: <br>
.PNGs and .SVGs work beautifully; <i>.JPGs and .GIFs will <span class="crim">not</span> work with <shape-outside></i>.
<p></p>
<p></p>
If your image is a .JPG or a .GIF I recommend converting it into a .PNG. While you can use any of dozens of free online graphics converters you will inevitably need to use a GRAPHICS EDITOR to erase the portion of your graphic that the text needs available for your content. I highly recommend handycloset’s FREE (and easy!) Android App <a href=" https://play.google.com/store/apps/details?id=com.handycloset.android.eraser">”BACKGROUND ERASER”</a>.
<p></p>
<p></p>
There are four types of <shape‑outside> properties: CIRCLE, ELLIPSE, POLYGON, and URL (an image available on the internet, supplied as a path).
<p></p>
<p></p>
We’ll call our silhouette “Lucy.” For the purposes of Lucy we’re using a “URL” path which tells the browser to extract the contours of the solid portion of Lucy’s image <span class="crim"><i>automatically, based upon her transparency</i></span>. These contours form the path the content will use to wrap around Lucy’s profile. The goal is to move the text around the solid portion of Lucy’s hat, face, neck & chest — allowing a 1.25rem (20px) margin. These are the <i>primary</i> building blocks for <shape‑outside> so begin with the tools I’ve suggested you try and use Razvan’s easy-to-follow PDF for Getting Started with <shape‑outside>.
<p></p><p></p>
<span class="hilite">IMPORTANT!</span> <shape‑outside> will not work on free servers such as Google Photos <i>even if you have converted the images to clickable links</i> as I describe in my About page. Both the image and its HTML file must reside in the same folder on a server such as Nekoweb (which gives you 500 MB free space). Reserve your limited storage space for your <shape‑outside> pages which <span class="undr">have to be there</span>, and use Google Photos for all your other pages. Read more in my About page.
<p></p><p></p>
And one final word about <shape‑outside> . . .
This is an <i>inexact science</i> to put it mildly: Be prepared to spend hours and hours tweaking both your image and the HTML file it belongs to to seat the content to your satisfaction. Use &nbsp;s where needed in tight spots to fine tune the appearance. The end result will be stunning and your patience will pay off in (at times) jaw-dropping visuals!
</div><!-- CLOSING MAIN -->
</div><!-- CLOSING WRAPPER -->
<div class="henpen">semicodin</div>
<div class="contact">
<div class="here">
<a href="https://semicodin.nekoweb.org/comingsoon.html">Code Here</a>
</div>
<div class="thanks">
This code courtesy of Paul O’Brien and<br>
“Deep Archibald” at the Sitepoint Forums
</div>
<div class="quest">
Got Questions? You can PM me at<br>
<a href="https://sitepoint.com/community/c/html-css/25">the Sitepoint Forums</a><span class="clambu35">!</span><br>
</div>
<div class="end">
CLICK HERE TO PROCEED<br>
<a href="https://semicodin.nekoweb.org/toc.html">
TO THE TABLE OF CONTENTS</a><br>
</div>
</div><!-- CLOSING CONTACT -->
</body>
</html
Looks good!
Putting shape-outside within greater-than and less-than characters like this <shape-outside> makes it look like it is an HTML tag, not a CSS property.
1 Like
Oh! 
I’ll reword it then. And edit the code . . .
Code does not need editing.
I meant to say my content. 
Guys check out this giraffe!
1 Like
Edit: disregard everything I said below: Merton won’t display. Merton! Always Merton! I think he intrigues from beyond the grave woooooo ooo.
I wanted to just quickly update the thread on Deep Archibald’s ground-breaking intelligence on the servers used with shape-outside (URL) images: I can confirm that the transparent graphic and the HTML it belongs to can live in different folders so long as they are on the same server/domain! I’ve migrated my images to a sub-folder named \pics, and the HTML files to a folder named cryptically \origins. Both of my shape-outside pages — Lucy and Merton — display perfectly.
In all my excitement over Archibald’s cross-origin intelligence this flew right past me. Thank you Paul. Deep. Very deep.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.