Paul it looks great! I’m going to take yours as the solution because I don’t think we can do any better. You’ve NAILED it Maestro. 
Yes essentially, you could have 2 completely separate rules and avoid any mistakes but that means a lot of rules are duplicated as the difference in both is just a few property values.
When i style a component I use the common rules for all in the first rule and then modify it with a class if needed.
e.g.Consider the following rule example:
.test{
color:red;
background:white;
width:50%;
min-height:100vh;
}
.test2{color:green;}
.test3{color:blue;}
If we wanted 3 completely separate rules we would need almost three times as much code:
e.g.
.test{
color:red;
background:white;
width:50%;
min-height:100vh;
}
.test2{
color:green;
background:white;
width:50%;
min-height:100vh;
}
.test3{
color:blue;
background:white;
width:50%;
min-height:100vh;
}
In a large site there could be hundreds of opportunities like this and then you end up with massive and unwieldy stylesheets which makes the chance of error greater as there is so much more code to look through.
On a small site like yours you probably could use the more verbose methods but as you know stylesheets always seem to grow.
1 Like
But I like verbose! Verbose for me — learning me — is good until I get comfortable with shortcuts. 
1 Like
Well I made a real hash out of this job. I reworked the parchment graphic for this to create one large enough to enclose the whole poem (to avoid stretching it) and mistakenly thought I had done this poem in 1080px width when in fact it is 950px. No problem; I downsized it to 950 but the image has some corruption in its structure that I can’t access and it manifests in the lower left corner of the graphic as something ugly. It is conspicuous.
It gets worse because in resizing it to 950 I broke Paul’s fragile shape-outside and there’s no going back. Trust me I’ve tried everything. This boat won’t be floating (with this background at any rate). I’m going to hunt down a less prickly image to do shape-outside: ellipse with and the background isn’t going to get anywhere near its coordinates. Just tired and defeated. Sorry Paul. You had this perfect and I broke it. It’s here if you want to see it. 
I am not sure it does what you want, but try deleting these lines;
p.circle {
clear: both;
margin-left: 6.25rem;
padding: 0rem 0;
}
The bottom left corner is improved if you delete this line from your .parch CSS rule:
background-position: 0 -10px;
1 Like
Archibald! You did it! You did it! You saved the poem. How in the hell . . . I’m speechless. 
You just made me very happy my friend. Wait til Paul sees this . . . You even cured the blemish in my graphic.
Archibald (or Paul or snady) below is the code very close to being finished. There is just one more issue and that is the text on the tabs. They live in LINE 129 and what needs to happen is they need to be lowered on all 3 tabs.
A quick look at the output can be seen here. Here is the code. I even tried <sub></sub> but she wasn’t having any of it lol.
The tricky part of this is trying to lower the text without breaking Paul’s carefully calibrated code for the animated tabs!
<!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 href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<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: ellipse ᰄ by semicodin /with Special Thanks to “Deep Archibald” at the Sitepoint Forums</title>
<style>
p {
line-height: 1
}
u {
text-decoration: underline
}
* {
box-sizing: border-box
}
.blu {
color: blue
}
.crim {
color: crimson
}
.cin {color: #611205}
body {
width: 950px;
margin: 0;
padding: 0;
border: 0;
outline: 0;
color: black;
font-size: 100%;
background: transparent;
vertical-align: text-top;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: 600;
}
.blu {
color: blue
}
.crim {
color: crimson
}
.blub {
color: blue;
font-weight: bold;
}
.break {
margin-top: 2.38rem
}
.break2 {
margin-top: 2rem
}
.centindent1 {
text-align: center;
margin-top: 4.5rem;
}
aside {
padding: 1.5rem 5rem 1.5rem 5rem;
margin-bottom: 6rem;
background-image: url("https://lh3.googleusercontent.com/pw/AP1GczMPUBfBE6q_7DuPDZg-SeMrTwp-mUqfXKTvRVEPar_avikeVcibjtzA4r4Dqyz4VB2SmfraFHCp90aaSBvsAGRcXT4YnmrFWNEkeQwdDCzP-kgTOQ=w950-h950");
width: 950px;
height: 950px;
}
.notes {
margin: 0;
font-style: normal;
text-align: center;
color: black;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.henpen {
text-align: center;
color: black;
margin-top: 2.5rem;
font-size: 4rem;
line-height: 1.02;
font-weight: 700;
font-family: 'Henny Penny', cursive;
}
td {
padding-top: .4rem;
padding-right: .4rem;
padding-bottom: .4rem;
padding-left: .7rem;
}
:root {
--tab1color: #ffe5fe;
--tab2color: teal;
--tab3color: #caffff;
--border-color: #000;
/* this one above is the filter color that makes the top border*/
--bottom-border-color: #000;
/* no need to change*/
}
.tablabel3 {
position: relative;
text-align: center;
border-radius: 20px 20px 0px 0px;
color: black;
padding: 1rem 1rem 0;
font-family: fira sans extra condensed', sans-serif;
font-size: 2.5rem;
line-height: 1;
font-weight: bold;
height: 67px;
width: 250px;
filter: drop-shadow(-3px 0px var(--border-color)) drop-shadow(3px 0px var(--border-color));
}
.tab {
display: flex;
max-width: 950px;
margin: auto;
overflow: hidden;
position: relative;
z-index: 1;
filter: drop-shadow(0px -5px var(--border-color));
border-bottom: 10px solid var(--bottom-border-color);
}
.tab:after,
.tab:before {
content: "";
position: relative;
z-index: 2;
flex: 1;
/*box-shadow: 0 34px var(--tab2color);*/
box-shadow: 0 34px rgba(221, 198, 136, 0.8);
/* Try and match a color from the image*/
mix-blend-mode: lighten;
/* merge the box shadow above with the background */
/* this is necessary or a gap will show */
}
.tab:before {
box-shadow: 0 34px rgb(0, 0, 0, 0.8)
}
.tab:after {
border-radius: 0 0 0 80px;
margin-left: -9px;
}
.tab:before {
border-radius: 0 0 80px 0;
margin-right: -9px;
}
.tablabel3:before {
content: "";
pointer-events: none;
position: absolute;
inset: 0 0 0 0;
z-index: -1;
background: var(--tab2color) url("https://assets.codepen.io/74047/PARCHMENT-A.jpg");
background-position: -3px -8px;
transform: perspective(100px) rotateX(36deg) translateY(5px);
border-radius: 20px 20px 0 0;
}
.bkdimg2 {
position: relative;
background: none;
overflow: hidden;
margin-top: 1rem;
margin-bottom: -2px;
/* attempt to stop rounding errors when zoomed*/
}
.ctr {
pointer-events: none;
}
.ctr a {
pointer-events: initial;
}
.ctr {
position: absolute;
inset: 0 0 0 0;
}
.ctr2 {
z-index: 3
}
.ctrmid {
z-index: 2
}
.ctr3 {
z-index: 1
}
.ctr2 .tab:before {
flex: 0 0 65px;
}
.ctr3 .tab:after {
flex: 0 0 65px;
}
.tab1active .ctr,
.tab2active .ctr,
.tab3active .ctr {
position: absolute;
}
.tab1active .ctr2,
.tab2active .ctrmid,
.tab3active .ctr3 {
position: relative;
z-index: 4;
}
.tab3active .ctr2 {
z-index: 1;
}
/* ━━━ BACKGROUND & POEM-A ━━━ */
.tab a {
transform: translateY(-8px);
display: flex;
text-align: center;
justify-content: center;
}
.tab a:link {
color: black;
font-weight: bold;
}
.tab a:visited {
color: black;
font-weight: bold;
}
.redlink a:link {
color: crimson;
padding-top: 1rem;
font-weight: bold;
}
.redlink a:visited {
color: crimson;
padding-top: 1rem;
font-weight: bold;
}
.leada {
color: black;
margin-top: 7rem;
text-align: center;
font-family: 'solway', serif;
font-weight: bold;
font-size: 3rem;
line-height: 3.25rem;
}
.leadb {
text-align: center;
font-family: 'solway', serif;
font-weight: bold;
font-size: 2.5rem;
line-height: 3rem;
}
.leadc {
text-align: center;
font-style: normal;
margin-bottom: 2.5rem;
font-family: 'solway', serif;
font-weight: bold;
font-size: 2rem;
line-height: 2.5rem;
}
.poem-a {
margin-top: 3.13rem;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 2.5rem;
font-style: normal;
text-align: left;
color: black;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.parch {
background-image: url('https://semicodin.nekoweb.org/origin/gorilla.jpg');
padding: 1rem;
background-size: cover; /* STRETCHES BACKGROUND IMAGE! */
}
.wise-man {
margin-bottom: 0;
}
.indent {
margin: 0 0 0 6.25rem
}
.circle:before {
content: "";
float: left;
shape-outside: ellipse(58% 30% at left);
width: 131px;
height: 326px;
margin-top: 0rem;
}
p.circle {
margin-bottom: 2rem;
display: flow-root;
}
.circle2:before {
margin-top: 0;
content: "";
height: 504px;
shape-outside: ellipse(29% 38% at left);
width: 237px;
}
.bulink a:link {
color: blue;
margin: 0;
padding: 0;
font-weight: bold;
}
.bulink a:visited {
color: blue;
margin: 0;
padding: 0;
font-weight: bold;
}
.foot {
color: #ffffee;
/* ivory */
margin-top: 6rem;
text-align: left;
font-style: normal;
margin-bottom: 3.13rem;
font-family: 'solway', serif;
font-weight: bold;
font-size: 2rem;
line-height: 2.13rem;
}
.contact {
margin: 0;
padding: 0rem 0rem 4rem 0rem;
background-color: #f0e9cc;
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: 3.13rem;
margin: 0;
font-family: 'solway', serif;
font-size: 4rem;
line-height: 1;
font-weight: bold;
}
.down {
color: #611205;
text-align: center;
margin: 0 0 1rem 0;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 1;
font-weight: 700;
}
.tiny {
color: #888888;
text-align: center;
margin: 1rem 4rem 1rem 4rem;
font-family: '1 prime', monospace;
font-size: 1rem;
line-height: 1.13rem;
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;
}
.clamcin35 {
color: #611205;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 3.5rem;
font-weight: 900;
}
a:active {
color: blue
}
a:hover {
color: crimson
}
a:link {
color: #611205
}
a:visited {
color: #611205
}
/*▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬*/
</style>
</head>
<body>
<aside>
<div class="centindent1">
<span class="bulink">
<a href="https://web.dev/articles/shapes-getting-started">Read Razvan Caliman’s 23-Page<br>
Primer on the CSS shape-outside</a></span>
</div>
<!-- CLOSING CENTINDENT1 -->
<div class="notes">
<span class="bulink">
<a href="https://web.dev/articles/shapes-getting-started">property</a></span>. I’ve included the entire article as a .PDF in your .ZIP file — it’s good! The <span class="crim"><span class="undr">shape-outside: ellipse</span> shown here</span> allowed me to create two virtual ellipses for the poem to flow around. See <span class="bulink"><a href="https://semicodin.nekoweb.org/vault/shape-outside_(URL)_01.html">this page of mine</a></span> for more detail about shape-outside.
<div class="break2">
I couldn’t have antcipated the effect “sculpting” the text in this fashion would have upon the poem itself but there is a relationship between the two “waves” created by the <span class="crim"><u>space-outside: ellipse</u></span> and the urgency of hearing the words in your mind as you read them: The resulting “ebb and flow” invests the words with completely new meaning.
</div><!-- CLOSING BREAK -->
<div class="henpen">semicodin</div>
</div><!-- CLOSING NOTES -->
</aside>
<div class="bkdimg2 tab1active">
<div class="ctr ctr2">
<div class="tab"><span class="tablabel3"><a href="https://en.m.wikipedia.org/wiki/Thomas_Merton">China 410BC</a></span></div>
</div>
<div class="ctr ctrmid">
<div class="tab"><span class="tablabel3"><a href="https://en.m.wikipedia.org/wiki/Zhuang_Zhou">Chuang Tzu</a></span></div>
</div>
<div class="ctr ctr3">
<div class="tab"><span class="tablabel3"><a href="https://en.m.wikipedia.org/wiki/Zhuangzi_(book)">“Zhuangzi”</a></span></div>
</div>
</div>
<div class="parch">
<div class="poem-a">
<div class="leada">
“The Empty Boat”
</div>
<div class="leadb">
From <i>“The Way of Chuang Tzu”</i>
</div>
<div class="leadc">
Interpreted by Thomas Merton, Trappist Monk<br>
1915-1968
</div>
<div class="twrap1">
<p class="circle">
He who rules men lives in confusion;<br>
He who is ruled by men lives in sorrow.<br>
Yao therefore desired<br>
Neither to influence others<br>
Nor to be influenced by them.<br>
The way to get clear of confusion<br>
And free of sorrow<br>
Is to live with Tao<br>
In the land of the great Void.</p>
<p class="circle circle2">
If a man is crossing a river<br>
And an empty boat collides with his own skiff,<br>
Even though he be a bad-tempered man<br>
He will not become very angry.<br>
But if he sees a man in the boat,<br>
He will shout at him to steer clear.<br>
If the shout is not heard, he will shout again,<br>
And yet again, and begin cursing.<br>
And all because there is somebody in the boat.<br>
Yet if the boat were empty,<br>
He would not be shouting, and not angry.</p>
</div><!-- ENDING TWRAP1 -->
<p class="break"></p>
<div class="indent">
If you can empty your own boat<br>
Crossing the river of the world,<br>
No one will oppose you,<br>
No one will seek to harm you.<br>
</div>
<p class="break">
The straight tree is the first to be cut down,<br>
The spring of clear water is the first to be drained dry.<br>
If you wish to improve your wisdom<br>
And shame the ignorant,<br>
To cultivate your character<br>
And outshine others;<br>
A light will shine around you<br>
As if you had swallowed the sun and the moon:<br>
You will not avoid calamity.</p>
<p class="break wise-man">
A wise man has said:</p>
<div class="indent">
“He who is content with himself<br>
Has done a worthless work.<br>
Achievement is the beginning of failure.<br>
Fame is the beginning of disgrace.”
</div>
<p class="break">
Who can free himself from achievement<br>
And from fame, descend and be lost<br>
Amid the masses of men?<br>
He will flow like Tao, unseen,<br>
He will go about like Life itself
With no name and no home.<br>
Simple is he, without distinction.<br>
To all appearances he is a fool.<br>
His steps leave no trace. He has no power.<br>
He achieves nothing, has no reputation.<br>
Since he judges no one<br>
No one judges him.</p>
<p class="break"></p>
<div class="indent">Such is the perfect man:<br>
His boat is empty.
</div>
<p class="foot">
[xx. 2.]<br>
[xx. 2, 4.]<br>
114<br>
115</p>
</div> <!-- Closing POEM-A -->
</div> <!-- Closing PARCH -->
<div class="contact">
<div class="here">
<div class="cinlink">
<a href="https://semicodin.nekoweb.org/(shape-outside_ellipse)_01">
Code Here.</a>
</div>
</div>
<div class="down">
Long Press on “Download Link” and save.
</div>
<div class="thanks">
This code courtesy of<br>
Paul O’Brien and
“Deep Archibald”<br>
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="clamcin35">!</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>
</div>
</div><!-- CLOSING CONTACT -->
</body>
</html>
Change:
transform: translateY(-8px);
to
transform: translateY(-6px);
(That is just under: /* ━━━ BACKGROUND & POEM-A ━━━ */ )
1 Like
Even better: I just removed it.
Archibald (or Paul?) I’m having trouble substituting Paul’s 3 static tabs with his 3 animated ones. Would you look at the poem I’ve uploaded as “original.html” and compare it with my final (so far) version, below? The tabs on my code below should be animated — and I just caught another issue: the image of Merton in repose should be flush with the left margin; he shouldn’t be sticking out like that, it breaks the whole shape-outside. Note just for the record I format my code this way because I have exactly 3” of screenwidth on this phone! Thank you guys.
<!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 href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<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>97 svgpar3_ani ᰄ by semicodin /with Special Thanks to “Deep Archibald” at the Sitepoint Forums</title>
<style>
p {line-height: 1}
u {text-decoration: underline}
* {box-sizing: border-box}
.blu {color: blue}
.crim {color: crimson}
.cin {color: #611205}
.break {margin-top: 2.38rem}
.break2 {margin-top: 2rem}
.wise-man {margin-bottom: 0}
.indent {margin: 0 0 0 6.25rem}
body {
width: 950px;
margin: 0;
padding: 0;
border: 0;
outline: 0;
color: black;
font-size: 100%;
background: transparent;
vertical-align: text-top;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: 600;
}
.centindent1 {
text-align: center;
margin-top: 4.5rem;
}
aside {
padding: 1.5rem 5rem 1.5rem 5rem;
margin-bottom: 6rem;
background-image: url("https://lh3.googleusercontent.com/pw/AP1GczMPUBfBE6q_7DuPDZg-SeMrTwp-mUqfXKTvRVEPar_avikeVcibjtzA4r4Dqyz4VB2SmfraFHCp90aaSBvsAGRcXT4YnmrFWNEkeQwdDCzP-kgTOQ=w950-h950");
width: 950px;
height: 950px;
}
.notes {
margin: 0;
font-style: normal;
text-align: center;
color: black;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.henpen {
text-align: center;
color: black;
margin-top: 2.5rem;
font-size: 4rem;
line-height: 1.02;
font-weight: 700;
font-family: 'Henny Penny', cursive;
}
:root {
--tab1color: #ffe5fe;
--tab2color: teal;
--tab3color: #caffff;
--border-color: #000;
/* this one above is the filter color that makes the top border*/
--bottom-border-color: #000;
/* no need to change*/
}
.tablabel3 {
position: relative;
text-align: center;
border-radius: 20px 20px 0px 0px;
color: black;
padding: 1rem 1rem 0;
font-family: 'fira sans extra condensed', sans-serif;
font-size: 2.5rem;
line-height: 1;
font-weight: bold;
height: 67px;
width: 250px;
filter: drop-shadow(-3px 0px var(--border-color)) drop-shadow(3px 0px var(--border-color));
}
.tab {
display: flex;
max-width: 950px;
margin: auto;
overflow: hidden;
position: relative;
z-index: 1;
filter: drop-shadow(0px -5px var(--border-color));
border-bottom: 10px solid var(--bottom-border-color);
}
.tab:after,
.tab:before {
content: "";
position: relative;
z-index: 2;
flex: 1;
/*box-shadow: 0 34px var(--tab2color);*/
box-shadow: 0 34px rgba(221, 198, 136, 0.8);
/* Try and match a color from the image*/
mix-blend-mode: lighten;
/* merge the box shadow above with the background */
/* this is necessary or a gap will show */
}
.tab:before {box-shadow: 0 34px rgb(0, 0, 0, 0.8)}
.tab:after {
border-radius: 0 0 0 80px;
margin-left: -9px;
}
.tab:before {
border-radius: 0 0 80px 0;
margin-right: -9px;
}
.tablabel3:before {
content: "";
pointer-events: none;
position: absolute;
inset: 0 0 0 0;
z-index: -1;
background: var(--tab2color) url("https://semicodin.nekoweb.org/origin/parchment-b_3000.jpg");
background-position: -3px -8px;
transform: perspective(100px) rotateX(36deg) translateY(5px);
border-radius: 20px 20px 0 0;
}
.bkdimg2 {
position: relative;
background: none;
overflow: hidden;
margin-top: 1rem;
margin-bottom: -2px;
/* attempt to stop rounding errors when zoomed*/
}
.ctr {pointer-events: none;}
.ctr a {pointer-events: initial;}
.ctr {
position: absolute;
inset: 0 0 0 0;
}
.ctr2 {z-index: 3}
.ctrmid {z-index: 2}
.ctr3 {z-index: 1}
.ctr2 .tab:before {flex: 0 0 65px}
.ctr3 .tab:after {flex: 0 0 65px}
.tab1active .ctr,
.tab2active .ctr,
.tab3active .ctr {
position: absolute;
}
.tab1active .ctr2,
.tab2active .ctrmid,
.tab3active .ctr3 {
position: relative;
z-index: 4;
}
.tab3active .ctr2 {z-index: 1}
/* ━━━ BACKGROUND & POEM-A ━━━ */
.tab a {
display: flex;
text-align: center;
justify-content: center;
}
.tab a:link {
color: black;
font-weight: bold;
}
.tab a:visited {
color: black;
font-weight: bold;
}
.leada {
margin-top: 5rem;
color: black;
text-align: center;
font-family: 'solway', serif;
font-weight: bold;
font-size: 3rem;
line-height: 3.25rem;
}
.leadb {
text-align: center;
font-family: 'solway', serif;
font-weight: bold;
font-size: 2.5rem;
line-height: 3rem;
}
.leadc {
text-align: center;
font-style: normal;
margin-bottom: 2.5rem;
font-family: 'solway', serif;
font-weight: bold;
font-size: 2rem;
line-height: 2.5rem;
}
.poem-a {
margin-top: 3.13rem;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 2.5rem;
font-style: normal;
text-align: left;
color: black;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.parch {
background-image: url('https://semicodin.nekoweb.org/origin/parchment-b_3000.jpg');
padding: 1rem;
background-size: cover; /* STRETCHES BACKGROUND IMAGE! */
}
.circle:before {
content: "";
float: left;
shape-outside: ellipse(58% 30% at left);
width: 131px;
height: 326px;
margin-top: 0rem;
}
p.circle {
margin-bottom: 2rem;
display: flow-root;
}
.circle2:before {
margin-top: 0;
content: "";
height: 504px;
shape-outside: ellipse(29% 38% at left);
width: 237px;
}
.bulink a:link {
color: blue;
margin: 0;
padding: 0;
font-weight: bold;
}
.bulink a:visited {
color: blue;
margin: 0;
padding: 0;
font-weight: bold;
}
.foot {
color: #ffffee;
/* ivory */
margin-top: 6rem;
text-align: left;
font-style: normal;
margin-bottom: 3.13rem;
font-family: 'solway', serif;
font-weight: bold;
font-size: 2rem;
line-height: 2.13rem;
}
.contact {
margin: 0;
padding-bottom: 5rem;
background-color: #f0e9cc;
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: 3.13rem;
margin: 0;
font-family: 'solway', serif;
font-size: 4rem;
line-height: 1;
font-weight: bold;
}
.down {
color: #611205;
text-align: center;
margin: 0 0 1rem 0;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 1;
font-weight: 700;
}
.tiny {
color: #888888;
text-align: center;
margin: 1rem 4rem 1rem 4rem;
font-family: '1 prime', monospace;
font-size: 1rem;
line-height: 1.13rem;
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 0rem 4rem;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: bold;
}
.clamcin35 {
color: #611205;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 3.5rem;
font-weight: 900;
}
a:active {color: blue}
a:hover {color: crimson}
a:link {color: #611205}
a:visited {color: #611205}
/*▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬*/
</style>
</head>
<body>
<aside>
<div class="centindent1">
<span class="bulink">
<a href="https://web.dev/articles/shapes-getting-started">
Read Razvan Caliman’s 23-Page<br>
Primer on the CSS shape-outside</a></span>
</div><!-- CLOSING CENTINDENT1 -->
<div class="notes">
<span class="bulink">
<a href="https://web.dev/articles/shapes-getting-started">property</a></span>. I’ve included the entire article as a .PDF in your .ZIP file — it’s good! The <span class="crim"><span class="undr">shape-outside: ellipse</span> shown here</span> allowed me to create two virtual ellipses for the poem to flow around. See <span class="bulink"><a href="https://semicodin.nekoweb.org/vault/shape-outside_(URL)_01.html">this page of mine</a></span> for more detail about shape-outside.
<div class="break2">
I couldn’t have anticipated the effect “sculpting” the text in this fashion would have upon the poem itself but there is a relationship between the two “waves” created by the <span class="crim"><u>space-outside: ellipse</u></span>: the urgency of the beginning of the stanza and the tranquility of its landing. The resulting “ebb and flow” invests the words with completely new meaning: safety; peace.
</div><!-- CLOSING BREAK2 -->
<div class="henpen">semicodin</div>
</div><!-- CLOSING NOTES -->
</aside>
<div class="bkdimg2 tab1active">
<div class="ctr ctr2">
<div class="tab"><span class="tablabel3"><a href="https://en.m.wikipedia.org/wiki/Warring_States_period">
China 327 B.C.</a></span></div>
</div>
<div class="ctr ctrmid">
<div class="tab"><span class="tablabel3"><a href="https://en.m.wikipedia.org/wiki/Zhuang_Zhou">
Chuang Tzu</a></span></div>
</div>
<div class="ctr ctr3">
<div class="tab"><span class="tablabel3"><a href="https://en.m.wikipedia.org/wiki/Zhuangzi_(book)">
“Zhuangzi”</a></span></div>
</div>
</div>
<div class="parch">
<div class="poem-a">
<div class="leada">
“The Empty Boat”
</div>
<div class="leadb">
From <i>“The Way of Chuang Tzu”</i>
</div>
<div class="leadc">
Interpreted by Thomas Merton, Trappist Monk<br>
1915-1968
</div>
<div class="twrap1">
<p class="circle">
He who rules men lives in confusion;<br>
He who is ruled by men lives in sorrow.<br>
Yao therefore desired<br>
Neither to influence others<br>
Nor to be influenced by them.<br>
The way to get clear of confusion<br>
And free of sorrow<br>
Is to live with Tao<br>
In the land of the great Void.</p>
<p class="circle circle2">
If a man is crossing a river<br>
And an empty boat collides with his own skiff,<br>
Even though he be a bad-tempered man<br>
He will not become very angry.<br>
But if he sees a man in the boat,<br>
He will shout at him to steer clear.<br>
If the shout is not heard, he will shout again,<br>
And yet again, and begin cursing.<br>
And all because there is somebody in the boat.<br>
Yet if the boat were empty,<br>
He would not be shouting, and not angry.</p>
</div><!-- ENDING TWRAP1 -->
<p class="break"></p>
<div class="indent">
If you can empty your own boat<br>
Crossing the river of the world,<br>
No one will oppose you,<br>
No one will seek to harm you.<br>
</div>
<p class="break">
The straight tree is the first to be cut down,<br>
The spring of clear water is the first to be drained dry.<br>
If you wish to improve your wisdom<br>
And shame the ignorant,<br>
To cultivate your character<br>
And outshine others;<br>
A light will shine around you<br>
As if you had swallowed the sun and the moon:<br>
You will not avoid calamity.</p>
<p class="break wise-man">
A wise man has said:</p>
<div class="indent">
“He who is content with himself<br>
Has done a worthless work.<br>
Achievement is the beginning of failure.<br>
Fame is the beginning of disgrace.”
</div>
<p class="break">
Who can free himself from achievement<br>
And from fame, descend and be lost<br>
Amid the masses of men?<br>
He will flow like Tao, unseen,<br>
He will go about like Life itself
With no name and no home.<br>
Simple is he, without distinction.<br>
To all appearances he is a fool.<br>
His steps leave no trace. He has no power.<br>
He achieves nothing, has no reputation.<br>
Since he judges no one<br>
No one judges him.</p>
<p class="break"></p>
<div class="indent">Such is the perfect man:<br>
His boat is empty.
</div>
<p class="foot">
[xx. 2.]<br>
[xx. 2, 4.]<br>
114<br>
115</p>
</div> <!-- Closing POEM-A -->
</div> <!-- Closing PARCH -->
<div class="contact">
<div class="here">
<div class="cinlink">
<a href="https://semicodin.nekoweb.org/(shape-outside_ellipse)_01">
Code Here.</a>
</div>
</div>
<div class="down">
Long Press on “Download Link” and save.
</div>
<div class="thanks">
This code courtesy of<br>
Paul O’Brien and
“Deep Archibald”<br>
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="clamcin35">!</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>
</div>
</div><!-- CLOSING CONTACT -->
<!-- this following block of code is defining the svg and can be kept out of the way anyway on the page -->
<!-- I'm putting a div around it so that we can just hide them all from impacting on the page -->
<div class="hide-svg">
<!-- this one is for the three tab version -->
<!-- medium tab -->
<svg viewBox="0 0 116.417 11.875" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="cutetab-medium" class="tab-unit">
<clipPath id="shape3">
<path d="M93.07 302.303c-11.069 0-14.631.576-18.744 8.02-3.005 5.437-6.063 6.224-6.8 7.09h95.002c-.737-.866-3.795-1.653-6.8-7.09-4.113-7.444-7.675-8.02-18.745-8.02Z" transform="translate(-56.819 -301.538)" />
</clipPath>
<path style="fill:#000; stroke-width:4; stroke:#000" d="M87.484 301.538c-4.09.011-6.897 1.05-8.968 2.625-2.083 1.583-3.41 3.653-4.72 5.63-1.31 1.979-2.601 3.868-4.552 5.263-1.951 1.395-4.582 2.342-8.723 2.342H56.82v.015h11.236a12.469 12.469 0 0 0 2.038-1.172c2.208-1.579 3.604-3.656 4.92-5.642 1.317-1.987 2.556-3.883 4.385-5.274 1.83-1.39 4.264-2.33 8.15-2.33h54.957c3.887 0 6.321.94 8.15 2.33 1.83 1.391 3.07 3.287 4.386 5.274 1.316 1.986 2.712 4.063 4.92 5.642a12.47 12.47 0 0 0 2.038 1.172h11.236v-.015h-3.702c-4.14 0-6.772-.947-8.723-2.342-1.95-1.395-3.242-3.284-4.552-5.262-1.31-1.978-2.637-4.048-4.719-5.63-2.071-1.575-4.879-2.615-8.97-2.626Z" transform="translate(-56.819 -301.538)" />
<image class="tab-animated tan3" transform="translate(00 0)" width="270" height="220" href="https://semicodin.nekoweb.org/pics/parchment-a.jpg" clip-path="url(#shape3)" />
</g>
</defs>
</svg>
</div>
</body>
</html>
I saw what looked like entire sections of code missing and produced this effect. LINES 411-435:
<!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 href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<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>96 svgpar3_ani ᰄ by semicodin /with Special Thanks to “Deep Archibald” at the Sitepoint Forums</title>
<style>
p {line-height: 1}
u {text-decoration: underline}
* {box-sizing: border-box}
.blu {color: blue}
.crim {color: crimson}
.cin {color: #611205}
.break {margin-top: 2.38rem}
.break2 {margin-top: 2rem}
.wise-man {margin-bottom: 0}
.indent {margin: 0 0 0 6.25rem}
body {
width: 950px;
margin: 0;
padding: 0;
border: 0;
outline: 0;
color: black;
font-size: 100%;
background: transparent;
vertical-align: text-top;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: 600;
}
.centindent1 {
text-align: center;
margin-top: 5rem;
}
aside {
padding: 1.5rem 5rem 1.5rem 5rem;
margin-bottom: 6rem;
background-image: url("https://lh3.googleusercontent.com/pw/AP1GczMPUBfBE6q_7DuPDZg-SeMrTwp-mUqfXKTvRVEPar_avikeVcibjtzA4r4Dqyz4VB2SmfraFHCp90aaSBvsAGRcXT4YnmrFWNEkeQwdDCzP-kgTOQ=w950-h950");
width: 950px;
height: 950px;
}
.notes {
margin: 0;
font-style: normal;
text-align: center;
color: black;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.henpen {
text-align: center;
color: black;
margin-top: 2.5rem;
font-size: 4rem;
line-height: 1.02;
font-weight: 700;
font-family: 'Henny Penny', cursive;
}
:root {
--tab1color: #ffe5fe;
--tab2color: teal;
--tab3color: #caffff;
--border-color: #000;
/* this one above is the filter color that makes the top border*/
--bottom-border-color: #000;
/* no need to change*/
}
.tablabel3 {
position: relative;
text-align: center;
border-radius: 20px 20px 0px 0px;
color: black;
padding: 1rem 1rem 0;
font-family: 'fira sans extra condensed', sans-serif;
font-size: 2.5rem;
line-height: 1;
font-weight: bold;
height: 67px;
width: 250px;
filter: drop-shadow(-3px 0px var(--border-color)) drop-shadow(3px 0px var(--border-color));
}
.tab {
display: flex;
max-width: 950px;
margin: auto;
overflow: hidden;
position: relative;
z-index: 1;
filter: drop-shadow(0px -5px var(--border-color));
border-bottom: 10px solid var(--bottom-border-color);
}
.tab:after,
.tab:before {
content: "";
position: relative;
z-index: 2;
flex: 1;
/*box-shadow: 0 34px var(--tab2color);*/
box-shadow: 0 34px rgba(221, 198, 136, 0.8);
/* Try and match a color from the image*/
mix-blend-mode: lighten;
/* merge the box shadow above with the background */
/* this is necessary or a gap will show */
}
.tab:before {box-shadow: 0 34px rgb(0, 0, 0, 0.8)}
.tab:after {
border-radius: 0 0 0 80px;
margin-left: -9px;
}
.tab:before {
border-radius: 0 0 80px 0;
margin-right: -9px;
}
.tablabel3:before {
content: "";
pointer-events: none;
position: absolute;
inset: 0 0 0 0;
z-index: -1;
background: var(--tab2color) url("https://semicodin.nekoweb.org/origin/parchment-b_3000.jpg");
background-position: -3px -8px;
transform: perspective(100px) rotateX(36deg) translateY(5px);
border-radius: 20px 20px 0 0;
}
.bkdimg2 {
position: relative;
background: none;
overflow: hidden;
margin-top: 1rem;
margin-bottom: -2px;
/* attempt to stop rounding errors when zoomed*/
}
.ctr {pointer-events: none;}
.ctr a {pointer-events: initial;}
.ctr {
position: absolute;
inset: 0 0 0 0;
}
.ctr2 {z-index: 3}
.ctrmid {z-index: 2}
.ctr3 {z-index: 1}
.ctr2 .tab:before {flex: 0 0 65px}
.ctr3 .tab:after {flex: 0 0 65px}
.tab1active .ctr,
.tab2active .ctr,
.tab3active .ctr {
position: absolute;
}
.tab1active .ctr2,
.tab2active .ctrmid,
.tab3active .ctr3 {
position: relative;
z-index: 4;
}
.tab3active .ctr2 {z-index: 1}
/* ━━━ BACKGROUND & POEM-A ━━━ */
.tab a {
display: flex;
text-align: center;
justify-content: center;
}
.tab a:link {
color: black;
font-weight: bold;
}
.tab a:visited {
color: black;
font-weight: bold;
}
.leada {
margin-top: 5rem;
color: black;
text-align: center;
font-family: 'solway', serif;
font-weight: bold;
font-size: 3rem;
line-height: 3.25rem;
}
.leadb {
text-align: center;
font-family: 'solway', serif;
font-weight: bold;
font-size: 2.5rem;
line-height: 3rem;
}
.leadc {
text-align: center;
font-style: normal;
margin-bottom: 2.5rem;
font-family: 'solway', serif;
font-weight: bold;
font-size: 2rem;
line-height: 2.5rem;
}
.poem-a {
margin-top: 3.13rem;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 2.5rem;
font-style: normal;
text-align: left;
color: black;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.parch {
background-image: url('https://semicodin.nekoweb.org/origin/parchment-b_3000.jpg');
padding: 1rem;
background-size: cover; /* STRETCHES BACKGROUND IMAGE! */
}
.circle:before {
content: "";
float: left;
shape-outside: ellipse(58% 30% at left);
width: 131px;
height: 326px;
margin-top: 0rem;
}
p.circle {
margin-bottom: 2rem;
display: flow-root;
}
.circle2:before {
margin-top: 0;
content: "";
height: 504px;
shape-outside: ellipse(29% 38% at left);
width: 237px;
}
.bulink a:link {
color: blue;
margin: 0;
padding: 0;
font-weight: bold;
}
.bulink a:visited {
color: blue;
margin: 0;
padding: 0;
font-weight: bold;
}
.foot {
color: #ffffee;
/* ivory */
margin-top: 6rem;
text-align: left;
font-style: normal;
margin-bottom: 3.13rem;
font-family: 'solway', serif;
font-weight: bold;
font-size: 2rem;
line-height: 2.13rem;
}
.contact {
margin: 0;
padding-bottom: 5rem;
background-color: #f0e9cc;
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: 3.13rem;
margin: 0;
font-family: 'solway', serif;
font-size: 4rem;
line-height: 1;
font-weight: bold;
}
.down {
color: #611205;
text-align: center;
margin: 0 0 1rem 0;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 1;
font-weight: 700;
}
.tiny {
color: #888888;
text-align: center;
margin: 1rem 4rem 1rem 4rem;
font-family: '1 prime', monospace;
font-size: 1rem;
line-height: 1.13rem;
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 0rem 4rem;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: bold;
}
.clamcin35 {
color: #611205;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 3.5rem;
font-weight: 900;
}
a:active {color: blue}
a:hover {color: crimson}
a:link {color: #611205}
a:visited {color: #611205}
/*▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬*/
</style>
</head>
<body>
<aside>
<div class="centindent1">
<span class="bulink">
<a href="https://web.dev/articles/shapes-getting-started">
Read Razvan Caliman’s 23-Page<br>
Primer on the CSS shape-outside</a></span>
</div><!-- CLOSING CENTINDENT1 -->
<div class="notes">
<span class="bulink">
<a href="https://web.dev/articles/shapes-getting-started">property</a></span>. I’ve included the entire article as a .PDF in your .ZIP file — read it, it’s good! The <span class="crim"><span class="undr">shape-outside: ellipse</span> shown here</span> allowed me to create 2 virtual ellipses for the poem to flow around. See <span class="bulink"><a href="https://semicodin.nekoweb.org/vault/shape-outside_(URL)_01.html">this page of mine</a></span> for more detail about shape-outside.
<div class="break2">
I couldn’t have anticipated the effect “sculpting” the text in this fashion would have upon the poem itself but there is a relationship between the two “waves” created by the <span class="crim"><u>space-outside: ellipse</u></span>: the urgency of the beginning of the stanza and the tranquility of its landing. The resulting “ebb and flow” invests the words with completely new meaning: safety; peace.
</div><!-- CLOSING BREAK2 -->
<div class="henpen">semicodin</div>
</div><!-- CLOSING NOTES -->
</aside>
<div class="bkdimg2 tab1active">
<div class="ctr ctr2">
<div class="tab"><span class="tablabel3"><a href="https://en.m.wikipedia.org/wiki/Warring_States_period">
China 327 B.C.</a></span></div>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#cutetab-medium" />
</svg>
</div>
<div class="ctr ctrmid">
<div class="tab"><span class="tablabel3"><a href="https://en.m.wikipedia.org/wiki/Zhuang_Zhou">
Chuang Tzu</a></span></div>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#cutetab-medium" />
</svg>
</div>
<div class="ctr ctr3">
<div class="tab"><span class="tablabel3"><a href="https://en.m.wikipedia.org/wiki/Zhuangzi_(book)">
“Zhuangzi”</a></span></div>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#cutetab-medium" />
</svg>
</div>
</div>
<div class="parch">
<div class="poem-a">
<div class="leada">
“The Empty Boat”
</div>
<div class="leadb">
From <i>“The Way of Chuang Tzu”</i>
</div>
<div class="leadc">
Interpreted by Thomas Merton, Trappist Monk<br>
1915-1968
</div>
<div class="twrap1">
<p class="circle">
He who rules men lives in confusion;<br>
He who is ruled by men lives in sorrow.<br>
Yao therefore desired<br>
Neither to influence others<br>
Nor to be influenced by them.<br>
The way to get clear of confusion<br>
And free of sorrow<br>
Is to live with Tao<br>
In the land of the great Void.</p>
<p class="circle circle2">
If a man is crossing a river<br>
And an empty boat collides with his own skiff,<br>
Even though he be a bad-tempered man<br>
He will not become very angry.<br>
But if he sees a man in the boat,<br>
He will shout at him to steer clear.<br>
If the shout is not heard, he will shout again,<br>
And yet again, and begin cursing.<br>
And all because there is somebody in the boat.<br>
Yet if the boat were empty,<br>
He would not be shouting, and not angry.</p>
</div><!-- ENDING TWRAP1 -->
<p class="break"></p>
<div class="indent">
If you can empty your own boat<br>
Crossing the river of the world,<br>
No one will oppose you,<br>
No one will seek to harm you.<br>
</div>
<p class="break">
The straight tree is the first to be cut down,<br>
The spring of clear water is the first to be drained dry.<br>
If you wish to improve your wisdom<br>
And shame the ignorant,<br>
To cultivate your character<br>
And outshine others;<br>
A light will shine around you<br>
As if you had swallowed the sun and the moon:<br>
You will not avoid calamity.</p>
<p class="break wise-man">
A wise man has said:</p>
<div class="indent">
“He who is content with himself<br>
Has done a worthless work.<br>
Achievement is the beginning of failure.<br>
Fame is the beginning of disgrace.”
</div>
<p class="break">
Who can free himself from achievement<br>
And from fame, descend and be lost<br>
Amid the masses of men?<br>
He will flow like Tao, unseen,<br>
He will go about like Life itself
With no name and no home.<br>
Simple is he, without distinction.<br>
To all appearances he is a fool.<br>
His steps leave no trace. He has no power.<br>
He achieves nothing, has no reputation.<br>
Since he judges no one<br>
No one judges him.</p>
<p class="break"></p>
<div class="indent">Such is the perfect man:<br>
His boat is empty.
</div>
<p class="foot">
[xx. 2.]<br>
[xx. 2, 4.]<br>
114<br>
115</p>
</div> <!-- Closing POEM-A -->
</div> <!-- Closing PARCH -->
<div class="contact">
<div class="here">
<div class="cinlink">
<a href="https://semicodin.nekoweb.org/(shape-outside_ellipse)_01">
Code Here.</a>
</div>
</div>
<div class="down">
Long Press on “Download Link” and save.
</div>
<div class="thanks">
This code courtesy of<br>
Paul O’Brien and
“Deep Archibald”<br>
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="clamcin35">!</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>
</div>
</div><!-- CLOSING CONTACT -->
<!-- this following block of code is defining the svg and can be kept out of the way anyway on the page -->
<!-- I'm putting a div around it so that we can just hide them all from impacting on the page -->
<div class="hide-svg">
<!-- this one is for the three tab version -->
<!-- medium tab -->
<svg viewBox="0 0 116.417 11.875" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="cutetab-medium" class="tab-unit">
<clipPath id="shape3">
<path d="M93.07 302.303c-11.069 0-14.631.576-18.744 8.02-3.005 5.437-6.063 6.224-6.8 7.09h95.002c-.737-.866-3.795-1.653-6.8-7.09-4.113-7.444-7.675-8.02-18.745-8.02Z" transform="translate(-56.819 -301.538)" />
</clipPath>
<path style="fill:#000; stroke-width:4; stroke:#000" d="M87.484 301.538c-4.09.011-6.897 1.05-8.968 2.625-2.083 1.583-3.41 3.653-4.72 5.63-1.31 1.979-2.601 3.868-4.552 5.263-1.951 1.395-4.582 2.342-8.723 2.342H56.82v.015h11.236a12.469 12.469 0 0 0 2.038-1.172c2.208-1.579 3.604-3.656 4.92-5.642 1.317-1.987 2.556-3.883 4.385-5.274 1.83-1.39 4.264-2.33 8.15-2.33h54.957c3.887 0 6.321.94 8.15 2.33 1.83 1.391 3.07 3.287 4.386 5.274 1.316 1.986 2.712 4.063 4.92 5.642a12.47 12.47 0 0 0 2.038 1.172h11.236v-.015h-3.702c-4.14 0-6.772-.947-8.723-2.342-1.95-1.395-3.242-3.284-4.552-5.262-1.31-1.978-2.637-4.048-4.719-5.63-2.071-1.575-4.879-2.615-8.97-2.626Z" transform="translate(-56.819 -301.538)" />
<image class="tab-animated tan3" transform="translate(00 0)" width="270" height="220" href="https://semicodin.nekoweb.org/pics/parchment-a.jpg" clip-path="url(#shape3)" />
</g>
</defs>
</svg>
</div>
</body>
</html>
That example is working so why aren’t you using the code from that one?
I couldn’t work out what you were doing in the html that you posted though as you are using the old non svg css tabs but you still have the svg tabs at the bottom of the html.
If you want to animate the old background you will need the animation code from the demos I gave you a long time ago.
From the html you posted in post #30 you need tthis.
.tablabel3:before {
animation: burnish 35s infinite;
}
@media (prefers-reduced-motion) {
/* styles to apply if a user's device settings are set to reduced motion */
.tablabel3:before {
animation: none;
}
}
@keyframes burnish {
0% {
background-position: -3px -3px
}
50% {
background-position: -3px -600px;
}
100% {
background-position: -3px -3px
}
}
Well I’ll tell you, it was a case of import my code or import yours. I considered the safer bet to be import yours because there was less of it and I could more easily discern yours by virtue of its being all Greek to me.
Paul I tried adding the code you just supplied but to my other post (29) and it appears to work! I think we’re done! Thank you Maestro.
Post #29 doesn’t have any html! 
It’s post#30 as I already mentioned
1 Like
My bad. The point: It worked! You know what was interesting though, I caught myself musing on your code and thinking: library. SVG is like a library — a repository of code (<svg>) that the librarian (<nav>) gathers for the patron (<use>) to read. Like any good library, not all of the books (*) will be needed but she is wise to have a generous collection of them available because for the price of a few more bits of data she anticipates that this section of the library is one (<use>) will likely _re_visit. 
I have one last question though and it seems like I only just asked this in my other thread sigh. How do I get rid of the white band at the bottom of the page (see either code above)? I swear I looked at every bottom everything and couldn’t find. It imposes on the page in an ugly way and I want to get rid of it but I can’t see it. Archibald? Paul? Anyone?
I already mentioned this above but you still have the svg at the bottom of the html but you are not using it in that demo and you don’t have the hide code for it.
If you are not using the svg then remove it.
<div class="hide-svg">
<!-- this one is for the three tab version -->
<!-- medium tab -->
<svg viewBox="0 0 116.417 11.875" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="cutetab-medium" class="tab-unit">
<clipPath id="shape3">
<path d="M93.07 302.303c-11.069 0-14.631.576-18.744 8.02-3.005 5.437-6.063 6.224-6.8 7.09h95.002c-.737-.866-3.795-1.653-6.8-7.09-4.113-7.444-7.675-8.02-18.745-8.02Z" transform="translate(-56.819 -301.538)" />
</clipPath>
<path style="fill:#000; stroke-width:4; stroke:#000" d="M87.484 301.538c-4.09.011-6.897 1.05-8.968 2.625-2.083 1.583-3.41 3.653-4.72 5.63-1.31 1.979-2.601 3.868-4.552 5.263-1.951 1.395-4.582 2.342-8.723 2.342H56.82v.015h11.236a12.469 12.469 0 0 0 2.038-1.172c2.208-1.579 3.604-3.656 4.92-5.642 1.317-1.987 2.556-3.883 4.385-5.274 1.83-1.39 4.264-2.33 8.15-2.33h54.957c3.887 0 6.321.94 8.15 2.33 1.83 1.391 3.07 3.287 4.386 5.274 1.316 1.986 2.712 4.063 4.92 5.642a12.47 12.47 0 0 0 2.038 1.172h11.236v-.015h-3.702c-4.14 0-6.772-.947-8.723-2.342-1.95-1.395-3.242-3.284-4.552-5.262-1.31-1.978-2.637-4.048-4.719-5.63-2.071-1.575-4.879-2.615-8.97-2.626Z" transform="translate(-56.819 -301.538)" />
<image class="tab-animated tan3" transform="translate(00 0)" width="270" height="220" href="https://semicodin.nekoweb.org/pics/parchment-a.jpg" clip-path="url(#shape3)" />
</g>
</defs>
</svg>
</div>
(If you do want to keep it in the page for one reason or other then use the .hide-svg class styles that are in the svg pages.)
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.