CSS में मल्टीपल आउटलाइन टेक्स्ट इफ़ेक्ट

 (yuanchuan.dev)
1 पॉइंट द्वारा GN⁺ 1 시간 전 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • CSS text-stroke केवल एक ही value लेता है, लेकिन उसी अक्षर को कई layers में overlap करके और हर layer की outline thickness तथा रंग अलग-अलग सेट करके retro-style मल्टीपल आउटलाइन टेक्स्ट इफ़ेक्ट बनाया जा सकता है
  • Graphic Japan : from woodblock and zen to manga and kawaii के टेक्स्ट इफ़ेक्ट को संदर्भ बनाकर कई elements की text-stroke-width अलग-अलग सेट करने पर उससे अधिक मिलता-जुलता परिणाम मिलता है
  • हर layer के text-stroke-width, text-stroke-color, z-index के संयोजन से outline का क्रम और रंग नियंत्रित किया जा सकता है, और thickness बढ़ने पर भी मूल अक्षर का आकार बना रहता है
  • ब्राउज़र के अनुसार rendering परिणाम अलग होते हैं; Chrome और Safari की तुलना में Firefox अधिक smooth दिखता है, और कई अक्षरों को एक पंक्ति में रखने पर उनके आकार आपस में merge हो जाते हैं
  • परिणाम चुने गए font पर बहुत निर्भर करता है, और बड़े font-size पर flickering दिख सकती है; इसलिए यह प्रयोग या css-doodle image generation के लिए ठीक है, लेकिन production उपयोग के लिए उपयुक्त नहीं है

कार्यान्वयन विधि

  • उसी अक्षर को कई layers में overlap करके और हर layer की text-stroke-width अलग-अलग सेट करके Graphic Japan : from woodblock and zen to manga and kawaii में दिखे टेक्स्ट इफ़ेक्ट के अधिक करीब परिणाम बनाया गया
-webkit-text-stroke-color: @pn(--c, #f4e1e8);
-webkit-text-stroke-width: $em(.08n+.02(1-(-1)^n));
  • हर layer को अलग रंग देकर और उन्हें मनचाहे क्रम में overlap करने पर outline का रंग और क्रम नियंत्रित किया जा सकता है
-webkit-text-stroke-color: @pn(#f4e1e8, #cc0d55);
-webkit-text-stroke-width: @i(*3px);

रेंडरिंग और सीमाएँ

  • Chrome और Safari की तुलना में Firefox अधिक smooth rendering देता है
  • कई अक्षरों को एक पंक्ति में रखने पर उनके आकार आपस में merge हो जाते हैं
@content: '秋收冬藏';
  • अलग-अलग fonts को जल्दी आज़माने के लिए @google-font function जोड़ा गया, जिससे font loading तेज़ होती है
font-family: @google-font(Matemasie);
@content: 'b';

font-family: @google-font(Tangerine);
@content: 'Love';

font-family: @google-font('Cherry Bomb One');
@content: '+';
  • performance, CSS filters की तरह अच्छी नहीं है, और खासकर font-size बढ़ने पर flickering दिख सकती है
  • अतिरिक्त उदाहरण css-doodle से generate किए गए हैं, और पहले उदाहरण का CodePen https://codepen.io/yuanchuan/pen/ogzarGo पर देखा जा सकता है

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

1 टिप्पणियां

 
GN⁺ 1 시간 전
Hacker News टिप्पणियाँ

  • यह लेख css-doodle के लेखक ने css-doodle से ही बनाया है। यह web component ब्लॉग में इस्तेमाल की गई CSS वैरिएंट syntax को सीधे HTML के अंदर लिखने देता है
    उदाहरण कुछ ऐसे हैं:
    @grid: 15 / 90%;
    border-radius: 50%;
    background: hsl(@t(/20), 70%, 60%);
    scale: sin(@atan2(@dx, @dy) + @ts);
    component definition को लोड करने के अलावा JavaScript की ज़रूरत नहीं होती, और यह सामान्य HTML, Markdown, framework आदि में काम करता है
    https://css-doodle.com/

    • समझाने के लिए धन्यवाद। 2018 में frontend काम छोड़ने के बाद से मुझे अब लगभग पता ही नहीं कि CSS क्या-क्या कर सकता है
      इस पेज का काफ़ी CSS मुझे किसी गुप्त कोड जैसा लगता है। standardized styles के दौर में कुछ नया और शानदार डालने वाले लेखक के लिए तालियाँ

  • सोच रहा हूँ कि Firefox का CSS rendering engine स्मूद तरीके को क्यों प्राथमिकता देता है। implementation काफ़ी अलग दिखता है, लेकिन हो सकता है कि यह rendering का edge case हो इसलिए ऐसा लग रहा हो

    • stroke expansion एक जटिल विषय है, और इसका सिर्फ़ एक ही उचित नतीजा नहीं होता; इसमें व्यक्तिगत पसंद, ढेर सारे edge cases, और गलत जवाब सब मिले हुए हैं
      Firefox ने हर बिंदु पर दूरी के आधार पर expand करने का फैसला किया, और यह उचित जवाबों में से एक है, शायद सबसे सामान्य तरीका भी। इसलिए नुकीले cusp वक्रों में expand हो जाते हैं
      दूसरे browsers ने cusp को बनाए रखने का फैसला किया, जो यह भी उचित हो सकता है और computational cost भी काफ़ी कम लगती है। लेकिन जब आप feature size, यानी nodes के बीच की दूरी, से ज़्यादा expand करते हैं तो degenerate cases बहुत बढ़ जाते हैं, इसलिए चौथी लाल ring तक आते-आते यह साफ़ तौर पर गलत दिखने लगता है
      box-shadow भी एक और मामला है जहाँ expansion होता है। चौथा length value, यानी spread distance, वही है। अगर corner cusp है तो shadow corner भी cusp होगा, और अगर गोल है तो shadow corner भी गोल होगा। एक उपयोगी चित्र https://drafts.csswg.org/css-backgrounds/#shadow-shape पर है
      थोड़ी सी तरकीब से 0.1px border-radius देने पर box फिर भी चौकोर दिखेगा, लेकिन expanded shadow वक्र बन जाएगी। कभी-कभी यह काम आता है। मूल लेख की बात पर लौटें तो, अगर cusp nodes की जगह बहुत हल्का curvature वाला font इस्तेमाल करें, तो Chromium/Safari भी Firefox के ज़्यादा करीब आ जाएगा
    • मुझे Firefox का rounded effect पूरी तरह पसंद नहीं, लेकिन Chrome की व्याख्या नकली नुकीले उभार बना देती है, इसलिए वह बस गलत लगती है
      सहज रूप से लगता है कि तारे जैसी outline एक साधारण hexagon के क़रीब आनी चाहिए, लेकिन कोई भी browser ऐसा नहीं कर पाता
    • miter join Safari है, round join Chrome की तरफ़ है
    • Firefox वाला SDF जैसा दिखता है। शायद object तक की shortest distance पर आधारित rendering है, और Chrome वाला क्या कर रहा है, समझ नहीं आ रहा
    • Firefox वाला बिल्कुल वैसा दिखता है जैसा उस glyph के SDF result को stepwise clip करने पर उम्मीद होती है
      पहली layer के rounded corners मूल glyph के सबसे नज़दीकी corners से सब समान दूरी पर होंगे

  • इस ब्लॉग का design सच में बहुत अच्छा है। सरल, स्पष्ट, और content-first है

    • सही कहा। इसमें CSS/SVG/canvas को साफ़ तौर पर दिखाने वाली बहुत सी पोस्ट हैं
      Daily Sketch series या CSS Animation with offset-path भी उतनी ही मज़ेदार हैं

  • यह पोस्ट पढ़कर मुझे पहली बार https://css-doodle.com के बारे में पता चला
    कुछ महीने पहले मैं HTML Canvas API से कुछ ऐसा ही कर रहा था, लेकिन मुझे नहीं पता था कि CSS से भी ऐसे मज़ेदार छोटे काम किए जा सकते हैं। बहुत पसंद आया

  • fiddle को Apple logo और colors के साथ बदलकर देखा, तो पहली ring ने सेब का एक हिस्सा खा लिया। सेब का ऊपरी हिस्सा कट जाता है; क्यों होता है, कोई जानता है?
    --c: #5EBD3E,#FFB900,#F78200,#E23838,#973999,#009CDF;
    @content: '';

  • मैं सोच रहा हूँ कि शानदार Unicode characters इस्तेमाल किए बिना, और font द्वारा सुझाई गई rendering को बनाए रखते हुए, double outline text बनाने का सबसे अच्छा तरीका क्या है
    अभी मैं my blog पर fancy characters इस्तेमाल कर रहा हूँ, लेकिन इससे search results को नुक़सान होता है। मैं ब्लॉग को manual HTML से 11ty पर migrate कर रहा हूँ, इसलिए साथ में ब्लॉग को बेहतर भी बनाना चाहता हूँ
    साथ ही, मौजूदा ब्लॉग design पर राय भी चाहूँगा

  • बढ़िया है। बस अफ़सोस यह है कि browsers के बीच rendering differences बहुत बड़े हैं
    सोच रहा हूँ कि क्या किसी ने यही चीज़ shadow से भी की है। shadows भी stack की जा सकती हैं शायद

    • outline बनाने के लिए shadow को गोलाकार फैलाना पड़ता है, इसलिए पूरी shape आख़िरकार लगभग वृत्त की ओर सिमट जाती है और अक्षरों की shape को लगभग फॉलो नहीं करती

  • मेरे दिमाग़ में सबसे पहले content में emoji डालने का ख़याल आया। लेकिन सिर्फ़ अज्ञात character वाला चौकोर बॉक्स दिखा। शायद मैं किसी जादू जैसी चीज़ की उम्मीद कर रहा था

    • मेरी तरफ़ emoji render तो हुआ, लेकिन outline effect बिल्कुल नहीं था; बस सामान्य emoji ही दिखा
    • font के रूप में Noto Emoji इस्तेमाल करें तो काम करता है