Add: gradient text and border example

jessicarush · Nov 23, 2022 · d10d429 · d10d429
1 parent 4f6195f
commit d10d429
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 50 deletions.
diff --git a/css_at_rules.md b/css_at_rules.md
@@ -0,0 +1,3 @@
+# CSS @rules
+
+<https://css-tricks.com/the-at-rules-of-css/>
diff --git a/css_gradient_border_tests/base.css b/css_gradient_border_tests/base.css
@@ -10,6 +10,7 @@
   --minor-font: 'Open Sans', sans-serif;
   --heading-color: rgba(255, 255, 255, .9);
   --main-color: rgba(50, 50, 60, 1);
+  --emphasis-color: rgb(127,215,212);
 }
 
 
@@ -39,6 +40,43 @@ html {
 
 /* LINKS & BUTTONS -------------------------------------------------------- */
 
+.grad-btn:link,
+.grad-btn:visited {
+  display: inline-block;
+  font-family: var(--main-font);
+  font-size: .75rem;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: .25em;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: #fff;
+  border: solid 1px #fff;
+  margin: 0 35px 35px 0;
+  padding: 9px 40px;
+  text-align: center;
+}
+
+.grad-btn:hover,
+.grad-btn:active {
+  -moz-border-image: -moz-linear-gradient(to right, var(--emphasis-color), #7f6dd4);
+  -webkit-border-image: -webkit-linear-gradient(to right, var(--emphasis-color), #7f6dd4);
+  border-image: linear-gradient(to right, var(--emphasis-color), #7f6dd4);
+  border-image-slice: 1;
+  color: var(--emphasis-color);
+}
+
+@supports (background-clip: text) or (-webkit-background-clip: text) {
+  .grad-btn:hover,
+  .grad-btn:active {
+    background-image: linear-gradient(to right, var(--emphasis-color), #7f6dd4);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+}
+
+
 /* LAYOUT ----------------------------------------------------------------- */
 
 /* COMPONENTS ------------------------------------------------------------- */
@@ -198,29 +236,6 @@ html {
 }
 
 
-.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 --------------------------------------------------------------- */

diff --git a/css_gradient_border_tests/index.html b/css_gradient_border_tests/index.html
@@ -11,7 +11,7 @@
 <body>
 
   <header>
-    <h1 class="primary-heading">CSS Gradient Demo</h1>
+    <h1 class="primary-heading">CSS Gradient Border examples</h1>
     <nav></nav>
   </header>
 
@@ -39,28 +39,7 @@ <h1 class="primary-heading">CSS Gradient Demo</h1>
       </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>
+    <a class="grad-btn" href="">Get started</a>
 
   </main>
 

diff --git a/css_gradients/base.css b/css_gradients/base.css
@@ -44,6 +44,43 @@ code {
 
 /* LINKS & BUTTONS -------------------------------------------------------- */
 
+.gradient-btn {
+  display: inline-block;
+  font-family: var(--main-font);
+  font-size: .85rem;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: .25em;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: #666;
+  border: solid 1px #666;
+  margin: 0 35px 35px 0;
+  padding: 9px 40px;
+  text-align: center;
+  transition: color .3s;
+}
+
+.gradient-btn:hover {
+  -moz-border-image: -moz-linear-gradient(to right, var(--emphasis-color), #7f6dd4);
+  -webkit-border-image: -webkit-linear-gradient(to right, var(--emphasis-color), #7f6dd4);
+  border-image: linear-gradient(to right, var(--emphasis-color), #7f6dd4);
+  border-image-slice: 1;
+  color: var(--emphasis-color);
+}
+
+@supports (background-clip: text) or (-webkit-background-clip: text) {
+  .gradient-btn {
+    background-image: linear-gradient(to right, var(--emphasis-color), #7f6dd4);
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+
+  .gradient-btn:hover {
+    color: rgba(102,102,102,.0);
+  }
+}
+
 /* LAYOUT ----------------------------------------------------------------- */
 
 .centered-container {

diff --git a/css_gradients/index.html b/css_gradients/index.html
@@ -58,7 +58,7 @@ <h2 class="primary-heading">stop position</h2>
 
 
     <h2 class="primary-heading">multiple gradients</h2>
-    <p>You can layer up gradients that have transparancy in their rgba values. for example:</p>
+    <p>You can layer up gradients that have transparency in their rgba values. for example:</p>
     <ul>
       <li><code>background:<br>
           linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0) 95%),</br>
@@ -81,9 +81,10 @@ <h2 class="primary-heading">center point</h2>
     </ul>
 
     <div class="box fancy-repeat-conic-g"></div>
-
-
-
+666
+    <h2 class="primary-heading">Gradients borders and text</h2>
+    <p>This uses <code>border-image</code> and <code>border-image-slice</code> to make the border gradient and <code>background-image</code> and <code>background-clip: text</code> to make the gradient text. I acn transition the text but I can't transition the border.</p>
+    <a class="gradient-btn" href="">Hover me</a>
 
 
   </main>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# CSS @rules

		<https://css-tricks.com/the-at-rules-of-css/>