Snady I accidentally erased my reply of gratitude to you for this. Thank you! Bravo snady, Bravo!
1 Like
Gentlemen now that @snadyleiby has cracked the code for a nice thick border on Paul’s animated parchment/smoke tabs I wonder if I could persuade one of you to produce the 10px border for the other two sizes: 440 X 60 and 245 X 53? 
hmmm?
Please say YES! And make a lot of people happy. 
It’s no fun sending all these people to a page that says This code is coming soon! Or alternatively show me how to do it and I’ll happily replicate them. How hard is it? Don’t answer that lol. Say YES!
Here you are.
1 Like
OH. MY. GOD.
THANK YOU PAUL. You took time out of your busy schedule to do this and I (and a growing number of people who are clicking my links for these animations) are grateful. Never doubt it Maestro. My last number was 61 last night for the 3 tab version.
They’re mesmerizing and I was looking at your 620 one last night and realized: this is evocative of a ship but not just any ship, an old ship with their parchment map out in front of them, charting the path forward with a sextant. I love all things old Paul — old books, old parchment paper — and I am thrilled I am not the only one. I hope you have this showcased on your Codepen. 
Paul before you leave for vacation I have a favor to ask (you’ll have been anticipating this). Would you mind producing complete Codepens for the 2- and 3- and 7-tab pages? Just use our Merton Assassination for all 3 versions. Please don’t combine them as this specifically is what has gotten me into trouble. I’ll have a full month to study them and I can get them uploaded to my little site.
I want to have them available if despite my best effort to render them on my own I cannot. My one-page toc proves my point that I am not ready for Prime Time as we say here in the states. It will give me a chance to do some more research on available blogs etc. to finally produce a ‘guide’ to the constituent parts of this complicated and exquisite vector technology. Most importantly don’t combine them. Presume I’ll need more than one style on the tabs even if I don’t right now and that the tabs will have links.
If you get that set up for me I’ll have a fighting chance of getting my arms around the code. I expect it will take me a month so the timing works really well. If I’m flailing around at least I’ll know that I have TRUE models as my guide. Thank you Paul.
Do you have a current version of that page that I can drop the tabs into?
I can use one of my demos but its probably easier for you if you give me your current working html and I will just place the tabs and leave the rest the same.
1 Like
Coming right up Maestro! We can start with the most recent 3-tab version that I never did get off the ground. 
<!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=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&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=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Calistoga&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">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&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">
<title>merton 9 /The Assassinatiom of Thomas Merton by semicodin ᰄ with Huge Assistance from ‘Archibald’ and Paul O’Brien of Sitepoint Forums</title>
<style>
body {
width: 1080px;
margin: 0;
font-family: 'roboto slab', serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 600;
color: black;
}
p {
line-height: 1
}
.main {
margin: 7rem 3.13rem 7rem 3.13rem;
background-color: #ffffee;
font-style: italic;
text-align: left;
color: black;
font-family: 'crete round', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
td {
padding-top: .4rem;
padding-right: .4rem;
padding-bottom: .4rem;
padding-left: .7rem;
}
.cent {text-align: center}
.undr {text-decoration: underline}
.roon {color: maroon}
/*▬▬▬▬ PAUL’S TAB Courtesy PAUL O’BRIEN of Sitepoint ▬▬▬▬ */
.tablabel3 {
position: relative;
text-align: center;
border-radius: 20px 20px 0px 0px;
color: black;
padding: 1rem 1rem 0;
font-size: 2.25rem;
line-height: 1.5;
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/vault/parchment-a.jpg");
background-position: -3px -8px;
transform: perspective(100px) rotateX(36deg) translateY(5px);
border-radius: 20px 20px 0 0;
}
.bkdimg {
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 {-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;
}
.svgtabs {
--tab3-bg-color: #b16742;
--tab3-color: #000;
}
.svgtabs {
width: 100%;
margin: auto;
display: flex;
overflow: hidden;
border-bottom:10px solid #000;
}
.svgtabs a {
color: #000;
text-decoration: none;
flex: 1 0 0;
display: grid;
align-items: center;
grid-template-areas: "tab";
position: relative;
text-align: center;
margin-right: -9rem;
transition: 0.3s ease;
}
.svgtabs.threetab a {
margin-right: -7rem;
}
.svgtabs a:last-child {
margin-right: 0 !important;
}
.svgtabs svg {
width: 245px;
height: 53px;
display: block;
grid-area: tab;
position: relative;
z-index: 1;
}
.svgtabs.threetab svg {
width: 440px;
height: 60px;
}
.svgtabs span {
grid-area: tab;
position: relative;
z-index: 2;
padding: 11px 2rem 0 0;
font-weight: bold;
color: #000;
font-size: 1.9rem;
}
.svgtabs a:last-child span {
padding: 11px 1rem 0;
}
.svgtabs a.active {
z-index: 99;
}
.svgtabs a.active span {
padding: 11px 1rem 0;
}
.hide-svg {
position: fixed;
left: -100vw;
top: -100vh;
height: 1px;
width: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.tab-animated {
height: 220px;
animation: tab 10s infinite;
}
@keyframes tab {
0% {
height: 220px;
width: 210px;
}
50% {
height:200px;
width: 170px;
}
100% {
height: 220px;
width: 210px;
}
}
/* ━━━━━━ BACKGROUND & POEM-A ━━━━━━ */
.indent {
margin-left: 6.26rem
}
.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: blue;
margin: 3.13rem 0 3.13rem 0;
text-align: center;
font-family: 'solway', serif;
font-weight: bold;
font-size: 3rem;
line-height: 3.25rem;
}
.leadb {
text-allign: center;
font-family: 'solway', serif;
font-weight: 400;
font-size: 2.5rem;
line-height: 3rem;
}
.leadc {
text-align: center;
font-style: normal;
margin-bottom: 2.5rem;
font-family: 'solway', serif;
font-weight: 400;
font-size: 2rem;
line-height: 2.5rem;
}
.rip {
margin: 0 auto;
font-style: normal;
color: black;
font-family: 'solway', serif;
font-size: 5rem;
line-height: 1.1;
font-weight: bold;
}
.begin {
margin: 1.57rem 5% 0rem 5%;
font-style: normal;
text-align: center;
color: black;
font-family: 'Uncial Antiqua', serif;
font-size: 6rem;
line-height: 1.02;
font-weight: bold;
}
.up {
text-align: left;
color: black;
font-family: 'Uncial Antiqua', serif;
font-size: 4.5rem;
font-weight: bold;
}
.death {
margin-top: 1.57rem;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 2.5rem;
font-style: normal;
text-align: left;
color: black;
font-family: 'solway', serif;
font-size: 3.25rem;
line-height: 1.1;
font-weight: bold;
}
.parch {
background-image: url('https://lh3.googleusercontent.com/pw/AP1GczOlyEgE-HLy3sGvlpsiiifoiEukf6i8ndkMD7oCPa-eMu7cHQscoSXEzAog6iNXvAFuF-JApkkfxSIz6_kA9Ro1-1aTzsWoLebvmCQB5TKPgdC80A=w1080-h1620');
background-size: 100% 100%;
padding: 1rem;
background-position: 0 -10px;
}
.thomas {
float: left;
width: 800px;
height: 1215px;
margin: 2rem 0 0 -3rem;
position: relative; /* courtesy “snadyleiby” of Sitepoint forums */
left: -1.25rem;
shape-outside: url(https://semicodin.nekoweb.org/vault/merton1215.png);
shape-margin: 1rem
}
.foot {
color: #ffffee; /* ivory */
margin-top: 1rem;
text-align: left;
font-style: normal;
margin-bottom: 3.13rem;
font-family: 'crete round', serif;
font-weight: bold;
font-size: 2rem;
line-height: 2.13rem;
}
/*▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬*/
</style>
</head>
<body>
<main>
<div class="leada">
shape-outside: (URL)<br>
with 3 Animated SVG Tabs
</div>
<!-- 3 TABS: add active class to anchor to bring the tab in front as required -->
<nav class="svgtabs threetab">
<a class="svgtab1" href="https://en.m.wikipedia.org/wiki/Thomas_Merton">
<span>T. Merton</a></span>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#anitab-medium" />
</svg>
</a>
<a class="svgtab2" href="https://en.m.wikipedia.org/wiki/Zhuang_Zhou">
<span>Chuang Tzu</a></span>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#anitab-medium" />
</svg>
</a>
<a class="svgtab3" href="https://en.m.wikipedia.org/wiki/Zhuangzi_(book)">
<span>“Zhuangzi”</a></span>
<svg viewBox="0 0 116.417 11.875" xmlns="http://www.w3.org/2000/svg">
<use href="#anitab-medium" />
</svg>
</a>
</nav>
<div class="parch">
<div class="begin">
The Assassination of Thomas Merton
</div>
<div class="cent">
<table class="rip">
<tbody>
<tr>
<td>1915</td>
<td>
<img src="https://lh3.googleusercontent.com/pw/AP1GczNK01urgiwZ_soZQU-12U29Siu-4J37H-ZvpeC3gKfz0IzceW35to0b8q7EjDHp2nXfNaPSfc1Dwary6KUrjiDl-Ldxj4xRRi9umxtZJwgtJjXgxA=w200-h300" alt="">
</td>
<td>1968</td>
</tr>
</tbody>
</table>
</div><!-- closing cent -->
<div class="death">
<span class="up">On December 10, 1968</span> Thomas Merton was at a Red Cross retreat facility named Sawang Khaniwat in Samut Prakan, a province near Bangkok, Thailand, attending a monastic conference. After giving a talk at the morning session, he was found dead later in the afternoon in the room of his cottage, wearing only shorts, lying on his back with a short-circuited Hitachi floor fan lying across his body. His associate, Jean Leclercq, stated: “In all probability the death of Thomas Merton was due in part to heart failure, in part to an electric shock.”
<p></p>
<p>
<span class="roon">Since there was no autopsy, there was no suitable explanation for the wound in the back of Merton’s head, “which had bled considerably.”</span> Arriving from the cottage next to Merton’s, the Primate of the Benedictine order and presiding officer of the conference, Rembert Weakland, anointed Merton.
</p>
<p>
He was 53 years old.<p>
</p>
<p>
His body was flown back to the United States on board a U.S. military aircraft returning from Vietnam. He is buried at Our Lady of Gethsemani Abbey in Bardstown, Kentucky.
</p>
<p>
In 2018, Hugh Turley and David Martin published <i>“The Martyrdom of Thomas Merton: An Investigation,”</i> presenting the evidentiary record’s refutation of claims of accidental electrocution, and suggesting Merton was assassinated for his political opposition to the Vietnam War. A subsequent book by Turley and author John Howard Griffin — <i><span class="undr">Thomas Merton’s Betrayers: The Case Against Abbot James Fox</span></i> — presents documentary evidence of manipulation and coverup by the Catholic Church and Merton’s political foes.
</p><p>
The Spring 2024 issue of <i>The <img class="thomas" src="https://semicodin.nekoweb.org/vault/merton1215.png" alt="">Catholic Historical Review</i> published <i>“The Official Thai Reports on Thomas Merton’s Death.”</i> The official cause of death was a natural cause: “sudden heart failure,” not “accidental electrocu-tion.” <span class="roon">The police report states that Merton was already dead before he came into con-tact with a faulty fan that was found lying across his body.</span>
</p>
</div><!-- closing death -->
<!-- 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 tehm 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="anitab-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/vault/parchment-a.jpg" clip-path="url(#shape3)" />
</g>
</defs>
</svg>
</div>
</div><!-- closing parchment -->
</div><!-- closing main -->
</body>
</html>
Ok, I have a little spare time in the morning and will put up a codepen.
1 Like
Here you are:
Note that you keep moving your images which affects all my previous demos as the images are no longer where you put them (that’s why I copied them locally as you break my codepens every time you move an image).
In The latest html you gave me you have the parchment pointing to here:
https://semicodin.nekoweb.org/vault/parchment-a.jpg
However there is no image at that address but if did find it here:
https://semicodin.nekoweb.org/parchment-a.jpg
You also have the thomas image listed in the html as being here:
https://semicodin.nekoweb.org/vault/merton1215.png
He is not there and I couldn’t find him at the root either.
https://semicodin.nekoweb.org/merton1215.png
I won’t be around much now as we are away from Sunday evening and have packing and errands to run. I will be checking on mobile while away from time to time.
1 Like
I can’t wait to see them. Have a wonderful vacation Paul! I hope by the time you return to have a significantly better understanding of SVG. I need a book on SVG to be brutally frank. But however I get it into my tiny grey cells, get it I must. We haven’t even approached static patterns! But you know what? These animated versions were so cool the minute you uploaded them I said YES. Oh these are going to go flying off the shelf! Thank you my friend and we’ll see you in July.
semicodin
If you’re still here Paul the tabs for 3-tab are reversed and I tried to physically rearrange them but it had no effect and I can’t find the z-index for the third tab or I would just reverse them!
Can you help me? I know you’re busy but I tried both methods and failed!
Just change the z-index in descending order:
e.g.
.svgtab1{z-index:3;}
.svgtab2{z-index:2;}
.svgtab3{z-index:1;}
I’ve added that to the 3 tab codepen. You may want to copy all the codepens again just in case I changed something.
Note:If you wanted the same for the seven tabs then start at 7 for svgtab1 and then descend.:
1 Like
EDIT: I went ahead and did them and your 3 Tab I just copied. THEY LOOK GREAT PAUL! Bon Voyage! . . .
Okay but that isn’t in your codepens (believe me I looked!). Is this new code that I am appending, or already there but in a different format? In other words can I just add this to the 7-tab version —
.svgtab1{z-index:7;}
.svgtab2{z-index:6;}
.svgtab3{z-index:5;}
.svgtab4{z-index:4;}
.svgtab5{z-index:3;}
.svgtab6{z-index:2;}
.svgtab7{z-index:1;}
this to the 2-tab —
.svgtab1{z-index:2;}
.svgtab2{z-index:1;}
— and so on? I don’t want to break the page. They look magnificent Paul! No wonder everyone’s hitting the ani tabs in my toc. They rock! (literally!) We’re in the cabin of an ancient ship in medieval times, studying a map by candlelight . . .
Yes it is and I added it to the three tab codepen as that was the one you asked about and as I mentioned above.
Yes that’s correct.
1 Like
I apologize Paul. I was moving things around but finally settled on 2 more folders on my site to help organize things. For one thing I wanted my shape-outside to be in a proprietary folder all their own: “origin”. Merton and Lucy live there (both the images and their html). And then I also created “pics” which is where parchment-a now lives permanently. All this in an effort to reserve “vault” for the ZIP files and unclutter the root. In time this will settle down. Bon Voyage!
1 Like
Well Paul if you’re sneakng a peek here and there I am shot down on the two-tab version _for the page that was to form the second of the 2-page-version’s TAB: Merton! Yes, that Merton lol. Briefly, I’ve made a 1968 page showing the level of conflict in the US in the year of Merton’s death: 1968 was a bloody time in which Merton was the third assassination in a string of them!
I’ve named the first tab svgpar2a_ani.html and you can see it here. So I basically duplicated it for svgpar2b_ani.html and then dropped in the appropriate Merton et al. so the html would find the styles because they are very different pages south of the border. Everything is working but I can’t seat the bottom-most section: my “contact” block in which I thank you and Archibald (forever known to me hereinafter as “Deep Archibald” lol) and provide the link to the code in its ZIP file housed in the /vault. I don’t know why it’s floating around on the page like that. If you’d care to opine https://semicodin.nekoweb.org/h_thru_z/svgpar2b_ani.html there is the code. Both pages are up so you can see them live. And the links work. Thanks Paul.
<!DOCTYPE html>
<html lang="en">
<head>
<meta 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=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab: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=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap" rel="stylesheet">
<title>svgpar2b_ani.html ᰄ by semicodin / with Huge Assistance from Paul O’Brien and ‘Deep Archibald’ of Sitepoint Forums</title>
<style>
body {
width: 1080px;
margin: 0;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 2.13rem;
font-weight: 600;
color: black;
}
p {line-height: 1; margin-top: 1rem;}
u {text-decoration: underline}
* {box-sizing: border-box}
.dblue {color: dodgerblue}
.crim {color: crimson}
.roon {color: #c40000}
.parch {
background-image: url('https://lh3.googleusercontent.com/pw/AP1GczOlyEgE-HLy3sGvlpsiiifoiEukf6i8ndkMD7oCPa-eMu7cHQscoSXEzAog6iNXvAFuF-JApkkfxSIz6_kA9Ro1-1aTzsWoLebvmCQB5TKPgdC80A=w1080-h1620');
width: 1080px;
height: 1620px;
padding-top: 3.13rem;
}
.ssz1 {
padding: 4rem 0 0 0;
text-align: center;
font-family: 'crete round';
font-size: 2rem;
line-height: 2.25rem;
font-weight: bold;
color: #888888;
}
.ssz2 {
text-align: center;
padding: 0 0 0 0;
font-family: 'crete round';
font-size: 1.75rem;
line-height: 2rem;
font-weight: bold;
color: #888888;
}
.leada {
color: blue;
margin: 3.13rem 0 3.13rem 0;
text-align: center;
font-family: 'solway', serif;
font-weight: bold;
font-size: 3rem;
line-height: 3.25rem;
}
.leadb {
text-allign: center;
font-family: 'solway', serif;
font-weight: 400;
font-size: 2.5rem;
line-height: 3rem;
}
.leadc {
text-align: center;
font-style: normal;
margin-bottom: 2.5rem;
font-family: 'solway', serif;
font-weight: 400;
font-size: 2rem;
line-height: 2.5rem;
}
.rip {
margin: 0 auto;
font-style: normal;
color: black;
font-family: 'solway', serif;
font-size: 5rem;
line-height: 1.1;
font-weight: bold;
}
.begin {
margin: 1.57rem 5% 0rem 5%;
font-style: normal;
text-align: center;
color: black;
font-family: 'Uncial Antiqua', serif;
font-size: 6rem;
line-height: 1.02;
font-weight: bold;
}
.up {
text-align: left;
color: black;
font-family: 'Uncial Antiqua', serif;
font-size: 4.5rem;
font-weight: bold;
}
.death {
margin-top: 1.57rem;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 2.5rem;
font-style: normal;
text-align: left;
color: black;
font-family: 'solway', serif;
font-size: 3.25rem;
line-height: 1.1;
font-weight: bold;
}
.main {
margin: 7rem 3.13rem 7rem 3.13rem;
background-color: #ffffee;
font-style: italic;
text-align: left;
color: black;
font-family: 'crete round', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.thomas {
float: left;
width: 800px;
height: 1215px;
margin: 2rem 0 0 -3rem;
position: relative;
/* courtesy “snadyleiby” of Sitepoint forums */
left: -1.25rem;
shape-outside: url(https://semicodin.nekoweb.org/origin/merton1215.png);
shape-margin: 1.25rem;
}
.foot {
color: #ffffee;
/* ivory */
margin-top: 1rem;
text-align: left;
font-style: normal;
margin-bottom: 3.13rem;
font-family: 'crete round', serif;
font-weight: bold;
font-size: 2rem;
line-height: 2.13rem;
}
.cent {
text-align: center
}
.undr {
text-decoration: underline
}
.clambu4 {
color: blue;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 4rem;
font-weight: 900;
}
.clamcr3 {
color: crimson;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 3rem;
font-weight: 900;
}
.henpen {
text-align: center;
color: black;
margin-top: 3.13rem;
font-size: 3.75rem;
line-height: 3.88rem;
font-weight: 700;
font-family: 'Henny Penny', cursive;
}
/* ━━━━━━━━━━ COLORS ━━━━━━━━━━━ */
.blu {color: blue}
.blub {color: blue; font-weight: bold;}
.fusch {color: #ca009b}
.fuschb {color: #ca009b; font-weight: bold}
.fuschi {color: #ca009b; font-style: italic}
.crim {color: crimson}
.crimb {color: crimson; font-weight: bold}
.crimi {color: crimson; font-style: italic}
.grey {color: grey}
.green {color: #248900} /* green */
.greenb {color: #248900; font-weight: bold}
.hilite {
color: #ffffee;
background-color: dodgerblue;
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;
}
/* ━━━━━━━━━ LINKS ━━━━━━━━━━━ */
.ctr {text-align: center}
.undr {text-decoration: underline}
.clamgy {
color: #888888;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
.clamcr4 {
color: crimson;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 4rem;
font-weight: 900;
}
.clambu {
color: blue;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 3rem;
font-weight: 900;
}
.here {
color: black;
text-align: center;
margin: 2rem 0 1rem 0;
font-family: 'solway', serif;
font-size: 4rem;
line-height: 4.23rem;
font-weight: 700;
}
.down {
color: dodgerblue;
text-align: center;
margin: 0 0 1rem 0;
font-family: 'solway', serif;
font-size: 3rem;
line-height: 1.1;
font-weight: 700;
}
.tiny {
color: #888888;
text-align: center;
margin: 1rem 4rem 1rem 4rem;
font-family: 'courier prime', monospace;
font-size: 1rem;
line-height: 1.13rem;
font-weight: bold;
}
.contact {
margin: 0;
padding: 0rem 0rem 7rem 0rem;
background-color: black;
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: #ffffee;
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: #ffffee;
text-align: center;
margin: 0rem 4rem 1rem 4rem;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: bold;
}
.quest {
color: #ffffee;
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: #ffffee;
text-align: center;
margin: 1rem 4rem 2.5rem 4rem;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: bold;
}
.clamdbu35 {
color: dodgerblue;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 3.5rem;
font-weight: 900;
}
a:active {color: crimson}
a:hover {color: crimson}
a:link {color: dodgerblue}
a:visited {color: dodgerblue}
/* ▬▬▬▬ PAUL’S TABS Courtesy PAUL O’BRIEN of Sitepoint ▬▬▬▬ */
.tablabel3 {
position: relative;
text-align: center;
border-radius: 20px 20px 0px 0px;
color: black;
padding: 1rem 1rem 0;
font-size: 2.25rem;
line-height: 1.5;
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/pics/parchment-a.jpg");
background-position: -3px -8px;
transform: perspective(100px) rotateX(36deg) translateY(5px);
border-radius: 20px 20px 0 0;
}
.bkdimg {
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 {
-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;
}
/* set color for 1 tab only */
.svgtabs.onetab {
--tab1-bg-color: #8e815e;
}
.svgtabs.onetab span {
--tab1-color: #000;
}
.svgtabs {
width: 100%;
margin: auto;
display: flex;
overflow: hidden;
border-bottom: 10px solid #000;
}
.svgtabs a {
color: #000;
text-decoration: none;
flex: 1 0 0;
display: grid;
align-items: center;
grid-template-areas: "tab";
position: relative;
text-align: center;
margin-right: -9rem;
transition: 0.3s ease;
}
.svgtabs.twotab a {
margin-right: -9.5rem;
}
.svgtabs a:last-child {
margin-right: 0 !important;
}
.svgtabs svg {
width: 245px;
height: 53px;
display: block;
grid-area: tab;
position: relative;
z-index: 1;
}
.svgtabs.twotab svg {
width: 620px;
height: 75px;
}
.svgtabs span {
grid-area: tab;
position: relative;
z-index: 2;
padding: 11px 2rem 0 0;
font-family: 'solway', serif;
font-size: 3rem;
font-weight: bold;
color: #000;
}
.svgtabs a.active {
z-index: 99;
}
.svgtabs a.active span {
padding: 11px 1rem 0;
}
.svgtabs a.active span {
padding: 11px 1rem 0;
}
.svgtabs a:last-child span {
padding: 11px 1rem 0;
}
.hide-svg {
position: fixed;
left: -100vw;
top: -100vh;
height: 1px;
width: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.tab-animated {
height: 220px;
animation: tab 10s infinite;
}
@keyframes tab {
0% {
height: 220px;
width: 210px;
}
50% {
height: 200px;
width: 170px;
}
100% {
height: 220px;
width: 210px;
}
}
.svgtab1{z-index:2;}
.svgtab2{z-index:1;}
/* ━━━━━━ TAB LABELS ━━━━━━ */
.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;
}
/* ▬▬▬▬▬▬ END CSS ▬▬▬▬▬0▬ */
</style>
</head>
<body>
<nav class="svgtabs twotab">
<!--━━━━━━━━━ TAB 1 ━━━━━━━━-->
<a class="svgtab1" href="http://semicodin.nekoweb.org/h_thru_z/svgpar2a_ani.html">
<span> Merton’s America</span>
<svg viewBox="0 0 164.042 15.843" xmlns="http://www.w3.org/2000/svg">
<use href="#cutetab-large" />
</svg>
</a>
<!--━━━━━━━━━ TAB 2 ━━━━━━━━-->
<a class="svgtab2" href="http://semicodin.nekoweb.org/h_thru_z/svgpar2b_ani.html">
<span>Assassination!</span>
<svg viewBox="0 0 164.042 15.843" xmlns="http://www.w3.org/2000/svg">
<use href="#cutetab-large" />
</svg>
</a>
</nav>
<div class="parch">
<div class="begin">
The Assassination of Thomas Merton
</div>
<div class="cent">
<table class="rip">
<tbody>
<tr>
<td>1915</td>
<td>
<img src="https://lh3.googleusercontent.com/pw/AP1GczNK01urgiwZ_soZQU-12U29Siu-4J37H-ZvpeC3gKfz0IzceW35to0b8q7EjDHp2nXfNaPSfc1Dwary6KUrjiDl-Ldxj4xRRi9umxtZJwgtJjXgxA=w200-h300" alt="">
</td>
<td>1968</td>
</tr>
</tbody>
</table>
</div><!-- closing cent -->
<div class="death">
<p> <span class="up">On December 10, 1968</span> Thomas Merton was at a Red Cross retreat facility named Sawang Khaniwat in Samut Prakan, a province near Bangkok, Thailand, attending a monastic conference. After giving a talk at the morning session, he was found dead later in the afternoon in the room of his cottage, wearing only shorts, lying on his back with a short-circuited Hitachi floor fan lying across his body. His associate, Jean Leclercq, stated: “In all probability the death of Thomas Merton was due in part to heart failure, in part to an electric shock.”
</p>
<p>
<span class="roon">Since there was no autopsy, there was no suitable explanation for the wound in the back of Merton’s head, “which had bled considerably.”</span> Arriving from the cottage next to Merton’s, the Primate of the Benedictine order and presiding officer of the conference, Rembert Weakland, anointed Merton.
</p>
<p>
He was 53 years old.
</p>
<p>
His body was flown back to the United States on board a U.S. military aircraft returning from Vietnam. He is buried at Our Lady of Gethsemani Abbey in Bardstown, Kentucky.
</p>
<p>
In 2018, Hugh Turley and David Martin published <i>“The Martyrdom of Thomas Merton: An Investigation,”</i> presenting the evidentiary record’s refutation of claims of accidental electrocution, and suggesting Merton was assassinated for his political opposition to the Vietnam War. A subsequent book by Turley and author John Howard Griffin — <i><span class="undr">Thomas Merton’s Betrayers: The Case Against Abbot James Fox</span></i> — presents documentary evidence of manipulation and coverup by the Catholic Church and Merton’s political foes.
</p>
<p>
The Spring 2024 issue of <i>The <img class="thomas" src="https://semicodin.nekoweb.org/origin/merton1215.png" alt="">Catholic Historical Review</i> published <i>“The Official Thai Reports on Thomas Merton’s Death.”</i> The official cause of death was a natural cause: “sudden heart failure,” not “accidental electrocu-tion.” <span class="roon">The police report states that Merton was already dead before he came into con-tact with a faulty fan that was found lying across his body.</span>
</p>
</div><!-- closing death -->
<div class="hide-svg">
<!-- this one is for the one tab version and the two tab version -->
<!-- large tab -->
<svg viewBox="0 0 164.042 15.843" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="cutetab-large" class="tab-unit">
<clipPath id="shape2">
<path d="M121.772 232.987c-11.042 0-13.643 5.879-17.411 10.564-4.653 5.788-11.776 8.51-11.776 8.51h145.426s-7.123-2.722-11.776-8.51c-3.768-4.685-6.37-10.564-17.412-10.564Z" transform="translate(-83.277 -232.217)" />
</clipPath>
<path style="fill:#000;stroke-width:4;stroke:#000" d="M121.772 232.217c-5.022 0-8.508 1.208-11.179 3.182-2.67 1.974-4.52 4.54-6.502 7.008-3.962 4.935-8.28 9.653-20.814 9.653h11.356c5.25-1.985 8.309-5.303 10.882-8.509 2.017-2.511 3.785-4.923 6.166-6.683 2.382-1.76 5.38-2.823 10.091-2.823h87.051c4.711 0 7.71 1.062 10.091 2.823 2.382 1.76 4.15 4.172 6.166 6.683 2.574 3.206 5.633 6.524 10.882 8.51h11.357c-12.534 0-16.852-4.72-20.815-9.654-1.98-2.468-3.83-5.034-6.501-7.008-2.671-1.974-6.157-3.182-11.18-3.182Z" transform="translate(-83.277 -232.217)" />
<image class="tab-animated tan1" transform="translate(00 0)" width="270" height="220" href="https://semicodin.nekoweb.org/pics/parchment-a.jpg" clip-path="url(#shape2)" />
</g>
</defs>
</svg>
</div>
</div><!-- CONCLUDING MAIN -->
</div><!-- CONCLUDING PARCHMENT-E -->
<div class="contact">
<div class="here">
<span class="cylinkhere">
<a href="https://semicodin.nekoweb.org/vault/SVGPAR1_ANI.ZIP">
Code Here.</a></span>
</div>
<div class="down">
Long Press on “Download Link” and save.
</div>
<div class="quest">
Got Questions? You can PM me at<br>
<span class="cylinkquest"><a href="https://sitepoint.com/community/c/html-css/25">
the Sitepoint Forums</a></span><span class="clamdbu35">!</span>
</div>
<div class="end">
CLICK HERE TO PROCEED<br>
<span class="cylinkend">
<a href="https://semicodin.nekoweb.org/toc.html">
TO THE TABLE OF CONTENTS</a></span>
</div>
</div><!-- CLOSING CONTACT -->
</body>
</html>
Looked very quickly and I see you have set .parch to be 1080px high but it is many thousands of px taller in that page. You need to remove the height and then work out what to do with the parchment background repeating.
Okay I’m on it.
I did this to no effect:
.parch {
background-image: url('https://semicodin.nekoweb.org/pics/parchment-a.jpg');
width: 890px;
padding-top: 3.13rem;
background-repeat: no-repeat;
}
We had parchment-a stretching previously. I’ve obviously done something to the code to break it. I’ll try and hunt down an earlier version in the hopes I can isolate the difference between the pages . . .