From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/experimentals/comparison.html | 250 +++++++++++++++++++++++++++++++++++++ 1 file changed, 250 insertions(+) create mode 100644 docs/experimentals/comparison.html (limited to 'docs/experimentals/comparison.html') diff --git a/docs/experimentals/comparison.html b/docs/experimentals/comparison.html new file mode 100644 index 0000000..a12db02 --- /dev/null +++ b/docs/experimentals/comparison.html @@ -0,0 +1,250 @@ + + + + Comparison sliders - Experimentals - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Comparison sliders

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

Comparison Sliders are sliders for comparing two images. It is built in pure CSS.

+
+
+
+
macOS Sierra Wallpaper +
Before
+
+
macOS Sierra Wallpaper +
After
+ +
+
+
+
+ 
<div class="comparison-slider">
+  <figure class="comparison-before">
+    <!-- image (before) -->
+    <div class="comparison-label">Before</div>
+  </figure>
+
+  <figure class="comparison-after">
+    <!-- image (after) -->
+    <div class="comparison-label">After</div>
+    <textarea class="comparison-resizer" readonly></textarea>
+  </figure>
+</div>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file -- cgit v1.3.1-23-gd82d