Ofset çapa - CSS Hileleri

Anonim

offset-anchorÖzelliği bu çapa olarak uygulanır kutu içinde bir noktayı tanımlar boyunca hareket offset-path.

Bu biraz kelime, o yüzden bunu biraz açıklayalım.

Bir öğeniz var, bir kutu diyelim:

CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Pen Orange Box'a bakın.

O kutunun bir yol boyunca hareket etmesini istiyorsunuz, örneğin dalgalı bir çizgi. Bu satırı SVG ile doğrudan HTML'de oluşturabilir ve bunu offset-pathkutu için kullanabiliriz. offset-distanceÖzelliği kullanarak animasyonu oluşturuyoruz :

CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Yoldaki Kalem Turuncu Meydanı'na bakın.

İyi iyi. Peki ya kutunun hattan sarkıyor gibi görünmesini istersek? Bilirsin, çelik halattan kayan biri gibi.

İşte burada offset-anchordevreye giriyor! Öğede bir noktayı işaretler ve bunu, öğeyi yol üzerinde konumlandırmak için kullanır.

Aşağıda, farklı bağlantı noktalarında aynı yola üç farklı kutunun eklendiği bir örnek verilmiştir:

CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Pen NMbEpy'ye bakın.

Sözdizimi

.box ( offset-anchor: (auto | ); )

Değerler

  • auto: Değerini alır offset-positionbu değer de değil sürece autove sürece offset-patholarak ayarlanır none.
  • position
    • : İçinde bulunduğu kabın göreceli genişliğinden ve yüksekliğinden hesaplanan bir birim. Örneğin 50% 50%ölü merkez olabilir. Anahtar kelimeler gibi, burada çalıştığını unutmayın background-positionnerede center centeraynı sonucu döndürecektir.
    • : Bağlantıyı öğe kutusunun sol üst köşesinden kaydıran birim.

Bunun positioncanlandırılabilir bir özellik olduğunu belirtmekte fayda var .

Tarayıcı Desteği

offset-*Özellikleri hala bu yazının yazıldığı anda deneysel bir özellik olarak kabul edilir. Tarayıcı desteğinin mevcut olmaması, onu bir projede kullanmaktan çekinmenize neden oluyorsa, bu animasyon düzeyi için GSAP kullanmayı düşünebilirsiniz. Bu size şu anda en geniş tarayıcı desteğini sunacaktır.

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

Masaüstü Bilgisayar

Krom Firefox IE Kenar Safari
46 72 Hayır 79 Hayır

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 Hayır

Chrome 46 ve Opera 33'ten (ve ilgili mobil sürümlerden) itibaren, Blink'te (işaret yok) "ilk desteğimiz" var.

ek bilgi

  • Hareket Yolu Modülü Seviye 1 Spesifikasyonu
  • WebKit Bilet # 139128
  • Mozilla Bileti # 1186329
  • Microsoft Edge özellik isteği