25 of 313 menu

Хосияти text-stroke

Хосияти text-stroke ранг ва ғафсии контури рамзҳои матн ё контурашро муайян мекунад. Ҳамчун қимат ба хосият бояд ғафсии контур ва баъд аз фосила рангҳои контурро дод.

Синтаксис

интихобкунанда { text-stroke: ғафсии контур ва рангҳои он; }

Намунаи асосӣ

Контури оддии матн:

<div class="stroked-text"> Lorem ipsum dolor sit amet </div> .stroked-text { font-size: 48px; font-weight: bold; -webkit-text-stroke: 2px red; text-stroke: 2px red; }

:

Фақат контур

Акнун биёед рангҳои матнро бо рангҳои замина (дар ҳолати мо сафед) мувофиқ кунем. Дар натиҷа фақат контур боқӣ мемонад:

<div class="stroked-text"> Lorem ipsum dolor sit amet </div> .stroked-text { font-size: 48px; font-weight: bold; color: white; -webkit-text-stroke: 2px black; text-stroke: 2px black; }

:

Контур бо градиент

Биёед контури градиентӣ созем бо ёрии хосияти background-clip:

<div class="gradient-stroke"> Lorem ipsum dolor sit amet </div> .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; }

:

Контури якчандгона

Таъсири контури дукарата бо ёрии text-shadow:

<div class="double-stroke"> Lorem ipsum dolor sit amet </div> .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; }

:

Контури анимиронӣ

Аниматсияи тағйирёбии контурро илова мекунем:

<div class="animated-stroke"> Lorem ipsum dolor sit amet </div> .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; } }

:

Ҳамчунин бубинед

  • хосияти text-fill-color,
    ки рангҳои пуркунии рамзҳои матнро муайян мекунад
  • хосияти text-stroke-color,
    ки рангҳои контури матнро муайян мекунад
  • хосияти text-stroke-width,
    ки ғафсии контури матнро муайян мекунад
Тоҷикӣ
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Мо барои коркарди сомона, таҳлил ва шахсӣ кардан аз cookie истифода мебарем. Коркарди маълумот мувофиқи Сиёсати махфият сурат мегирад.
ҳамаро қабул кардан танзим кардан рад кардан