Eienskap text-stroke

Die eienskap text-stroke stel die kleur en dikte van die omtrek van tekskarakters of sy omskrywing. As waarde moet die eienskap die dikte van die omskrywing en dan deur 'n spasie die kleur van die omskrywing kry.

Sintaksis

cssselekteerder {
  text-stroke: dikte van omskrywing en sy kleur;
}

Basiese Voorbeeld

Eenvoudige omskrywing van teks:

html<div class="stroked-text">
  Lorem ipsum dolor sit amet
</div>

css.stroked-text {
  font-size: 48px;
  font-weight: bold;
  -webkit-text-stroke: 2px red;
  text-stroke: 2px red;
}

Результат:

Slegs Omskrywing

Laat ons nou die tekskleur laat ooreenstem met die agtergrondkleur (in ons geval wit). As gevolg sal net die omskrywing oorbly:

html<div class="stroked-text">
  Lorem ipsum dolor sit amet
</div>

css.stroked-text {
  font-size: 48px;
  font-weight: bold;
  color: white;
  -webkit-text-stroke: 2px black;
  text-stroke: 2px black;
}

Результат:

Omskrywing met Gradiënt

Laat ons 'n gradiënt-omskrywing skep met behulp van die eienskap background-clip:

html<div class="gradient-stroke">
  Lorem ipsum dolor sit amet
</div>

css.gradient-stroke {
  font-size: 42px;
  font-weight: bold;
  background: linear-gradient(to right, #ff8a00, #e52e71);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px #333;
  text-stroke: 1px #333;
}

Результат:

Veelvuldige Omskrywing

Effek van dubbele omskrywing met behulp van text-shadow:

html<div class="double-stroke">
  Lorem ipsum dolor sit amet
</div>

css.double-stroke {
  font-size: 40px;
  color: white;
  -webkit-text-stroke: 3px #000;
  text-stroke: 3px #000;
  text-shadow: 
    0 0 5px #000,
    0 0 10px #000;
}

Результат:

Geanimeerde Omskrywing

Laat ons animasie byvoeg wat die omskrywing verander:

html<div class="animated-stroke">
  Lorem ipsum dolor sit amet
</div>

css.animated-stroke {
  font-size: 38px;
  color: white;
  -webkit-text-stroke: 1px #ff0000;
  text-stroke: 1px #ff0000;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { -webkit-text-stroke: 1px #ff0000; text-stroke: 1px #ff0000; }
  50% { -webkit-text-stroke: 3px #ff0000; text-stroke: 3px #ff0000; }
  100% { -webkit-text-stroke: 1px #ff0000; text-stroke: 1px #ff0000; }
}

Результат:

Sien Ook