+201223538180

Web site Developer I Advertising and marketing I Social Media Advertising and marketing I Content material Creators I Branding Creators I Administration I System SolutionCSS Scroll Snap Slide Deck That Helps Stay Coding | CSS-Tips

Web site Developer I Advertising and marketing I Social Media Advertising and marketing I Content material Creators I Branding Creators I Administration I System SolutionCSS Scroll Snap Slide Deck That Helps Stay Coding | CSS-Tips

Web site Developer I Advertising and marketing I Social Media Advertising and marketing I Content material Creators I Branding Creators I Administration I System Resolution

Digital conferences have modified the sport when it comes to how a presenter is ready to ship content material to an viewers. At a reside occasion it’s probably you simply have your laptop computer, however at dwelling, you’ll have a number of displays so as to transfer round home windows and make off-screen adjustments when delivering reside coding demos. Nonetheless, as some occasions return to in-person, it’s possible you’ll be in an analogous boat as me questioning learn how to convey an equal expertise to a reside venue.

With a little bit of creativity utilizing native internet performance and fashionable CSS, like CSS scroll snap, we’ll be constructing a no-JavaScript slide deck that permits reside modifying of CSS demos. The ultimate deck can be responsive and shareable, because of residing inside a CodePen.

To make this slide deck, we’ll find out about:

  • CSS scroll snap, counters, and grid format
  • The contenteditable attribute
  • Utilizing customized properties and HSL for theming
  • Gradient textual content
  • Styling the <fashion> factor

Slide templates

When making a slide deck of a bunch of various slides, it’s probably that you just’ll want totally different varieties of slides. So we’ll create these three important templates:

  • Textual content: open for any textual content you could embrace
  • Title: emphasizing a headline to interrupt up sections of content material
  • Demo: break up format with a code block and the preview

HTML templates

Let’s begin creating our HTML. We’ll use an ordered record with the ID of slides and go forward and populate a textual content and title slide.

Every slide is likely one of the record parts with the category of slide, in addition to a modifier class to point the template kind. For these text-based slides, we’ve nested a <div> with the category of content material after which added a little bit of boilerplate textual content.

<ol id="slides">
  <li class="slide slide--text">
    <div class="content material">
      <h1>Presentation Title</h1>
      <p>Introduced by Your Identify</p>
      <p><a goal="_blank" href="<https://twitter.com/5t3ph>">@5t3ph</a></p>
    </div>
  </li>
  <li class="slide slide--title">
    <div class="content material">
      <h2>Subject 1</h2>
    </div>
  </li>
</ol>

We’re utilizing goal="_blank" on the hyperlink as a consequence of CodePen utilizing iframes for the preview, so it’s essential to “escape” the iframe and cargo the hyperlink.

Base kinds

Subsequent, we’ll start so as to add some kinds. If you’re utilizing CodePen, these kinds assume you’re not loading one of many resets. Our reset wipes out margin and ensures the <physique> factor takes up the whole accessible top, which is all we actually want right here. And, we’ll make a primary font stack replace.

* {
  margin: 0;
  box-sizing: border-box;
}

physique {
  min-height: 100vh;
  font-family: system-ui, sans-serif;
  font-size: 1.5rem;
}

Subsequent, we’ll outline that each one our main format parts will use a CSS grid, take away record styling from #slides, and make every slide take up the dimensions of the viewport. Lastly, we’ll use the place-content shorthand to heart the slide--text and slide--title slide content material.

physique,
#slides,
.slide {
  show: grid;
}

#slides {
  list-style: none;
  padding: 0;
  margin: 0;
}

.slide {
  width: 100vw;
  top: 100vh;
}

.slide--text,
.slide--title {
  place-content: heart;
}

Then, we’ll add some light-weight textual content kinds. Since that is meant to be a presentation with one massive level being made at a time, versus an article-like format, we’ll bump the bottom font-size to 2rem. Make sure you modify this worth as you take a look at out your closing slides in full display screen. It’s possible you’ll determine it feels too small on your content material versus your presentation viewport dimension.

h1, h2 {
  line-height: 1.1;
}

a {
  shade: inherit;
}

.content material {
  padding: 2rem;
  font-size: 2rem;
  line-height: 1.5;
}

.content material * + * {
  margin-top: 0.5em;
}

.slide--text .content material {
  max-width: 40ch;
}

At this level, now we have some giant textual content centered inside a container the dimensions of the viewport. Let’s add a contact of shade by making a easy theme system.

We’ll be utilizing the hsl shade area for the theme whereas setting a customized property of --theme-hue and --theme-saturation. The hue worth of 230 corresponds to a blue. For ease of use, we’ll then mix these into the --theme-hs worth to drop into cases of hsl.

:root {
  --theme-hue: 230;
  --theme-saturation: 85%;
  --theme-hs: var(--theme-hue), var(--theme-saturation);
}

We are able to modify the lightness values for backgrounds and textual content. The slides will really feel cohesive since they are going to be tints of that base hue.

Again in our predominant <physique> fashion, we will apply this concept to create a really gentle model of the colour for a background, and a darkish model for the textual content.

physique {
  /* ... current kinds */
  background-color: hsl(var(--theme-hs), 95%);
  shade: hsl(var(--theme-hs), 25%);
}
Screenshot of a CSS scroll snap slide  with the presentation title, a byline, and a Twitter handle. The text is dark blue and the background is a light blue.

Let’s additionally give .slide--title a bit bit of additional pizazz by including a refined gradient background.

.slide--title {
  background-image: 
    linear-gradient(125deg, 
      hsl(var(--theme-hs), 95%), 
      hsl(var(--theme-hs), 75%)
    );
}
A slide with the text Topic 1 in dark blue and a soft linear gradient that goes from a super light blue to a brighter blue, going from left to right.

Demo slide template

Our demo slide breaks the mould to this point and requires two predominant parts:

  • a .fashion container round an inline <fashion> factor with precise written kinds that you just intend to each be seen on display screen and apply to the demo
  • a .demo container to carry the demo preview with no matter markup is acceptable for that

If you happen to’re utilizing CodePen to create this deck, you’ll need to replace the “Habits” setting to show off “Format on Save.” It is because we don’t need additional tabs/areas previous to the kinds block. Precisely why will turn into clear in a second.

Screenshot of a CodePen's HTMLand CSS code panels. The settings menu for the HTML panel is open and highlighting the first item, which is Format HTML.

Right here’s our demo slide content material:

<li class="slide slide--demo">
  <div class="fashion">
  <fashion contenteditable="true"> 
.modern-container {
  --container-width: 40ch;

  width: min(
    var(--container-width), 100% - 3rem
  );
  margin-inline: auto;
}
  </fashion>
  </div>
  <div class="demo">
    <div class="modern-container">
      <div class="field">container</div>
    </div>
  </div>
</li>

Observe that additional contenteditable="true" attribute on the <fashion> block . This can be a native HTML characteristic that permits you to mark any factor as editable. It isn’t a substitute for type inputs and textareas and usually requires JavaScript for extra full-featured performance. However for our functions, it’s the magic that permits “reside” coding. Finally, we’ll have the ability to make adjustments to the content material in right here and the fashion adjustments will apply instantly. Fairly fancy, maintain tight.

Nonetheless, for those who view this to this point, you gained’t see the fashion block displayed. You will note the end result of the .modern-container demo kinds are being utilized, although.

One other related word right here is that HTML5 included validating a <fashion> block wherever; not simply within the <head>.

What we’re going to do subsequent will really feel unusual, however we will really use show properties on <fashion> to make it seen. We’ve positioned it inside one other container to make use of a bit additional positioning for it and make it a resizable space. Then, we’ve set the <fashion> factor itself to show: block and utilized properties to present it a code editor feel and look.

.fashion {
  show: grid;
  align-items: heart;
  background-color: hsl(var(--theme-hs), 5%);
  padding-inline: max(5vw, 2rem) 3rem;
  font-size: 1.35rem;
  overflow-y: hidden;
  resize: horizontal;
}

fashion {
  show: block;
  define: none;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  shade: hsl(var(--theme-hs), 85%);
  background: none;
  white-space: pre;
  line-height: 1.65;
  tab-size: 2;
  hyphens: none;
}

Then, we have to create the .slide--demo rule and use CSS grid to show the kinds and demo, side-by-side. As a reminder, we’ve already arrange the bottom .slide class to make use of grid, so now we’ll create a rule for grid-template-columns only for this template.

.slide--demo {
  grid-template-columns: fit-content(85ch) 1fr;
}

If you happen to’re unfamiliar with the grid operate fit-content(), it permits a component to make use of its intrinsic width up till the utmost worth outlined within the operate. So, this rule says the fashion block can develop to a most of 85ch broad. When your <fashion> content material is slim, the column will solely be as broad because it must be. That is very nice visually because it gained’t create additional horizontal area whereas nonetheless in the end capping the allowed width.

To spherical out this template, we’ll add some padding for the .demo. You’ll have additionally seen that additional class throughout the demo of .field. This can be a conference I like to make use of for demos to supply a visible of factor boundaries when the dimensions and place of one thing are vital.

.demo {
  padding: 2rem;
}

.field {
  background-color: hsl(var(--theme-hs), 85%);
  border: 2px dashed;
  border-radius: .5em;
  padding: 1rem;
  font-size: 1.35rem;
  text-align: heart;
}

Right here’s the results of our code template:

Screenshot of a slide that's split in half vertically, the left side with a almost black dark blue background and code that is a lighter blue in a mono font. The right side has a light blue background and an element at the top that says container, with a dashed border and slightly darker blue background.

Stay-editing performance

Interacting with the displayed kinds will really replace the preview! Moreover, since we created the .fashion container as a resizable space, you’ll be able to seize the resize deal with within the decrease proper to develop and shrink the preview space as wanted.

The one caveat for our live-editing means is that browsers deal with it otherwise.

  • Firefox: This supplies one of the best end result because it permits each altering the loaded kinds and full performance of including new properties and even new guidelines.
  • Chromium and Safari: These enable altering values in loaded kinds, however not including new properties or new guidelines.

As a presenter, you’ll probably need to use Firefox. As for viewers using the presentation hyperlink, they’ll nonetheless have the ability to get the intention of your slides and shouldn’t have points with the show (until their browser doesn’t assist your demoed code). However outdoors of Firefox, they might be unable to govern the demos as totally as it’s possible you’ll present in your presentation.

It’s possible you’ll need to “Fork” your completed presentation pen and truly take away the editable habits on <fashion> blocks and as an alternative show closing variations of your demos kinds, as relevant.

Reminder: kinds you embrace in demos can probably have an effect on slide format and different demos! It’s possible you’ll need to scope demo kinds below a slide-specific class to forestall unintended fashion adjustments throughout your deck.

Code highlighting

Whereas we gained’t have the ability to obtain full syntax highlighting with out JavaScript, we will create a technique to spotlight sure components of the code block for emphasis.

To do that, we’ll pair up linear-gradient with the -webkit properties that allow utilizing a component’s background because the textual content impact. Then, utilizing customized properties, we will outline what number of “strains” of the fashion block to spotlight.

First, we’ll place the required -webkit properties instantly on the <fashion> factor. It will trigger the seen textual content to vanish, however we’ll make it seen in a second by including a background. Though these are -webkit prefixed, they’re supported cross-browser.

fashion {
  /* ...current kinds */
  -webkit-text-fill-color: clear;
  -webkit-background-clip: textual content;
}

The highlighting impact will work by making a linear-gradient with two colours the place the lighter shade exhibits via because the textual content shade for the strains to spotlight. As a default, we’ll bookend the spotlight with a darker shade such that it seems that the primary property is highlighted.

Right here’s a preview of the preliminary impact:

An up-close screenshot of the live code panel of the slide, with the second line of code a lighter blue than the rest, indicating that it is emphasized.

To create this impact, we have to work out learn how to calculate the peak of the spotlight shade. In our <fashion> factor’s guidelines, we’ve already set the line-height to 1.65, which corresponds to a complete computed line top of 1.65em. So, it’s possible you’ll suppose that we multiply that by the variety of strains and name it a day.

Nonetheless, because of the seen fashion block being rendered utilizing white-space: pre to protect line breaks, there’s technically a sneaky invisible line earlier than the primary line of textual content. That is created from formatting the <fashion> tag on an precise line previous to the primary line of CSS code. That is additionally why I famous that stopping auto-formatting in CodePen is vital — in any other case, you’ll even have additional left padding.

With these caveats in thoughts, we’ll arrange three customized properties to assist compute the values we’d like and add them to the start of our .fashion ruleset. The ultimate --lines top worth first takes into consideration that invisible line and the selector.

fashion {
  --line-height: 1.65em;
  --highlight-start: calc(2 * var(--line-height));
  --lines: calc(var(--highlight-start) + var(--num-lines, 1) * var(--line-height));
}

Now we will apply the values to create the linear-gradient. To create the sharp transitions we’d like for this impact, we make sure the gradient stops from one shade to the subsequent match.

fashion {
  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%
  );
}

To assist visualize what’s occurring, I’ve commented out the -webkit strains to disclose the gradient being created.

A close-up screenshot of the live code example, but with a bright blue background to reveal the near-white gradient that highlights the second line of code.

Inside our --lines calculation, we additionally included a --num-lines property. It will allow you to modify the variety of strains to spotlight per demo by way of an inline fashion. This instance adjusts the spotlight to a few strains:

<fashion contenteditable="true" fashion="--num-lines: 3">

We are able to additionally move a recalculated --highlight-start to vary the preliminary line highlighted:

<fashion contenteditable="true" fashion="--num-lines: 3; --highlight-start: calc(4 * var(--line-height))">

Let’s take a look at the end result of the earlier adjustment:

Showing the live code example with lines 3 through 6 highlighted in a lighter blue than the rest of the code.

Now, for those who add or take away strains throughout your presentation, the highlighting is not going to modify. Nevertheless it’s nonetheless good as a device to assist direct your viewers’ consideration.

There are two utility courses we’ll add for highlighting the rule solely or eradicating highlighting altogether. To make use of, apply on to the <fashion> factor for the demo.

.highlight--rule-only {
  --highlight-start: calc(1 * var(--line-height))
}

.highlight--none {
  background-image: none;
  background-color: currentColor;
}

Slide movement with CSS scroll snap

Alright, now we have some nice-looking preliminary slides. Nevertheless it’s not fairly feeling like a slide deck but. We’ll resolve that in two components:

  1. Reflow the slides horizontally
  2. Use CSS scroll snap to implement scrolling one slide at a time

Our preliminary kinds already outlined the #slides ordered record as a grid container. To perform a horizontal format, we have to add one additional property because the .slides have already included dimensions to fill the viewport.

#slides {
  /* ...current kinds */
  grid-auto-flow: column;
}

For CSS scroll snap to work, we have to outline which axis permits overflow, so for horizontal scrolling, that’s x:

#slides {
  overflow-x: auto;
}

The ultimate property we’d like for scroll snapping for the #slides container is to outline scroll-snap-type. This can be a shorthand the place we choose the x axis, and the necessary habits, which suggests initiating scrolling ought to at all times set off snapping to the subsequent factor.

#slides {
  scroll-snap-type: x necessary;
}

If you happen to attempt it at this level, you gained’t expertise the scroll snapping habits but as a result of now we have two properties so as to add to the kid .slide parts. Use of scroll-snap-align tells the browser the place to “snap” to, and setting scroll-snap-stopto at all times prevents scrolling previous one of many little one parts.

.slide {
  /* ...current kinds */
  scroll-snap-align: heart;
  scroll-snap-stop: at all times;
}

The scroll snapping habits ought to work both by scrolling throughout your slide or utilizing left and proper arrow keys.

There are extra properties that may be set for CSS scroll snap, you’ll be able to evaluation the MDN docs to be taught what all is out there. CSS scroll snap additionally has a bit totally different habits cross-browser, and throughout enter varieties, like contact versus mouse, or touchpad versus mouse wheel, or by way of scrollbar arrows. For our presentation, for those who discover that scrolling isn’t very easy or “snapping” then attempt utilizing arrow keys as an alternative.

At the moment, there isn’t a method to customise the CSS scroll snap sliding animation easing or pace. Maybe that’s vital to you on your presentation, and also you don’t want the opposite options we’ve developed for modifying the code samples. In that case, it’s possible you’ll need to select a “actual” presentation utility.

CSS scroll snap could be very cool but in addition has some caveats to pay attention to for those who’re pondering of utilizing it past our slide deck context. Try one other scroll snapping demo and extra info on SmolCSS.dev.

Slide numbers

An optionally available characteristic is including seen slide numbers. Utilizing a CSS counter, we will get the present slide quantity and show it nonetheless we’d like as the worth of a pseudo-element. And utilizing information attributes, we will even append the present subject.

Step one is giving our counter a reputation, which is finished by way of the counter-reset property. That is positioned on the factor that incorporates gadgets to be counted, so we’ll add it to #slides.

#slides {
  counter-reset: slides;
}

Then, on the weather to be counted (.slide), we add the counter-increment property and callback to the title of the counter we outlined.

.slide {
  counter-increment: slides;
}

To entry the present depend, we’ll arrange a pseudo factor. Throughout the content material property, the counter() operate is out there. This operate accepts the title of our counter and returns the present quantity.

.slide::earlier than {
  content material: counter(slides);
}

The quantity is now showing however not the place we wish it. As a result of our slide content material is variable, we’ll use traditional absolute positioning to position the slide quantity within the bottom-left nook. And we’ll add some visible kinds to make it enclosed in a pleasant little circle.

.slide::earlier than {
  content material: counter(slides);
  place: absolute;
  left: 1rem;
  backside: 1rem;
  width: 1.65em;
  top: 1.65em;
  show: grid;
  place-content: heart;
  border-radius: 50%;
  font-size: 1.25rem;
  shade: hsl(var(--theme-hs), 95%);
  background-color: hsl(var(--theme-hs), 55%);
}
Screenshot of the text slide containing a heading, byline, and Twitter handle. The text is dark blue and the background has a light blue. There is the number one in white inside a bright blue circle located in the bottom-left corner of the slide indicating the page title.

We are able to improve our slide numbers by grabbing the worth of an information attribute to additionally append a brief subject title. This implies first including an attribute to every <li> factor the place we wish this to occur. We’ll add data-topic to the <li> for the title and code demo slides. The worth will be no matter you need, however shorter strings will show finest.

<li class="slide slide--title" data-topic="CSS">

We’ll use the attribute as a selector to vary the pseudo factor. We are able to get the worth through the use of the attr() operate, which we’ll concatenate with the slide quantity and add a colon for a separator. Because the factor was beforehand a circle, there are a couple of different properties to replace.

[data-topic]::earlier than {
  content material: counter(slides) ": " attr(data-topic);
  padding: 0.25em 0.4em;
  width: auto;
  border-radius: 0.5rem;
}

With that added, right here’s the code demo slide exhibiting the added subject of “CSS”:

Slide deck screenshot showing the split view with live code on the left and the output on the right. The page number of the slide is shown in the bottom-left corner and includes the word CSS after the page number.

Small viewport kinds

Our slides are already considerably responsive, however finally, there can be issues with horizontal scrolling on smaller viewports. My suggestion is to take away the CSS scroll snap and let the slides movement vertically.

To perform this can simply be a handful of updates, together with including a border to assist separate slide content material.

First, we’ll transfer the CSS scroll snap associated properties for #slides right into a media question to solely apply above 120ch.

@media display screen and (min-width: 120ch) {
  #slides {
    grid-auto-flow: column;
    overflow-x: auto; 
    scroll-snap-type: x necessary;
  }
}

Subsequent, we’ll transfer the CSS scroll snap and dimension properties for .slide into this media question as nicely.

@media display screen and (min-width: 120ch) {
  .slide {
    width: 100vw;
    top: 100vh;
    scroll-snap-align: heart;
    scroll-snap-stop: at all times;
  }
}

To stack the demo content material, we’ll transfer our total rule for .slide--demo into this media question:

@media display screen and (min-width: 120ch) {
  .slide--demo {
    grid-template-columns: fit-content(85ch) 1fr;
  }
}

Now all the pieces is stacked, however we need to convey again a minimal top for every slide after which add the border I discussed earlier:

@media (max-width: 120ch) {
  .slide {
    min-height: 80vh;
  }

  .slide + .slide {
    border-top: 1px dashed;
  }
}

Your content material additionally is likely to be prone to overflow on smaller viewports, so we’ll do a few changes for .content material to attempt to forestall that We’ll add a default width that can be used on small viewports, and transfer our earlier max-width constraint into the media question. Additionally proven is a fast technique updating our <h1> to make use of fluid kind.

h1 {
  font-size: clamp(2rem, 8vw + 1rem, 3.25rem);
}

.content material {
  /* take away max-width rule from right here */
  width: calc(100vw - 2rem);
}

@media display screen and (min-width: 120ch) {
  .content material {
    width: unset;
    max-width: 45ch;
  }
}

Moreover, I discovered it helps to reposition the slide counter. For that, we’ll modify the preliminary kinds to position it within the top-left, then transfer it again to the underside in our media question.

.slide {
  /* modify default right here, eradicating the outdated "backside" worth */
  prime: 0.25rem;
  left: 0.25rem;
}

@media (min-width: 120ch) {
  .slide::earlier than {
    prime: auto;
    backside: 1rem;
    left: 1rem;
  }
}

Remaining slide deck

The embed will probably be exhibiting the stacked small viewport model, so you’ll want to open the total model in CodePen, or leap to the reside view. As a reminder, the modifying means works finest in Firefox.

If you happen to’re focused on seeing a totally completed deck in motion, I used this method to current my fashionable CSS toolkit.

Supply hyperlink

Leave a Reply