Best way to Obtain Opacity (and other issues)

HTML & CSS
23

At last someone understands! Thank you Dave. I’ll delete the rant.

Now the only remaining issue is to clean up the bottom of the page so it looks like the top of the page and I’m pretty sure I can do that on my own. I’ll just fool around with the padding until I get it right. I’ll formally acknowledge your solution in the contact area at the bottom of the page Dave. Thank you. :weee:

24

Ok you’re on your own from now on. I will enjoy my vacation instead.

4 Likes
25

Bon Voyage Paul! :biggrin: And I updated my Codepen.

26

Okay I have everything working just as I want it but the border-bottom on my two tables isn’t displaying the color I assigned it in the CSS.

Given the hostility I met with uploading the full code previously I have gutted this down to a minimum of the content for testing purposes. The line in question is Line 96. The borders should be a salmon color but instead are black. Any help greatly appreciated!

<!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=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed: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=Uncial+Antiqua&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&display=swap" rel="stylesheet">

  <title>testing border-bottom &#7172; by semicodin &#47; with Gratitude for Dave Maxwell of Sitepoint Forums</title>

<style>

body {
    width: 1080px;
    margin: 0;
    font-family: 'solway', serif;
    font-size: 2.5rem;
    line-height: 1.05;
    font-weight: 700;
    color: black;
}

p {line-height: 1; margin: 0;}
u {text-decoration: underline}
* {box-sizing: border-box}
.cent {text-align: center}
.blu {color: blue}
.crim {color: crimson}
.blud {color: #611205}

.br {line-height: 2.88rem}

.ssz1 {
    color: #444444;
    padding-top: 0rem;
    text-align: center;
    font-family: 'solway', serif;
    font-size: 2rem;
    line-height: 2.25rem;
    font-weight: bold;
}
.ssz2 {
    color: #444444;
    text-align: center;
    padding-bottom: 3.13rem;
    font-family: 'solway', serif;
    font-size: 1.75rem;
    line-height: 2rem;
    font-weight: bold;
}
.goudy {
      font-family: 'goudy bookletter 1911', serif;
      font-weight: bold;
}
.tile {
    background-image: URL("https://semicodin.nekoweb.org/pics/ppewter-1.jpg");
    background-repeat: repeat;
    padding: 4.5rem;
}

.opaq {
    padding: 4.5rem 0 .25rem 0;
    background-color: rgb(255, 255, 255, .6);
}
.solid {
    padding: 4.5rem;
    margin: 0 4.5rem 4.5rem 4.5rem;
    background-color: white;
}
.main {
    padding: 4.5rem;
    font-style: normal;
    text-align: left;
    color: black;
    font-family: 'solway', serif;
    font-size: 2.75rem;
    line-height: 1.08;
    font-weight: bold;
}

table {
    width: 100%;
    border-collapse: collapse;
}
td {
    padding: .4rem;
}
tr {
    border-bottom: .25rem solid #e4626e;
}

.ouevre {
    text-align: left;
    color: black;
    font-family: 'solway', serif;
    font-size: 3rem;
    line-height: 1.1;
    font-weight: bold;
}

/* ▬▬▬▬▬ DIVIDERS ▬▬▬▬▬ */
     /* DIVIDERS & GLYPHS */

.dvdr-a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3rem;
    margin-bottom: 2rem;
    background URL("https://lh3.googleusercontent.com/pw/AP1GczPDBQ6jsZFEYz2vtk8FZe8NYKonyEMwV6EuNB_asbYN4JwOUAxy6gG7YVmMTX5eFmg5KWPIpR3ow8Pj89SGRKGkg27mPsQmExWTBrG7nHXSBRtwIw=w640-h130");
    width: 640px;
    height: 130px;
}

/* ▬▬▬▬▬▬ CONTACT ▬▬▬▬▬▬ */

.contact {
    margin: 0;
    padding-top: 0rem;
    padding-left: 0rem;
    padding-right: 0rem;
    padding-bottom: 4rem;  /* YES */
    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: white;
    text-align: center;
    padding-top: 6rem;
    margin: 0rem 0 2rem 0;
    font-family: 'solway', serif;
    font-size: 4rem;
    line-height: 1.1;
    font-weight: bold;
}
.down {
    color: white;
    text-align: center;
    margin: 0 0 1rem 0;
    font-family: 'solway', serif;
    font-size: 2rem;
    line-height: 1.02;
    font-weight: 700;
}
.thanks {
    color: white;
    text-align: center;
    margin: 0 4rem 0 4rem;
    font-family: 'solway', serif;
    font-size: 2rem;
    line-height: 1.02;
    font-weight: bold;
}
.quest {
    color: white;
    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: white;
    text-align: center;
    margin: 4rem 4rem 4rem 4rem;
    font-family: 'solway', serif;
    font-size: 2rem;
    line-height: 1.02;
    font-weight: bold;
}
.clampnk35 {
	color: #e4626e;
	font-style: italic;
	font-family: roboto, sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
}

.sallink a:link {
    color: #e4626e
}
.sallink a:visited {
    color: #e4626e
}
a:active {color: magenta}
a:hover {color: magenta}
a:link {color:#e4626e}
a:visited {color: #e4626e}

/*▬▬▬▬ 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/pics/parchment-a.jpg");
    background-position: -3px -8px;
    transform: perspective(100px) rotateX(36deg) translateY(5px);
    border-radius: 20px 20px 0 0;
}

.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.seventab a {
    margin-right: -5.4rem;
    margin-left: -1rem;
}
.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 span {
    grid-area: tab;
    position: relative;
    z-index: 2;
    padding: 11px 2rem 0 0;
    font-family: 'solway', serif;
    font-weight: 800;
    color: white;
    font-size: 2.52rem;
}
.svgtabs.seventab span {
    padding: 11px 1rem 0;
}
.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: 200px;
  }

    50% {
      height: 210px;
      width: 180px;
  }

    100% {
      height: 220px;
      width: 200px;
  }
}

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

/* ━━━━━━ TABS ━━━━━━ */

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

/* ▬▬▬▬▬▬ LEADS ▬▬▬▬▬▬ */

.leada {
    color: blue;
    padding-bottom: 3.13rem;
    border-bottom: .5rem dotted black;
    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 {
    color: black;
    text-align: center;
    font-family: 'solway', serif;
    font-weight: bold;
    font-size: 4rem;
    line-height: 1.1;
}
.leadc {
    color: black;
    text-align: center;
    margin: 1rem 0 2.5rem 0;
    font-style: normal;
    margin-bottom: 2.5rem;
    font-family: 'solway', serif;
    font-weight: 400;
    font-size: 3rem;
    line-height: 1.05;
}
.leadd {
    color: black;
    margin: 3.13rem 0 2.5rem 0;
    text-align: center;
    font-family: 'solway', serif;
    font-weight: bold;
    font-size: 4rem;
    line-height: 1.1;
}
.leade {
    color: black;
    margin: 3.13rem 0 0 0;
    text-align: center;
    font-family: 'solway', serif;
    font-weight: bold;
    font-size: 4rem;
    line-height: 1.1;
}
.leadf {
    text-align: center;
    margin: 0 0 2.5rem 0;
    font-style: normal;
    margin-bottom: 2.5rem;
    font-family: 'solway', serif;
    font-weight: bold;
    font-size: 3rem;
    line-height: 1.05;
}
.leadg {   /* Ellis Peters  */
    color: black;
    margin: 3.13rem 0 2.5rem 0;
    text-align: center;
    font-family: 'solway', serif;
    font-weight: bold;
    font-size: 4rem;
    line-height: 1.1;
}
.lead_h {   /* Ellis Peters  */
    color: black;
    margin: 3.13rem 0 2.5rem 0;
    text-align: center;
    font-family: 'solway', serif;
    font-weight: bold;
    font-size: 4rem;
    line-height: 1.1;
}
.oeuvre {
    margin: 2.5rem 1.5rem 2.5rem 1.5rem;
    font-style: normal;
    text-align: left;
    color: black;
    font-family: 'solway', serif;
    font-size: 2.75rem;
    line-height: 1.08;
    font-weight: bold;
}

table tr {
    border-bottom: .25rem solid black;
}

.tanlinkhere a:link {
    color: #dab571;
    font-family: 'solway', serif;
    font-weight: 700;
    font-size: 4rem;
    line-height: 1.1;
    }
.tanlinkhere a:visited {
    color: #dab571;
    font-family: 'solway', serif;
    font-weight: 700;
    font-size: 4rem;
    line-height: 1.1;
    }

/*▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬*/

</style>
</head>

<body>

<div class="leada">
    7 Animated SVG Tabs<br>
Featuring Grid
    </div>

<div class="ssz1">
This Is A Small Screen Zone*</div>
<div class="ssz2">
*Designed  and built for SmartPhones<span class="clamgy">!</span>
</div>


<!-- ▬▬▬▬▬ 7 TABS ▬▬▬▬▬ -->
<!-- add active class to anchor to bring the tab in front as required -->

<nav class="svgtabs seventab">

<a class="svgtab1" href="#">
        <span>1588</span>
        <svg viewBox="0 0 64.823 11.023" xmlns="http://www.w3.org/2000/svg">
          <use href="#cutetab" />
        </svg>
      </a>

<a class="svgtab2" href="#">
        <span>1861</span>
        <svg viewBox="0 0 64.823 11.023" xmlns="http://www.w3.org/2000/svg">
          <use href="#cutetab" />
        </svg>
      </a>

<a class="svgtab3" href="#">
        <span>1768</span>
        <svg viewBox="0 0 64.823 11.023" xmlns="http://www.w3.org/2000/svg">
          <use href="#cutetab" />
        </svg>
      </a>

<a class="svgtab4" href="#">
        <span>1856</span>
        <svg viewBox="0 0 64.823 11.023" xmlns="http://www.w3.org/2000/svg">
          <use href="#cutetab" />
        </svg>
      </a>

<a class="svgtab5" href="#">
        <span>1284</span>
        <svg viewBox="0 0 64.823 11.023" xmlns="http://www.w3.org/2000/svg">
          <use href="#cutetab" />
        </svg>
      </a>

<a class="svgtab6" href="#">
        <span>1316</span>
        <svg viewBox="0 0 64.823 11.023" xmlns="http://www.w3.org/2000/svg">
          <use href="#cutetab" />
        </svg>
      </a>

<a class="svgtab7" href="#">
        <span>1475</span>
        <svg viewBox="0 0 64.823 11.023" xmlns="http://www.w3.org/2000/svg">
          <use href="#cutetab" />
        </svg>
      </a>

    </nav>

<!--▬▬▬▬ CLOSING 7 TABS ▬▬▬-->

<div class="content-area">
<!-- All content goes in here including tables and will sit on top of the image. -->

<div class="tile">
<div class="opaq">
<div class="solid">
<table class="ouevre">
<tbody>
<tr><td>1. (2000)<br>
Sleep of Death</td></tr>
<tr><td>2. (2001)<br>
Death of Kings</td></tr>
<tr><td>3. (2002)<br>
The Pale Companion</td></tr>
<tr><td>4. (2003)<br>
Alms for Oblivion</td></tr>
<tr><td>5. (2004)<br>
Mask of Night</td></tr>
<tr><td>6. (2005)<br>
An Honorable Murderer</td></tr>
</tbody>
</table>

</div>
</div>
</div>
<div class="contact">

    <div class="here">
    <a href="https://semicodin.nekoweb.org/vault/SVGPAR7_ANI_BOOKS-MASTER.ZIP">
Code Here</a>
    </div>

    <div class="down">
      Long Press on &ldquo;Download Link&rdquo; and save.
    </div>

    <div class="thanks">
This code courtesy of Dave Maxwell<br>
and Paul O&rsquo;Brien 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="clamwh35">!</span>
    </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">

    <!-- 7 TAB VERSION -->
      <svg viewBox="0 0 64.823 11.023" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <g id="cutetab" class="tab-unit">
            <clipPath id="shape7">
              <path d="M1425.55 1700.81c-9.892 0-10.854 3.666-13.164 7.378-1.671 2.685-4.696 5.999-6.313 5.96h51.153c-1.616.039-4.641-3.275-6.312-5.96-2.31-3.713-3.273-7.379-13.165-7.379h-7.346Z" transform="translate(-1397.992 -1700.126)" />
            </clipPath>
            <path style="fill:#000; stroke-width:3; stroke:#000" d="M1423.542 1700.126c-3.528.002-5.957.932-7.742 2.337-1.788 1.407-2.92 3.238-4.04 4.986-1.118 1.748-2.218 3.414-3.872 4.639-1.655 1.225-3.882 2.054-7.403 2.054h-2.493v.006h9.14a10.53 10.53 0 0 0 1.57-.96c1.896-1.404 3.089-3.244 4.213-5 1.124-1.757 2.18-3.43 3.732-4.65 1.552-1.222 3.607-2.044 6.91-2.044h16.185c3.303 0 5.359.823 6.91 2.045 1.552 1.222 2.609 2.893 3.733 4.65 1.123 1.757 2.317 3.599 4.213 5.002.475.352.992.673 1.56.957h6.657c-3.522 0-5.748-.83-7.403-2.056-1.654-1.226-2.754-2.89-3.873-4.64-1.118-1.748-2.251-3.582-4.039-4.99-1.785-1.405-4.214-2.334-7.743-2.336Z" transform="translate(-1397.992 -1700.126)" />
            <image class="tab-animated tan7" transform="translate(00 0)" width="270" height="220" href="https://semicodin.nekoweb.org/pics/parchment-a.jpg" clip-path="url(#shape7)" />
          </g>
        </defs>
      </svg>

    </div><!-- CLOSING HIDE-SVG-->

</body>
</html>
27

I caught the error and fixed it. I also updated the Codepen so (one page of it) is there if anyone wants to see it. :weee:

1 Like
28

Okay hi everybody (hello Paul hee hee). This little project is completed and I wanted to give the forum two links. The first is to the Master page for this project — HERE.

That gives you a view of all 7 tabs before downloading the ZIP file. And the second is for the ZIP file with all eight pages HERE.

I had a lot of fun with this and will forge ahead and produce two more of these when/as time permits. Thank you for your help everyone! :biggrin:

1 Like
29

Wow! :eek: There’s so much interest in these mystery series pieces I’m releasing a BOOKMARK SET OF 9 BOOKMARKS (8 Authors, 9 Series, jpg format) in a HI-RES 43MB ZIP file. You can download it off my little nekoweb site here: https://semicodin.nekoweb.org/vault/BONUS_9_BOOKMARKS.ZIP and I’ve updated my toc. It’s great to be seeing people reading historical mysteries. Enjoy! :biggrin:

30

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.