Site Search:

How to create glowing golden text in blogger post

Back>

This example demonstrate stylish golden text glowing with mouse over in blogger post.

Here is the example:

Example

<div class="stage">
<br />
<br />
<section class="a-center">

    <h1 class="golden-text h-alpha">
Binary Search</h1>
<br />
    <h2 class="golden-text h-beta">
int i = rank(key);</h2>
<br />
    <h2 class="golden-text">
recursive vs iterative</h2>
</section>
</div>
<br />
<style>
.stage * {
  overflow: visible;
  position: relative;
  box-sizing: border-box;
}

.golden-text {
  background: -webkit-linear-gradient(-80deg, #966d2d, #ecbf40, #fae56b, #ecbf40, #966d2d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  transition: background 0.25s;
}
.golden-text:hover {
  background: -webkit-linear-gradient(-80deg, #966d2d, #ecbf40, #fae56b, #ecbf40, #ecbf40, #966d2d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.a-center {
  text-align: center;
}

.h-alpha {
  font-size: 6rem;
}

.h-beta {
  font-size: 3rem;
}

.stage h1, h2, h3 {
  margin: 0;
  color: #22292c;
  line-height: 1.3;
}


::selection {
  background: #ecbf40;
}

.stage a {
  text-decoration: none;
  color: #d31e48;
  box-shadow: inset 0 -6px 0 rgba(211, 30, 72, 0.25);
}
.stage a:hover {
  box-shadow: inset 0 -1rem 0 rgba(211, 30, 72, 0.125);
}

</style>