CSS offset प्रयोग

परिभाषा और उपयोग

offset गुण एलीमेंट को पथ पर एनिमेट करने के लिए उपयोग किया जाता है, यह निम्नलिखित गुणों का एकल रूप है:

सेटिंग के बारे में offset गुण के मान के विभिन्न तरीकों के बारे में नीचे अधिक उदाहरण पढ़ें।

उदाहरण

उदाहरण 1

उपयोग करके offset एकल गुण के रूप में <img> एलीमेंट के लिए ऑफसेट-पैथ, ऑफसेट-डिस्टेंस और ऑफसेट-रोटेट के गुण की मान विन्यास करें:

img {
  ऑफसेट: path('M 50 80 C 150 -20 250 180 350 80') 150px auto 45deg;
}

खुद अभिप्राय करें

उदाहरण 2: ऑफसेट-पैथ और ऑफसेट-रोटेट

<img> एलीमेंट के offset गुण सेटिंग ऑफसेट-पैथ और ऑफसेट-रोटेट के गुण की मान विन्यास करें:

img {
  ऑफसेट: path('M 50 80 C 150 -20 250 180 350 80') 45deg;
}

खुद अभिप्राय करें

उदाहरण 3: ऑफसेट-पैथ और ऑफसेट-डिस्टेंस

<img> एलीमेंट के offset गुण सेटिंग ऑफसेट-पैथ और ऑफसेट-डिस्टेंस के गुण की मान विन्यास करें:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px;
}

खुद अभिप्राय करें

उदाहरण 4: offset-path, offset-distance, offset-rotate और offset-anchor

<img> एलीमेंट के offset offset-path, offset-distance, offset-rotate और offset-anchor के गुण मूल्यों को सेट करने वाले गुण निर्दिष्ट करता है:

img {
  offset: path('M 50 80 C 150 -20 250 180 350 80') 150px -90deg / 0% 50%;
}

खुद अभिप्राय करें

CSS व्याकरण

offset: auto|value|initial|inherit;

गुण मूल्य

मूल्य वर्णन
auto डिफ़ॉल्ट। देखिए प्रत्येक व्यक्तिगत 'offset-' गुण के डिफ़ॉल्ट मूल्य
ऑफसेट-एंकर एलीमेंट के एनीमेशन पथ पर लगे बिंदु को निर्दिष्ट करता है। डिफ़ॉल्ट मूल्य auto है।
offset-distance offset-path द्वारा परिभाषित पथ के आरंभ के बिंदु से दूरी निर्दिष्ट करता है। डिफ़ॉल्ट मूल्य 0 है।
offset-path एलीमेंट को एनीमेशन करने के लिए पथ निर्दिष्ट करता है। डिफ़ॉल्ट मूल्य none है।
offset-position एलीमेंट को पथ पर की शुरूआती स्थिति निर्दिष्ट करता है। डिफ़ॉल्ट मूल्य normal है।
offset-rotate एलीमेंट को पथ पर एनीमेशन करते समय उसके घुमाव का कोण निर्दिष्ट करता है। डिफ़ॉल्ट मूल्य auto है।
initial इस गुण को उसके डिफ़ॉल्ट मूल्य पर सेट करें। देखिए initial。
inherit इस गुण को उसके पिता एलीमेंट से विरासत करें। देखिए inherit。

तकनीकी विवरण

डिफ़ॉल्ट मूल्य: व्यक्तिगत गुणों के डिफ़ॉल्ट मूल्य देखिए
विरासत की गुणता: नहीं
एनीमेशन निर्माण: समर्थन किया गया है। देखिए:एनीमेशन संबंधी गुण。
संस्करण: CSS3
जेसक्रिप्ट व्याकरण: object.style.offset="path('M 50,250 C 700,-50 -400,-50 250,250') 200px auto 90deg"

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

च्रोम एज फायरफॉक्स सफारी ओपेरा
55 79 72 16 42

संबंधित पृष्ठ

ट्यूटोरियलःSVG पथ

ट्यूटोरियलःCSS एनिमेशन

संदर्भःCSS offset प्रयोग

संदर्भःCSS offset-anchor प्रयोग

संदर्भःCSS offset-distance प्रयोग

संदर्भःCSS offset-path प्रयोग

संदर्भःCSS offset-position प्रयोग

संदर्भःCSS offset-rotate प्रयोग