CSS के नए `shape()` फ़ंक्शन के उपयोग का सारांश

 (css-tricks.com)
3 पॉइंट द्वारा GN⁺ 2025-05-06 | अभी कोई टिप्पणी नहीं है. | WhatsApp पर शेयर करें
  • CSS shape() फ़ंक्शन को Chromium और WebKit ब्राउज़रों में सपोर्ट मिलना शुरू हो गया है
  • मौजूदा path() से अलग, अब ज़्यादा पढ़ने योग्य CSS सिंटैक्स और units के साथ जटिल आकृतियाँ परिभाषित की जा सकती हैं
  • clip-path में जटिल रूप बनाते समय SVG coordinates की जगह अंग्रेज़ी कमांड-आधारित तरीके से इसे लागू किया जा सकता है
  • line, arc, curve जैसी नई कमांड्स की मदद से रेखाएँ, curves और arcs को संक्षेप में लिखा जा सकता है
  • shape() में अभी animation सपोर्ट सीमित है, लेकिन hover/focus पर प्रतिक्रिया देने वाले dynamic बदलाव संभव हैं

अवलोकन

  • CSS shape() फ़ंक्शन को clip-path के साथ इस्तेमाल किया जाता है, जिससे ब्राउज़र में जटिल shape clipping संभव होती है
  • पहले circle, ellipse, polygon जैसी बेसिक आकृतियाँ संभव थीं, लेकिन मनचाही आकृति केवल path() से ही बनाई जा सकती थी
  • path() में SVG coordinates और commands को जैसा है वैसा ही लिखना पड़ता था, इसलिए इसकी readability कम थी और सीखने की कठिनाई अधिक थी

shape() फ़ंक्शन की विशेषताएँ

  • CSS-जैसे तरीके से vector shapes बनाई जा सकती हैं
  • direction keywords (from top left) या coordinate values (from 0 0) से शुरुआती बिंदु तय किया जाता है
  • आकृति कमांड्स की एक श्रृंखला से बनती है। उदाहरण: line, vline, arc, curve, smooth

मुख्य कमांड्स का विवरण

  • line
    • अर्थ: शुरुआती बिंदु से एक रेखा खींचता है
    • उपयोग: by keyword से relative position तय की जाती है
    • उदाहरण: line by -2px 3px
  • vline
    • अर्थ: एक vertical line खींचता है
    • उपयोग: to से absolute position, by से relative position तय की जाती है
    • उदाहरण: vline to 50px
  • hline
    • अर्थ: एक horizontal line खींचता है
    • उपयोग: to से absolute position, by से relative position तय की जाती है
    • उदाहरण: hline to 95%
  • arc
    • अर्थ: अंडाकार रूप की curve खींचता है
    • उपयोग:
      • to: arc का endpoint
      • with: arc की tilt direction (horizontal/vertical)
      • of: उस ellipse का radius (horizontal/vertical) जिसमें arc शामिल है
    • उदाहरण: arc to 10% 50% of 1%
  • curve
    • अर्थ: Bezier curve खींचता है
    • उपयोग:
      • to: curve का endpoint
      • with: curve के control points (curvature नियंत्रित करने के लिए)
    • उदाहरण: curve to 0% 100% with 50% 0%
  • smooth
    • अर्थ: एक smooth curve (जुड़ी हुई Bezier curves) खींचता है
    • उपयोग:
      • to: endpoint
      • by: relative coordinates
      • with: control points

अन्य बातें

  • shape() को hover/focus स्थिति में dynamically बदला जा सकता है
  • मौजूदा ब्राउज़रों में transition animation काम नहीं करता
  • calc() calculation function का भी उपयोग किया जा सकता है

संदर्भ लिंक

संबंधित पढ़ाई

अभी कोई टिप्पणी नहीं है.

अभी कोई टिप्पणी नहीं है.