Skip to content

Commit d10d429

Browse files
jessicarushjessicarush
committed
Add: gradient text and border example
1 parent 4f6195f commit d10d429

File tree

5 files changed

+85
-50
lines changed

5 files changed

+85
-50
lines changed

‎css_at_rules.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# CSS @rules
2+
3+
<https://css-tricks.com/the-at-rules-of-css/>

‎css_gradient_border_tests/base.css‎

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
--minor-font: 'Open Sans', sans-serif;
1111
--heading-color: rgba(255, 255, 255, .9);
1212
--main-color: rgba(50, 50, 60, 1);
13+
--emphasis-color: rgb(127,215,212);
1314
}
1415

1516

@@ -39,6 +40,43 @@ html {
3940

4041
/* LINKS & BUTTONS -------------------------------------------------------- */
4142

43+
.grad-btn:link,
44+
.grad-btn:visited {
45+
display: inline-block;
46+
font-family: var(--main-font);
47+
font-size: .75rem;
48+
font-style: normal;
49+
font-weight: 500;
50+
letter-spacing: .25em;
51+
text-decoration: none;
52+
text-transform: uppercase;
53+
color: #fff;
54+
border: solid 1px #fff;
55+
margin: 0 35px 35px 0;
56+
padding: 9px 40px;
57+
text-align: center;
58+
}
59+
60+
.grad-btn:hover,
61+
.grad-btn:active {
62+
-moz-border-image: -moz-linear-gradient(to right, var(--emphasis-color), #7f6dd4);
63+
-webkit-border-image: -webkit-linear-gradient(to right, var(--emphasis-color), #7f6dd4);
64+
border-image: linear-gradient(to right, var(--emphasis-color), #7f6dd4);
65+
border-image-slice: 1;
66+
color: var(--emphasis-color);
67+
}
68+
69+
@supports (background-clip: text) or (-webkit-background-clip: text) {
70+
.grad-btn:hover,
71+
.grad-btn:active {
72+
background-image: linear-gradient(to right, var(--emphasis-color), #7f6dd4);
73+
-webkit-background-clip: text;
74+
background-clip: text;
75+
color: transparent;
76+
}
77+
}
78+
79+
4280
/* LAYOUT ----------------------------------------------------------------- */
4381

4482
/* COMPONENTS ------------------------------------------------------------- */
@@ -198,29 +236,6 @@ html {
198236
}
199237

200238

201-
.percent-ring__container {
202-
width: 55px;
203-
height: 55px;
204-
background: rgba(255, 255, 0, .2);
205-
}
206-
207-
.percent-ring {
208-
display: block;
209-
}
210-
211-
.percent-ring__path {
212-
stroke: rgb(106, 255, 161);
213-
fill: none;
214-
stroke-width: 2;
215-
stroke-linecap: round;
216-
animation: progress .5s ease-out forwards;
217-
}
218-
219-
@keyframes progress {
220-
0% {
221-
stroke-dasharray: 0 100;
222-
}
223-
}
224239

225240

226241
/* COSMETIC --------------------------------------------------------------- */

‎css_gradient_border_tests/index.html‎

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<body>
1212

1313
<header>
14-
<h1 class="primary-heading">CSS Gradient Demo</h1>
14+
<h1 class="primary-heading">CSS Gradient Border examples</h1>
1515
<nav></nav>
1616
</header>
1717

@@ -39,28 +39,7 @@ <h1 class="primary-heading">CSS Gradient Demo</h1>
3939
</div>
4040
</div>
4141

42-
<div class="percent-ring__container">
43-
<svg viewBox="0 0 33.831 33.831" class="percent-ring">
44-
<path id="percent-ring" class="percent-ring__path" stroke-dasharray="75, 100" d="M16.9155 1
45-
a 15.9155 15.9155 0 0 1 0 31.831
46-
a 15.9155 15.9155 0 0 1 0 -31.831" />
47-
</svg>
48-
</div>
49-
50-
<button id="test-percent-ring">test</button>
51-
52-
<script type="text/javascript" charset="utf-8">
53-
document.addEventListener('DOMContentLoaded', function () {
54-
let btn = document.getElementById('test-percent-ring');
55-
btn.addEventListener('click', function (e) {
56-
e.preventDefault();
57-
console.log('hello');
58-
let percentRing = document.getElementById('percent-ring');
59-
percentRing.style.strokeDasharray = '25, 100';
60-
61-
});
62-
});
63-
</script>
42+
<a class="grad-btn" href="">Get started</a>
6443

6544
</main>
6645

‎css_gradients/base.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,43 @@ code {
4444

4545
/* LINKS & BUTTONS -------------------------------------------------------- */
4646

47+
.gradient-btn {
48+
display: inline-block;
49+
font-family: var(--main-font);
50+
font-size: .85rem;
51+
font-style: normal;
52+
font-weight: 500;
53+
letter-spacing: .25em;
54+
text-decoration: none;
55+
text-transform: uppercase;
56+
color: #666;
57+
border: solid 1px #666;
58+
margin: 0 35px 35px 0;
59+
padding: 9px 40px;
60+
text-align: center;
61+
transition: color .3s;
62+
}
63+
64+
.gradient-btn:hover {
65+
-moz-border-image: -moz-linear-gradient(to right, var(--emphasis-color), #7f6dd4);
66+
-webkit-border-image: -webkit-linear-gradient(to right, var(--emphasis-color), #7f6dd4);
67+
border-image: linear-gradient(to right, var(--emphasis-color), #7f6dd4);
68+
border-image-slice: 1;
69+
color: var(--emphasis-color);
70+
}
71+
72+
@supports (background-clip: text) or (-webkit-background-clip: text) {
73+
.gradient-btn {
74+
background-image: linear-gradient(to right, var(--emphasis-color), #7f6dd4);
75+
-webkit-background-clip: text;
76+
background-clip: text;
77+
}
78+
79+
.gradient-btn:hover {
80+
color: rgba(102,102,102,.0);
81+
}
82+
}
83+
4784
/* LAYOUT ----------------------------------------------------------------- */
4885

4986
.centered-container {

‎css_gradients/index.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ <h2 class="primary-heading">stop position</h2>
5858

5959

6060
<h2 class="primary-heading">multiple gradients</h2>
61-
<p>You can layer up gradients that have transparancy in their rgba values. for example:</p>
61+
<p>You can layer up gradients that have transparency in their rgba values. for example:</p>
6262
<ul>
6363
<li><code>background:<br>
6464
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>
8181
</ul>
8282

8383
<div class="box fancy-repeat-conic-g"></div>
84-
85-
86-
84+
666
85+
<h2 class="primary-heading">Gradients borders and text</h2>
86+
<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>
87+
<a class="gradient-btn" href="">Hover me</a>
8788

8889

8990
</main>

0 commit comments

Comments
 (0)