Okay Paul I took your latest code and the only thing I changed about it was I copied over the new table data based upon my reassignment of the styles and exchanging a few styles. Before I go any further I am uploading the code because I see the background behind the tabs. Do you see it too? I haven’t updated the anchors; I’m going step-by-step. And there is a leak at the left edge of the first tab. You have to zoom in considerably to see it and I only just now caught it.
<!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>59-1 svgpar7_ani ᰄ by semicodin / with Huge Assistance from Paul O’Brien of Sitepoint Forums</title>
<style>
body {
width: 1080px;
margin: 0;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 1.05;
font-weight: 600;
color: black;
}
.goudy {
font-family: 'goudy bookletter 1911', serif;
font-weight: bold;
}
p {
line-height: 1;
margin: 0;
}
u {
text-decoration: underline
}
* {
box-sizing: border-box
}
.blu {
color: blue
}
.crim {
color: crimson
}
.ssz1 {
color: #444444;
padding-top: 3.13rem;
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;
}
.special {
border-right: 3px solid black;
font-family: 'roboto condensed', sans-serif;
font-weight: 800;
font-size: 2.75rem;
line-height: 2.88rem;
}
.special2 {
font-family: 'roboto', sans-serif;
font-weight: 800;
font-size: 2.75rem;
line-height: 2.88rem;
}
.bckgrd-1 {
width: 100%;
height: 100%;
margin: 0;
background-image: url('https://lh3.googleusercontent.com/pw/AP1GczOgmXJOxaV01FyGYLrUcxyCRJ2l4PG2x_XqmNAu0hA-RcY2KXt5JHLfF2A7S-G_hY-8g-vj8xSz0_JVtydy-rXoN2qkzVePI2LlynFkOQjfIy56Hw=w3423-h5134');
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;
}
/* ▬▬▬▬▬▬ TABLE 1 ▬▬▬▬▬▬ */
.table1 {
width: 88%;
margin: 0rem 6% 0rem 6%;
border: 1.75rem groove #dab471;
padding: .8rem;
color: white;
text-align: center;
font-style: italic;
background-color: black;
font-family: 'crete round', serif;
font-size: 4rem;
line-height: 4.25rem;
font-weight: bold;
}
/* ▬▬▬▬▬▬ TABLE 2 ▬▬▬▬▬▬ */
td {
border: 3px solid black;
border-collapse: collapse;
}
.table2 {
width: 88%;
margin: 0rem 6% 0rem 6%;
padding-bottom: 10rem;
border-collapse: collapse;
border: 3px solid black;
border-left: 1.75rem groove #dab471;
border-right: 1.75rem groove #dab471;
border-bottom: 1.75rem groove #dab471;
font-family: 'roboto', sans-serif;
font-size: 2.25rem;
line-height: 1.05;
font-weight: bold;
color: black;
}
.group2 {
/* TAB NUMBER */
width: 8%;
color: black;
font-style: normal;
text-align: center;
font-family: 'solway', serif;
font-weight: 800;
font-size: 3.75rem;
line-height: 2.88rem;
}
.desc {
width: 70%;
/* DESCRIPTION */
color: black;
font-family: 'roboto', sans-serif;
font-weight: 600;
font-size: 2.75rem;
line-height: 2.88rem;
}
.size {
width: 22%;
/* SIZE */
color: blue;
font-family: 'roboto condensed', sans-serif;
font-weight: 600;
font-size: 2.75rem;
line-height: 2.88rem;
}
.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/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;
}
.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: black;
;
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: 210px;
}
50% {
height: 200px;
width: 170px;
}
100% {
height: 220px;
width: 210px;
}
}
.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 ━━━━━━ */
.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-align: 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;
}
.swatch {
margin-top: 1.57rem;
margin-left: 15%;
margin-right: 15%;
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;
}
.xtnd {
padding-bottom: 2000px;
height: auto;
}
/*▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬*/
/* extra long image css */
.imagebg {
display: grid;
width: 1080px;
grid-template-areas: "stack";
}
.imagebg img.bgimage {
width: 100%;
height: auto;
grid-area: stack;
}
.content-area {
grid-area: stack;
}
</style>
</head>
<body>
<main>
<div class="leada">
7 Animated SVG Tabs
</div>
<!-- add active class to anchor to bring the tab in front as required -->
<nav class="svgtabs seventab">
<a class="svgtab1" href="#">
<span>1</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>2</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>3</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>4</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>5</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>6</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>7</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="imagebg image1">
<img class="bgimage" src="https://lh3.googleusercontent.com/pw/AP1GczN-6p3nTKhePo5VDPXYEMThXrpCJysY86DOGDUhVIzObqF_xLRfQCdfgR4c3dn7t61wVk1TnzJ_IO82xsSLYuGEBuWPApNp8HB-nVuxv7ZiWYkozw=w2000-h6000" alt="pic1">
<div class="content-area">
<!-- all content goes in here including tables and will sit on top of the image -->
<div class="ssz1">
This Is A Small Screen Zone*</div>
<div class="ssz2">
*Designed and built for SmartPhones<span class="clamlbk">!</span></div>
<table class="table1">
<tbody>
<tr>
<td>
Seven Paper <span class="goudy">&</span><br>
Fabric Textures
</td>
</tr>
</tbody>
</table>
<table class="table2">
<tbody>
<tr>
<td class="special">Tab</td>
<td class="desc">Material Description</td>
<td class="special2">Image Dimensions</td>
</tr>
<tr>
<td class="group2">1</td>
<td class="desc">PAPER SPECKLED SAND</td>
<td class="size">2000 X 6000</td>
</tr>
<tr>
<td class="group2">2</td>
<td class="desc">PAPER SPECKLED LILAC</td>
<td class="size">2000 X 6000</td>
</tr>
<tr>
<td class="group2">3</td>
<td class="desc">PAPER SPECKLED LIGHT PINK</td>
<td class="size">2000 X 6000</td>
</tr>
<tr>
<td class="group2">4</td>
<td class="desc">FABRIC LINEN PATTERN SAND</td>
<td class="size">1310 X 2990</td>
</tr>
<tr>
<td class="group2">5</td>
<td class="desc">PAPER RICE PINK</td>
<td class="size">1177 X 3364</td>
</tr>
<tr>
<td class="group2">6</td>
<td class="desc">PAPER SPECKLED BLUE</td>
<td class="size">2800 X 7191</td>
</tr>
<tr>
<td class="group2">7</td>
<td class="desc">PAPER RICE BEIGE</td>
<td class="size">2000 X 5024</td>
</tr>
</tbody>
</table>
</div><!-- closing content-area -->
</div><!-- closing imagebg -->
<!-- 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 7 tab variation -->
<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-->
</main>
</body>
</html>
Holy Smokers what a great post! I’ll definitely swing by. Thank you.
PaulOB
July 1, 2024, 7:15am
216
Try using this new set of keyframes and deleting the other one.
@keyframes tab {
0% {
height: 220px;
width: 200px;
}
50% {
height: 210px;
width: 180px;
}
100% {
height: 220px;
width: 200px;
}
}
If you want your tables at the left edge of the screen then remove the margins in table1 and table2 etc.
.table2 {
width: 88%;
/* margin: 0rem 6% 0rem 6%; */
}
etc.. for others
Also you may want the width to be 100% the same as the background but thats up to you.
PaulOB
July 1, 2024, 11:16am
217
I just want to reiterate here for anyone else watching that what you are doing is for your use-case only and is not something that I would recommend for anyone else unless they have the except same set up as you.
Generally you would never size a background to match the size of the text or vice versa or use any background that is thousands of pixels long. We just don’t do that in responsive web design unless it’s to show the full picture unaltered rather than as a background.
The reason we don’t do that is you never know how long a piece of text is going to be and a user may have over-ridden any font-sizes you may have set or may have zoomed text only and in which case the text may spread several hundred pixels further than you thought.
Its not an issue in your case as this is all designed for you and your phone but I just wanted to make it clear to anyone watching that they would most likely do this differently.
Unfortunately that’s the danger of copy and pastes. With codepens I’m sent I just fork them and then they are mine and then I can keep that copy separate while I work on a newer version. Versioning is very important so that you can roll back when you break something fatally (as will happen to us all at some time)
2 Likes
I don’t know what it is to “fork” something.
Who on earth said anything about moving my tables? I was referring to your indenting the code — throwing it to the right of my 4” wide screen .
Re: the background being thousands of pixels long. We’re talking about a graphic approximately 1mb in size. No serious drain on resources to view.
Your latest code has healed the background showing behind the tabs but the page is not viewable in Pure Browser. It won’t display (?). @snadyleiby has a mac (I think?) so I’d like to hear from him if he has trouble viewing the page in his flavor of Vivaldi. I was able to open it in Chrome and Android Vivaldi. The tabs look wonderful!
I’ll proceed to advance to the links now and report back. Thank you Paul.
PaulOB
July 1, 2024, 12:59pm
220
Then there is an opportunity for you to find out and learn. :).
Ah ok sorry. It looks fine on my iPhone and my editor reformats automatically. That’s how I spot all your errors
The only Apples that I like are edible.
My test browsers - Firefox, Vivaldi and Chrome are
1 Like
Why wouldn’t you want to test these on your desktop? Because they’re small? There might be people who will have occasion to view these on a desktop. It would be nice to know if they display. Just sayin’.
Boy it’s a good thing I like to code because this was a rabbit’s warren linkwise. It’s done Paul and the tabs especially look great ! I produced a tidied version just for you below. All the tabs work. The code download works. Everything works. full throttle . I want to produce an accessible description of the SVG we’ve been using that even a newbie can wrap their mind around it. Short; concise; accessible . Nothing in the weeds; long on verbs. here she is Paul. Tidied and ready for the dance!
To be continued . . .
<!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>Master svgpar7_ani_grid ᰄ by semicodin / with Huge Assistance from Paul O’Brien of Sitepoint Forums</title>
<style>
body {
width: 1080px;
margin: 0;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 1.05;
font-weight: 600;
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}
.roon {color: #611205}
.goudy {
font-family: 'goudy bookletter 1911', serif;
font-weight: bold;
}
.ssz1 {
color: #444444;
padding-top: 3.13rem;
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;
}
.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 {
text-align: 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;
}
.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;
}
.divup {
display: block;
margin-left: auto;
margin-right: auto;
padding: 4rem 0 4rem 0;
width: 750px;
height: 90px;
}
.divdown {
display: block;
margin-left: auto;
margin-right: auto;
padding: 1rem 0 10rem 0;
width: 750px;
height: 90px;
}
/* ▬▬▬▬▬▬ CONTACT ▬▬▬▬▬▬ */
.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: 6rem;
margin: 4.5rem 0 2rem 0;
font-family: 'solway', serif;
font-size: 4rem;
line-height: 1.1;
font-weight: bold;
}
.down {
color: #ffffee;
text-align: center;
margin: 0 0 1rem 0;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: 700;
}
.thanks {
color: #ffffee;
text-align: center;
margin: 0 4rem 0 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: 4rem 4rem 2.5rem 4rem;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: bold;
}
.clamiv35 {
color: #ffffee;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 3.5rem;
font-weight: 900;
}
a:active {color: magenta}
a:hover {color: magenta}
a:link {color: #dab571}
a:visited {color: #dab571}
/* ▬▬▬▬▬▬ TABLE 1 ▬▬▬▬▬▬ */
.table1 {
width: 90%;
margin: 0rem 5% 0rem 5%;
border: 1.75rem groove #dab471;
padding: .8rem;
color: white;
text-align: center;
font-style: italic;
background-color: black;
font-family: 'crete round', serif;
font-size: 4rem;
line-height: 4.25rem;
font-weight: bold;
}
/* ▬▬▬▬▬▬ TABLE 2 ▬▬▬▬▬▬ */
td {
padding: .25rem;
border: 3px solid black;
border-collapse: collapse;
}
.table2 {
width: 90%;
margin: 0rem 5% 0rem 5%;
padding-bottom: 10rem;
border-collapse: collapse;
border: 3px solid black;
border-left: 1.75rem groove #dab471;
border-right: 1.75rem groove #dab471;
border-bottom: 1.75rem groove #dab471;
font-family: 'roboto', sans-serif;
font-size: 2.25rem;
line-height: 1.05;
font-weight: bold;
color: black;
}
.group2 { /* TAB NUMBER */
width: 10%;
color: black;
font-style: normal;
text-align: center;
font-family: 'solway', serif;
font-weight: 800;
font-size: 3.75rem;
line-height: 2.88rem;
}
.desc {
width: 68%; /* DESCRIPTION */
color: black;
font-family: 'roboto', sans-serif;
font-weight: 600;
font-size: 2.75rem;
line-height: 2.88rem;
}
.size {
width: 22%; /* SIZE */
color: blue;
font-family: 'roboto condensed', sans-serif;
font-weight: 600;
font-size: 2.75rem;
line-height: 2.88rem;
}
.cola {
font-family: 'roboto condensed', sans-serif;
background: white;
font-weight: 800;
font-size: 2.75rem;
line-height: 2.88rem;
}
.colb {
font-family: 'roboto condensed', sans-serif;
background: white;
font-weight: 800;
font-size: 2.75rem;
line-height: 2.88rem;
}
.colc {
font-family: 'roboto condensed', sans-serif;
background: white;
font-weight: 800;
font-size: 2.75rem;
line-height: 2.88rem;
}
td {
padding-top: .4rem;
padding-right: .4rem;
padding-bottom: .4rem;
padding-left: .7rem;
}
/*▬▬▬▬ 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;
}
.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.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: black;
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;
}
.redlink a:link {
color: #611205;
padding-top: 1rem;
font-weight: bold;
}
.redlink a:visited {
color: #611205;
padding-top: 1rem;
font-weight: bold;
}
/* ▬▬▬ EXTRA LONG IMAGE CSS ▬▬▬ */
.imagebg {
display: grid;
width: 1080px;
grid-template-areas: "stack";
}
.imagebg img.bgimage {
width: 100%;
height: auto;
grid-area: stack;
}
.content-area {grid-area: stack}
/*▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬*/
</style>
</head>
<body>
<div class="leada">
7 Animated SVG Tabs<br>
Featuring Grid
</div>
<!-- ▬▬▬▬▬ 7 TABS ▬▬▬▬▬ -->
<!-- add active class to anchor to bring the tab in front as required -->
<nav class="svgtabs seventab">
<a class="svgtab1" href="https://semicodin.nekoweb.org/h_thru_z/svgpar7_ani_grid-1_7.html">
<span>1</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="https://semicodin.nekoweb.org/h_thru_z/svgpar7_ani_grid-2_7.html">
<span>2</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="https://semicodin.nekoweb.org/h_thru_z/svgpar7_ani_grid-3_7.html">
<span>3</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="https://semicodin.nekoweb.org/h_thru_z/svgpar7_ani_grid-4_7.html">
<span>4</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="https://semicodin.nekoweb.org/h_thru_z/svgpar7_ani_grid-5_7.html">
<span>5</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="https://semicodin.nekoweb.org/h_thru_z/svgpar7_ani_grid-6_7.html">
<span>6</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="https://semicodin.nekoweb.org/h_thru_z/svgpar7_ani_grid-7_7.html">
<span>7</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="imagebg image1">
<img class="bgimage" src="https://lh3.googleusercontent.com/pw/AP1GczN-6p3nTKhePo5VDPXYEMThXrpCJysY86DOGDUhVIzObqF_xLRfQCdfgR4c3dn7t61wVk1TnzJ_IO82xsSLYuGEBuWPApNp8HB-nVuxv7ZiWYkozw=w2000-h6000" alt="pic1">
<div class="content-area">
<!-- All content goes in here including tables and will sit on top of the image. -->
<div class="ssz1">
This Is A Small Screen Zone*
</div>
<div class="ssz2">
*Designed and built for SmartPhones<span class="clamlbk">!</span>
</div>
<table class="table1">
<tbody>
<tr>
<td>
Seven Paper <span class="goudy">&</span><br>
Fabric Textures
</td>
</tr>
</tbody>
</table>
<table class="table2">
<tbody>
<tr>
<td class="cola">TAB</td>
<td class="colb">MATERIAL DESCRIPTION</td>
<td class="colc">Image Dimensions</td>
</tr>
<tr>
<td class="group2">1</td>
<td class="desc">TEXTURE SPECKLED SAND</td>
<td class="size">2000 X 6000</td>
</tr>
<tr>
<td class="group2">2</td>
<td class="desc">PAPER SPECKLED LILAC</td>
<td class="size">2000 X 6000</td>
</tr>
<tr>
<td class="group2">3</td>
<td class="desc">PAPER SPECKLED LIGHT PINK</td>
<td class="size">2000 X 6000</td>
</tr>
<tr>
<td class="group2">4</td>
<td class="desc">FABRIC LINEN PATTERN SAND</td>
<td class="size">1310 X 2990</td>
</tr>
<tr>
<td class="group2">5</td>
<td class="desc">PAPER RICE PINK</td>
<td class="size">1177 X 3364</td>
</tr>
<tr>
<td class="group2">6</td>
<td class="desc">PAPER SPECKLED BLUE</td>
<td class="size">2800 X 7191</td>
</tr>
<tr>
<td class="group2">7</td>
<td class="desc">PAPER RICE BEIGE</td>
<td class="size">2000 X 5024</td>
</tr>
</tbody>
</table>
</div>
<!-- CLOSING CONTENT-AREA -->
</div>
<!-- CLOSING IMAGEBGD -->
<div class="contact">
<div class="divup">
<img src="https://lh3.googleusercontent.com/pw/AP1GczMBhKTp-SxrLa1g1Z2R68xn5THS16UkIHPINhG0RpS9ZPdygvC6od6BtZRs3ZHITaVTacz0O6tX3U3iCYcmBXt_B3muege_Z4y4G09Cj1_xUHJ_4w=w750-h200" alt="Divider">
</div>
<div class="here">
<span class="tanlinkhere">
<a href="https://semicodin.nekoweb.org/vault/SVGPAR7_ANI_GRID-MASTER.ZIP">
Code Here</a></span>
</div>
<div class="down">
Long Press on “Download Link” and save.
</div>
<div class="thanks">
This code courtesy of the Immutable Patience<br>
of Paul O’Brien at the Sitepoint Forums
</div>
<div class="quest">
Got Questions? You can PM me at<br>
<span class="tanlinkquest"><a href="https://sitepoint.com/community/c/html-css/25">
the Sitepoint Forums</a></span><span class="clamiv35">!</span>
</div>
<div class="end">
CLICK HERE TO PROCEED<br>
<span class="tanlinkend">
<a href="https://semicodin.nekoweb.org/toc.html">
TO THE TABLE OF CONTENTS</a></span>
</div>
<div class="divdown">
<img src="https://lh3.googleusercontent.com/pw/AP1GczNCDiYkGZo-Wregca1CMKJtx2fR5hKCQlztDB_M--DunmR8lWzWKPtXwSiFmdxuKLcNJWPh3DNGf-F5HoNakVp-8QvcFtrsmdHpDg0KJ1qWE7dDZA=w750-h200">
</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>
PaulOB
July 2, 2024, 8:23am
224
semicodin:
To be continued . . .
Ok I checked in Safari for you and there is an issue with the tab background. The size of the svg needs to be changed to width="200" at the bottom of the html.
<image class="tab-animated tan7" transform="translate(00 0)" width="200" height="220" href="https://semicodin.nekoweb.org/pics/parchment-a.jpg" clip-path="url(#shape7)" />
</g>
</defs>
</svg>
That displays the tabs ok in Safari and ios but unfortunately they don’t animate in those two browsers. Otherwise they look fine. It may be that those browsers don’t support the animation on that section of a defs svg but I will look into it some time
1 Like
That would surprise me if Safari didn’t support animation. Such a technically advanced piece of software. Thanks Paul. We gotta keep everybody happy!
I was just re-reading this Paul and it was such a fantastic post. I’m getting my “Anatomy of an SVG” put together so people will be (generally, I’m not getting into the weeds) comfortable with what a piece of SVG code can look like and hope to have it compiled soon.
And as was previously noted we are no longer using xlink:href only href. I’m making the change in the examples I’m going to post for your review.
What rules are these? A link please Paul.
Okay everyone I’ve completed my SVG Cheatsheet. I’d like to have it proofed before Paul gets back from vacation.
Read my RFC: I’m appealing to @archibald and @snadyleiby and @sebtian625 and others who have been following this thread and are knowledgeable in SVG to scour the document for any incorrect assumptions and wrong guesses on my part. I think I got some of this right (after reading the entire MDN web doc for SVG) but there is no doubt much is wrong. So please experienced SVG coders, help me proof this — take a section or two (or four!) and point out my errors. Much of this is accurate already and you can move on to the next code snippet. If you find errors please correct them just once-per-issue and let me go through and clean up the duplicates. Something like 90% of this is repetition so it should go quickly. Thanks guys!
Please see this newer Codepen complete with ((Navigation Links)) so you can get around more easily:
And here’s an even newer version — leaner than the one before. Version 2 of my Anatomy of an SVG . . .
https://codepen.io/semicodin/pen/GRbqadx
