Source

ꯁ꯭ꯠꯔꯦꯠ ꯇꯧꯔꯕꯥ ꯂꯤꯉ꯭ꯛ꯫

CSSꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯅꯦꯁ꯭ꯇꯦꯗ ꯂꯤꯉ꯭ꯛ ꯑꯃꯥ “ꯁ꯭ꯠꯔꯦꯆ” ꯇꯧꯗꯨꯅꯥ HTML ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯅꯠꯠꯔꯒꯥ Bootstrap ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯣꯏꯍꯅꯒꯗꯕꯅꯤ꯫

ꯃꯁꯤꯒꯤ ꯌꯥꯑꯣꯔꯤꯕꯥ ꯕ꯭ꯂꯣꯛ ꯑꯁꯤ ꯄ꯭ꯁꯨꯗꯣ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯥ ꯌꯥꯕꯥ .stretched-linkꯑꯣꯏꯍꯟꯅꯕꯥ ꯂꯤꯉ꯭ꯛ ꯑꯃꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯑꯌꯥꯝꯕꯥ ꯀꯦꯁꯁꯤꯡꯗꯗꯤ, ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯤꯉ꯭ꯛ ꯑꯃꯥ ꯌꯥꯎꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯅꯥ ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯥ ꯌꯥꯏ꯫::afterposition: relative;.stretched-link

ꯀꯥꯔꯗꯁꯤꯡ ꯑꯁꯤ position: relativeꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯂꯩ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯀꯦꯁ ꯑꯁꯤꯗꯥ ꯅꯍꯥꯛꯅꯥ .stretched-linkꯑꯇꯣꯞꯄꯥ HTML ꯍꯣꯡꯗꯣꯀꯄꯥ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯅꯥ ꯀꯥꯔꯗꯇꯥ ꯂꯩꯕꯥ ꯂꯤꯉ꯭ꯛ ꯑꯃꯗꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯁꯥꯐꯅꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯏ꯫

ꯃꯜꯇꯤꯄꯜ ꯂꯤꯉ꯭ꯛ ꯑꯃꯁꯨꯡ ꯇꯦꯞ ꯇꯥꯔꯒꯦꯇꯁꯤꯡ ꯑꯁꯤ ꯁ꯭ꯠꯔꯦꯠ ꯇꯧꯔꯕꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯔꯦꯀꯃꯦꯟꯗ ꯇꯧꯗꯦ꯫ ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯃꯁꯤ ꯃꯊꯧ ꯇꯥꯔꯕꯗꯤ ꯈꯔꯗꯤ positionꯑꯃꯁꯨꯡ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯅꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯕꯥ ꯌꯥꯏ꯫z-index

Card image cap
ꯁ꯭ꯠꯔꯦꯠ ꯇꯧꯔꯕꯥ ꯂꯤꯉ꯭ꯛ ꯂꯩꯕꯥ ꯀꯥꯔꯗ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

ꯃꯦꯗꯤꯌꯥ ꯑꯣꯕꯖꯦꯛꯇꯁꯤꯡꯗꯥ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯂꯩꯇꯦ , ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯂꯤꯉ꯭ꯛ ꯑꯁꯤ ꯃꯦꯗꯤꯌꯥ ꯑꯣꯕꯖꯦꯛꯇꯀꯤ ꯃꯄꯥꯟꯗꯥ ꯆꯦꯅꯕꯥ ꯊꯤꯡꯅꯕꯥ ꯃꯐꯝ ꯑꯁꯤꯗꯥ position: relativeꯍꯥꯄꯆꯤꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫.position-relative

Generic placeholder image
ꯁ꯭ꯠꯔꯦꯠ ꯇꯧꯔꯕꯥ ꯂꯤꯉ꯭ꯛ ꯂꯩꯕꯥ ꯃꯤꯗꯤꯌꯥ꯫

ꯀ꯭ꯔꯁ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯅꯤꯚ ꯂꯤꯕꯦꯔꯣ, ꯏꯟ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯅꯨꯜꯂꯥ꯫ ꯅꯨꯜꯂꯥ ꯚꯦꯜ ꯃꯦꯇꯁ ꯁ꯭ꯀꯦꯂꯦꯔꯤꯁ꯭ꯛ ꯑꯦꯟꯇꯤ ꯁꯣꯂꯤꯁꯤꯇꯨꯗꯤꯟ꯫ ꯀ꯭ꯔꯥꯁ ꯄꯨꯔꯨꯁ ꯑꯣꯗꯤꯑꯣ, ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯏꯟ ꯚꯂꯄꯨꯇꯦꯠ ꯑꯦꯠ, ꯇꯦꯝꯄꯁ ꯚꯤꯚꯦꯔꯥ ꯇꯨꯔꯄꯤꯁ꯫ ꯐꯨꯁ ꯀꯟꯗꯤꯃꯦꯟꯇꯝ ꯅꯟꯛ ꯑꯦꯁꯤ ꯅꯤꯁꯤ ꯚꯂꯄꯨꯇꯦꯠ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ꯫ ꯐꯧꯁꯤꯕꯁꯇꯥ ꯗꯣꯅꯦꯛ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯀꯪꯒ ꯐꯦꯂꯤꯁ꯫

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
<div class="media position-relative">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media with stretched link</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

ꯀꯣꯂꯃꯁꯤꯡ ꯑꯁꯤ position: relativeꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯂꯩ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯀꯣꯂꯃꯁꯤꯡꯅꯥ .stretched-linkꯂꯤꯉ꯭ꯛ ꯑꯃꯗꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯈꯛꯇꯃꯛ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯂꯤꯉ꯭ꯛ ꯑꯃꯥ ꯑꯄꯨꯅꯕꯥ ꯑꯃꯒꯤ ꯃꯊꯛꯇꯥ ꯆꯦꯅꯕꯥ ꯑꯁꯤ ꯀꯣꯂꯝ ꯑꯗꯨꯗꯥ ꯑꯃꯁꯨꯡ ꯔꯣ ꯑꯗꯨꯗꯥ .rowꯃꯊꯧ ꯇꯥꯏ꯫.position-static.position-relative

Generic placeholder image
ꯁ꯭ꯠꯔꯦꯠ ꯇꯧꯔꯕꯥ ꯂꯤꯉ꯭ꯛ ꯂꯩꯕꯥ ꯀꯂꯃꯁꯤꯡ꯫

ꯀ꯭ꯔꯁ ꯁꯤꯠ ꯑꯥꯃꯦꯠ ꯅꯤꯚ ꯂꯤꯕꯦꯔꯣ, ꯏꯟ ꯒ꯭ꯔꯦꯚꯤꯗꯥ ꯅꯨꯜꯂꯥ꯫ ꯅꯨꯜꯂꯥ ꯚꯦꯜ ꯃꯦꯇꯁ ꯁ꯭ꯀꯦꯂꯦꯔꯤꯁ꯭ꯛ ꯑꯦꯟꯇꯤ ꯁꯣꯂꯤꯁꯤꯇꯨꯗꯤꯟ꯫ ꯀ꯭ꯔꯥꯁ ꯄꯨꯔꯨꯁ ꯑꯣꯗꯤꯑꯣ, ꯚꯦꯁ꯭ꯇꯤꯕꯨꯂꯝ ꯏꯟ ꯚꯂꯄꯨꯇꯦꯠ ꯑꯦꯠ, ꯇꯦꯝꯄꯁ ꯚꯤꯚꯦꯔꯥ ꯇꯨꯔꯄꯤꯁ꯫ ꯐꯨꯁ ꯀꯟꯗꯤꯃꯦꯟꯇꯝ ꯅꯟꯛ ꯑꯦꯁꯤ ꯅꯤꯁꯤ ꯚꯂꯄꯨꯇꯦꯠ ꯐ꯭ꯔꯤꯟꯖꯤꯂꯥ꯫ ꯐꯧꯁꯤꯕꯁꯇꯥ ꯗꯣꯅꯦꯛ ꯂꯦꯁꯤꯅꯤꯌꯥ ꯀꯪꯒ ꯐꯦꯂꯤꯁ꯫

ꯃꯐꯝ ꯑꯃꯗꯥ ꯆꯠꯂꯨ꯫
<div class="row no-gutters bg-light position-relative">
  <div class="col-md-6 mb-md-0 p-md-4">
    <img src="..." class="w-100" alt="...">
  </div>
  <div class="col-md-6 position-static p-4 pl-md-0">
    <h5 class="mt-0">Columns with stretched link</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

ꯌꯥꯎꯔꯤꯕꯥ ꯕ꯭ꯂꯣꯛ ꯑꯗꯨ ꯃꯁꯛ ꯈꯪꯗꯣꯀꯄꯥ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯁ꯭ꯠꯔꯦꯠ ꯇꯧꯔꯕꯥ ꯂꯤꯉ꯭ꯛ ꯑꯗꯨꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯥ ꯎꯔꯕꯗꯤ, ꯃꯗꯨꯗꯥ ꯂꯩꯔꯤꯕꯥ ꯕ꯭ꯂꯣꯛ ꯑꯗꯨꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯔꯀꯄꯥ ꯌꯥꯏ꯫ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ CSS ꯄ꯭ꯔꯣꯄꯔꯇꯤꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯕꯨ ꯌꯥꯎꯔꯤꯕꯥ ꯕ꯭ꯂꯣꯛ ꯑꯗꯨ ꯑꯣꯏꯍꯅꯒꯅꯤ:

  • positionꯅꯠꯇꯕꯥ ꯑꯇꯣꯞꯄꯥ ꯚꯦꯜꯌꯨ ꯑꯃꯅꯤ꯫static
  • ꯑꯦ transformꯅꯠꯠꯔꯒꯥ perspectiveꯚꯦꯜꯌꯨ ꯅꯠꯇꯕꯥ ꯑꯇꯩ꯫none
  • ꯅꯠꯔꯒꯥ will-changeꯚꯦꯜꯌꯨ ꯑꯃꯥ꯫transformperspective
  • filterꯅꯠꯇꯕꯥ ꯑꯇꯣꯞꯄꯥ ꯚꯦꯜꯌꯨ ꯑꯃꯥ noneꯅꯠꯠꯔꯒꯥ will-changeꯚꯦꯜꯌꯨ ꯑꯃꯥ filter(ꯐꯥꯏꯔꯐꯛꯁꯇꯥ ꯈꯛꯇꯗꯥ ꯊꯕꯛ ꯇꯧꯏ)
Card image cap
ꯁ꯭ꯠꯔꯦꯠ ꯇꯧꯔꯕꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯥꯔꯗ꯫

ꯀꯥꯔꯗꯀꯤ ꯇꯥꯏꯇꯂꯗꯥ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯀꯥꯔꯗꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯑꯆꯧꯕꯥ ꯁꯔꯨꯛ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯊꯨꯅꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯕꯥ ꯇꯦꯛꯁꯠ ꯈꯔꯥ꯫

ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯁ꯭ꯠꯔꯦꯠ ꯇꯧꯔꯕꯥ ꯂꯤꯉ꯭ꯛ ꯑꯁꯤ ꯊꯕꯛ ꯇꯧꯔꯣꯏ, ꯃꯔꯃꯗꯤ position: relativeꯂꯤꯉ꯭ꯛ ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯦ꯫

ꯃꯁꯤꯒꯤ ꯁ꯭ꯠꯔꯦꯠ ꯇꯧꯔꯕꯥ ꯂꯤꯉ꯭ꯛ ꯑꯁꯤ -ꯇꯦꯒꯀꯤ ꯃꯊꯛꯇꯥ ꯈꯛꯇꯃꯛ ꯁꯟꯗꯣꯛꯀꯅꯤ p, ꯃꯔꯃꯗꯤ ꯃꯁꯤꯗꯥ ꯇ꯭ꯔꯥꯟꯁꯐꯣꯔꯝ ꯑꯃꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched links</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <p class="card-text">
      <a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
    </p>
    <p class="card-text bg-light" style="transform: rotate(0);">
      This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
    </p>
  </div>
</div>