Add: example code

jessicarush · Jul 8, 2021 · f4f74f3 · f4f74f3
1 parent 5a654cc
commit f4f74f3
Show file tree

Hide file tree

Showing 3 changed files with 142 additions and 12 deletions.
diff --git a/css_clip-path/index.html b/css_clip-path/index.html
@@ -17,11 +17,11 @@ <h1 class="primary-heading">
     <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path">see MDN</a><br>
     <a href="https://css-tricks.com/masking-vs-clipping-use/">see css-tricks Masking vs. Clipping</a><br>
     <a href="https://24ways.org/2018/clip-paths-know-no-bounds/">see 24ways Clip Paths Know No Bounds</a>
-    <p><code>clip-path: circle(80%);</code></p>
-    <img class="clip-circle" src="img/clouds.jpg" alt="clouds" />
     <p><code>clip-path: circle(50% at 200px 0);</code></p>
-    <img class="clip-poly" src="img/clouds.jpg" alt="clouds" />
+    <img class="clip-circle" src="img/clouds.jpg" alt="clouds" />
     <p><code>clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);</code></p>
+    <img class="clip-poly" src="img/clouds.jpg" alt="clouds" />
+    <p><code>clip-path: inset(350px 200px 200px 200px);</code></p>
     <img class="clip-inset" src="img/clouds.jpg" alt="clouds" />
   </header>
 </body>

diff --git a/css_gradient_test/base.css b/css_gradient_test/base.css
@@ -43,15 +43,6 @@ html {
 
 /* COMPONENTS ------------------------------------------------------------- */
 
-/* .grad-bar {
-  background: rgba(255,255,255,.5);
-  padding: 25px;
-  width: 380px;
-  border-radius: 10px;
-  border-bottom: solid 5px;
-  border-image-slice: 1;
-  border-image-source: linear-gradient(to left, tomato, cornsilk);
-} */
 
 .grad-bar {
   background: rgba(255,255,255,.5);
@@ -70,6 +61,8 @@ html {
   background: linear-gradient(to left, tomato, cornsilk);
   width: 100%;
   border-radius: 10px;
+  -moz-clip-path: inset(70% 0 0 0);
+  -webkit-clip-path: inset(70% 0 0 0);
   clip-path: inset(70% 0 0 0);
 }
 
@@ -103,6 +96,106 @@ html {
     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 ---------------------------------------------------------------- */

diff --git a/css_gradient_test/index.html b/css_gradient_test/index.html
@@ -24,6 +24,43 @@ <h1 class="primary-heading">CSS Gradient Demo</h1>
     <div class="outer-ring"></div>
     <div class="inner-ring"></div>
 
+    <div class="flow-container">
+      <div class="flow-line flow-line--left"></div>
+      <div class="flow-line flow-line--right"></div>
+
+      <div class="flow-ball-clip-wrapper">
+        <div class="flow-ball-animation-wrapper">
+          <div class="flow-ball"></div>
+        </div>
+      </div>
+    </div>
+
+    <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
+        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() {
+        let btn = document.getElementById('test-percent-ring');
+        btn.addEventListener('click', function(e) {
+          e.preventDefault();
+          console.log('hello');
+          let percentRing = document.getElementById('percent-ring');
+          percentRing.style.strokeDasharray = '25, 100';
+
+        });
+      });
+    </script>
+
   </main>
 
   <footer>