Gunakan Offset CSS untuk menempatkan teks di sekitar elemen – Beragampengetahuan

Ketika datang ke elemen pemosisian (termasuk teks) di halaman, ada banyak cara untuk mencapainya di CSS -text -text position Memiliki atribut yang sesuai inset-* ciri, translate,, margin,, anchor() (Browser saat ini mendukung dukungan terbatas), dan sebagainya. ini offset Atribut adalah atribut lain dalam daftar.

ini offset Atribut biasanya digunakan untuk elemen animasi di sepanjang jalur yang telah ditentukan. Misalnya, kuadrat dalam contoh berikut melewati jalur melingkar:

<div class="circle">
  <div class="square"></div>
</div>

@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.square {
  offset: top 50% right 50% circle(50%) var(--p);
  transition: --p 1s linear;

  /* Equivalent to:
    offset-position: top 50% right 50%;
    offset-path: circle(50%);
    offset-distance: var(--p); */

  /* etc. */
}

.circle:hover .square{ --p: 100%; }

Atribut khusus CSS terdaftar (--p) Jarak offset untuk mengatur elemen persegi dan mengatur animasi untuk itu. Alasan mengapa animasinya mungkin karena Anda dapat menggunakan metode berikut untuk memposisikan elemen di titik mana pun di jalur yang diberikan offsetEsensi Mungkin Anda tidak tahu ini, tapi offset Ini adalah atribut singkat yang terdiri dari atribut berikut:

• offset-positionItu Titik awal jalan
• offset-pathItu Bentuk elemen bisa bergerak
• offset-distanceItu Jarak antara gerakan elemen di sepanjang jalan
• offset-rotateItu Sudut rotasi elemen relatif terhadap titik jangkar dan jalur shift
• offset-anchorItu Posisi penyelarasan ke jalur di elemen

ini offset-path Properti sangat penting untuk tujuan yang ingin kami capai. Ia menerima nilai bentuk (termasuk fungsi bentuk SVG atau CSS) dan kotak referensi yang berisi elemen untuk membuat jalur.

Kotak referensi? Ini adalah ukuran elemen dari model kotak CSS, termasuk content-box,, padding-box,, border-boxDan konteks SVG, misalnya view-box,, fill-boxDan stroke-boxEsensi Ini menyederhanakan elemen penentuan posisi kami di sepanjang elemen yang mengandung tepi. Ini adalah contoh: semua blok kecil di bawah ini ditempatkan di sudut kiri atas elemen default yang berisi elemen content-boxEsensi Sebaliknya, lingkaran kecil terletak di sudut kanan atas (25% Masukkan perimeter persegi yang berisi elemen) content-box,, border-boxDan padding-boxDiferensial.

<div class="big">
  <div class="small circle"></div>
  <div class="small square"></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div class="big">
  <div class="small circle"></div>
  <div class="small square"></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div class="big">
  <div class="small circle"></div>
  <div class="small square"></div>
  <p>She sells sea shells by the seashore</p>
</div>

.small {
  /* etc. */
  position: absolute;

  &.square {
    offset: content-box;
    border-radius: 4px;
  }

  &.circle { border-radius: 50%; }
}

.big {
  /* etc. */
  contain: layout; /* (or position: relative) */

  &:nth-of-type(1) {
    .circle { offset: content-box 25%; }
  }

  &:nth-of-type(2) {
    border: 20px solid rgb(170 232 251);
    .circle { offset: border-box 25%; }
  }

  &:nth-of-type(3) {
    padding: 20px;
    .circle { offset: padding-box 25%; }
  }
}

Catatan: Jika Anda tidak ingin mengalokasikan ruang untuk itu di elemen induk yang dikandungnya, Anda dapat memisahkan posisi offset elemen. Beginilah cara saya menanganinya dalam contoh di atas sehingga teks paragraf internal dapat datar dengan tepi. Akibatnya, elemen penentuan posisi offset (kuadrat kecil dan bundar) diberikan pada konteks, dan position: absoluteIni akan menghapusnya dari aliran dokumen normal.

Metode penentuan posisi dari kotak referensi ini dapat dengan mudah menempatkan titik pemberitahuan dan petunjuk pita dekoratif di sepanjang pinggiran modul UI. Itu lebih lanjut Menyederhanakan penempatan teks di sepanjang tepi blokSebagai soal offset Anda juga dapat memutar elemen di sepanjang jalur, yang disebabkan oleh offset-rotateEsensi Contoh sederhana menampilkan tanggal artikel yang ditempatkan di tepi kanan blok:

<article>
  <h1>The Irreplaceable Value of Human Decision-Making in the Age of AI</h1>
  <!-- paragraphs -->
  <div class="date">Published on 11<sup>th</sup> Dec</div>
  <cite>An excerpt from the HBR article</cite>
</article>

article {
  container-type: inline-size;
  /* etc. */
}

.date {
  offset: padding-box 100cqw 90deg / left 0 bottom -10px;
  
  /*
    Equivalent to:
    offset-path: padding-box;
    offset-distance: 100cqw; (100% of the container element's width)
    offset-rotate: 90deg;
    offset-anchor: left 0 bottom -10px;
  */
}

Seperti yang baru saja kita lihat, menggunakan offset Atribut dengan jalur kotak referensi Dan Unit wadah lebih efisien – Anda dapat dengan mudah mengatur jarak offset sesuai dengan lebar atau tinggi elemen. Saya akan memberikan materi referensi untuk informasi lebih lanjut tentang kueri kontainer dan unit kueri kontainer di bagian “bacaan lebih lanjut” di akhir artikel ini.

di samping itu offset-anchor Atribut yang digunakan dalam contoh terakhir. Ini memberikan titik jangkar untuk perpindahan dan rotasi elemen-untuk contoh, rotasi 90 derajat dalam contoh terjadi di sudut kiri bawah elemen. ini offset-anchor Atribut juga dapat digunakan untuk memindahkan elemen dari kotak referensi atau ke luar dengan menyesuaikan inset-* Nilai -misalnya, bottom -10px Parameter Tarik tepi bawah elemen dari tepi bawah elemen padding-boxEsensi Ini meningkatkan keakuratan penempatan, seperti yang ditunjukkan di bawah ini.

<figure>
  <div class="big">4</div>
  <div class="small">number four</div>
</figure>

.small {
  width: max-content;
  offset: content-box 90% -54deg / center -3rem;

  /*
    Equivalent to:
    offset-path: content-box;
    offset-distance: 90%;
    offset-rotate: -54deg;
    offset-anchor: center -3rem;
  */

  font-size: 1.5rem;
  color: navy;
}

Seperti yang ditunjukkan pada awal artikel, posisi offset dapat diatur, yang dapat mencapai efek desain dinamis, seperti yang ditunjukkan di bawah ini:

<article>
  <figure>
    <div class="small one">17<sup>th</sup> Jan. 2025</div>
    <span class="big">Seminar<br>on<br>Literature</span>
    <div class="small two">Tickets Available</div>
  </figure>
</article>

@property --d {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.small {
  /* other style rules */
  offset: content-box var(--d) 0deg / left center;

  /*
    Equivalent to:
    offset-path: content-box;
    offset-distance: var(--d);
    offset-rotate: 0deg;
    offset-anchor: left center;
  */

  transition: --d .2s linear;

  &.one { --d: 2%; }
  &.two { --d: 70%; }
}

article:hover figure {
  .one { --d: 15%;  }
  .two { --d: 80%;  }
}

Meringkaskan

Apakah itu desain grafis seperti teks perbatasan, komentar teks, atau teks dinamis seperti pesan kesalahan, Offset CSS adalah opsi yang mudah -digunakan untuk mencapai semua tujuan ini. Kita dapat menemukannya di sepanjang kotak referensi elemen induk yang berisi, memutarnya, dan bahkan menambahkan animasi saat dibutuhkan.

Bacaan lebih lanjut