Ketika datang untuk menempatkan item di halaman, termasuk teks, ada banyak cara untuk melakukan ini di CSS – makna literal position Kepemilikan dengan wawancara inset-* Milik, translate,, margin,, anchor() (Dukungan terbatas untuk browser saat ini), dll. itu offset Pemilik adalah properti lain yang termasuk dalam daftar itu.
itu offset Properti biasanya digunakan untuk memindahkan elemen di sepanjang jalur pra -spesifik. Misalnya, dalam contoh berikutnya, persegi memotong jalur melingkar:
-Advertisement-.
<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%; }Fitur khusus CSS (--pIni digunakan untuk mengatur dan memindahkan jarak perpindahan ke komponen persegi. Animasi dimungkinkan karena Elemen dapat ditempatkan pada titik mana pun di jalur tertentu menggunakan offset. Anda mungkin tidak tahu ini offset Ini adalah properti singkat yang terdiri dari karakteristik dasar berikut:
offset-position: Titik awal trekoffset-path: Bentuk elemen dapat ditransfer melaluioffset-distance: Jarak di sepanjang jalur ditransfer ke elemenoffset-rotate: Sudut rotasi elemen sehubungan dengan titik koneksi dan jalur perpindahanoffset-anchor: Tempat di dalam elemen yang berdekatan dengan jalur
itu offset-path Kepemilikan adalah hal penting untuk apa yang ingin kita capai. Terima nilai bentuk – termasuk bentuk bentuk SVG atau bentuk CSS – serta kotak referensi untuk konten jalur.
Referensi dana? Ini adalah dimensi elemen menurut model kotak CSS, termasuk content-box,, padding-box,, border-boxSelain konteks SVG, seperti view-box,, fill-boxDan stroke-box. Ini menyederhanakan cara menempatkan unsur -unsur di sepanjang tepi elemen yang dikandungnya. Berikut adalah contohnya: semua kotak kecil di bawah ini ditempatkan di sudut kiri atas elemen yang dikandungnya. content-box. Sebaliknya, sirkuit kecil ditempatkan di sepanjang sudut atas (25% Di sekitar kuadrat elemen yang dikandungnya) content-box,, border-boxDan padding-boxmasing -masing.
<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: Anda dapat memisahkan konteks perencanaan posisi perpindahan untuk elemen jika Anda tidak ingin menyesuaikan ruang untuk itu dalam item asli yang dikandungnya. Ini adalah cara saya menangani contoh di atas sehingga teks vertebra di dalam dapat mengendap di tepi. Akibatnya, elemen perpindahan (kotak dan lingkaran kecil) diberikan konteks mereka sendiri position: absoluteYang mengarah pada menghapusnya dari aliran dokumen normal.
Metode ini, yang menentukan posisi untuk kotak referensi, memfasilitasi menempatkan item seperti titik pemberitahuan dan tip pita dekoratif di sekitar beberapa unit antarmuka pengguna. seperti itu Menyederhanakan teks di sepanjang tepi massa yang dikandungnyamenyukai offset Elemen juga dapat diputar di sepanjang jalan, terima kasih offset-rotate. Contoh sederhana menunjukkan tanggal artikel di tepi kanan massa:
<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 Properti dengan trek kotak referensi <>Dan Unit kontainer lebih efisien – Anda dapat dengan mudah menyesuaikan jarak perpindahan berdasarkan lebar konten atau tingginya. Saya akan menyertakan referensi untuk mempelajari lebih lanjut tentang pertanyaan wadah dan unit penyelidikan kontainer di bagian “lebih banyak membaca” di akhir artikel ini.
Disana juga offset-anchor Properti yang digunakan dalam contoh terakhir ini. Ini memberikan titik fokus untuk menggusur dan memutar elemen – misalnya, rotasi terjadi pada 90 derajat dalam contoh sudut kiri bawah elemen. itu offset-anchor Fitur ini juga dapat digunakan untuk memindahkan elemen baik ke dalam maupun di luar kotak referensi dengan pengaturan inset-* Nilai- misalnya, bottom -10px Tepi bawah elemen menarik bagian luar dari elemen yang dikandungnya padding-box. Ini meningkatkan keakuratan tempat, 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, menentukan perpindahan yang dapat ditempatkan, yang memungkinkan efek desain dinamis, seperti 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%; }
}Pembungkus
Baik untuk desain grafis seperti teks di sepanjang perbatasan, atau ilustrasi teks, atau bahkan teks dinamis seperti pesan kesalahan, perpindahan CSS adalah opsi yang mudah -digunakan untuk mencapai semua ini. Kita dapat meletakkan elemen -elemen di sepanjang kotak referensi dari elemen -elemen asli yang mengandungnya, memutarnya, dan bahkan menambahkan animasi jika perlu.
Lebih banyak membaca
- CSS
offset-pathkepemilikan: Trik CSS, MDN - CSS
offset-anchorkepemilikan: Trik CSS, MDN - Unit Penyelidikan Kontainer: Trik CSS, MDN
- itu
@propertyDalam aturan: Trik CSS, Web.Dev - Formulir Dana CSS: Trik CSS
- Kotak referensi SVG: W3C
Tentukan posisi teks di sekitar elemen menggunakan perpindahan CSS, yang awalnya diterbitkan di CSS-Tricks, yang merupakan bagian dari keluarga Digitalocean. Anda harus mendapatkan buletin.
-Advertisement-.
