kjodle/CSS-Tricks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added spoiler trick

Browse Source
This commit is contained in:
kjodle 2017-06-05 20:01:36 -04:00
parent fea8af0140
commit 4cee7a57fb
4 changed files with 91 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/spoiler.css Normal file
View File

@ -0,0 +1,10 @@
/* Spoiler */
.spoiler {
color: #fff;
border: dotted 1px #f00;
}
.spoiler:hover {
color: #000;
border: dotted 1px #bbb;
}

29
css/styles.css
View File

@ -1,5 +1,16 @@
/* Page Styles */ /* Page Styles */
* {box-sizing: content-box;}
code {
padding: 0;
margin: 0;
}
pre {
padding: 0;
margin: 0;
}
#container { #container {
width: 80%; width: 80%;
max-width: 800px; max-width: 800px;
@ -9,17 +20,7 @@
box-shadow: 0 0 10px #bbb; box-shadow: 0 0 10px #bbb;
} }
/* Tricks and Techniques */ pre {
/*************************/ background: #eee;
padding: 1em;
/* Spoiler */ }
.spoiler {
color: #fff;
border: dotted 1px #f00;
}
.spoiler:hover {
color: #000;
border: dotted 1px #bbb;
}

19
index.htm
View File

@ -30,22 +30,9 @@
<h1>CSS Tricks</h1> <h1>CSS Tricks</h1>
<p>These are just tricks and techniques I've used in various places. I believe that most of them are CSS3 compliant.</p> <p>These are just tricks and techniques I've used in various places. I believe that most of them are CSS3 compliant.</p>
<h2>Spoiler</h2> <ul>
<p>Here is a way to hide text from visitors until they hover over it.</p> <li><a href="spoiler.htm">Spoiler</a> &mdash; Hide text from visitors until they hover over it.</li>
<p>Here is the CSS:</p> </ul>
<code><pre>
.spoiler {
color: #fff;
border: dotted 1px #f00;
}
.spoiler:hover {
color: #000;
border: dotted 1px #bbb;
}
</pre></code>
<p>And here's how it works in real life:</p>
<p>Who did it? <span class="spoiler">The butler did it.</span></p>
</div><!-- end "container" --> </div><!-- end "container" -->
</body> </body>

63
spoiler.htm Normal file
View File

@ -0,0 +1,63 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Tricks</title>
<meta name="author" content="Kenneth John Odle">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" media="screen" href="css/styles.css">
<link rel="stylesheet" media="screen" href="css/spoiler.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="css/mobile.css">
<!--
<link rel="stylesheet" media="print" href="css/print.css?v=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
-->
</head>
<body>
<div id="container">
<h1>Spoiler</h1>
<p>Here is a way to hide text from visitors until they hover over it.</p>
<h2>Here is the CSS:</h2>
<pre><code>
.spoiler {
color: #fff;
border: dotted 1px #f00;
}
.spoiler:hover {
color: #000;
border: dotted 1px #bbb;
}
</code></pre>
<h2>And here is the HTML:</h2>
<pre><code>
&lt;p&gt;Who did it? &lt;span class="spoiler"&gt;The butler did it.&lt;/span&gt;&lt;/p&gt;
</code></pre>
<h2>Example</h2>
<p>And here's how it works in real life:</p>
<p>Who did it? <span class="spoiler">The butler did it.</span></p>
<p><a href="index.htm">Back to Index</a></p>
</div><!-- end "container" -->
</body>
</html>