Creating scaleable SVG file folder tabs

This is a companion thread to my original file folder tabs thread here at Sitepoint which became so long it was difficult to navigate. My intention is to (first) aggregate the posts that deal exclusively with SVG and other graphical renderings of file folder tabs here into this thread. I wish I could pluck them out and place them in here but what I’ll do is collect the posts and acknowledge the authors whose work is simply exquisite. Chief among these is snadyleiby and archibald whose knowledge of SVG is advanced and the results simply exquisite. But I welcome everyone to this thread and from my traffic on Codepen that is apparently not a small number of you! Let’s write SVG.

View my post here for a larger graphic of what my original (single) tabs project was intended to look like:

And I’m uploading this (kind of rough) single image if anyone new needs just a master, although SNADYLEIBY’s work is so exquisite I’m going to upload one of his for your use. It must have the border for the border version; later on we csn tackle BACKGROUND IMAGES hell yeah! :weee:

See, in chronological order:

ARCHIBALD

SNADYLEIBY
https://www.sitepoint.com/community/t/creating-one-only-one-tab/444461/16

RALPHM
https://www.sitepoint.com/community/t/creating-one-only-one-tab/444461/23

SNADYLEIBY
https://www.sitepoint.com/community/t/creating-one-only-one-tab/444461/36

SNADYLEIBY
https://www.sitepoint.com/community/t/creating-one-only-one-tab/444461/40

SNADYLEIBY

https://www.sitepoint.com/community/t/creating-one-only-one-tab/444461/45

https://www.sitepoint.com/community/t/creating-one-only-one-tab/444461/47

SNADYLEIBY
https://www.sitepoint.com/community/t/creating-one-only-one-tab/444461/50

SNADYLEIBY
https://www.sitepoint.com/community/t/creating-one-only-one-tab/444461/52

AZRCHIBALD
https://www.sitepoint.com/community/t/creating-one-only-one-tab/444461/180

SNADYLEIBY
https://www.sitepoint.com/community/t/creating-one-only-one-tab/444461/182

4 Likes

They are just exquisite snady. All of your work is. In answer to your other question, while I am not going to need these to point to other pages for the benefit of others who will use these tabs that way we should offer solutions definitely.

I can’t wait to get to the background images portion of the floorshow, :weee: I’m going to upload a graphic of parchment for starters . . .

1 Like

Okay I’m uploading a graphic of some parchment paper that would be great for the background image on SVG tabs. Please note I had to airbrush in the upper-right corner but with only my little Android App it’s very rough. That corner should be avoided. The rest is fine. Because I don’t know how this works I’ll wait for an experienced discussion of how to approach background images in SVG. One issue I know we’ll need to address relates to how to outline the tabs when thete are more than one.

When Paul created his masterpiece — see this post and the revisions to it he posted subsequently . . .

— we were working toward one SOLID TAB; in time it morphed into a tab with borders; and shortly thereafter, 3 tabs with borders. Have a look at this PARCHMENT graphic and be sure to see its full dimensions of 1080px X 890px:

The parchment benefits hugely from the burnishing of its edges. We’re in a smaller environment when we’re talking about designing something for a cell phone 1080px wide (refer to Paul and Archibald if at any point this graphic downloads as less than a 1080px-wide graphic!). We don’t want the fill to be all burnishing — that is, my goal isn’t that; someone else’s might very well be!

We can make two types of tabs: a PLAIN PARCHMENT tab with no borders suitable only for one single tab (or you’d not see their outlines! their shapes!) and a BORDERED PARCHMENT tab . . . with either a very modest little border (just to keep the patterns distinguishable from one another when they are sitting on top of each other (grabbing from one of the darkest pixels available) —or— a tab(s) using a portion of burnishing from the graphic.

I’m guessing the first can be done, but I’ll be gobsmacked if you talented coders can pull off the second because of the slope. We should be able to get a small piece of the burnishing for the straight edge, but the slope . . . all I can say is I’d be more than happy if we just picked up the darkest of one of the burnishing colors and use that color for the slope. If all that can be done is the plain parchment with a small (edge, really, not even a border per se) from one of its darkest pixels I’ll be thrilled! No one expects any of you to do the impossible. Please know that. We met the practical limitations of Paul’s tab as he will tell you (or if ambitious, just read the thread; to this day we cannot get rid of a small “leak” that manifests very faintly which we had to cover up with a like-colored border) and after that, well sir, she just wasn’t going to the dance and that was final! :tongue:

2 Likes

Please tell us what is the point of these parchment tabs. First you wanted a plain black tab, then coloured tabs with a top border, then tabs with gradient colour and now you want parchment tabs. I understand all this is for a web page that is only for your own use and I understand you don’t want anything to happen when the tabs are clicked.

Your content is too much informative and easy to understand.

This project relates to books. Historical fiction & poetry in this particular case. I would like to transcribe the poems from Thomas Merton’s ”The Way of Chuang Tzu”, some of the deepest poetry you’ll ever read (and at times very funny). Short. Deadly. Very ancient.

I could give you one of his poems for inspiration if you wish but I’d have to hunt them down. They’re short (for the most part). As I explained to Paul years ago I was the victim of a catastrophic burglary and one of the things they stole was my rare book collection — that, and my tiny little book of Thomas Merton’s translated poems (and tens of thousands of dollars worth of everything from computers to DVDs, home theatre equip. etc.).

The minute Paul said this could be done I knew exactly what I wanted to do with it. OLD BOOKS! As with Paul’s tabs, I hope to learn enough about this process to be able to do other variations with different backgrounds as well. These are little hobbies of mine Archibald. I enjoy learning HTML. I’m not good at it but that’s exactly why I like learning it. In targeted (very targeted) chunks. Your workaround for that polygonal shape-outside you just gave me fascinates me and I’m going to attempt to reproduce it on my own.

2 Likes

Welcome. :face_in_clouds:

The Empty Boat
Transcribed by Thomas Merton

The way to get clear of confusion
And free of sorrow
Is to live with Tao
In the land of the great Void.

If a man is crossing a river
And an empty boat collides with his own skiff,
Even though he be a bad-tempered man
He will not become very angry.
But if he sees a man in the boat,
He will shout at him to steer clear.
If the shout is not heard, he will shout again,
And yet again, and begin cursing.
And all because there is somebody in the boat.
Yet if the boat were empty.
He would not be shouting, and not angry.

If you can empty your own boat
Crossing the river of the world,
No one will oppose you,
No one will seek to harm you.

Yes this can’t really be done with my version as it has three separate elements that make the background and two of those elements are box-shadow tricks so you can’t use an image.

The closest you can get is to match the colours in the box-shadow but this will only work for the middle tab in my example. I only post it as an example of how your tab may be look.

I’m sure the svg versions could just use the parchment as a background image but I’ll leave that to the others :slight_smile: .

1 Like

It’s gorgeous Paul. At first I couldn’t believe how you managed the slope. And then the tiny grey cells noticed — ah! You clever cat, he eez hiding behind zee other two! :eyebrows: rofl Don’t they look incredible?! Edit: strike that ——> You’ve done 3 tabs!

You see Archibald, I just knew ths was going to work (incorporating the burnish, I mean). I envisioned it in my eye and Paul just gave the thread a challenge! Looking forward to seeing just how far we can take it. My God Paul, I think you just inspired the thread! There’s nothing quite like seeing it before your very eyes . . .

Stop the presses! I just had an idea: Couldn’t you apply some kind of shadow to the two slopes? A gradient even? And the mathematics of it kick in to do the job for you? In other words, couldn’t you mathematically create the burnish? The human eye is naturally drawn to the burnish (the top straight edge) and you’re “tricked” into seeing it as a natural extension of the burnish.

And Gentlemen: Let’s use the convention first started in Paul’s tab and begin numbering the various designs thus:

.tablabel1
.tablabel2
.tablabel3
.tablabel4

etcetera. Paul’s gets .tablabel2 And I changed the text color in the middle tab to black. Looks better. Plus minor corrections to the Class. Just keeping it real for newbies hopping in for a visit. :eyebrows

<!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">

  <title>99_Paul’s_Burnish_Class-3 &#7172; ELECTION</title>

  <style>
    body {
      width: 950px;
      margin: 2rem auto;
      margin-bottom: 3.75rem;
      font-family: 'courier prime', monospace;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: bold;
      color: black;
    }

    td {
      padding-top: .6rem;
      padding-right: .6rem;
      padding-bottom: .2rem;
      padding-left: .7rem;
    }

    .title {
      text-align: center;
      margin-top: 1.25rem;
      margin-bottom: 1.25rem;
      font-family: 'special elite', serif;
      font-weight: 400;
      font-size: 3.13rem;
      line-height: 2.5rem;
    }

    .tally {
      font-family: 'calistoga', serif;
      font-weight: 700;
      font-size: 2.25rem;
      line-height: 2.38rem;
      color: crimson;
    }

    .class {
      font-family: 'calistoga', serif;
      font-weight: 700;
      font-size: 2.25rem;
      line-height: 2.38rem;
      color: crimson;
    }

    /* ━━━━━━━━━ PAUL’S TAB ━━━━━━━━━ */
    :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*/
    }

    .tablabel2 {
      position: relative;
      text-align: center;
      border-radius: 20px 20px 0px 0px;
      color: black;
      padding: 1rem 1rem 0;
      font-size: 2.4rem;
      line-height: 2.63rem;
      font-weight: bold;
      height: 52px;
      width: 225px;
      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 b {
      display: flex;
      transform: translateY(5px);
      justify-content: center;
    }

    .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);
      mix-blend-mode: lighten;
      /* this is necessary or a gap will show */
    }

    .ctrmid .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;
    }

    .tablabel2: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");
      transform: perspective(100px) rotateX(36deg) translateY(5px);
      border-radius: 20px 20px 0 0;
    }

    .bkdimg {
      position: relative;
      background: none;
      overflow: hidden;
      margin-bottom: -2px;
      /* attempt to stop rounding errors when zoomed*/
    }

    .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;
    }

    .ctr2 .tab span *,
    .ctr2 .tablabel2:before {
      background: var(--tab1color);
      color: #000;
    }

    .ctr2 .tab:before,
    .ctr2 .tab:after {
      box-shadow: 0 34px var(--tab1color);
    }

    .ctr3 .tab span *,
    .ctr3 .tablabel2:before {
      background: var(--tab3color);
      color: #000;
    }

    .ctr3 .tab:before,
    .ctr3 .tab:after {
      box-shadow: 0 34px var(--tab3color);
    }

    .tab1active .ctr,
    .tab2active .ctr,
    .tab3active .ctr {
      position: absolute;
    }

    .tab1active .ctr2,
    .tab2active .ctrmid,
    .tab3active .ctr3 {
      position: relative;
      z-index: 4;
    }

    .tab3active .ctr2 {
      z-index: 1;
    }

    /* ━━━━━━━━━━ TABLE1 ━━━━━━━━━━ */
    .table1 {
      padding-bottom: 6px;
      text-align: center;
      background: black;
      width: 100%;
    }

    /* ━━━━━━━━━━ TABLE2 ━━━━━━━━━━ */
    .td2 {
      width: 268px;
      /*    COLUMN WIDTH    */
      color: black;
      text-align: left;
    }

    .table2 td {
      padding-bottom: 8px;
    }

    .table2 {
      width: 100%;
      text-align: left;
      vertical-align: middle;
      border-top: .63rem groove #00ffff;
      /* cyan */
      border-right: .63rem groove #00ffff;
      border-bottom: none;
      border-left: .63rem groove #00ffff;
      border-collapse: collapse;
      font-family: 'courier prime', monospace;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: bold;
      color: black;
    }

    .table2 tbody tr td:nth-of-type(1) {
      border-right: .19rem solid black;
      text-align: center;
    }

    .table2 tbody tr td:nth-of-type(2) {
      border-right: .19rem solid black;
      text-align: left;
    }

    .table2 tbody tr:nth-child(odd) {
      background-color: #ffffcc;
      /* pastel yellow */
      border-bottom: .19rem solid black;
    }

    .table2 tbody tr:nth-child(even) {
      background-color: white;
      border-bottom: .19rem solid black;
    }

    /* ━━━━━━━━━━ TABLE3 ━━━━━━━━━━ */
    .table3 th {
      border: .38rem solid #00ffff;
      /* cyan */
      background-color: black;
      font-family: 'roboto slab', serif;
      font-size: 2rem;
      line-height: 2.13rem;
      font-weight: bold;
      padding: .94rem;
    }

    .th3a {
      color: #00ffff;
      /* cyan */
      text-align: center;
    }

    .th3b {
      color: #00ffff;
      /* cyan */
      text-align: center;
    }

    .th3c {
      width: 270px;
      /*    HEADER WIDTH    */
      color: white;
      text-align: center;
    }

    .table3 {
      width: 100%;
      border: .63rem groove #00ffff;
      /* cyan */
      border-collapse: collapse;
      font-family: 'courier prime', monospace;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: bold;
      color: black;
    }

    .table3 tbody tr:nth-child(odd) {
      background-color: #ffffcc;
      /* pastel yellow */
      border-bottom: .19rem solid black;
    }

    .table3 tbody tr:nth-child(even) {
      background-color: white;
      border-bottom: .19rem solid black;
    }

    .table3 tbody tr td:nth-of-type(1) {
      border-right: .19rem solid black;
      text-align: center;
    }

    .table3 tbody tr td:nth-of-type(2) {
      border-right: .19rem solid black;
      text-align: left;
    }

    .virgini {
      text-align: center;
      color: black;
      margin-bottom: .5rem;
      font-family: 'roboto condensed', serif;
      font-size: 2rem;
      line-height: 2.13rem;
      font-weight: 700;
    }

    /* ━━━━━━━━━━ TABLE4 ━━━━━━━━━━ */
    .table4 {
      text-align: center;
      padding-top: .5rem;
      padding-bottom: 1rem;
      width: 100%;
      border-top: 1.88rem groove silver;
      border-bottom: 1.88rem groove silver;
      border-collapse: collapse;
      font-family: 'courier prime', monospace;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: bold;
      color: black;
    }

    .insum {
      font-family: 'roboto condensed', sans-serif;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: 700;
    }

    .condl {
      text-align: left;
      font-family: 'roboto condensed', sans-serif;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: 400;
    }

    .condj {
      text-align: justify;
      font-family: 'roboto condensed', sans-serif;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: 400;
    }

    .condlb {
      text-align: left;
      font-family: 'roboto condensed', sans-serif;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: 700;
    }

    .condc {
      text-align: center;
      font-family: 'roboto condensed', sans-serif;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: 400;
    }

    .condi {
      text-align: center;
      font-style: italic;
      font-family: 'roboto condensed', sans-serif;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: 400;
    }

    /* ━━━━━━━━ LIST STRIPING ━━━━━━━━ */
    ol.abtn {
      text-align: left;
      margin: 1.25rem 2rem 1.25rem 2rem;
      font-family: "roboto slab", sans-serif;
      font-weight: 700;
      font-size: 2.13rem;
      line-height: 2.25rem;
    }

    ol.abtn>li:nth-of-type(odd) {
      background-color: #dddddd;
      /* light grey */
    }

    ol.abtn>li:nth-of-type(even) {
      background-color: white;
    }

    /* ━━━━━━━━━ COLORS ━━━━━━━━━ */
    .cell1 {
      display: block;
      color: black;
      background-color: #cccccc;
      /*  grey  */
      text-align: left;
      font-family: 'courier prime', monospace;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: bold;
    }

    .cell2 {
      display: block;
      color: white;
      background-color: black;
      text-align: left;
      font-family: 'courier prime', monospace;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: bold;
    }

    .cell3 {
      display: block;
      color: black;
      background-color: #c8e3ff;
      /* light blue */
      text-align: left;
      font-family: 'courier prime', monospace;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: bold;
    }

    .cell4 {
      display: block;
      color: white;
      background-color: blue;
      text-align: left;
      font-family: 'courier prime', monospace;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: bold;
    }

    .cell5 {
      display: block;
      text-align: center;
      color: black;
      background-color: yellow;
      font-family: 'crete round', serif;
      font-size: 2.38rem;
      line-height: 2.38rem;
      font-weight: 700;
    }

    .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
    }

    /* ━━━━━━━━━━━ LINKS ━━━━━━━━━━━━ */
    a:active {
      color: #ff70ff
    }

    a:hover {
      color: #ff70ff
    }

    a:link {
      color: blue
    }

    a:visited {
      color: blue
    }

    .redlink a:link {
      color: crimson
    }

    .redlink a:visited {
      color: crimson
    }

    .plink a:link {
      color: #ffe5fe;
      /*  pink  */
      ;
      background: black;
      text-align: center;
      font-style: italic;
      font-family: 'roboto condensed', sans-serif;
      font-size: 2rem;
      line-height: 2.13rem;
      font-weight: 400;
    }

    .plink a:visited {
      color: #ffe5fe;
      background: black;
      text-align: center;
      font-style: italic;
      font-family: 'roboto condensed', sans-serif;
      font-size: 2rem;
      line-height: 2.13rem;
      font-weight: 400;
    }

    .clink a:link {
      color: #00ffff;
      /*  cyan  */
      background: black;
      text-align: center;
      font-style: italic;
      font-family: 'roboto condensed', sans-serif;
      font-size: 2rem;
      line-height: 2.13rem;
      font-weight: 400;
    }

    .clink a:visited {
      color: #00ffff;
      background: black;
      text-align: center;
      font-style: italic;
      font-family: 'roboto condensed', sans-serif;
      font-size: 2rem;
      line-height: 2.13rem;
      font-weight: 400;
    }

    /* ━━━━━━━━ MISCELLANEOUS ━━━━━━━━━ */
    .ctr {
      text-align: center
    }

    .undr {
      text-decoration: underline
    }

    .bkexcl {
      color: black;
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.75rem;
      font-weight: 900;
    }

    .buexcl {
      color: blue;
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.75rem;
      font-weight: 900;
    }

    .refdm {
      color: crimson;
      font-style: italic;
      font-family: 'roboto condensed', sans-serif;
      font-weight: 700;
      font-size: 2.25rem;
      line-height: 2.38rem;
    }

    .rump {
      color: crimson;
      font-family: 'roboto condensed', sans-serif;
      font-weight: 700;
      font-size: 2.25rem;
      line-height: 2.38rem;
    }

    .notes {
      text-align: justify;
      color: black;
      margin: 2rem 2.5rem 0rem 2.5rem;
      font-family: 'roboto condensed', sans-serif;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: 400;
    }

    .intro {
      text-align: justify;
      color: #777777;
      /* medium grey */
      margin: 2rem 4.5rem 1.25rem 4.5rem;
      font-family: 'roboto condensed', sans-serif;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: 400;
    }

    .intro2 {
      text-align: justify;
      color: blue;
      margin: 2rem 4.5rem 2.5rem 4.5rem;
      font-family: 'roboto condensed', sans-serif;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: 400;
    }

    .ovry {
      color: blue;
      text-align: center;
      margin: 3rem 2rem 2rem 2rem;
      font-family: 'solway', serif;
      font-size: 2.75rem;
      line-height: 2.88rem;
      font-weight: 700;
    }

    .abtn {
      color: black;
      text-align: left;
      margin: 1.25rem 2.5rem 1.25rem 2.5rem;
      font-family: "roboto slab", sans-serif;
      font-weight: 700;
      font-size: 2rem;
      line-height: 2.38rem;
    }

    .az {
      color: blue;
      text-align: left;
      margin: 0rem 2.5rem 1.25rem 2.75rem;
      font-family: "roboto condensed", sans-serif;
      font-weight: 700;
      font-size: 1.88rem;
      line-height: 2rem;
    }

    .hilitea {
      margin-bottom: 2rem;
      text-align: center;
      font-style: italic;
      color: #ff00ff;
      /* cyan  */
      background-color: black;
      padding-top: .4rem;
      padding-right: .3rem;
      padding-bottom: .4rem;
      padding-left: .6rem;
      font-family: 'crete round', serif;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: bold;
    }

    .hiliteb {
      text-align: center;
      color: black;
      background-color: #ffe5fe;
      /* pale pink */
      border-top: .38rem solid black;
      border-left: .38rem solid black;
      border-right: .38rem solid black;
      border-bottom: .38rem solid black;
      padding-top: .5rem;
      padding-right: .6rem;
      padding-bottom: .4rem;
      padding-left: .7rem;
      font-family: 'crete round', serif;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: bold;
    }

    .footer {
      color: black;
      text-align: center;
      margin: 2.5rem 1rem 1.25rem 1rem;
      font-family: 'roboto condensed', sans-serif;
      font-size: 2.5rem;
      line-height: 2.63rem;
      font-weight: 400;
    }

    .crete {
      text-align: center;
      color: black;
      font-family: 'crete round', serif;
      font-size: 2.38rem;
      line-height: 2.13rem;
      font-weight: 700;
    }

    /*  Column th3 is on line 232  */
    /* ━━━━━━━━━ END CSS ━━━━━━━━━━ */
  </style>
</head>

<body>
  <div class="title">
    10 Democratic Senate Seats in 2022
  </div>

  <div class="bkdimg tab1active">
    <div class="ctr ctr2">
      <div class="tab"><span class="tablabel2"><b>Senate</b></span></div>
    </div>
    <div class="ctr ctrmid">
      <div class="tab"><span class="tablabel2"><b>&mdash;Class 3&mdash;</b></span></div>
    </div>
    <div class="ctr ctr3">
      <div class="tab"><span class="tablabel2"><b>&nbsp;2022&nbsp;</b></span></div>
    </div>
  </div>

  <table class="table1">
    <tr>
      <td>
        <div class="plink">
          <a href="https://fvap.gov/guide/appendix/state-elections" target="blank">
            Click here for current Primary Dates</a>
        </div>
      </td>
      <td>
        <div class="clink">
          <a href="https://en.m.wikipedia.org/wiki/2022_United_States_Senate_elections" target="blank">
            Wikipedia 2022 Senate Class 3</a>
        </div>
      </td>
    </tr>
  </table>

  <hr>

  <div class="bkdimg tab2active">
    <div class="ctr ctr2">
      <div class="tab"><span class="tablabel2"><b>Senate</b></span></div>
    </div>
    <div class="ctr ctrmid">
      <div class="tab"><span class="tablabel2"><b>&mdash;Class 3&mdash;</b></span></div>
    </div>
    <div class="ctr ctr3">
      <div class="tab"><span class="tablabel2"><b>&nbsp;2022&nbsp;</b></span></div>
    </div>
  </div>

  <table class="table1">
    <tr>
      <td>
        <div class="plink">
          <a href="https://fvap.gov/guide/appendix/state-elections" target="blank">
            Click here for current Primary Dates</a>
        </div>
      </td>
      <td>
        <div class="clink">
          <a href="https://en.m.wikipedia.org/wiki/2022_United_States_Senate_elections" target="blank">
            Wikipedia 2022 Senate Class 1</a>
        </div>
      </td>
    </tr>
  </table>
  <hr>

  <div class="bkdimg tab3active">
    <div class="ctr ctr2">
      <div class="tab"><span class="tablabel2"><b>Senate</b></span></div>
    </div>
    <div class="ctr ctrmid">
      <div class="tab"><span class="tablabel2"><b>&mdash;Class 3&mdash;</b></span></div>
    </div>
    <div class="ctr ctr3">
      <div class="tab"><span class="tablabel2"><b>&nbsp;2022&nbsp;</b></span></div>
    </div>
  </div>

  <table class="table1">
    <tr>
      <td>
        <div class="plink">
          <a href="https://fvap.gov/guide/appendix/state-elections" target="blank">
            Click here for current Primary Dates</a>
        </div>
      </td>
      <td>
        <div class="clink">
          <a href="https://en.m.wikipedia.org/wiki/2022_United_States_Senate_elections" target="blank">
            Wikipedia 2022 Senate Class 1</a>
        </div>
      </td>
    </tr>
  </table>

</body>
</html>

I tweaked it for all three tabs and altered the image placement slightly so I think this is about the best you can get for my version. Its not perfect but its quite close.

… and just for fun lets have the image move :slight_smile:

1 Like

Wicked! Oh Paul I was beginning to think we couldn’t do this but look at it! I think it’s lovely! Would you do me a huge favor and comment the 6 lines of code that refer to

A) the 3 tab image/fills (eg. TAB1) and
B) the 3 lines controlling the text (LABEL TAB1)

I hate to admit this but I literally cannot find my way around your gorgeous tabs without it! I’d break the code! :tongue:

I’m not quite sure what you are asking but in that last demos the image is applied to all 3 tabs in one go from this rule.

 .tablabel2: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;
    }

(Note I left the variable in place var(--tab2color) but its not used as the image hides the background anyway. I left it in so I could see what color it was originally. )

This image ( background: var(–tab2color) url(“https://assets.codepen.io/74047/PARCHMENT-A.jpg”):wink: is used on all 3 backgrounds in those last demos.

There are two other parts that make up the background and they are the box-shadow on the right and left bottom corners which are created from this rule.

.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)
    }

That uses a colour I picked from the image ( rgba(221, 198, 136, 0.8)) so that the box shadow is a similar colour to the image on the right bottom corner. For the left bottom corner a black colour seem to work better. Both colours are merged with the background using mix-blend-mode: lighten; It’s a bit hit and miss and colour choice is important to find a sweet spot that works.

The text is inside a b element and can be moved up or down without breaking the layout by using the transform value in here.


.tab b {
    display: flex;
    transform: translateY(7px);
    justify-content: center;
}

I’ts color is set in .tablabel2 as required.

I commented out the code that was not needed assuming that the same colours were used for each tab. If you wanted a different image for each tab you would need to uncomment out the code and do the same as I just explained and match the new colours and images accordingly and individually for each tab. It could be quite complex which is why I felt one image was the best approach.

1 Like

Of course Paul I believe this is where I employ one of snady’s emoji:

groan2

I have to get myself out of my political cheatsheet and into something comfortable like poetry lol. But never doubt — I sm going yo use those 3 tabs Paul. I may employ them as links to Wikipedia bios and suchlike for Thomas Merton and Chuang Tzu who lived over 200 years BC!! Let me reset my brain and download your code again. This is going to be a blast Paul. I can’t thank you enough! :weee:

Paul I deleted the post because it was garbage. I can do much better than that. I’m just tired from being up all night; let me get some sleep and submit a page worthy of your time. I’m embarrassed by this one.

Okay Paul I keep revising this as I get closer. I found a watercolor that took a size change to 1080 X 6000px like a champion; toned down its saturation; removed some red; airbrushed in just two places . . . and I’ll look forward to seeing it as it is meant to be: directly below the tabs without picking up the upper margin on poem-a which is the container for my poem, giving it a garish slashing white between the poem and your tabs. Everything is ((gigantic)) on my phone so I can’t see your beautiful tabs, only the top one with the other two peeking from behind. I don’t know what I’ve done to mess this up so badly but let me give you the logic of my choices and you can probably fix this with very minor corrections. I changed nothing in your code — either the CSS or the HTML.

I used

body {
    width: 100%;
    margin: 0px;

thinking that I want my parchment to completely fill the viewport directly beneath the tabs. I also made a decision to give the poem left and right margins of 5%. So I ordered the 4 parts linearly as follows:

1) zero on the body tag
2) your tabs, lifted directly from your (first, non-animated) CSS which should fill the width of the screen so that . . .
3) parchment as background directly beneath your tabs functions as the first appearance of the background (1080px wide X 6000px tall)
4) on top of which finally sits POEM-A, the container for the poem

None of it displays even remotely the way it should but it validates! :tongue: Both the text and the tabs blew up to gigantic proportions and, well, here it is:

<!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=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>99_WATERCOLOR_1080_6000_CHUANG_TZU NO ANI w&#47; &#7172;</title>

<style>

body {
    width: 100%;
    margin: 0px;
    font-family: 'roboto slab', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 600;
    color: black;
}

td {
    padding-top: .4rem;
    padding-right: .4rem;
    padding-bottom: .4rem;
    padding-left: .7rem;
}

/* ━━━━━━ PAUL’S TAB Courtesy PAUL O’BRIEN at Sitepoint ━━━━━━ */

    :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*/
    }

    .tablabel2 {
      position: relative;
      text-align: center;
      border-radius: 20px 20px 0px 0px;
      color: black;
      padding: 1rem 1rem 0;
      font-size: 2.4rem;
      line-height: 2.63rem;
      font-weight: bold;
      height: 52px;
      width: 225px;
      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 b {
      display: flex;
      transform: translateY(5px);
      justify-content: center;
    }

    .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;
    }

    .tablabel2: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;
    }

    .bkdimg {
      position: relative;
      background: none;
      overflow: hidden;
      margin-bottom: -2px;
      /* attempt to stop rounding errors when zoomed*/
    }

    .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;
    }

    /*
    .ctr2 .tab span *,
    .ctr2 .tablabel2:before {
     background: var(--tab1color);
      color: #000;
    }

    .ctr2 .tab:before,
    .ctr2 .tab:after {
      box-shadow: 0 34px var(--tab1color);
    }

    .ctr3 .tab span *,
    .ctr3 .tablabel2:before {
      background: var(--tab3color);
      color: #000;
    }

    .ctr3 .tab:before,
    .ctr3 .tab:after {
      box-shadow: 0 34px var(--tab3color);
    }
*/
    .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 ━━━━━━ */

.indent {margin-left: 6.26rem}

.leada {
    margin-top: 3.13rem;
    text-align: center;
    font-family: 'crete round', serif;
    font-weight: 400;
    font-size: 3rem;
    line-height: 3.25rem;
}
.leadb {
    text-align: center;
    font-family: 'crete round', serif;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 3rem;
}
.leadc {
    text-align: center;
    font-style: normal;
    margin-bottom: 2.5rem;
    font-family: 'crete round', serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.5rem;
}

.poem-a {
    margin-top: 3.13rem;
    margin-left: 5%;
    margin-right: 5%;
<!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=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>99_WATERCOLOR_1080_6000_CHUANG_TZU NO ANI w&#47;PARCHMENT-C &#7172; ELECTION</title>

<style>

body {
    width: 100%;
    margin: 0px;
    font-family: 'roboto slab', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 600;
    color: black;
}

td {
    padding-top: .4rem;
    padding-right: .4rem;
    padding-bottom: .4rem;
    padding-left: .7rem;
}

/* ━━━━━━━━━ PAUL’S TAB Courtesy PAUL O’BRIEN of Sitepoint ━━━━━━━━━ */

    :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*/
    }

    .tablabel2 {
      position: relative;
      text-align: center;
      border-radius: 20px 20px 0px 0px;
      color: black;
      padding: 1rem 1rem 0;
      font-size: 2.4rem;
      line-height: 2.63rem;
      font-weight: bold;
      height: 52px;
      width: 225px;
      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 b {
      display: flex;
      transform: translateY(5px);
      justify-content: center;
    }

    .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;
    }

    .tablabel2: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;
    }

    .bkdimg {
      position: relative;
      background: none;
      overflow: hidden;
      margin-bottom: -2px;
      /* attempt to stop rounding errors when zoomed*/
    }

    .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;
    }

    /*
    .ctr2 .tab span *,
    .ctr2 .tablabel2:before {
     background: var(--tab1color);
      color: #000;
    }

    .ctr2 .tab:before,
    .ctr2 .tab:after {
      box-shadow: 0 34px var(--tab1color);
    }

    .ctr3 .tab span *,
    .ctr3 .tablabel2:before {
      background: var(--tab3color);
      color: #000;
    }

    .ctr3 .tab:before,
    .ctr3 .tab:after {
      box-shadow: 0 34px var(--tab3color);
    }
*/
    .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 ━━━━━━ */

.indent {margin-left: 6.26rem}

.leada {
    margin-top: 3.13rem;
    text-align: center;
    font-family: 'crete round', serif;
    font-weight: 400;
    font-size: 3rem;
    line-height: 3.25rem;
}
.leadb {
    text-align: center;
    font-family: 'crete round', serif;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 3rem;
}
.leadc {
    text-align: center;
    font-style: normal;
    margin-bottom: 2.5rem;
    font-family: 'crete round', serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.5rem;
}

.poem-a {
    margin-top: 3.13rem;
    margin-left: 3%;
    margin-right: 3%;
    margin-bottom: 3.13rem;
    font-style: normal;
    text-align: left;
    color: black;
    font-family: 'crete round', serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}
.parch {
  background-image: url('https://lh3.googleusercontent.com/pw/AP1GczOEwojXkuYV7-hb0S0BCu4xenJ9_079rFSt7_K48j66iOkquyY5f9mqFdSj8MvZm86xfxGVcg1pvyZ1QCK-pa1crZGOI-xhXnPGQyrb2CZ34rSUKA=w1080-h6000')
}

/* ━━━━━━━━━ END CSS ━━━━━━━━━━ */

</style>
</head>

<body>

  <div class="bkdimg tab1active">
    <div class="ctr ctr2">
      <div class="tab"><span class="tablabel2"><b>Senate</b></span></div>
    </div>
    <div class="ctr ctrmid">
      <div class="tab"><span class="tablabel2"><b>&mdash;Class 3&mdash;</b></span></div>
    </div>
    <div class="ctr ctr3">
      <div class="tab"><span class="tablabel2"><b>&nbsp;2022&nbsp;</b></span></div>
    </div>
  </div>


<div class="parch">

<div class="poem-a">

  <div class="leada">
&ldquo;The Empty Boat&rdquo;
  </div>
  <div class="leadb">
From <i>&ldquo;The Way of Chuang Tzu&rdquo;</i>
  </div>
  <div class="leadc">
Translated by Thomas Merton, Trappist Monk<br>
1915-1968
  </div>

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.<br>
<br>
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.<br>
<br>
<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>
<br>
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.<br>
<br>
A wise man has said:<br>
<div class="indent">
&ldquo;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.&rdquo;
</div>
<br>
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<br>
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.<br>
<br>
<div class="indent">Such is the perfect man:<br>
His boat is empty.
</div>
<br>
<br>
[xx. 2.]<br>
[xx. 2, 4-]<br>
114<br>
115
</div>   <!--  Closing POEM-A  -->
</div>   <!--  Closing PARCH  -->
</body>
</html>

I have put the poem on parchment:

It is 412px wide so should fit on your smartphone in portait orientation without any pinching gestures.

3 Likes

No it doesn’t :slight_smile:

Half way through the first stylesheet you have pasted the whole html again?

That may just be a cut and paste error when you posted in here.

That will probably break the pinch and zoom method you were using to see the display on your smartphone as you found a magic number of 950px (or whatever it was -I forget nnow :)). The browser will now not scale it as much and your text will be enlarged as you just mentioned.

Unless this is supposed to be a complete departure from your own device then you can’t change your fixed widths. You can’t have it both ways. Either its responsive or its not :wink:

I removed the misplaced html and set the background to the parchment and it seems to display roughly as I expect. When you pinch and scale on your phone it should give the appearance you wanted.

@Archibald 's is using the original image I believe and looks much better but you’d have to set the width to match the tabs otherwise when you pinch and zoom the poem will shrink accordingly.

Remember, nearly all these problems are caused by the rabbit hole you wanted to go down with your pinch and zoom rather than having a responsive site. :wink:

I have been resisting this for a long time, but,
as someone who has never owned or ever
wanted to own anything defined as “Smart”,
I have to ask you why is a minature screen
device your choice for viewing HTML pages?

I hope that you do not find this question to be
impudent as it is certainly not my intention.

1 Like