Sifa text-stroke

Sifa text-stroke huweka rangi na unene wa mstari wa nje wa herufi za maandishi au mstari wake wa nje. Kama thamani katika sifa inahitaji kuwekewa unene wa mstari wa nje na kupitia nafasi rangi ya mstari wa nje.

Syntax

csskichagua {
  text-stroke: unene wa mstari wa nje na rangi yake;
}

Mfano wa msingi

Mstari wa nje rahisi wa maandishi:

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;
}

Результат:

Mstari wa nje pekee

Sasa tufanye rangi ya maandishi ifanane na rangi ya mandharinyuma (kwa upande wetu nyeupe). Kama matokeo, mstari wa nje utabaki pekee:

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;
}

Результат:

Mstari wa nje wenye gradient

Tutengeneze mstari wa nje wenye gradient kwa kutumia sifa 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;
}

Результат:

Mstari wa nje mwingi

Athari ya mstari wa nje mara mbili kwa kutumia 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;
}

Результат:

Mstari wa nje wenye uhuishaji

Ongeza uhuishaji wa mabadiliko ya mstari wa nje:

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; }
}

Результат:

Angalia pia