blob: 527abd9157edb5a3a64d45cbbe843eebc6e139b4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'comparison'
- var parent = 'experimentals'
- var title = 'Comparison sliders - Experimentals - Spectre.css CSS Framework'
- var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
block docs-content
+docs-heading('comparison', 'Comparison sliders')
p
small.label.label-primary.mr-2 CSS ONLY
include ../_layout/_ad-g.pug
p
| Comparison Sliders are sliders for comparing two images. It is built in pure CSS.
.docs-demo.columns
.column.col-12
.comparison-slider
figure.comparison-before
img.rounded(src="../img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper")
.comparison-label Before
figure.comparison-after
img.filter-grayscale.rounded(src="../img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper")
.comparison-label After
textarea.comparison-resizer(readonly="")
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<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>
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
|
