Virtuelle Konferenzen haben das Spiel verändert, was die Art und Weise betrifft, wie ein Präsentator Inhalte an ein Publikum vermitteln kann. Bei einer Live-Veranstaltung hast du wahrscheinlich nur deinen Laptop, aber zu Hause hast du vielleicht mehrere Monitore, damit du Fenster verschieben und Änderungen außerhalb des Bildschirms vornehmen kannst, wenn du Live-Coding-Demos durchführst. Wenn jedoch einige Veranstaltungen wieder persönlich stattfinden, befindest du dich möglicherweise in der gleichen Situation wie ich und fragst dich, wie du ein gleichwertiges Erlebnis auf einen Live-Veranstaltungsort bringen kannst.
Mit etwas Kreativität, indem wir native Webfunktionen und modernes CSS wie CSS Scroll Snap nutzen, bauen wir ein JavaScript-freies Slide-Deck, das die Live-Bearbeitung von CSS-Demos ermöglicht. Das fertige Deck wird dank der Tatsache, dass es in einem CodePen lebt, responsiv und teilbar sein.
Um dieses Slide-Deck zu erstellen, lernen wir
- CSS Scroll Snap, Zähler und Grid-Layout
- Das
contenteditableAttribut - Verwendung von benutzerdefinierten Eigenschaften und HSL für Theming
- Verlaufstext
- Styling des
<style>Elements
Folienvorlagen
Wenn du ein Slide-Deck aus vielen verschiedenen Folien erstellst, benötigst du wahrscheinlich verschiedene *Arten* von Folien. Also erstellen wir diese drei essentiellen Vorlagen
- Text: offen für jeden Text, den du einfügen möchtest
- Titel: Hervorhebung einer Überschrift zur Unterbrechung von Inhaltsabschnitten
- Demo: geteilte Layout mit einem Codeblock und der Vorschau
HTML-Vorlagen
Beginnen wir mit der Erstellung unseres HTML. Wir verwenden eine geordnete Liste mit der ID slides und füllen sie mit einer Text- und einer Titelfolie.
Jede Folie ist ein Listenelement mit der Klasse slide, sowie eine Modifikatorklasse, um den Vorlagentyp anzuzeigen. Für diese textbasierten Folien haben wir ein <div> mit der Klasse content verschachtelt und dann ein paar Boilerplate-Texte hinzugefügt.
<ol id="slides">
<li class="slide slide--text">
<div class="content">
<h1>Presentation Title</h1>
<p>Presented by Your Name</p>
<p><a target="_blank" href="<https://twitter.com/5t3ph>">@5t3ph</a></p>
</div>
</li>
<li class="slide slide--title">
<div class="content">
<h2>Topic 1</h2>
</div>
</li>
</ol>Wir verwenden target="_blank" für den Link, da CodePen Iframes für die Vorschau verwendet. Daher ist es notwendig, den Iframe zu "umgehen" und den Link zu laden.
Basis-Styles
Als Nächstes beginnen wir mit einigen Stilen. Wenn du CodePen verwendest, gehen diese Stile davon aus, dass du *keinen* der Resets lädst. Unser Reset löscht den Rand und stellt sicher, dass das <body> Element die gesamte verfügbare Höhe einnimmt, was alles ist, was wir hier wirklich brauchen. Und wir aktualisieren die grundlegende Schriftart.
* {
margin: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
font-family: system-ui, sans-serif;
font-size: 1.5rem;
}Als Nächstes definieren wir, dass alle unsere Hauptelemente für das Layout ein CSS Grid verwenden, Listenstile von #slides entfernen und jede Folie die Größe des Viewports einnehmen lassen. Schließlich verwenden wir das place-content-Shorthand, um den Inhalt der Folien slide--text und slide--title zu zentrieren.
body,
#slides,
.slide {
display: grid;
}
#slides {
list-style: none;
padding: 0;
margin: 0;
}
.slide {
width: 100vw;
height: 100vh;
}
.slide--text,
.slide--title {
place-content: center;
}Dann fügen wir einige leichte Textstile hinzu. Da dies als Präsentation mit einer großen Kernaussage nach der anderen gedacht ist, im Gegensatz zu einem artikelähnlichen Format, erhöhen wir die grundlegende font-size auf 2rem. Passe diesen Wert unbedingt an, wenn du deine endgültigen Folien im Vollbildmodus testest. Möglicherweise findest du, dass er für deinen Inhalt im Vergleich zur Größe deines Präsentations-Viewports zu klein ist.
h1, h2 {
line-height: 1.1;
}
a {
color: inherit;
}
.content {
padding: 2rem;
font-size: 2rem;
line-height: 1.5;
}
.content * + * {
margin-top: 0.5em;
}
.slide--text .content {
max-width: 40ch;
}An diesem Punkt haben wir einige große Texte, die innerhalb eines Containers in der Größe des Viewports zentriert sind. Füge eine Farbnuance hinzu, indem wir ein einfaches Themensystem erstellen.
Wir verwenden den hsl-Farbraum für das Thema, während wir eine benutzerdefinierte Eigenschaft von --theme-hue und --theme-saturation festlegen. Der Farbtonwert von 230 entspricht einem Blau. Zur einfacheren Verwendung kombinieren wir diese dann zum Wert --theme-hs, um sie in Instanzen von hsl einzufügen.
:root {
--theme-hue: 230;
--theme-saturation: 85%;
--theme-hs: var(--theme-hue), var(--theme-saturation);
}Wir können die Helligkeitswerte für Hintergründe und Text anpassen. Die Folien werden kohärent wirken, da sie Farbtöne des Grundfarbtons sein werden.
Zurück in unserem Haupt-<body>-Stil können wir diese Idee anwenden, um eine sehr helle Version der Farbe für einen Hintergrund und eine dunkle Version für den Text zu erstellen.
body {
/* ... existing styles */
background-color: hsl(var(--theme-hs), 95%);
color: hsl(var(--theme-hs), 25%);
}
Geben wir .slide--title auch etwas mehr Pepp, indem wir einen subtilen Verlaufshintergrund hinzufügen.
.slide--title {
background-image:
linear-gradient(125deg,
hsl(var(--theme-hs), 95%),
hsl(var(--theme-hs), 75%)
);
}Demo-Folienvorlage
Unsere Demo-Folie bricht bisher mit der Norm und erfordert zwei Hauptelemente
- einen
.style-Container um ein Inline-<style>-Element mit tatsächlich geschriebenen Stilen, die du sowohl auf dem Bildschirm sichtbar machen als auch auf die Demo anwenden möchtest - einen
.demo-Container, der die Demo-Vorschau mit der entsprechenden Markup enthält
Wenn du CodePen verwendest, um dieses Deck zu erstellen, solltest du die Einstellung "Behavior" ändern, um "Format on Save" zu deaktivieren. Das liegt daran, dass wir keine zusätzlichen Tabs/Leerzeichen vor dem Stilblock wünschen. Warum genau, wird gleich klar.
Hier ist der Inhalt unserer Demo-Folie
<li class="slide slide--demo">
<div class="style">
<style contenteditable="true">
.modern-container {
--container-width: 40ch;
width: min(
var(--container-width), 100% - 3rem
);
margin-inline: auto;
}
</style>
</div>
<div class="demo">
<div class="modern-container">
<div class="box">container</div>
</div>
</div>
</li>Beachte das zusätzliche contenteditable="true" Attribut für den <style>-Block. **Dies ist ein natives HTML-Feature, das es dir ermöglicht, jedes Element als editierbar zu markieren.** Es ist kein Ersatz für Formularfelder und Textbereiche und erfordert normalerweise JavaScript für funktionsreichere Features. Aber für unsere Zwecke ist es die Magie, die "Live"-Coding ermöglicht. Letztendlich können wir Änderungen am Inhalt hier vornehmen und die Stiländerungen werden sofort angewendet. Ziemlich raffiniert, halt dich fest.
Wenn du dies bisher ansiehst, siehst du den Stilblock nicht. Du siehst jedoch das Ergebnis der .modern-container Demo-Stile, die angewendet werden.
Eine weitere relevante Anmerkung hier ist, dass HTML5 die Validierung eines <style>-Blocks überall erlaubt; nicht nur im <head>.
Was wir als Nächstes tun werden, wird seltsam erscheinen, aber wir können tatsächlich display-Eigenschaften auf <style> anwenden, um es sichtbar zu machen. Wir haben es in einen anderen Container platziert, um eine zusätzliche Positionierung zu verwenden und es zu einem größenveränderlichen Bereich zu machen. Dann haben wir das <style>-Element selbst auf display: block gesetzt und Eigenschaften angewendet, um ihm das Aussehen und Gefühl eines Code-Editors zu verleihen.
.style {
display: grid;
align-items: center;
background-color: hsl(var(--theme-hs), 5%);
padding-inline: max(5vw, 2rem) 3rem;
font-size: 1.35rem;
overflow-y: hidden;
resize: horizontal;
}
style {
display: block;
outline: none;
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
color: hsl(var(--theme-hs), 85%);
background: none;
white-space: pre;
line-height: 1.65;
tab-size: 2;
hyphens: none;
}Dann müssen wir die Regel .slide--demo erstellen und CSS Grid verwenden, um die Stile und die Demo nebeneinander anzuzeigen. Zur Erinnerung: Wir haben bereits die grundlegende Klasse .slide so eingerichtet, dass sie Grid verwendet. Jetzt erstellen wir eine Regel für grid-template-columns nur für diese Vorlage.
.slide--demo {
grid-template-columns: fit-content(85ch) 1fr;
}Wenn du mit der Grid-Funktion fit-content() nicht vertraut bist, ermöglicht sie einem Element, seine intrinsische Breite bis zu dem in der Funktion definierten Maximalwert zu nutzen. Diese Regel besagt also, dass der Stilblock bis zu einer maximalen Breite von 85ch wachsen kann. Wenn dein <style>-Inhalt schmal ist, ist die Spalte nur so breit, wie sie sein muss. Das ist visuell sehr schön, da es keinen zusätzlichen horizontalen Platz schafft und dennoch die erlaubte Breite begrenzt.
Um diese Vorlage abzurunden, fügen wir etwas Polsterung für .demo hinzu. Du hast vielleicht auch die zusätzliche Klasse .box in der Demo bemerkt. Dies ist eine Konvention, die ich gerne für Demos verwende, um die Grenzen von Elementen zu visualisieren, wenn Größe und Position wichtig sind.
.demo {
padding: 2rem;
}
.box {
background-color: hsl(var(--theme-hs), 85%);
border: 2px dashed;
border-radius: .5em;
padding: 1rem;
font-size: 1.35rem;
text-align: center;
}Hier ist das Ergebnis unserer Code-Vorlage
Live-Editing-Funktionalität
Die Interaktion mit den angezeigten Stilen aktualisiert tatsächlich die Vorschau! Darüber hinaus kannst du, da wir den .style-Container als größenveränderlichen Bereich erstellt haben, den Größenänderungsgriff unten rechts greifen, um den Vorschau-Bereich nach Bedarf zu vergrößern und zu verkleinern.
Die einzige Einschränkung für unsere Live-Editing-Fähigkeit ist, dass Browser sie unterschiedlich behandeln.
- Firefox: Dies liefert das beste Ergebnis, da es sowohl die Änderung der geladenen Stile als auch die volle Funktionalität des Hinzufügens neuer Eigenschaften und sogar neuer Regeln ermöglicht.
- Chromium und Safari: Diese erlauben das Ändern von Werten in geladenen Stilen, aber nicht das Hinzufügen neuer Eigenschaften oder neuer Regeln.
Als Präsentator wirst du wahrscheinlich Firefox verwenden wollen. Für Betrachter, die den Präsentationslink verwenden, werden sie immer noch die Absicht deiner Folien erfassen können und keine Probleme mit der Anzeige haben (es sei denn, ihr Browser unterstützt den von dir gezeigten Code nicht). Aber außerhalb von Firefox können sie die Demos möglicherweise nicht so vollständig manipulieren, wie du es in deiner Präsentation zeigst.
Möglicherweise möchtest du deinen fertigen Präsentations-Pen "forken" und die editierbare Funktion für <style>-Blöcke deaktivieren und stattdessen die endgültigen Versionen deiner Demo-Stile anzeigen, sofern zutreffend.
Erinnerung: Stile, die du in Demos einfügst, können potenziell das Folienlayout und andere Demos beeinflussen! Möglicherweise möchtest du Demo-Stile unter einer Folien-spezifischen Klasse abgrenzen, um unbeabsichtigte Stiländerungen in deinem Deck zu verhindern.
Code-Hervorhebung
Obwohl wir ohne JavaScript keine vollständige Syntaxhervorhebung erreichen können, können wir eine Methode erstellen, um bestimmte Teile des Codeblocks zur Hervorhebung zu markieren.
Dazu koppeln wir linear-gradient mit den -webkit-Eigenschaften, die die Verwendung des Hintergrunds eines Elements als Texteffekt ermöglichen. Dann können wir mithilfe von benutzerdefinierten Eigenschaften definieren, wie viele "Zeilen" des Stilblocks hervorgehoben werden sollen.
Zuerst platzieren wir die erforderlichen -webkit-Eigenschaften direkt auf dem <style>-Element. Dies bewirkt, dass der sichtbare Text verschwindet, aber wir machen ihn gleich wieder sichtbar, indem wir einen Hintergrund hinzufügen. Obwohl dies -webkit-präfixiert ist, werden sie browserübergreifend unterstützt.
style {
/* ...existing styles */
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}Der Hervorhebungseffekt funktioniert, indem ein linear-gradient mit zwei Farben erstellt wird, wobei die hellere Farbe als Textfarbe für die hervorzuhebenden Zeilen durchscheint. Standardmäßig umrahmen wir die Hervorhebung mit einer dunkleren Farbe, sodass es so aussieht, als wäre die erste Eigenschaft hervorgehoben.
Hier ist eine Vorschau des anfänglichen Effekts
Um diesen Effekt zu erzielen, müssen wir die Höhe der Hervorhebungsfarbe berechnen. In den Regeln unseres <style>-Elements haben wir bereits line-height auf 1.65 gesetzt, was einer berechneten Gesamthöhe von 1.65em entspricht. Du könntest also denken, wir multiplizieren das mit der Anzahl der Zeilen und sind fertig.
Aufgrund des sichtbaren Stilblocks, der mit white-space: pre gerendert wird, um Zeilenumbrüche zu erhalten, gibt es jedoch technisch eine heimtückische unsichtbare Zeile vor der ersten Textzeile. Diese entsteht durch die Formatierung des <style>-Tags auf einer tatsächlichen Zeile vor der ersten Zeile CSS-Code. Das ist auch der Grund, warum ich angemerkt habe, dass die Verhinderung der automatischen Formatierung in CodePen wichtig ist – andernfalls hättest du auch zusätzlichen linken Abstand.
Mit diesen Einschränkungen im Hinterkopf richten wir drei benutzerdefinierte Eigenschaften ein, um die benötigten Werte zu berechnen, und fügen sie am Anfang unserer .style-Regelsatzes hinzu. Der endgültige Wert für die Höhe von --lines berücksichtigt zuerst die unsichtbare Zeile und den Selektor.
style {
--line-height: 1.65em;
--highlight-start: calc(2 * var(--line-height));
--lines: calc(var(--highlight-start) + var(--num-lines, 1) * var(--line-height));
}Jetzt können wir die Werte anwenden, um den linear-gradient zu erstellen. Um die scharfen Übergänge zu erzielen, die wir für diesen Effekt benötigen, stellen wir sicher, dass die Gradientenstopps von einer Farbe zur nächsten übereinstimmen.
style {
background-image: linear-gradient(
hsl(var(--theme-hs), 75%) 0 var(--highlight-start),
hsl(var(--theme-hs), 90%) var(--highlight-start) var(--lines),
hsl(var(--theme-hs), 75%) var(--lines) 100%
);
}Um zu visualisieren, was passiert, habe ich die -webkit-Zeilen auskommentiert, um den erstellten Verlauf freizulegen.
Innerhalb unserer --lines-Berechnung haben wir auch eine --num-lines-Eigenschaft aufgenommen. Dies ermöglicht es dir, die Anzahl der Zeilen, die pro Demo hervorgehoben werden sollen, über einen Inline-Stil anzupassen. Dieses Beispiel passt die Hervorhebung an drei Zeilen an
<style contenteditable="true" style="--num-lines: 3">Wir können auch einen neu berechneten --highlight-start übergeben, um die erste hervorgehobene Zeile zu ändern
<style contenteditable="true" style="--num-lines: 3; --highlight-start: calc(4 * var(--line-height))">Schauen wir uns das Ergebnis der vorherigen Anpassung an
Wenn du jetzt während deiner Präsentation Zeilen hinzufügst oder entfernst, passt sich die Hervorhebung nicht an. Aber es ist immer noch ein nützliches Werkzeug, um die Aufmerksamkeit deiner Zuschauer zu lenken.
Es gibt zwei Hilfsklassen, die wir hinzufügen, um nur die Regel hervorzuheben oder die Hervorhebung ganz aufzuheben. Zur Verwendung wende sie direkt auf das <style>-Element für die Demo an.
.highlight--rule-only {
--highlight-start: calc(1 * var(--line-height))
}
.highlight--none {
background-image: none;
background-color: currentColor;
}Folienbewegung mit CSS Scroll Snap
Okay, wir haben einige gut aussehende Anfangsfolien. Aber es fühlt sich noch nicht ganz wie ein Slide-Deck an. Das werden wir in zwei Teilen beheben
- Horizontales Umbrechen der Folien
- Verwenden von CSS Scroll Snap, um das Scrollen einer Folie nach der anderen zu erzwingen
Unsere anfänglichen Stile haben bereits die geordnete Liste #slides als Grid-Container definiert. Um ein horizontales Layout zu erreichen, müssen wir eine zusätzliche Eigenschaft hinzufügen, da die .slides bereits Dimensionen zur Füllung des Viewports enthalten.
#slides {
/* ...existing styles */
grid-auto-flow: column;
}Damit CSS Scroll Snap funktioniert, müssen wir definieren, welche Achse Überlauf erlaubt. Für horizontales Scrollen ist das x
#slides {
overflow-x: auto;
}Die letzte Eigenschaft, die wir für Scroll Snap für den #slides-Container benötigen, ist die Definition von scroll-snap-type. Dies ist ein Kurzschrift, bei dem wir die x-Achse und das mandatory-Verhalten auswählen, was bedeutet, dass das Initiieren des Scrollens immer das Anspringen zum nächsten Element auslösen sollte.
#slides {
scroll-snap-type: x mandatory;
}Wenn du es an diesem Punkt ausprobierst, wirst du das Scroll-Snap-Verhalten noch nicht erleben, da wir zwei Eigenschaften zu den untergeordneten .slide-Elementen hinzufügen müssen. Die Verwendung von scroll-snap-align teilt dem Browser mit, wohin "gesprungen" werden soll, und das Setzen von scroll-snap-stop auf always verhindert das Scrollen über ein untergeordnetes Element hinaus.
.slide {
/* ...existing styles */
scroll-snap-align: center;
scroll-snap-stop: always;
}Das Scroll-Snap-Verhalten sollte entweder durch Scrollen über deine Folie oder durch die Verwendung von links und rechts Pfeiltasten funktionieren.
Es gibt weitere Eigenschaften für CSS Scroll Snap, du kannst die MDN-Dokumentation einsehen, um zu lernen, was alles verfügbar ist. CSS Scroll Snap hat auch ein etwas anderes Verhalten browserübergreifend und über Eingabetypen hinweg, wie Touch vs. Maus, oder Touchpad vs. Mausrad, oder über Scrollbar-Pfeile. Für unsere Präsentation, wenn du feststellst, dass das Scrollen nicht sehr reibungslos oder "snappend" ist, versuche stattdessen, die Pfeiltasten zu verwenden.
Derzeit gibt es keine Möglichkeit, die Animationseasing oder Geschwindigkeit des CSS-Scroll-Snap-Slide zu benutzerdefinieren. Vielleicht ist das für deine Präsentation wichtig, und du benötigst die anderen Funktionen, die wir für die Modifizierung von Codebeispielen entwickelt haben. In diesem Fall möchtest du vielleicht eine "echte" Präsentationsanwendung wählen.
CSS Scroll Snap ist sehr cool, hat aber auch einige Einschränkungen, die man beachten sollte, wenn man es über unseren Slide-Deck-Kontext hinaus nutzen möchte. Schau dir eine weitere Scroll-Snap-Demo und weitere Informationen auf SmolCSS.dev an.
Foliennummern
Eine optionale Funktion ist das Hinzufügen sichtbarer Foliennummern. Mithilfe eines CSS-Zählers können wir die aktuelle Foliennummer abrufen und sie beliebig als Wert eines Pseudoelements anzeigen. Und mithilfe von Data-Attributen können wir sogar das aktuelle Thema anhängen.
Der erste Schritt ist, unserem Zähler einen Namen zu geben, was über die Eigenschaft counter-reset geschieht. Diese wird auf das Element platziert, das die zu zählenden Elemente enthält, also fügen wir sie zu #slides hinzu.
#slides {
counter-reset: slides;
}Dann fügen wir auf den zu zählenden Elementen (.slide) die Eigenschaft counter-increment und den Rückruf zum Namen des von uns definierten Zählers hinzu.
.slide {
counter-increment: slides;
}Um auf die aktuelle Anzahl zuzugreifen, richten wir ein Pseudoelement ein. Innerhalb der content-Eigenschaft ist die Funktion counter() verfügbar. Diese Funktion akzeptiert den Namen unseres Zählers und gibt die aktuelle Nummer zurück.
.slide::before {
content: counter(slides);
}Die Nummer erscheint jetzt, aber nicht dort, wo wir sie haben wollen. Da unser Folieninhalt variabel ist, verwenden wir klassische absolute Positionierung, um die Foliennummer in der unteren linken Ecke zu platzieren. Und wir fügen einige visuelle Stile hinzu, um sie in einen schönen kleinen Kreis einzuschließen.
.slide::before {
content: counter(slides);
position: absolute;
left: 1rem;
bottom: 1rem;
width: 1.65em;
height: 1.65em;
display: grid;
place-content: center;
border-radius: 50%;
font-size: 1.25rem;
color: hsl(var(--theme-hs), 95%);
background-color: hsl(var(--theme-hs), 55%);
}Wir können unsere Foliennummern verbessern, indem wir den Wert eines Data-Attributs abrufen, um auch einen kurzen Thema-Titel anzuhängen. Das bedeutet, zuerst ein Attribut zu jedem <li>-Element hinzuzufügen, wo wir dies wünschen. Wir fügen data-topic zu den <li> für die Titel- und Code-Demo-Folien hinzu. Der Wert kann beliebig sein, aber kürzere Zeichenketten werden am besten angezeigt.
<li class="slide slide--title" data-topic="CSS">Wir verwenden das Attribut als Selektor, um das Pseudoelement zu ändern. Wir können den Wert mithilfe der Funktion attr() abrufen, die wir mit der Foliennummer verketten und einen Doppelpunkt als Trennzeichen hinzufügen. Da das Element zuvor ein Kreis war, müssen einige andere Eigenschaften aktualisiert werden.
[data-topic]::before {
content: counter(slides) ": " attr(data-topic);
padding: 0.25em 0.4em;
width: auto;
border-radius: 0.5rem;
}Mit dem Hinzugefügten hier ist die Code-Demo-Folie, die das hinzugefügte Thema "CSS" zeigt
Styles für kleine Viewports
Unsere Folien sind bereits einigermaßen responsiv, aber irgendwann wird es Probleme mit horizontalem Scrollen auf kleineren Viewports geben. Mein Vorschlag ist, das CSS Scroll Snap zu entfernen und die Folien vertikal fließen zu lassen.
Um dies zu erreichen, sind nur wenige Updates erforderlich, einschließlich des Hinzufügens eines Rahmens zur Trennung des Folieninhalts.
Zuerst verschieben wir die CSS Scroll Snap-bezogenen Eigenschaften für #slides in eine Media Query, die nur oberhalb von 120ch angewendet wird.
@media screen and (min-width: 120ch) {
#slides {
grid-auto-flow: column;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
}Als Nächstes verschieben wir die CSS Scroll Snap- und Dimensions-Eigenschaften für .slide ebenfalls in diese Media Query.
@media screen and (min-width: 120ch) {
.slide {
width: 100vw;
height: 100vh;
scroll-snap-align: center;
scroll-snap-stop: always;
}
}Um den Demo-Inhalt zu stapeln, verschieben wir unsere gesamte Regel für .slide--demo in diese Media Query
@media screen and (min-width: 120ch) {
.slide--demo {
grid-template-columns: fit-content(85ch) 1fr;
}
}Jetzt ist alles gestapelt, aber wir wollen eine Mindesthöhe für jede Folie wiederherstellen und dann den zuvor erwähnten Rahmen hinzufügen
@media (max-width: 120ch) {
.slide {
min-height: 80vh;
}
.slide + .slide {
border-top: 1px dashed;
}
}Dein Inhalt könnte ebenfalls Gefahr laufen, auf kleineren Viewports überzulaufen. Wir nehmen also ein paar Anpassungen für .content vor, um dies zu verhindern. Wir fügen eine Standardbreite hinzu, die auf kleinen Viewports verwendet wird, und verschieben unsere vorherige max-width-Beschränkung in die Media Query. Ebenfalls gezeigt ist eine schnelle Methode, um unser <h1> mit flüssiger Typografie zu aktualisieren.
h1 {
font-size: clamp(2rem, 8vw + 1rem, 3.25rem);
}
.content {
/* remove max-width rule from here */
width: calc(100vw - 2rem);
}
@media screen and (min-width: 120ch) {
.content {
width: unset;
max-width: 45ch;
}
}Zusätzlich fand ich es hilfreich, den Folienzähler neu zu positionieren. Dazu passen wir die anfänglichen Stile an, um ihn oben links zu platzieren, und verschieben ihn dann in unserer Media Query wieder nach unten.
.slide {
/* adjust default here, removing the old "bottom" value */
top: 0.25rem;
left: 0.25rem;
}
@media (min-width: 120ch) {
.slide::before {
top: auto;
bottom: 1rem;
left: 1rem;
}
}Finale Folienpräsentation
Das Embed wird wahrscheinlich die gestapelte Version für kleine Viewports anzeigen, also öffne unbedingt die Vollversion in CodePen oder springe zur Live-Ansicht. Zur Erinnerung: Die Bearbeitungsfunktion funktioniert am besten in Firefox.
Wenn du eine vollständig fertige Präsentation sehen möchtest, habe ich diese Technik verwendet, um mein modernes CSS-Toolkit zu präsentieren.
Das ist genial!!! Ich dachte immer, Scroll-Snap wäre nur auf Bildkarussells beschränkt, aber ich wusste nicht, dass es so genial für eine Folienpräsentation verwendet werden kann. :-)
Das ist wunderschön! Ich wünschte, ich hätte diesen Artikel vor 3 Jahren gesehen.