contenteditable<\/code> attribute<\/li>- Using custom properties and HSL for theming<\/li>
- Gradient text<\/li>
- Styling the
<style><\/code> element<\/li><\/ul>\n\n\nSlide templates<\/h3>\n\n\n
When making a slide deck of a bunch of different slides, it\u2019s likely that you\u2019ll need different types<\/em> of slides. So we\u2019ll create these three essential templates:<\/p>\n\n\n\n- Text:<\/strong> open for any text you need to include<\/li>
- Title:<\/strong> emphasizing a headline to break up sections of content<\/li>
- Demo:<\/strong> split layout with a code block and the preview<\/li><\/ul>\n\n\n\n\n\n
![\"Screenshot](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_7D85D8A43A72F77C800DD73331D3BC4CD2768EE61D1955657BAA888C80FC51B0_1642040682660_slide-number.png?resize=2044%2C1074&ssl=1\")
Text presentation slide<\/figcaption><\/figure>\n<\/div>\n\n\n\n\n![\"A](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_7D85D8A43A72F77C800DD73331D3BC4CD2768EE61D1955657BAA888C80FC51B0_1642040298608_title-slide.png?resize=2044%2C1074&ssl=1\")
Title presentation slide<\/figcaption><\/figure>\n\n\n\n<\/p>\n<\/div>\n\n\n\n
\n![\"Slide](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_7D85D8A43A72F77C800DD73331D3BC4CD2768EE61D1955657BAA888C80FC51B0_1642040704100_slide-topic.png?resize=2044%2C1074&ssl=1\")
Demo presentation slide<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\nHTML templates<\/h3>\n\n\n
Let\u2019s start creating our HTML. We\u2019ll use an ordered list with the ID of slides<\/code> and go ahead and populate a text and title slide.<\/p>\n\n\n\nEach slide is one of the list elements with the class of slide<\/code>, as well as a modifier class to indicate the template type. For these text-based slides, we\u2019ve nested a <div><\/code> with the class of content<\/code> and then added a bit of boilerplate text.<\/p>\n\n\n\n<ol id=\"slides\">\n <li class=\"slide slide--text\">\n <div class=\"content\">\n <h1>Presentation Title<\/h1>\n <p>Presented by Your Name<\/p>\n <p><a target=\"_blank\" href=\"<https:\/\/twitter.com\/5t3ph>\">@5t3ph<\/a><\/p>\n <\/div>\n <\/li>\n <li class=\"slide slide--title\">\n <div class=\"content\">\n <h2>Topic 1<\/h2>\n <\/div>\n <\/li>\n<\/ol><\/code><\/pre>\n\n\n\nWe\u2019re using target=\"_blank\"<\/code> on the link due to CodePen using iframes for the preview, so it\u2019s necessary to \u201cescape\u201d the iframe and load the link.<\/p>\n\n\nBase styles<\/h3>\n\n\n
Next, we\u2019ll begin to add some styles. If you are using CodePen, these styles assume you\u2019re not<\/em> loading one of the resets. Our reset wipes out margin and ensures the <body><\/code> element takes up the total available height, which is all we really need here. And, we\u2019ll make a basic font stack update.<\/p>\n\n\n\n* {\n margin: 0;\n box-sizing: border-box;\n}\n\nbody {\n min-height: 100vh;\n font-family: system-ui, sans-serif;\n font-size: 1.5rem;\n}<\/code><\/pre>\n\n\n\nNext, we\u2019ll define that all our major layout elements will use a CSS grid<\/a>, remove list styling from #slides<\/code>, and make each slide take up the size of the viewport. Finally, we\u2019ll use the place-content<\/code> shorthand to center the slide--text<\/code> and slide--title<\/code> slide content.<\/p>\n\n\n\nbody,\n#slides,\n.slide {\n display: grid;\n}\n\n#slides {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.slide {\n width: 100vw;\n height: 100vh;\n}\n\n.slide--text,\n.slide--title {\n place-content: center;\n}<\/code><\/pre>\n\n\n\nThen, we\u2019ll add some lightweight text styles. Since this is intended to be a presentation with one big point being made at a time, as opposed to an article-like format, we\u2019ll bump the base font-size<\/code> to 2rem<\/code>. Be sure to adjust this value as you test out your final slides in full screen. You may decide it feels too small for your content versus your presentation viewport size.<\/p>\n\n\n\nh1, h2 {\n line-height: 1.1;\n}\n\na {\n color: inherit;\n}\n\n.content {\n padding: 2rem;\n font-size: 2rem;\n line-height: 1.5;\n}\n\n.content * + * {\n margin-top: 0.5em;\n}\n\n.slide--text .content {\n max-width: 40ch;\n}<\/code><\/pre>\n\n\n\nAt this point, we have some large text centered within a container the size of the viewport. Let\u2019s add a touch of color by creating a simple theme system.<\/p>\n\n\n\n
We\u2019ll be using the hsl<\/code> color space<\/a> for the theme while setting a custom property of --theme-hue<\/code> and --theme-saturation<\/code>. The hue value of 230<\/code> corresponds to a blue. For ease of use, we\u2019ll then combine those into the --theme-hs<\/code> value to drop into instances of hsl<\/code>.<\/p>\n\n\n\n:root {\n --theme-hue: 230;\n --theme-saturation: 85%;\n --theme-hs: var(--theme-hue), var(--theme-saturation);\n}<\/code><\/pre>\n\n\n\nWe can adjust the lightness values for backgrounds and text. The slides will feel cohesive since they will be tints of that base hue.<\/p>\n\n\n\n
Back in our main <body><\/code> style, we can apply this idea to create a very light version of the color for a background, and a dark version for the text.<\/p>\n\n\n\nbody {\n \/* ... existing styles *\/\n background-color: hsl(var(--theme-hs), 95%);\n color: hsl(var(--theme-hs), 25%);\n}<\/code><\/pre>\n\n\n\n![\"Screenshot](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_7D85D8A43A72F77C800DD73331D3BC4CD2768EE61D1955657BAA888C80FC51B0_1642040273308_slide-theme.png?resize=1024%2C516&ssl=1\")
<\/figure>\n\n\n\nLet\u2019s also give .slide--title<\/code> a little bit of extra pizazz by adding a subtle gradient background.<\/p>\n\n\n\n.slide--title {\n background-image: \n linear-gradient(125deg, \n hsl(var(--theme-hs), 95%), \n hsl(var(--theme-hs), 75%)\n );\n}<\/code><\/pre>\n\n\n\n<\/figure>\n\n\nDemo slide template<\/h3>\n\n\n
Our demo slide breaks the mold so far and requires two main elements:<\/p>\n\n\n\n
- a
.style<\/code> container around an inline <style><\/code> element with actual written styles that you intend to both be visible on screen and apply to the demo<\/li>- a
.demo<\/code> container to hold the demo preview with whatever markup is appropriate for that<\/li><\/ul>\n\n\n\nIf you\u2019re using CodePen to create this deck, you\u2019ll want to update the \u201cBehavior\u201d setting to turn off \u201cFormat on Save.\u201d This is because we don\u2019t want extra tabs\/spaces prior to the styles block. Exactly why will become clear in a moment.<\/p>\n\n\n\n![\"Screenshot](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_CB14231AAE38F647B14B55BCB55C475DA5948E9758E068017A7573EAEC1AA989_1643138081502_ScreenShot2022-01-25at11.14.01AM.png?resize=1382%2C720&ssl=1\")
<\/figure>\n\n\n\nHere\u2019s our demo slide content:<\/p>\n\n\n\n
<li class=\"slide slide--demo\">\n <div class=\"style\">\n <style contenteditable=\"true\"> \n.modern-container {\n --container-width: 40ch;\n\n width: min(\n var(--container-width), 100% - 3rem\n );\n margin-inline: auto;\n}\n <\/style>\n <\/div>\n <div class=\"demo\">\n <div class=\"modern-container\">\n <div class=\"box\">container<\/div>\n <\/div>\n <\/div>\n<\/li><\/code><\/pre>\n\n\n\nNote that extra contenteditable=\"true\"<\/code> attribute on the <style><\/code> block . This is a native HTML feature that allows you to mark any element as editable<\/a>.<\/strong> It is not a replacement for form inputs and textareas and typically requires JavaScript for more full-featured functionality. But for our purposes, it\u2019s the magic that enables \u201clive\u201d coding. Ultimately, we\u2019ll be able to make changes to the content in here and the style changes will apply immediately. Pretty fancy, hold tight.<\/p>\n\n\n\nHowever, if you view this so far, you won\u2019t see the style block displayed. You will see the outcome of the .modern-container demo styles are being applied, though.<\/p>\n\n\n\n
Another relevant note here is that HTML5 included validating a <style><\/code> block anywhere; not just in the <head><\/code>.<\/p>\n\n\n\nWhat we\u2019re going to do next will feel strange, but we can actually use display<\/code> properties on <style><\/code> to make it visible. We\u2019ve placed it within another container to use a little extra positioning for it and make it a resizable area. Then, we\u2019ve set the <style><\/code> element itself to display: block<\/code> and applied properties to give it a code editor look and feel.<\/p>\n\n\n\n.style {\n display: grid;\n align-items: center;\n background-color: hsl(var(--theme-hs), 5%);\n padding-inline: max(5vw, 2rem) 3rem;\n font-size: 1.35rem;\n overflow-y: hidden;\n resize: horizontal;\n}\n\nstyle {\n display: block;\n outline: none;\n font-family: Consolas, Monaco, \"Andale Mono\", \"Ubuntu Mono\", monospace;\n color: hsl(var(--theme-hs), 85%);\n background: none;\n white-space: pre;\n line-height: 1.65;\n tab-size: 2;\n hyphens: none;\n}<\/code><\/pre>\n\n\n\nThen, we need to create the .slide--demo<\/code> rule and use CSS grid to display the styles and demo, side-by-side. As a reminder, we\u2019ve already set up the base .slide<\/code> class to use grid, so now we\u2019ll create a rule for grid-template-columns<\/code> just for this template.<\/p>\n\n\n\n.slide--demo {\n grid-template-columns: fit-content(85ch) 1fr;\n}<\/code><\/pre>\n\n\n\nIf you\u2019re unfamiliar with the grid function fit-content()<\/code><\/a>, it allows an element to use its intrinsic width up until the maximum value defined in the function. So, this rule says the style block can grow to a maximum of 85ch<\/code> wide. When your <style><\/code> content is narrow, the column will only be as wide as it needs to be. This is really nice visually as it won\u2019t create extra horizontal space while still ultimately capping the allowed width.<\/p>\n\n\n\nTo round out this template, we\u2019ll add some padding for the .demo<\/code>. You may have also noticed that extra class within the demo of .box<\/code>. This is a convention I like to use for demos to provide a visual of element boundaries when the size and position of something are important.<\/p>\n\n\n\n.demo {\n padding: 2rem;\n}\n\n.box {\n background-color: hsl(var(--theme-hs), 85%);\n border: 2px dashed;\n border-radius: .5em;\n padding: 1rem;\n font-size: 1.35rem;\n text-align: center;\n}<\/code><\/pre>\n\n\n\nHere\u2019s the result of our code template:<\/p>\n\n\n\n![\"Screenshot](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_7D85D8A43A72F77C800DD73331D3BC4CD2768EE61D1955657BAA888C80FC51B0_1642040357306_code-template.png?resize=1024%2C711&ssl=1\")
<\/figure>\n\n\nLive-editing functionality<\/h3>\n\n\n
Interacting with the displayed styles will actually update the preview! Additionally, since we created the .style<\/code> container as a resizable area, you can grab the resize handle in the lower right to grow and shrink the preview area as needed.<\/p>\n\n\n\nThe one caveat for our live-editing ability is that browsers treat it differently.<\/p>\n\n\n\n
- Firefox:<\/strong> This provides the best result as it allows both changing the loaded styles and full functionality of adding new properties and even new rules.<\/li>
- Chromium and Safari:<\/strong> These allow changing values in loaded styles, but not adding new properties or new rules.<\/li><\/ul>\n\n\n\n
As a presenter, you\u2019ll likely want to use Firefox. As for viewers utilizing the presentation link, they\u2019ll still be able to get the intention of your slides and shouldn\u2019t have issues with the display (unless their browser doesn\u2019t support your demoed code). But outside of Firefox, they may be unable to manipulate the demos as fully as you may show in your presentation.<\/p>\n\n\n\n
You may want to \u201cFork\u201d your finished presentation pen and actually remove the editable behavior on <style><\/code> blocks and instead display final versions of your demos styles, as applicable.<\/p>\n\n\n\nReminder: styles you include in demos can potentially affect slide layout and other demos! You may want to scope demo styles under a slide-specific class to prevent unintended style changes across your deck.<\/p>\n\n\n
Code highlighting<\/h3>\n\n\n
While we won\u2019t be able to achieve full syntax highlighting without JavaScript, we can create a method to highlight certain parts of the code block for emphasis.<\/p>\n\n\n\n
To do this, we\u2019ll pair up linear-gradient<\/code> with the -webkit<\/code> properties that enable using an element\u2019s background as the text effect. Then, using custom properties, we can define how many \u201clines\u201d of the style block to highlight.<\/p>\n\n\n\nFirst, we\u2019ll place the required -webkit<\/code> properties directly on the <style><\/code> element. This will cause the visible text to disappear, but we\u2019ll make it visible in a moment by adding a background. Although these are -webkit<\/code> prefixed, they are supported cross-browser.<\/a><\/p>\n\n\n\nstyle {\n \/* ...existing styles *\/\n -webkit-text-fill-color: transparent;\n -webkit-background-clip: text;\n}<\/code><\/pre>\n\n\n\nThe highlighting effect will work by creating a linear-gradient<\/code> with two colors where the lighter color shows through as the text color for the lines to highlight. As a default, we\u2019ll bookend the highlight with a darker color such that it appears that the first property is highlighted.<\/p>\n\n\n\nHere\u2019s a preview of the initial effect:<\/p>\n\n\n\n![\"An](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_7D85D8A43A72F77C800DD73331D3BC4CD2768EE61D1955657BAA888C80FC51B0_1642040392095_highlight-preview.png?resize=1222%2C676&ssl=1\")
<\/figure>\n\n\n\nTo create this effect, we need to work out how to calculate the height of the highlight color. In our <style><\/code> element\u2019s rules, we\u2019ve already set the line-height<\/code> to 1.65<\/code>, which corresponds to a total computed line height of 1.65em<\/code>. So, you may think that we multiply that by the number of lines and call it a day.<\/p>\n\n\n\nHowever, due to the visible style block being rendered using white-space: pre<\/code> to preserve line breaks, there\u2019s technically a sneaky invisible line before the first line of text. This is created from formatting the <style><\/code> tag on an actual line prior to the first line of CSS code. This is also why I noted that preventing auto-formatting in CodePen is important \u2014 otherwise, you would also have extra left padding.<\/p>\n\n\n\nWith these caveats in mind, we\u2019ll set up three custom properties to help compute the values we need and add them to the beginning of our .style<\/code> ruleset. The final --lines<\/code> height value first takes into account that invisible line and the selector.<\/p>\n\n\n\nstyle {\n --line-height: 1.65em;\n --highlight-start: calc(2 * var(--line-height));\n --lines: calc(var(--highlight-start) + var(--num-lines, 1) * var(--line-height));\n}<\/code><\/pre>\n\n\n\nNow we can apply the values to create the linear-gradient<\/code>. To create the sharp transitions we need for this effect, we ensure the gradient stops from one color to the next match.<\/p>\n\n\n\nstyle {\n background-image: linear-gradient(\n hsl(var(--theme-hs), 75%) 0 var(--highlight-start),\n hsl(var(--theme-hs), 90%) var(--highlight-start) var(--lines),\n hsl(var(--theme-hs), 75%) var(--lines) 100%\n );\n}<\/code><\/pre>\n\n\n\nTo help visualize what\u2019s happening, I\u2019ve commented out the -webkit<\/code> lines to reveal the gradient being created.<\/p>\n\n\n\n![\"A](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_7D85D8A43A72F77C800DD73331D3BC4CD2768EE61D1955657BAA888C80FC51B0_1642040416019_highlight-gradient.png?resize=1222%2C676&ssl=1\")
<\/figure>\n\n\n\nWithin our --lines<\/code> calculation, we also included a --num-lines<\/code> property. This will let you adjust the number of lines to highlight per demo via an inline style. This example adjusts the highlight to three lines:<\/p>\n\n\n\n<style contenteditable=\"true\" style=\"--num-lines: 3\"><\/code><\/pre>\n\n\n\nWe can also pass a recalculated --highlight-start<\/code> to change the initial line highlighted:<\/p>\n\n\n\n<style contenteditable=\"true\" style=\"--num-lines: 3; --highlight-start: calc(4 * var(--line-height))\"><\/code><\/pre>\n\n\n\nLet\u2019s look at the outcome of the previous adjustment:<\/p>\n\n\n\n![\"Showing](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_7D85D8A43A72F77C800DD73331D3BC4CD2768EE61D1955657BAA888C80FC51B0_1642040434622_highlight-adjustment.png?resize=1222%2C676&ssl=1\")
<\/figure>\n\n\n\nNow, if you add or remove lines during your presentation, the highlighting will not adjust. But it\u2019s still nice as a tool to help direct your viewers\u2019 attention.<\/p>\n\n\n\n
There are two utility classes we\u2019ll add for highlighting the rule only or removing highlighting altogether. To use, apply directly to the <style><\/code> element for the demo.<\/p>\n\n\n\n.highlight--rule-only {\n --highlight-start: calc(1 * var(--line-height))\n}\n\n.highlight--none {\n background-image: none;\n background-color: currentColor;\n}<\/code><\/pre>\n\n\nSlide motion with CSS scroll snap<\/h3>\n\n\n
Alright, we have some nice-looking initial slides. But it\u2019s not quite feeling like a slide deck yet. We\u2019ll resolve that in two parts:<\/p>\n\n\n\n
- Reflow the slides horizontally<\/li>
- Use CSS scroll snap<\/a> to enforce scrolling one slide at a time<\/li><\/ol>\n\n\n\n
Our initial styles already defined the #slides<\/code> ordered list as a grid container. To accomplish a horizontal layout, we need to add one extra property since the .slides<\/code> have already included dimensions to fill the viewport.<\/p>\n\n\n\n#slides {\n \/* ...existing styles *\/\n grid-auto-flow: column;\n}<\/code><\/pre>\n\n\n\nFor CSS scroll snap to work, we need to define which axis allows overflow, so for horizontal scrolling, that\u2019s x<\/code>:<\/p>\n\n\n\n#slides {\n overflow-x: auto;\n}<\/code><\/pre>\n\n\n\nThe final property we need for scroll snapping for the #slides<\/code> container is to define scroll-snap-type<\/code><\/a>. This is a shorthand where we select the x<\/code> axis, and the mandatory<\/code> behavior, which means initiating scrolling should always trigger snapping to the next element.<\/p>\n\n\n\n#slides {\n scroll-snap-type: x mandatory;\n}<\/code><\/pre>\n\n\n\nIf you try it at this point, you won\u2019t experience the scroll snapping behavior yet because we have two properties to add to the child .slide<\/code> elements. Use of scroll-snap-align<\/code><\/a> tells the browser where to \u201csnap\u201d to, and setting scroll-snap-stop<\/code><\/a>to always<\/code> prevents scrolling past one of the child elements.<\/p>\n\n\n\n.slide {\n \/* ...existing styles *\/\n scroll-snap-align: center;\n scroll-snap-stop: always;\n}<\/code><\/pre>\n\n\n\nThe scroll snapping behavior should work either by scrolling across your slide or using left and right arrow keys.<\/p>\n\n\n\n
There are more properties that can be set for CSS scroll snap, you can review the MDN docs<\/a> to learn what all is available. CSS scroll snap also has a bit different behavior cross-browser, and across input types, like touch versus mouse, or touchpad versus mouse wheel, or via scrollbar arrows. For our presentation, if you find that scrolling isn\u2019t very smooth or \u201csnapping\u201d then try using arrow keys instead.<\/p>\n\n\n\nCurrently, there isn\u2019t a way to customize the CSS scroll snap sliding animation easing or speed. Perhaps that is important to you for your presentation, and you don\u2019t need the other features we\u2019ve developed for modifying the code samples. In that case, you may want to choose a \u201creal\u201d presentation application.<\/p>\n\n\n\n
CSS scroll snap is very cool but also has some caveats to be aware of if you\u2019re thinking of using it beyond our slide deck context. Check out another scroll snapping demo and more information on SmolCSS.dev<\/a>.<\/p>\n\n\nSlide numbers<\/h3>\n\n\n
An optional feature is adding visible slide numbers. Using a CSS counter, we can get the current slide number and display it however we\u2019d like as the value of a pseudo-element. And using data attributes<\/a>, we can even append the current topic.<\/p>\n\n\n\nThe first step is giving our counter a name, which is done via the counter-reset<\/code><\/a> property. This is placed on the element that contains items to be counted, so we\u2019ll add it to #slides<\/code>.<\/p>\n\n\n\n#slides {\n counter-reset: slides;\n}<\/code><\/pre>\n\n\n\n