├── logo.png
├── img
└── rainbow-wood.jpg
├── README.markdown
├── sample-slideshow.css
├── license.txt
├── classList.js
├── slideshow.css
├── sample-slideshow.html
├── theme.css
├── slideshow.js
└── logo.svg
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ttscoff/CSSS/master/logo.png
--------------------------------------------------------------------------------
/img/rainbow-wood.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ttscoff/CSSS/master/img/rainbow-wood.jpg
--------------------------------------------------------------------------------
/README.markdown:
--------------------------------------------------------------------------------
1 | # CSSS
2 | ### CSS-based SlideShow System
3 |
4 | Warning: Only works in latest Firefox, Opera, Safari or Chrome.
5 | For more information, see the [sample slideshow](http://leaverou.me/csss/sample-slideshow.html)
--------------------------------------------------------------------------------
/sample-slideshow.css:
--------------------------------------------------------------------------------
1 | #intro {
2 | background: rgba(0,0,0,.7);
3 | padding: 0;
4 | border: 0;
5 | }
6 |
7 | #intro h1 {
8 | width: 60%;
9 | min-height: 500px;
10 | margin: 5% auto 0;
11 | }
12 |
13 | #intro .attribution {
14 | font-family: Helvetica, sans-serif;
15 | font-weight: bold;
16 | text-align: center;
17 | font-size: 100%;
18 | line-height: .3;
19 | color: rgba(0,0,0,.7);
20 | text-shadow: none;
21 | background: url(img/rainbow-wood.jpg) bottom;
22 | padding:.6em 0 0;
23 | overflow: hidden;
24 | }
25 |
26 | @media only screen and (-webkit-min-device-pixel-ratio:0) {
27 | /* hack to avoid using the Object element in Safari/WebKit, due to WebKit Bug 27190 */
28 | object[type="image/svg+xml"] {
29 | display: none;
30 | }
31 |
32 | #intro h1 {
33 | background: url(logo.svg) no-repeat center;
34 | background-size:100% auto;
35 | }
36 | }
--------------------------------------------------------------------------------
/license.txt:
--------------------------------------------------------------------------------
1 | The MIT License
2 |
3 | Copyright (c) 2010 Lea Verou
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
--------------------------------------------------------------------------------
/classList.js:
--------------------------------------------------------------------------------
1 | /*
2 | * classList.js: Implements a cross-browser element.classList getter.
3 | * 2010-09-06
4 | *
5 | * By Eli Grey, http://eligrey.com
6 | * Public Domain.
7 | * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
8 | */
9 |
10 | "use strict";
11 |
12 | if (typeof Element !== "undefined") {
13 |
14 | (function () {
15 |
16 | var
17 | classListProp = "classList"
18 | , protoProp = "prototype"
19 | , elemCtrProto = Element[protoProp]
20 | , objCtr = Object
21 | ;
22 | if (!objCtr.hasOwnProperty.call(elemCtrProto, classListProp)) {
23 | var
24 | strTrim = String[protoProp].trim || function () {
25 | return this.replace(/^\s+|\s+$/g, "");
26 | }
27 | , arrIndexOf = Array[protoProp].indexOf || function (item) {
28 | for (var i = 0, len = this.length; i < len; i++) {
29 | if (i in this && this[i] === item) {
30 | return i;
31 | }
32 | }
33 | return -1;
34 | }
35 | , checkTokenAndGetIndex = function (classList, token) {
36 | if (token === "") {
37 | throw "SYNTAX_ERR";
38 | }
39 | if (/\s/.test(token)) {
40 | throw "INVALID_CHARACTER_ERR";
41 | }
42 | return arrIndexOf.call(classList, token);
43 | }
44 | , ClassList = function (elem) {
45 | var
46 | trimmedClasses = strTrim.call(elem.className)
47 | , classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
48 | ;
49 | for (var i = 0, len = classes.length; i < len; i++) {
50 | this.push(classes[i]);
51 | }
52 | this.updateClassName = function () {
53 | elem.className = this.toString();
54 | };
55 | }
56 | , classListProto = ClassList[protoProp] = []
57 | , classListGetter = function () {
58 | return new ClassList(this);
59 | }
60 | ;
61 | classListProto.item = function (i) {
62 | return this[i] || null;
63 | };
64 | classListProto.contains = function (token) {
65 | token += "";
66 | return checkTokenAndGetIndex(this, token) !== -1;
67 | };
68 | classListProto.add = function (token) {
69 | token += "";
70 | if (checkTokenAndGetIndex(this, token) === -1) {
71 | this.push(token);
72 | this.updateClassName();
73 | }
74 | };
75 | classListProto.remove = function (token) {
76 | token += "";
77 | var index = checkTokenAndGetIndex(this, token);
78 | if (index !== -1) {
79 | this.splice(index, 1);
80 | this.updateClassName();
81 | }
82 | };
83 | classListProto.toggle = function (token) {
84 | token += "";
85 | if (checkTokenAndGetIndex(this, token) === -1) {
86 | this.add(token);
87 | } else {
88 | this.remove(token);
89 | }
90 | };
91 | classListProto.toString = function () {
92 | return this.join(" ");
93 | };
94 |
95 | if (objCtr.defineProperty) {
96 | var classListDescriptor = {
97 | get: classListGetter
98 | , enumerable: true
99 | , configurable: true
100 | };
101 | try {
102 | objCtr.defineProperty(elemCtrProto, classListProp, classListDescriptor);
103 | } catch (ex) { // IE 8 doesn't support enumerable:true
104 | if (ex.number === -0x7FF5EC54) {
105 | classListDescriptor.enumerable = false;
106 | objCtr.defineProperty(elemCtrProto, classListProp, classListDescriptor);
107 | }
108 | }
109 | } else if (objCtr[protoProp].__defineGetter__) {
110 | elemCtrProto.__defineGetter__(classListProp, classListGetter);
111 | }
112 | }
113 |
114 | }());
115 |
116 | }
--------------------------------------------------------------------------------
/slideshow.css:
--------------------------------------------------------------------------------
1 | /**
2 | Basic CSS so that the slideshow script functions as a slideshow
3 | @author Lea Verou
4 | @version 1.0
5 | */
6 |
7 | body {
8 | counter-reset: slide;
9 | }
10 |
11 | .slide {
12 | position:absolute;
13 | top:0;
14 | right:0;
15 | bottom:0;
16 | left:0;
17 | z-index:1;
18 |
19 | font-size:250%;
20 | line-height:1.6;
21 |
22 | opacity:0;
23 | height:0;
24 | width:0;
25 | overflow:hidden;
26 |
27 | counter-increment: slide;
28 |
29 | -webkit-transition:1s opacity, 1s -webkit-transform;
30 | -moz-transition:1s opacity, 1s -moz-transform;
31 | -o-transition:1s opacity, 1s -o-transform;
32 | transition:1s opacity, 1s transform;
33 | }
34 |
35 | .slide:target {
36 | z-index:100;
37 | opacity:1;
38 | height:auto;
39 | width: auto;
40 | overflow: visible;
41 | }
42 |
43 | /**
44 | Slide numbers
45 | */
46 | .slide:target::before {
47 | content: counter(slide);
48 | position: absolute;
49 | top: .05in;
50 | right: .5em;
51 | z-index: 1010;
52 |
53 | font-size: .15in;
54 | color: white;
55 | background: rgba(0,0,0,.25);
56 | font-weight: 900;
57 | text-shadow: .05em .05em .1em black;
58 | text-align: center;
59 | padding: .1em .3em 0;
60 | min-width: 1.6em;
61 | -moz-box-sizing: border-box;
62 | -webkit-box-sizing: border-box;
63 | box-sizing: border-box;
64 |
65 | -moz-border-radius: 50%;
66 | -webkit-border-radius: 50%;
67 | border-radius: 50%;
68 | }
69 |
70 | /* If there's nothing selected, show the first */
71 | .slide:first-child {
72 | z-index:2;
73 | }
74 |
75 | /* Delayed items that are shown incrementally after the slide is */
76 | .slide .delayed {
77 | opacity: 0;
78 |
79 | -webkit-transition:.7s opacity;
80 | -moz-transition:.7s opacity;
81 | -o-transition:.7s opacity;
82 | transition:.7s opacity;
83 | }
84 |
85 | .slide .delayed.displayed {
86 | opacity: .3;
87 | }
88 |
89 | .slide .delayed.current,
90 | .slide .delayed.displayed.non-dismissable {
91 | opacity: 1;
92 | }
93 |
94 | /**
95 | Show thumbnails
96 | */
97 |
98 | .show-thumbnails {
99 | overflow-x: hidden;
100 | }
101 |
102 | .show-thumbnails .slide {
103 | width: 1024px;
104 | height: 768px;
105 | -moz-box-sizing: border-box;
106 | -webkit-box-sizing: border-box;
107 | box-sizing: border-box;
108 |
109 | float: left;
110 | overflow: hidden;
111 | position: static;
112 | opacity: 1;
113 | margin:-292px -395px;
114 | cursor: pointer;
115 |
116 | -moz-transform: scale(.2, .2);
117 | -o-transform: scale(.2, .2);
118 | -webkit-transform: scale(.2, .2);
119 | transform: scale(.2, .2);
120 |
121 | -webkit-transition:1s -webkit-transform;
122 | -moz-transition:1s -moz-transform;
123 | -o-transition:1s -o-transform;
124 | transition:1s transform;
125 | }
126 |
127 | .show-thumbnails .slide .delayed {
128 | opacity: 1;
129 | }
130 |
131 | .show-thumbnails .slide:hover,
132 | .show-thumbnails .slide:target {
133 | outline: 20px solid rgba(255, 255, 255, .6);
134 | -moz-outline-radius:5px;
135 |
136 | box-shadow: 5px 5px 10px black;
137 | }
138 |
139 | .show-thumbnails .slide:target {
140 | outline-color: rgba(255, 255, 255, .3);
141 | }
142 |
143 | .show-thumbnails .slide:target:hover {
144 | outline-color: rgba(255, 255, 255, .9);
145 | }
146 |
147 | /* Display titles */
148 | .show-thumbnails .slide[data-title]:after {
149 | content: attr(data-title);
150 | position: absolute;
151 | left: 0;
152 | right: 0;
153 | bottom: 0;
154 | padding: .1em 0;
155 | background: rgba(0,0,0,.5);
156 | color: white;
157 | font-size: 250%;
158 | text-align: center;
159 | text-shadow: .05em .05em .1em black;
160 | }
161 |
162 | /* Hide all elements in slide by hitting Ctrl + J or Shift + J */
163 | .hide-elements .slide:target > * {
164 | opacity: 0;
165 |
166 | -moz-transition:.5s;
167 | -webkit-transition:.5s;
168 | -o-transition:.5s;
169 | transition:.5s;
170 | }
171 |
172 | /* Mark slides as incomplete to spot them easier */
173 | .incomplete.slide::after {
174 | content: 'INCOMPLETE';
175 | font-weight: bold;
176 | position: absolute;
177 | top: 40%;
178 | left: 30%;
179 | padding: .1em .4em 0;
180 | border: .1em solid;
181 | color: rgba(255, 0, 0, .8);
182 | font-size: 140%;
183 |
184 | -moz-border-radius: .2em;
185 | -webkit-border-radius: .2em;
186 | border-radius: .2em;
187 |
188 | -moz-transform: rotate(30deg);
189 | -o-transform: rotate(30deg);
190 | -webkit-transform: rotate(30deg);
191 | transform: rotate(30deg);
192 | }
--------------------------------------------------------------------------------
/sample-slideshow.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CSSS: A brief introduction
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 | By Lea Verou
20 |
21 |
22 |
23 |
What is it?
24 |
A simple framework for building presentations with modern web standards
25 |
26 | - An HTML file contains the whole presentation
27 | - Themes as CSS files
28 | - JavaScript handles what CSS can't (keyboard shortcuts etc)
29 |
30 |
33 |
History
34 |
35 | - I had to create a presentation for my talk at Front Trends 2010
36 | - The only web-based presentation system I knew of was the HTML5 presentation by Marcin Wichary which didn't fit my needs
37 | - …so I rolled up my own
38 | - FT2010 attendees asked me to release it
39 | - and here it is! ;-)
40 |
41 |
44 |
What about S5?
45 |
46 | - I found out about S5 afterwards, via Tantek Çelik
47 | - Seems to follow a similar approach to CSSS…
48 | - …but does a few things differently
49 | - So I guess even if I knew, I would still make my own
50 | - but take a look at it too, it's really good!
51 |
52 |
55 |
Navigation
56 |
57 | - → or ↓ to advance to the next slide or incrementally displayed item
58 | - ← or ↑ to go to the previous slide or incrementally displayed item
59 | - Ctrl* + → or Ctrl* + ↓ to jump to the next slide
60 | - Ctrl* + ← or Ctrl* + ↑ to jump to the previous slide
61 | - Home to go to the first slide, End to go to the last
62 | - Ctrl* + G to jump to an arbitrary slide (by slide number or identifier)
63 | - Ctrl* + H to see thumbnails of the slides and jump to one of them (really slow in every browser except Safari)
64 |
65 |
* Ctrl or Shift actually. Only Shift works in Opera.
66 |
69 |
Features
70 |
71 | - IDs are dynamically assigned by JavaScript…
72 | - …but you can also assign your own, bringing the best of both worlds
73 | - Incremental display of slide contents (just add
class="delayed")
74 | - Slide scaling based on window size (size everything you want to be scalable in ems)
75 | - Document.title changing according to slide title (fetched either from the
title attribute or the slide's heading)
76 |
77 |
80 |
Drawbacks
81 |
82 | - Only supports Firefox 3.6+, the latest Chrome/Safari or Opera 10.60+. Why?
83 |
84 | - More lightweight
85 | - Easier to understand code
86 | - It's a presentation, so the environment is controlled anyway
87 |
88 |
89 | - No mouse click to advance to the next slide. I consider it annoying.
90 |
91 |