diff --git a/README.md b/README.md new file mode 100644 index 0000000..93dc2f3 --- /dev/null +++ b/README.md @@ -0,0 +1,7 @@ +### Comparing Different Viewport-Relative CSS Units (100vh, 100dvh, 100lvh, 100svh) + +In this tutorial, we'll cover the challenges when working with the classic 100vh unit for making full-screen sections and discuss some great alternative CSS units. + +Click on the buttons and check the demo from a mobile device to see the different behavior of these units. + +**Available on Tuts+ Spring 2024** diff --git a/index.html b/index.html new file mode 100644 index 0000000..231b87c --- /dev/null +++ b/index.html @@ -0,0 +1,143 @@ + + + + + + Testing the new dynamic CSS units + + + +
+
+
+

Testing the new dynamic CSS units

+
+ + + + +
+ Example with sticky header +
+
+
+
+

Heading

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam ac tincidunt est, quis ultricies eros. Phasellus + at pellentesque ipsum. Suspendisse tempor sodales + pretium. Etiam fringilla mauris non iaculis ultrices. + Nullam ac ligula ex. Aliquam erat volutpat. Proin + aliquam risus massa, non egestas elit ultrices quis. + Cras laoreet nulla eget nibh feugiat ultricies congue + nec mi. Vestibulum a metus ut libero aliquet porta. + Phasellus a lobortis erat. Praesent laoreet dolor vel + odio laoreet, eu cursus libero hendrerit. Nunc + consectetur lacus id risus lacinia finibus. Curabitur + ornare sagittis metus in rutrum. +

+ +

+ Phasellus eu tristique mauris. Nulla facilisi. Sed + tellus diam, vehicula ut bibendum id, egestas eu ante. + Etiam eu porta quam, sit amet viverra odio. Donec cursus + leo massa, eu laoreet lectus auctor sed. Suspendisse + lacinia imperdiet maximus. Fusce malesuada rutrum dolor + in maximus. Phasellus vitae metus in orci lacinia + tristique. In hac habitasse platea dictumst. Donec + tincidunt purus sit amet nisl cursus aliquet. Nunc lorem + mi, pulvinar non lectus at, ornare luctus ipsum. Class + aptent taciti sociosqu ad litora torquent per conubia + nostra, per inceptos himenaeos. +

+ +

+ Donec cursus sollicitudin lorem, ac porttitor ante. + Nullam nunc tortor, luctus nec feugiat ac, euismod vel + ligula. Nullam at velit tortor. Vestibulum blandit + euismod dolor. Morbi ultricies elementum tellus, a + facilisis felis fermentum sed. Quisque molestie eleifend + dolor et sollicitudin. Nullam luctus ante id turpis + blandit consequat. Morbi lobortis, mi at fermentum + sodales, turpis nisl sollicitudin urna, a tempus nisi + dolor vitae massa. Vivamus egestas ut diam at efficitur. + Donec a eros in turpis venenatis finibus vitae id dui. + Nam blandit, dolor at accumsan pretium, urna erat + ullamcorper mauris, in semper diam purus sed tellus. Sed + molestie tellus est, ac feugiat lacus vehicula ut. + Vestibulum ante ipsum primis in faucibus orci luctus et + ultrices posuere cubilia curae; Praesent id finibus + quam, eget ultrices risus. Morbi vel lacus vel metus + molestie elementum id et magna. Aliquam bibendum leo a + ipsum blandit, quis ornare nisl sagittis. +

+ +

+ Vivamus nec tortor semper, gravida mauris ac, interdum + sem. Vestibulum ante ipsum primis in faucibus orci + luctus et ultrices posuere cubilia curae; Praesent at + nibh porttitor, congue justo vel, tincidunt libero. + Aliquam eros augue, tincidunt sed massa tempus, sodales + pellentesque lectus. Etiam fringilla lorem porta mi + cursus tincidunt. Ut nisl magna, placerat eget mattis + quis, dignissim ut metus. Quisque tempor leo ut nisl + faucibus, a maximus arcu rutrum. Sed in purus quis odio + tempor euismod in at lacus. Ut vel ultricies magna. + Nulla sed venenatis nibh, ornare consectetur tellus. + Aliquam auctor mauris velit, at feugiat ligula accumsan + elementum. Ut efficitur consequat feugiat. Curabitur + suscipit vestibulum nisl, eu congue sem aliquet vitae. + Duis vulputate et sem sit amet rutrum. Aenean a + porttitor felis, sed volutpat augue. Quisque finibus + porta tristique. +

+ +

+ In vel nunc eget lacus lacinia malesuada eget sit amet + nisl. Sed libero nisi, malesuada in arcu ac, elementum + porttitor diam. Phasellus lacinia egestas congue. Proin + eleifend euismod risus fermentum ullamcorper. Nam + condimentum odio id tellus sollicitudin luctus eu + finibus lacus. Integer sed nisi a nisi rhoncus pharetra + quis eget quam. Class aptent taciti sociosqu ad litora + torquent per conubia nostra, per inceptos himenaeos. + Quisque eget erat bibendum, commodo felis eget, egestas + dui. +

+
+
+
+ + + + + + + + + + +
+
+ + + diff --git a/main.css b/main.css new file mode 100644 index 0000000..7798f10 --- /dev/null +++ b/main.css @@ -0,0 +1,102 @@ +:root { + --light-yellow: #fdfcdc; + --light-orange: #fed9b7; + --header-height: 80px; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; + font: 20px/1.5 sans-serif; +} + +.container { + max-width: 1200px; + padding: 0 15px; + margin: 0 auto; +} + +a { + color: inherit; +} + +.site-header { + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + height: var(--header-height); + background: var(--light-orange); +} + +.hero { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: var(--unit, 100vh); + padding: 15px; + text-align: center; + background-image: url(https://assets.codepen.io/162656/man-walking.jpg); +} + +.hero h1, +.hero button { + background: var(--light-yellow); +} + +.hero h1 { + font-size: 3rem; + line-height: 1; + padding: 10px; + margin: 0 0 20px; +} + +.hero button { + font-size: 100%; + color: inherit; + cursor: pointer; + width: 70px; + aspect-ratio: 2; + border: none; + border-radius: 5px; + transition: background 0.25s; +} + +.hero button:hover, +.hero button.active { + background: var(--light-orange); +} + +.hero a { + display: inline-block; + margin-top: 20px; +} + +.text { + padding: 50px 0; +} + +.toolbar { + position: fixed; + bottom: 5vh; + right: 10px; + display: flex; + flex-direction: column; + gap: 15px; + + a { + display: flex; + text-decoration: none; + } +} + +/*STICKY*/ +.sticky { + .hero { + height: var(--unit, calc(100vh - var(--header-height))); + } +} diff --git a/main.js b/main.js new file mode 100644 index 0000000..796479e --- /dev/null +++ b/main.js @@ -0,0 +1,13 @@ +const hero = document.querySelector(".hero"); +const btns = document.querySelectorAll("button"); +const headerHeight = document.body.classList.contains("sticky") ? 80 : 0; +for (const btn of btns) { + btn.addEventListener("click", function () { + document.querySelector("button.active").classList.remove("active"); + this.classList.add("active"); + hero.style.setProperty( + "--unit", + `calc(100${this.textContent} - ${headerHeight}px)` + ); + }); +} diff --git a/sticky.html b/sticky.html new file mode 100644 index 0000000..5b541fb --- /dev/null +++ b/sticky.html @@ -0,0 +1,144 @@ + + + + + + Testing the new dynamic CSS units + + + +
Header Content
+
+
+
+

Testing the new dynamic CSS units

+
+ + + + +
+ Example without header +
+
+
+
+

Heading

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam ac tincidunt est, quis ultricies eros. Phasellus + at pellentesque ipsum. Suspendisse tempor sodales + pretium. Etiam fringilla mauris non iaculis ultrices. + Nullam ac ligula ex. Aliquam erat volutpat. Proin + aliquam risus massa, non egestas elit ultrices quis. + Cras laoreet nulla eget nibh feugiat ultricies congue + nec mi. Vestibulum a metus ut libero aliquet porta. + Phasellus a lobortis erat. Praesent laoreet dolor vel + odio laoreet, eu cursus libero hendrerit. Nunc + consectetur lacus id risus lacinia finibus. Curabitur + ornare sagittis metus in rutrum. +

+ +

+ Phasellus eu tristique mauris. Nulla facilisi. Sed + tellus diam, vehicula ut bibendum id, egestas eu ante. + Etiam eu porta quam, sit amet viverra odio. Donec cursus + leo massa, eu laoreet lectus auctor sed. Suspendisse + lacinia imperdiet maximus. Fusce malesuada rutrum dolor + in maximus. Phasellus vitae metus in orci lacinia + tristique. In hac habitasse platea dictumst. Donec + tincidunt purus sit amet nisl cursus aliquet. Nunc lorem + mi, pulvinar non lectus at, ornare luctus ipsum. Class + aptent taciti sociosqu ad litora torquent per conubia + nostra, per inceptos himenaeos. +

+ +

+ Donec cursus sollicitudin lorem, ac porttitor ante. + Nullam nunc tortor, luctus nec feugiat ac, euismod vel + ligula. Nullam at velit tortor. Vestibulum blandit + euismod dolor. Morbi ultricies elementum tellus, a + facilisis felis fermentum sed. Quisque molestie eleifend + dolor et sollicitudin. Nullam luctus ante id turpis + blandit consequat. Morbi lobortis, mi at fermentum + sodales, turpis nisl sollicitudin urna, a tempus nisi + dolor vitae massa. Vivamus egestas ut diam at efficitur. + Donec a eros in turpis venenatis finibus vitae id dui. + Nam blandit, dolor at accumsan pretium, urna erat + ullamcorper mauris, in semper diam purus sed tellus. Sed + molestie tellus est, ac feugiat lacus vehicula ut. + Vestibulum ante ipsum primis in faucibus orci luctus et + ultrices posuere cubilia curae; Praesent id finibus + quam, eget ultrices risus. Morbi vel lacus vel metus + molestie elementum id et magna. Aliquam bibendum leo a + ipsum blandit, quis ornare nisl sagittis. +

+ +

+ Vivamus nec tortor semper, gravida mauris ac, interdum + sem. Vestibulum ante ipsum primis in faucibus orci + luctus et ultrices posuere cubilia curae; Praesent at + nibh porttitor, congue justo vel, tincidunt libero. + Aliquam eros augue, tincidunt sed massa tempus, sodales + pellentesque lectus. Etiam fringilla lorem porta mi + cursus tincidunt. Ut nisl magna, placerat eget mattis + quis, dignissim ut metus. Quisque tempor leo ut nisl + faucibus, a maximus arcu rutrum. Sed in purus quis odio + tempor euismod in at lacus. Ut vel ultricies magna. + Nulla sed venenatis nibh, ornare consectetur tellus. + Aliquam auctor mauris velit, at feugiat ligula accumsan + elementum. Ut efficitur consequat feugiat. Curabitur + suscipit vestibulum nisl, eu congue sem aliquet vitae. + Duis vulputate et sem sit amet rutrum. Aenean a + porttitor felis, sed volutpat augue. Quisque finibus + porta tristique. +

+ +

+ In vel nunc eget lacus lacinia malesuada eget sit amet + nisl. Sed libero nisi, malesuada in arcu ac, elementum + porttitor diam. Phasellus lacinia egestas congue. Proin + eleifend euismod risus fermentum ullamcorper. Nam + condimentum odio id tellus sollicitudin luctus eu + finibus lacus. Integer sed nisi a nisi rhoncus pharetra + quis eget quam. Class aptent taciti sociosqu ad litora + torquent per conubia nostra, per inceptos himenaeos. + Quisque eget erat bibendum, commodo felis eget, egestas + dui. +

+
+
+
+ + + + + + + + + + +
+
+ + +