text-shadow demo

rachelandrew · rachelandrew · commit 819b66555e33 · 2021-02-12T15:57:15.000Z
diff --git a/howto/text-shadow.html b/howto/text-shadow.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Solutions: How to add a shadow to text</title>
+    <link rel="stylesheet" href="styles.css">
+    <style>
+        .wrapper {
+            height: 150px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        h1 {
+            font-size: 2em;
+        }
+    </style>
+
+    <style class="editable">
+        h1 {
+            color: royalblue;
+            text-shadow: 0px 4px 2px rgba(46,91,173,0.6);
+        }
+
+    </style>
+</head>
+
+<body>
+    <section class="preview">
+        <div class="wrapper">
+          <h1>Adding a shadow to text</h1>
+        </div>
+    </section>
+
+    <textarea class="playable playable-css" style="height: 100px;">
+h1 {
+    color: royalblue;
+    text-shadow: 0px 4px 2px rgba(46,91,173,0.6);
+}
+    </textarea>
+
+    <textarea class="playable playable-html" style="height: 100px;">
+<div class="wrapper">
+    <h1>Adding a shadow to text</h1>
+</div>            
+    </textarea>
+
+    <!-- leave everything below here alone -->
+    <div class="playable-buttons">
+        <input id="reset" type="button" value="Reset">
+    </div>
+</body>
+<script src="playable.js"></script>
+
+</html>
