CSS @property और नई स्टाइल

(ryanmulligan.dev)

2 पॉइंट द्वारा GN⁺ 2024-09-05 | 1 टिप्पणियां | WhatsApp पर शेयर करें

CSS @property अब सभी आधुनिक browsers में supported होने से custom properties में syntax, initial value, inheritance की स्थिति स्पष्ट रूप से बताई जा सकती है, और browser values को natural तरीके से interpolate कर सकता है
उदाहरण CTA button में --gradient-angle को <angle> के रूप में define किया गया है, जो 0deg से 360deg तक transition करता है और conic-gradient से घूमती हुई चमकदार border बनाता है
Hover effect में --gradient-percent, --gradient-angle-offset, --gradient-shine जैसी properties को type देकर चमक की लंबाई और brightness को smoothly बदलने के लिए configured किया गया है
Rotation speed के लिए उसी animation को दो बार declare किया गया है और दूसरे को reverse direction व paused state में रखा गया है; hover पर यह current position से half speed पर धीमा हो जाता है
@property आधारित custom property definitions ऐसे CSS expressions को संभव बनाती हैं जिन्हें पहले implement करना मुश्किल था, और बड़े applications व design systems में भी इनके उपयोग की काफी संभावना है

`@property` से खुलती custom property animation की राह

@property CSS custom properties के लिए allowed syntax, initial value, और inheritance की स्थिति बताने वाला rule है
यह CSS Houdini के CSS Properties and Values API से जुड़ा feature है, और हाल में सभी आधुनिक browsers में supported है
जब browser को custom property का type पता होता है, तो वह values के बीच interpolate कर सकता है, जिससे सामान्य CSS variables के मुकाबले smooth transitions और animations बनाना आसान हो जाता है

CTA button की घूमती चमकदार border

उदाहरण में web पर अक्सर दिखने वाले चमकदार CTA button style को CSS से implement किया गया है
मुख्य custom property --gradient-angle है, जिसके लिए @property से <angle> syntax और 0deg initial value declare की गई है

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

इस definition की वजह से browser 0deg से 360deg तक natural तरीके से transition करता है, और conic-gradient ऐसे render होता है मानो वह घूम रहा हो

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

.rotate-gradient {
  background: conic-gradient(from var(--gradient-angle), transparent, black);
  animation: rotate-gradient 10s linear infinite;
}

CodePen demo में इस concept को न्यूनतम code के साथ देखा जा सकता है

Background layers से बनाई गई border shine

चमकदार border linear-gradient और conic-gradient को background में साथ रखकर, और हर background का origin अलग set करके बनाई जाती है
- linear-gradient padding-box इस्तेमाल करता है, इसलिए वह border area में overflow नहीं करता
- conic-gradient border-box इस्तेमाल करता है, इसलिए border width से बनी जगह तक expand होता है
- 1px transparent border जोड़कर घूमता हुआ conic-gradient दिखाई देता है

.border-gradient {
  background:
    linear-gradient(black, black) padding-box,
    conic-gradient(from var(--gradient-angle), transparent 25%, white, transparent 50%) border-box;
  border: 1px solid transparent;
}

CTA CodePen demo final button effect दिखाता है

Hover पर smoothly बदलता gradient

Hover transition के लिए जरूरी हर custom property में @property पर syntax declare किया जाता है ताकि browser value changes को interpolate कर सके
Button background अंदरूनी color संभालने वाले linear-gradient और border shine संभालने वाले conic-gradient से बना है
--gradient-percent shine area का size तय करता है, और hover पर यह higher percent में बदलता है जिससे shine की length बढ़ती है
--gradient-angle-offset hover के दौरान shine को आगे-पीछे उछलता हुआ दिखने से बचाने के लिए gradient angle को फिर से align करने में इस्तेमाल होता है
--gradient-shine brightness कम की जाती है ताकि यह आसपास के highlight color के साथ ज्यादा natural तरीके से blend हो

Hover के दौरान rotation speed कम करने का तरीका

Rotation speed कम करने वाली CSS tip में उसी rotation animation को दो बार declare किया जाता है
दूसरी animation को reverse direction में रखा जाता है, duration को आधा किया जाता है, और default state paused set होती है
Hover पर animation-play-state: running paused को override करता है और rotation को half speed तक धीमा कर देता है
Hover खत्म होने पर animation start position पर jump नहीं करती, बल्कि current position से फिर तेज हो जाती है
CTA button animation इसी तरीके का उपयोग करती है ताकि speed बदलते समय भी rotation और movement आपस में synced रहें

छोटी चमक और internal highlight

Button के अंदर छोटे dot pattern को ::before pseudo-element में radial-gradient background बनाकर render किया जाता है
--gradient-angle यहां भी फिर से इस्तेमाल होता है, और conic-gradient mask घूमते हुए dot pattern का सिर्फ कुछ हिस्सा दिखाता है
Mask का gradient angle shine border rotation से match करने के लिए 45deg offset किया जाता है

.shiny-cta::before {
  mask-image: conic-gradient(
    from calc(var(--gradient-angle) + 45deg),
    black,
    transparent 10% 90%,
    black
  );
}

::after pseudo-element में highlight color वाला gradient जोड़ा जाता है ताकि वह shine area के साथ rotate करे
Internal highlight button के अंदर बहती रोशनी जैसा एहसास जोड़ता है

Hover colors और final polish को adjust करना

Button के ::before और ::after पहले से इस्तेमाल हो रहे हैं, इसलिए button text को span में wrap किया गया है
span के pseudo-elements में से एक पर highlight color वाला blurred box-shadow apply किया जाता है और उसे button size तक expand किया जाता है
Hover पर यह pseudo-element धीरे-धीरे बड़ा और छोटा होता है, जिससे हल्की breathing जैसी feel बनती है
अंदर घूमते highlight color के साथ combine होकर यह CTA button का final effect पूरा करता है

Design system तक जाने वाली संभावना

Custom properties को explicitly define करने से ऐसी CSS techniques इस्तेमाल की जा सकती हैं जो कुछ समय पहले तक लगभग असंभव थीं
@property CSS को ज्यादा systematic तरीके से publish और organize करने की दिशा में ले जा सकता है
संबंधित लेखों के तौर पर Stephanie Eckles का Providing Type Definitions for CSS with @property और Adam Argyle का Type safe CSS design systems with @property भी देखा जा सकता है
References के रूप में Animated CSS gradient borders (no JavaScript, no hacks), CSS border animations, @property: Next-gen CSS variables now with universal browser support आदि संकलित हैं

1 टिप्पणियां

GN⁺ 2024-09-05

Hacker News की राय

मैं वेब डेवलपर नहीं हूं, लेकिन framework के बिना toy websites बनाई हैं और कुछ web frameworks में बुनियादी काम किए हैं। जब CSS पहली बार आया था, तो थोड़े समय में ही उसे पूरा दिमाग में रखकर इस्तेमाल किया जा सकता था
पहले CodePen example का CSS लगभग पहचान में न आने वाली गूढ़ syntax जैसा दिखता है, और सवाल उठता है कि क्या style system के अंदर एक छोटी animation programming language तक होना जरूरी है
यह काम JavaScript से किया जा सकता है, ऐसा लगता है। JS को हर जगह इस्तेमाल करने के खिलाफ नाराज़गी समझ में आती है, लेकिन फिर भी अगर कोई programming language है तो ऐसे काम उसी के मुख्य काम जैसे लगते हैं
- यह एहसास मुझे समझ नहीं आता। अगर आप web developer, खासकर frontend developer नहीं हैं, तो ऐसे चमकदार effects वाले HTML elements बनाने की नौबत भी कम ही आएगी। फिर CSS advanced features से क्या कर सकता है, यह समस्या क्यों है, समझ नहीं आता
  JavaScript से भी बेशक संभव है, और canvas लगाकर WebGL से GPU पर effects program भी किए जा सकते हैं। लेकिन तब HTML button की सारी accessibility features खुद फिर से बनानी पड़ेंगी, और यह आसान होगा या नहीं, संदेह है
- वजह performance है। JS से करेंगे तो इसे प्रति सेकंड 60 बार बिना अटके चलना होगा, लेकिन JS single-threaded है, इसलिए main thread block होते ही frames छूट जाते हैं
  modern JS engines कमाल के हैं, फिर भी native code जितने efficient नहीं हैं, इसलिए CPU usage बढ़ता है और आखिरकार battery life पर भी बुरा असर पड़ता है
- अगर site पर JavaScript से बचने का मौका मिले, तो ज्यादा काम होने पर भी मैं उसका स्वागत करूंगा। JavaScript बंद करके इस्तेमाल करने वाले visitors आज के web को परेशान करने वाले कई exploits और trackers से बच सकते हैं
  इसी वजह से उन sites की सराहना करता हूं जहां JavaScript अनिवार्य नहीं है
- सिर्फ page की सुंदरता से जुड़े कामों के लिए पूरी programming language की जरूरत पड़ना अच्छा विचार नहीं है
  कुछ hosting platforms सुरक्षा कारणों से HTML और CSS personalization की अनुमति देते हैं, लेकिन JS को रोकते हैं। Itch.io जैसी जगहें, जहां games और profiles सजाए जा सकते हैं, ऐसी ही हैं। CSS animations इस्तेमाल करने पर JS access दिए बिना भी शानदार effects बनाए जा सकते हैं, इसलिए यह उचित और उपयोगी है
- ऐसा लगता है कि problem domain को ठीक से समझे बिना और syntax भी न जानते हुए, जो तुरंत समझ नहीं आता उसे नकारात्मक बदलाव मान लिया जा रहा है
यह लेख पढ़ते समय लगा कि दिमाग अनजाने concepts का विरोध कर रहा है। blog examples देखने से पहले पहले वाक्य में link किए गए MDN article को पढ़ने की सलाह दूंगा
@property को खुद इस्तेमाल करके ही शायद समझ आएगा, और अगर complex UI बनाते हुए JS dependency घटानी हो, तो ऐसी गूढ़ CSS features जानना एक शक्तिशाली हथियार बन जाता है
- MDN article पढ़कर भी बिल्कुल समझ नहीं आया। यह तो सचमुच CSS variables ही लगते हैं
  CSS variables भी cascade होते थे और classes आदि से override किए जा सकते थे, और Tailwind का bg-opacity भी कुछ ऐसा ही तरीका नहीं है क्या
- मेरे साथ भी कुछ ऐसा ही है। मुझे लगता है यह लेख समझाने में सच में खराब है
  MDN देखने पर लगता है कि यह पुराने CSS variables जैसा ही है, बस scope किसी खास element या child तक सीमित होता है, और angle, percent जैसी CSS units पहचानने वाली constraints जुड़ गई हैं
  फिर भी लगता नहीं कि मैं इसे इस्तेमाल करूंगा। इतना छोटा फायदा complexity और compatibility cost को justify नहीं करता, और मैं अनावश्यक नई syntax से बचने की कोशिश करता हूं। CSS variables के बाद से CSS की नई features में मेरी दिलचस्पी काफी कम हो गई है
- मुझे लगा था सिर्फ मुझे ऐसा लग रहा है, लेकिन यह सच में अजनबी लगता है
  CSS transform इस्तेमाल करने की तुलना में इसका क्या फायदा है, यह ठीक से समझ नहीं आता
मुझे CSS पर काम करना पसंद है, लेकिन CSS को कठिन मानने वाले colleagues के साथ भी काम करता हूं। इस नज़रिए से, मैं Kevin Powell का YouTube channel बहुत strongly recommend करता हूं
उन्होंने इस feature को कई बार cover किया है, और एक हफ्ते पहले डाले गए video में registered properties से संभव होने वाली एक उपयोगी capability दिखाई है: https://youtu.be/U8NykwZNbGs
registered properties को follow करने में आसान examples से समझाने वाला एक article भी है: https://moderncss.dev/providing-type-definitions-for-css-wit...
हाल के CSS work, खासकर Houdini, को लेकर उत्साहित हूं। IE 5.5 features वाली किताब देखने के बाद से ऐसा एहसास बहुत समय बाद हुआ है
पिछले 14 सालों में CSS में काफी नई features आई हैं, लेकिन वे नई layout options या variables जैसी, style framework से उम्मीद की जाने वाली बुनियादी capabilities के करीब थीं
लेकिन IE developers सच में बेझिझक थे, और JS code को module बनाकर CSS के जरिए elements से attach भी किया जा सकता था। लगता है आखिरकार ऐसी radical features फिर लौट रही हैं
उदाहरण: https://developer.chrome.com/docs/css-ui/houdini
- यहां “बेझिझक” शब्द सकारात्मक अर्थ में इस्तेमाल हुआ है या नकारात्मक, यह मुझे ठीक से समझ नहीं आ रहा
- क्या css3pie(http://css3pie.com/) इसी तरह काम नहीं करता था
छोटा और अच्छा लेख है। अगर आप और examples देखना चाहते हैं, खासकर ऐसे बहुत सरल examples जिनसे जल्दी समझ बने, तो पुराना CSS-Tricks article recommend करूंगा
2021 का article है, लेकिन अब भी valid और अच्छी तरह बनाया गया है: https://css-tricks.com/exploring-property-and-its-animating-...
खासकर airport numbers/timer के पलटने वाले flip display example आपको पसंद आएगा
मैं कुछ समय से web development से दूर था, और यह feature असल में क्या करता है यह समझने में मुझे बहुत ज़्यादा समय लगा। लगता है लेख ने इसे ठीक से explain नहीं किया
मेरी समझ के मुताबिक, 360deg जैसे raw value की जगह from var(--gradient-angle) जैसा लिखा जाता है, और वह value @property --gradient-angle {...} block में जहां define की गई है वहां से लेकर replace होती है
inherits: false; भी है; behavior तो समझ आता है, लेकिन यह क्यों ज़रूरी है समझ नहीं आया। CSS selectors से inheritance को पहले ही control किया जा सकता है, तो क्या अब इसे कहीं और से भी control किया जा सकता है—यह follow करना मुश्किल है
और यह भी सवाल है कि @property block में type define क्यों करना पड़ता है। CSS में बाकी जगह types define नहीं करते, तो क्या browser @property के इस्तेमाल की जगह देखकर infer नहीं कर सकता?
- मेरे लिए इसका सबसे बड़ा फायदा यह था कि इससे CSS variables को animate किया जा सकता है
  पहले YouTube design को neon जैसा बनाने के एक experiment में, मैंने main color का रंग एक single CSS variable से control कराया था और उसकी hue को धीरे-धीरे पूरे spectrum में move कराया था
  @property के बिना CSS variables को animate नहीं किया जा सकता था, इसलिए यह सिर्फ raw value की जगह variable इस्तेमाल करने की बात नहीं है, बल्कि उस variable और जहां-जहां वह referenced है, उन सभी को साथ में animate करने देता है। @keyframes neon-flow { from { --dc-neon-hue: 0; } to { --dc-neon-hue: 360; } } सिर्फ एक से main color, shadows वगैरह सब move कर सकते हैं
  inherits: false custom property कैसे inherit होती है, इसे control करता है। color: red की तरह बच्चों में inherit होने दे सकते हैं, या display: flex की तरह सिर्फ उसी element पर apply करा सकते हैं
  Type शायद इसलिए ज़रूरी है ताकि static time पर पता हो कि किस चीज़ को animate करना है। CSS variable कुछ भी हो सकता है, लेकिन normal CSS property में color जैसी property खुद type information देती है
  मज़ेदार बात यह है कि यह type syntax वही है जो MDN में दिखने वाला formal syntax है: https://developer.mozilla.org/en-US/docs/Web/CSS/color#forma... ऐसा लगता है जैसे CSS internals को developers के इस्तेमाल के लिए API के रूप में expose कर दिया गया हो
- CSS properties खुद @property से पहले भी थीं; जैसे --my-prop: 10px declare करके उसे var(--my-prop) से दूसरी जगह इस्तेमाल कर सकते थे
  नया feature @property यह allow करता है कि property को पहले से define करके तय किया जाए कि उसे कौन-सा syntax type accept करना चाहिए, parent value inherit करनी है या नहीं, और default initial-value क्या होगा
  इसलिए अगर angle type के रूप में declared property में कोई element --my-prop: 5px डालता है, तो वह ignore हो जाएगा। पहले यह valid value बन जाती थी और इस्तेमाल की जगह के हिसाब से unintended side effects हो सकते थे
  साथ ही, --my-prop: initial जैसा लिखने पर exact default value जाने बिना भी initial-value इस्तेमाल कराया जा सकता है
- इस explanation के लिए शुक्रिया। लेख @property क्या करता है या कैसे इस्तेमाल होता है, यह explain नहीं करता—यह समझना मुश्किल है
  overly complex examples की वजह से बात पूरी तरह छिप गई है
यह website देखकर अच्छा लगा
मुझे हमेशा CSS के साथ tinkering करना पसंद था, लेकिन 10 साल से ज़्यादा web development करने और web-related काम को profession बनाने के बाद यह भी समझ आया कि लोग CSS से कितनी नफरत करते हैं
हाथ से लिखे HTML+CSS को explore और experiment करने में मैं अंतहीन समय लगा सकता हूं, और real phone पर कैसा feel होता है यह देखने के लिए deploy भी कर देता हूं। उनमें से 99% कहीं इस्तेमाल नहीं होता
ज़्यादातर लोगों के लिए यह time waste होगा, लेकिन इस site ने सच में मेरा दिन अच्छा कर दिया
- मुझे CSS सच में बहुत पसंद है। मेरे हिसाब से इसे समझना भी काफी आसान है
  पिछले 10 साल में यह complex तो हुआ है, लेकिन 10 साल पहले जो काम करते थे उन्हें आज बहुत सरल तरीके से कर सकते हैं, और तब का code भी अब भी चलता है
- जो लोग जोर-शोर से कहते हैं कि उन्हें CSS से नफरत है, वे आम तौर पर CSS को समझते नहीं हैं
  फिर भी ठीक है। मैं भी APEX या APL, या आज के latest framework को नहीं समझता। लेकिन CSS समझता हूं, इसलिए इसे काफी enjoy करता हूं
  कुछ लोगों को इसका feel आ जाता है और कुछ को नहीं। समस्या तब आती है जब जिसे CSS suit नहीं करता उसे नौकरी में CSS का काम करना पड़ता है, और स्वाभाविक है कि वह इसे नापसंद करेगा। अगर मेरा काम Active Directory installation maintain करना हो तो मुझे भी नफरत होगी। लेकिन इससे CSS खुद खराब नहीं हो जाता
- CSS के साथ खेलना मज़ेदार है और नए features explore करने लायक हैं। बस CSS features कभी-कभी ऐसे लगते हैं जैसे “और क्या बनाया जा सकता है?” वाले mood से निकलते हों
  कहीं न कहीं serious discussion वाला forum होगा, लेकिन लगता है मैं उसे miss कर रहा हूं
- अभी यह काफी minimal है, लेकिन Bootstrap या Tailwind जैसे tools के बाहर काम करने का feel पाने के लिए मैं खुद हाथ से और CSS लिखने की कोशिश कर रहा हूं
  Production में खासकर मैंने लगभग पूरा frontend JSX में ही लिखा है, लेकिन web scraping वाले rabbit hole में जाने के बाद selector logic की समझ काफी बेहतर हुई है
  इससे जुड़ा एक provocative thought यह है कि अगर real-world काम में semantic elements ज़्यादा इस्तेमाल किए जाते, तो selector logic आज जितनी headache है उतनी नहीं होती। Modal जैसी चीज़ों में pure HTML ने जो behavior पहले से define किया है, उसे भी खुद maintain नहीं करना पड़ता
- जैसे ही आप सिर्फ अपने specific device·screen·browser·browser version·OS combination तक सीमित नहीं रहते, बल्कि काफी व्यापक support वाली चीज़ implement करनी पड़ती है, subtle spec violations सच में irritate करती हैं
  पहले Microsoft सबसे बदनाम spec violator था, और अब मेरे हिसाब से Apple है
ये animations हर चीज़ को 2000s के display ads जैसा बना देती हैं। बुरे अर्थ में
सच में उम्मीद है कि यह aesthetic trend न बने
- मेरी भी यही राय है। CodePen examples को सिर्फ CSS से किया जा सकता है, यह interesting था, लेकिन मुझे थोड़ा overdone लगा; और अगर पहला call-to-action button किसी real website पर दिखता, तो मुझे वह tacky और शर्मनाक लगता
  ऐसी चीज़ों में marketing और manipulation की feeling बहुत strong होती है। मैं चाहूंगा कि site पढ़ने दे और मुझे decide करने दे कि मुझे क्या करना है। पैसे कमाने वाले element पर मेरी नज़र जबरन खींचकर मुझे disturb न करे
- शुरुआत में मुझे लगा CodePen मुझे upsell करने की कोशिश कर रहा है
- ऐसी चीज़ें native app code में पहले से की जा रही हैं, इसलिए web में भी इनके matching features होने चाहिए
  वरना हर कोई इन्हें closed ecosystems के अंदर implement करेगा
PFM, यानी “pure magic” जैसा expression, CSS animations से जो चीज़ें संभव होती दिखती हैं उन्हें देखते समय बिल्कुल यही feeling आती है
लेकिन यह CSS और सिर्फ CSS के लिए इतना ज़्यादा specialized है कि JS में procedural तरीके से implement करने की तुलना में इसे सीखना और conceptualize करना ज़्यादा मुश्किल है। मेरी सोच उस तरह से सहज नहीं चलती, और CSS flex के usage options ही काफी भारी पड़ते हैं
- CSS सचमुच अपना अलग alien realm जैसा है। ज़्यादातर developers के लिए इसकी syntax unfamiliar होना भी मदद नहीं करता
  लेकिन यह powerful है, सच में बेहद powerful, और ज़्यादातर browsers में बहुत efficient है। Web app developers की भारी majority को CSS जो offer करता है उसका 99% चाहिए ही नहीं, लेकिन यह जानना अच्छा है कि ऐसी capabilities मौजूद हैं
- इसलिए मैंने HTML+CSS code कर सकने वाले designer को hire किया
  मैं business logic से जुड़े unstyled elements page पर डाल देता हूँ, फिर designer उन्हें अपनी इच्छानुसार style कर सकता है। ज़रूरत हो तो बाद में UI polish को iterate कर लेते हैं
- यह SQL जैसा declarative paradigm है
  पूरी तरह imperative नज़रिए से देखें तो specs पढ़ने और experiment करने में थोड़ा समय लगता है, लेकिन मुझे लगता है कि यह सोचने का ऐसा तरीका है जिसकी value SQL और CSS इस्तेमाल करने से भी आगे जाती है। बेशक SQL और CSS खुद भी काफी valuable हैं
- JS हमेशा, सच में हमेशा, last resort है। पिछले कुछ वर्षों में CSS features ज़्यादातर browsers में आने के बाद मैंने code से काफी JS हटाया है, और pages को JavaScript Zero बनाना पसंद करता हूँ
  अगर वे CSS “masonry” feature का नाम[1] तय कर दें ताकि उसे scripts के बिना इस्तेमाल किया जा सके, तो मुझे बहुत खुशी होगी
  [1] https://github.com/w3c/csswg-drafts/issues/9733
- इस मामले में property, CSS Houdini API का हिस्सा है, और JavaScript से CSS को पहले से कहीं ज़्यादा powerful तरीके से manipulate करने देता है
  https://developer.mozilla.org/en-US/docs/Web/API/Houdini_API...
लेखक में नए CSS टुकड़े को लेकर जो उत्साह दिख रहा है, वैसा मैंने लगभग 10 साल में नहीं देखा, और यह बहुत अच्छा है
अगर मैं अपने 20s में होता, तो इस feature की possibilities के साथ घंटों, दिनों तक खेलता रहता। CSS में किसी चीज़ को काम करवाना मज़ेदार था
अब flexbox, grid, और ज़्यादातर websites व apps के standard design principles follow करने की वजह से यह काफी आसान हो गया है, और मुझे लगता है कि web UI काफी हद तक solved problem के करीब पहुँच चुका है
- जानना चाहूँगा कि वे standard design principles कौन-से हैं
- समझ नहीं आ रहा कि क्या solve हुआ है। Layout?
  अभी भी कभी-कभी flex और grid के अस्पष्ट हिस्से फिर से पढ़ने पड़ते हैं। sticky positioning सबसे useful features में से एक है, लेकिन किसी भी वजह से काम न करे तो debug करना और कारण समझना बहुत मुश्किल, लगभग impossible हो जाता है। जैसे parent elements में कहीं overflow लगा है या नहीं, ऐसी issues भी होती हैं
  ऐसे edge cases को अच्छी तरह समझाने वाले docs मिलना भी मुश्किल है, और developer tools के बिना सिर्फ source code से CSS debug करना लगभग नामुमकिन है, इसलिए runtime पर elements inspect करने पड़ते हैं
  ज़्यादातर native input elements में अभी भी styling की संभावना बहुत limited है, और native modals व popovers के लिए भी कई साल इंतज़ार करना पड़ा। आखिरी बार जब देखा था, तब भी display: none से block में height animate करना संभव नहीं था
  लगता है हम CSS की कई समस्याओं के इतने आदी हो गए हैं कि critical sense ही खत्म हो गई है

CSS @property और नई स्टाइल

@property से खुलती custom property animation की राह

CTA button की घूमती चमकदार border

Background layers से बनाई गई border shine

Hover पर smoothly बदलता gradient

Hover के दौरान rotation speed कम करने का तरीका

छोटी चमक और internal highlight

Hover colors और final polish को adjust करना

Design system तक जाने वाली संभावना

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

1 टिप्पणियां

Hacker News की राय

`@property` से खुलती custom property animation की राह