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

Initial commit

Browse Source
This commit is contained in:
kjodle 2017-04-09 12:16:22 -04:00
commit 63585c88b1
3 changed files with 83 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/mobile.css Normal file
View File

@ -0,0 +1,5 @@
#container {
width: 100%;
margin: 0;
padding: 0.5em;
}

25
css/styles.css Normal file
View File

@ -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;
}

53
index.htm Normal file
View File

@ -0,0 +1,53 @@
<!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?v=1.0">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="css/mobile.css?v=1.0">
<!--
<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>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>
<h2>Spoiler</h2>
<p>Here is a way to hide text from visitors until they hover over it.</p>
<p>Here is the CSS:</p>
<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" -->
</body>
</html>