chapter 2 - 2.3 examples uploaded

dinanathsj29 · web-flow · commit 88955d68e05a · 2020-01-19T15:55:45.000+05:30
diff --git a/_examples-css-variables/2.3-css-var-demo-transform-transition.html b/_examples-css-variables/2.3-css-var-demo-transform-transition.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>2.3-css-var-demo-transform-transition.html</title>
+
+    <link rel="stylesheet" href="2.3-style-css-var-demo-transform-transition.css">
+  
+  </head>
+
+  <body>
+    
+    <div class="container">
+
+      <h1 class="top-heading-text" id="topHeadingText">2. CSS Variable Demo</h1>
+      
+      <h2 class="subheading-text" id="subHeadingText">2.3 - Hover effect with Fallback support</h2>
+
+      <!-- <article class="info-text">
+        - Any CSS variables defined in the stylesheet can be `accessed` by using `var()` function <br/>
+        - The CSS `var()` function can be used to insert the value of a custom property or a CSS variable <br/>
+        - The var() function cannot be used in any property names, selectors or anything else besides property values setting or providing fallback value support<br/> <br/>
+      </article> -->
+
+      <nav class="button-container">
+        <div class="button btn-default">btn-default </div>
+        <div class="button btn-primary">btn-primary </div>
+        <div class="button btn-secondary">btn-secondary </div>
+        <div class="button btn-success">btn-success </div>
+        <div class="button btn-danger">btn-danger </div>
+        <div class="button btn-info">btn-info </div>
+        <div class="button btn-warning">btn-warning </div>
+        <div class="button btn-light">btn-light </div>
+        <div class="button btn-dark">btn-dark </div>
+      </nav>
+
+    </div>
+  
+  </body>
+
+</html>
diff --git a/_examples-css-variables/2.3-style-css-var-demo-transform-transition.css b/_examples-css-variables/2.3-style-css-var-demo-transform-transition.css
@@ -0,0 +1,62 @@
+:root {
+  --main-font-family: Verdana; 
+  --animate-translatex-right: translateX(50px);
+}
+
+body {
+  font-family: var(--main-font-family);
+}
+
+.button {
+  color: var(--main-theme-color, #000000); /* black is fallback color */
+  border: 2px solid var(--main-theme-color, #000000);
+
+  box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.3); 
+  width:200px; padding: 5px; text-align: center; border-radius: 5px; cursor: pointer; margin-bottom: 10px; transition: all 0.25s ease-in-out;
+}
+
+.button:hover {
+  color: #ffffff;
+  border: 2px solid var(--main-theme-color, #000000); 
+  background-color: var(--main-theme-color, #000000);
+  box-shadow: 0px 0px 7px 2px var(--main-theme-color, #000000);
+  transform: var(--animate-translatex-right);
+  
+  transition: all 0.35s ease-in-out;
+}
+
+.btn-default {
+  /* no --main-theme-color defined for default button, so it will have theme color as fallback black color */
+}
+
+.btn-primary{
+  --main-theme-color: #007bff;
+}
+
+.btn-secondary{
+  --main-theme-color: #6c757d;
+}
+
+.btn-danger{
+  --main-theme-color: #dc3545;
+}
+
+.btn-success{
+  --main-theme-color: #28a745;
+}
+
+.btn-info{
+  --main-theme-color: #17a2b8;
+}
+
+.btn-warning{
+  --main-theme-color: #ffc107;
+}
+
+.btn-light{
+  --main-theme-color: #dedede
+}
+
+.btn-dark{
+  --main-theme-color: #343a40;
+}
