New web

Web pattern library, style and technical reference

Content

Embelishments

Foil headline effect

When a 'space' is needed before, or after, the highlighted/foiled word, make sure the 'space' is outside the <span>.

Foil headline

<h1 class="headline-80px"><span class="foil">Foil</span> effect</h1>

Example CSS

.foil, a:hover .hover-foil {
  color:#1090D5;
  background-image:-webkit-linear-gradient(-20deg,rgba(53,176,230,0) 20%,rgba(53,176,230,1) 50%,rgba(53,176,230,0.8) 50%,rgba(53,176,230,0) 80%), -webkit-linear-gradient(top,#35B0E6,#1090D5);
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  pointer-events:none;
  position:relative;
  display:inline-block;
}

.foil {
  -webkit-background-size:300px 100%, 100% 100%;
  -webkit-animation:foil 3s infinite;
  margin-left:-300px;
  margin-right:-300px;
  padding-left:300px;
  padding-right:300px;
}

a:hover .hover-foil {
  -webkit-background-size:100px 100%, 100% 100%;
  -webkit-animation:foil 2s infinite;
  margin-left:-100px;
  margin-right:-100px;
  padding-left:100px;
  padding-right:100px;
}

@-webkit-keyframes foil {
  0% {background-position:top left;}
  75%, 100% {background-position:top right;}
}

@keyframes foil {
  0% {background-position:top left;}
  75%, 100% {background-position:top right;}
}

Foil hovers

When a 'space' is needed before, or after, the highlighted/foiled word, make sure the 'space' is outside the <span>.

Hover foil effect

<h1><a href="#"><span class="hover-foil">Foil</span> effect</a></h1>