From 63585c88b1c225f099543f4a73e4617be437d068 Mon Sep 17 00:00:00 2001 From: kjodle Date: Sun, 9 Apr 2017 12:16:22 -0400 Subject: [PATCH] Initial commit --- css/mobile.css | 5 +++++ css/styles.css | 25 ++++++++++++++++++++++++ index.htm | 53 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 83 insertions(+) create mode 100644 css/mobile.css create mode 100644 css/styles.css create mode 100644 index.htm diff --git a/css/mobile.css b/css/mobile.css new file mode 100644 index 0000000..8b1de9a --- /dev/null +++ b/css/mobile.css @@ -0,0 +1,5 @@ +#container { + width: 100%; + margin: 0; + padding: 0.5em; + } diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..3ef3a90 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,25 @@ +/* Page Styles */ + +#container { + width: 80%; + max-width: 800px; + min-width: 600px; + margin: 0 auto; + padding: 1em; + box-shadow: 0 0 10px #bbb; + } + +/* Tricks and Techniques */ +/*************************/ + +/* Spoiler */ + +.spoiler { + color: #fff; + border: dotted 1px #f00; + } +.spoiler:hover { + color: #000; + border: dotted 1px #bbb; + } + diff --git a/index.htm b/index.htm new file mode 100644 index 0000000..2d40a16 --- /dev/null +++ b/index.htm @@ -0,0 +1,53 @@ + + + + + CSS Tricks + + + + + + + + + + + + + + + + +
+ +

CSS Tricks

+

These are just tricks and techniques I've used in various places. I believe that most of them are CSS3 compliant.

+ +

Spoiler

+

Here is a way to hide text from visitors until they hover over it.

+

Here is the CSS:

+
+.spoiler {
+	color: #fff;
+	border: dotted 1px #f00;
+	}
+.spoiler:hover {
+	color: #000;
+	border: dotted 1px #bbb;
+	}
+
 + +

And here's how it works in real life:

+

Who did it? The butler did it.

+ +
+ + +