From dcfb172704f3afb68a30425029ec834be2883274 Mon Sep 17 00:00:00 2001 From: bt Date: Sat, 8 Jun 2024 13:22:19 -0400 Subject: More content porting, on-going markdown changes for lowdown support --- build/keynote-slides-css/index.html | 110 +++++++++++++++++++++--------------- 1 file changed, 64 insertions(+), 46 deletions(-) (limited to 'build/keynote-slides-css') diff --git a/build/keynote-slides-css/index.html b/build/keynote-slides-css/index.html index 45175c6..8ac397d 100644 --- a/build/keynote-slides-css/index.html +++ b/build/keynote-slides-css/index.html @@ -1,56 +1,70 @@ - + Keynote Slides with Pure CSS - - + + +
-

Keynote Slides with Pure CSS

+

Keynote Slides with Pure CSS

+

2020-06-22

-

There are a great deal of options available on the web and built into most operating systems when you need to create presentation / keynote slides. You could use native software like LibremOffice Impress, Powerpoint, Apple's Keynote, etc. You could also decide to use preexisting web-based apps like Google Slides or an open source project such as RevealJS. All of these are good options.

+ +

There are a great deal of options available on the web and built into most operating systems when you need to create presentation / keynote slides. You could use native software like LibremOffice Impress, Powerpoint, Apple’s Keynote, etc. You could also decide to use preexisting web-based apps like Google Slides or an open source project such as RevealJS. All of these are good options.

+

But thinking more about how overly complex these apps are implemented, it got me wondering if I could quickly code up a presentation slide framework with pure CSS and barely any code.

+

This is what I came up with:

-

The Demo

+ +

The Demo

+

Live CodePen Example

+

Yes, I know this is ugly, but this was created as a barebones skeleton for others to build upon. The demo uses a simple set of radio inputs that correspond to their own individual slide element. The framework looks at the currently checked input, then changes the opacity and z-index of its corresponding slide item. Pretty straightforward stuff!

-

Let's break down each piece:

-

The HTML

-
<div class="slider">
-    <input type="radio" name="pagination" value="1" checked>
-    <input type="radio" name="pagination" value="2">
-    <input type="radio" name="pagination" value="3">
-    <input type="radio" name="pagination" value="4">
-    <input type="radio" name="pagination" value="5">
-
-    <div class="slide">
-        <h2>Slide 1</h2>
-    </div>
-    <div class="slide">
-        <h2>Slide 2</h2>
-    </div>
-    <div class="slide">
-        <h2>Slide 3</h2>
-    </div>
-    <div class="slide">
-        <h2>Slide 4</h2>
-    </div>
-    <div class="slide">
-        <h2>Slide 5</h2>
-    </div>
-</div>
+
+
Let’s break down each piece:

+
+
The HTML

+
+
<div class="slider">
+    <input type="radio" name="pagination" value="1" checked>
+    <input type="radio" name="pagination" value="2">
+    <input type="radio" name="pagination" value="3">
+    <input type="radio" name="pagination" value="4">
+    <input type="radio" name="pagination" value="5">
+
+    <div class="slide">
+        <h2>Slide 1</h2>
+    </div>
+    <div class="slide">
+        <h2>Slide 2</h2>
+    </div>
+    <div class="slide">
+        <h2>Slide 3</h2>
+    </div>
+    <div class="slide">
+        <h2>Slide 4</h2>
+    </div>
+    <div class="slide">
+        <h2>Slide 5</h2>
+    </div>
+</div>
 

-
There isn't a whole lot going on here. We are just including a set of radio inputs (based on how many slides are desired) along with their corresponding slide class elements. You might notice we don't do anything to specifically target each individual slide item - you'll see why we don't need to in the CSS section!

-
The CSS (SCSS)

-
/* Basic default styles */
+
+
There isn’t a whole lot going on here. We are just including a set of radio inputs (based on how many slides are desired) along with their corresponding slide class elements. You might notice we don’t do anything to specifically target each individual slide item - you’ll see why we don’t need to in the CSS section!

+
+
The CSS (SCSS)

+
+
/* Basic default styles */
 .slider {
     height: 100%;
     left: 0;
@@ -67,33 +81,37 @@
     }
 }
 
-input[type="radio"] { cursor: pointer; }
+input[type="radio"] { cursor: pointer; }
 
-/* Target slide item based on currently checked radio */
-input[type="radio"]:nth-of-type(1):checked ~ .slide:nth-of-type(1),
-input[type="radio"]:nth-of-type(2):checked ~ .slide:nth-of-type(2),
-input[type="radio"]:nth-of-type(3):checked ~ .slide:nth-of-type(3),
-input[type="radio"]:nth-of-type(4):checked ~ .slide:nth-of-type(4),
-input[type="radio"]:nth-of-type(5):checked ~ .slide:nth-of-type(5) {
+/* Target slide item based on currently checked radio */
+input[type="radio"]:nth-of-type(1):checked ~ .slide:nth-of-type(1),
+input[type="radio"]:nth-of-type(2):checked ~ .slide:nth-of-type(2),
+input[type="radio"]:nth-of-type(3):checked ~ .slide:nth-of-type(3),
+input[type="radio"]:nth-of-type(4):checked ~ .slide:nth-of-type(4),
+input[type="radio"]:nth-of-type(5):checked ~ .slide:nth-of-type(5) {
     opacity: 1;
     z-index: 1;
 }
 
-/* Individual slide styling */
+/* Individual slide styling */
 .slide:nth-of-type(1) { background: dodgerblue; }
 .slide:nth-of-type(2) { background: crimson; }
 .slide:nth-of-type(3) { background: rebeccapurple; }
 .slide:nth-of-type(4) { background: goldenrod; }
 .slide:nth-of-type(5) { background: pink; }
 

-
Again, not much to see here. We use CSS to look down through the DOM for each radio elements slide "partner". We do this by targeting the nth-of-type on both elements. Simple stuff.

+
+
Again, not much to see here. We use CSS to look down through the DOM for each radio elements slide “partner”. We do this by targeting the nth-of-type on both elements. Simple stuff.

+
 
Some drawbacks to this approach:

+
 
    
 
  • You need to manually target each new slide you add (color, styling, content, etc.)
    • 
 
  • Lack of animations might require extra work to implement (maybe 3rd party libraries- ke AOS?)
    • 
-
  • Probably won't be best for extremely long/complex presentation slides
    • 
+
  • Probably won’t be best for extremely long/complex presentation slides
    • 
 

-
That's it! Hope you enjoy playing around with it.

+
+
That’s it! Hope you enjoy playing around with it.