Initial commit

jessicarush · Apr 19, 2022 · 2c447ec · 2c447ec
1 parent 93408d4
commit 2c447ec
Show file tree

Hide file tree

Showing 5 changed files with 218 additions and 15 deletions.
diff --git a/css_background-clip/base.css b/css_background-clip/base.css
@@ -0,0 +1,65 @@
+@charset "UTF-8";
+
+
+
+/* VARIABLES -------------------------------------------------------------- */
+
+:root {
+  --heading-font: 'Open Sans', sans-serif;
+  --main-font: 'Open Sans', sans-serif;
+  --minor-font: 'Open Sans', sans-serif;
+  --heading-color: rgba(0,0,50,.9);
+  --main-color: rgba(70,70,90,.9);
+  --minor-color: rgb(190,190,200);
+  --emphasis-color: rgb(27,211,165);
+}
+
+
+
+/* DEFAULTS --------------------------------------------------------------- */
+
+html {
+  color: var(--main-color);
+  font-family: var(--main-font);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.7em;
+}
+
+code {
+  line-height: 1.5em;
+  background: lightcyan;
+}
+
+/* TYPOGRAPHY ------------------------------------------------------------- */
+
+.background-clip {
+  background: blue url('img/watercolor.jpg');
+  background-clip: text;
+  background-size: cover;
+  -webkit-background-clip: text;
+  color: transparent;
+  font-family: var(--heading-font);
+  font-size: calc(10vw + 24px);
+  font-weight: 700;
+  line-height: 1.26em;
+  margin: 0;
+}
+
+/* LINKS & BUTTONS -------------------------------------------------------- */
+
+/* LAYOUT ----------------------------------------------------------------- */
+
+/* COMPONENTS ------------------------------------------------------------- */
+
+/* COSMETIC --------------------------------------------------------------- */
+
+/* UTILITY ---------------------------------------------------------------- */
+
+.u-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* STATE ------------------------------------------------------------------ */
diff --git a/css_background-clip/img/watercolor.jpg b/css_background-clip/img/watercolor.jpg
diff --git a/css_background-clip/index.html b/css_background-clip/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>CSS clip-path</title>
+  <link href="base.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
+</head>
+
+<body>
+
+  <header class="u-center">
+    <h1 class="background-clip">This is my awesome heading.</h1>
+  </header>
+</body>
+</html>
diff --git a/css_gradient_test/base.css → css_gradient_border_tests/base.css b/css_gradient_test/base.css → css_gradient_border_tests/base.css
@@ -8,16 +8,16 @@
   --heading-font: 'Open Sans', sans-serif;
   --main-font: 'Open Sans', sans-serif;
   --minor-font: 'Open Sans', sans-serif;
-  --heading-color: rgba(255,255,255,.9);
-  --main-color: rgba(50,50,60,1);
+  --heading-color: rgba(255, 255, 255, .9);
+  --main-color: rgba(50, 50, 60, 1);
 }
 
 
 
 /* DEFAULTS --------------------------------------------------------------- */
 
 html {
-  background: rgb(54,53,75);
+  background: rgb(54, 53, 75);
   color: var(--main-color);
   font-family: var(--main-font);
   font-size: 16px;
@@ -43,6 +43,20 @@ html {
 
 /* COMPONENTS ------------------------------------------------------------- */
 
+.grad-border {
+  border: solid 5px transparent;
+  border-radius: 10px;
+  background-image: linear-gradient(white, white),
+    linear-gradient(315deg, #833ab4, #fd1d1d 50%, #fcb045);
+  background-origin: border-box;
+  background-clip: content-box, border-box;
+  padding: 0;
+  width: 380px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* .grad-bar {
   background: rgba(255,255,255,.5);
   padding: 25px;
@@ -54,7 +68,7 @@ html {
 } */
 
 .grad-bar {
-  background: rgba(255,255,255,.5);
+  background: rgba(255, 255, 255, .5);
   padding: 25px;
   width: 380px;
   border-radius: 10px;
@@ -100,12 +114,117 @@ html {
 }
 
 @keyframes rotate {
-    0% {transform:rotate(0deg);}
-    100% {transform:rotate(360deg);}
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+
+.flow-container {
+  display: grid;
+  grid-template-columns: 1fr 50px 1fr;
+  grid-template-rows: auto;
+  width: 400px;
+  padding-top: 100px;
+  overflow-x: hidden;
+}
+
+.flow-line {
+  background: aquamarine;
+  width: 100%;
+  height: 2px;
+}
+
+.flow-line--left {
+  grid-column-start: 1;
+  grid-row-start: 1;
 }
 
+.flow-line--right {
+  grid-column-start: 3;
+  grid-row-start: 1;
+}
+
+.flow-ball-clip-wrapper {
+  /* background: rgba(255,0,0,.2); */
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 50px 0 50px;
+  grid-column-start: 1;
+  grid-column-end: span 3;
+  grid-row-start: 1;
+  position: relative;
+  top: -3px;
+  clip-path: polygon(0 0,
+      100% 0,
+      100% 100%,
+      calc(50% + 25px) 100%,
+      calc(50% + 25px) 0,
+      calc(50% - 25px) 0,
+      calc(50% - 25px) 100%,
+      0 100%);
+}
+
+.flow-ball-animation-wrapper {
+  width: 100%;
+  /* background: rgba(255,255,0,.2); */
+
+  /*  flow right  */
+  animation-duration: 3s;
+  animation-name: flow-right;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes flow-right {
+  0% {
+    transform: translateX(0%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.flow-ball {
+  width: 8px;
+  height: 8px;
+  background: green;
+  border-radius: 50%;
+}
+
+
+.percent-ring__container {
+  width: 55px;
+  height: 55px;
+  background: rgba(255, 255, 0, .2);
+}
+
+.percent-ring {
+  display: block;
+}
+
+.percent-ring__path {
+  stroke: rgb(106, 255, 161);
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  animation: progress .5s ease-out forwards;
+}
+
+@keyframes progress {
+  0% {
+    stroke-dasharray: 0 100;
+  }
+}
+
+
 /* COSMETIC --------------------------------------------------------------- */
 
 /* UTILITY ---------------------------------------------------------------- */
 
-/* STATE ------------------------------------------------------------------ */
+/* STATE ------------------------------------------------------------------ */
diff --git a/css_gradient_test/index.html → css_gradient_border_tests/index.html b/css_gradient_test/index.html → css_gradient_border_tests/index.html
@@ -17,6 +17,10 @@ <h1 class="primary-heading">CSS Gradient Demo</h1>
 
   <main>
 
+    <div class="grad-border">
+      This is a div with rounded gradient border.
+    </div>
+
     <div class="grad-bar">
       <p> See the CSS file to see how this works.</p>
     </div>
@@ -37,21 +41,18 @@ <h1 class="primary-heading">CSS Gradient Demo</h1>
 
     <div class="percent-ring__container">
       <svg viewBox="0 0 33.831 33.831" class="percent-ring">
-        <path id="percent-ring" class="percent-ring__path"
-        stroke-dasharray="75, 100"
-        d="M16.9155 1
+        <path id="percent-ring" class="percent-ring__path" stroke-dasharray="75, 100" d="M16.9155 1
         a 15.9155 15.9155 0 0 1 0 31.831
-        a 15.9155 15.9155 0 0 1 0 -31.831"
-        />
+        a 15.9155 15.9155 0 0 1 0 -31.831" />
       </svg>
     </div>
 
     <button id="test-percent-ring">test</button>
 
     <script type="text/javascript" charset="utf-8">
-      document.addEventListener('DOMContentLoaded', function() {
+      document.addEventListener('DOMContentLoaded', function () {
         let btn = document.getElementById('test-percent-ring');
-        btn.addEventListener('click', function(e) {
+        btn.addEventListener('click', function (e) {
           e.preventDefault();
           console.log('hello');
           let percentRing = document.getElementById('percent-ring');
@@ -67,4 +68,5 @@ <h1 class="primary-heading">CSS Gradient Demo</h1>
   </footer>
 
 </body>
-</html>
+
+</html>