फैंसी छवि सजावट: मास्क और उन्नत होवर प्रभाव

इस तीन-भाग श्रृंखला के भाग 2 में आपका स्वागत है! हम अभी भी बिना किसी अतिरिक्त तत्वों और छद्म तत्वों के छवियों को सजा रहे हैं। मुझे आशा है कि आपने पहले ही पचाने के लिए समय निकाल लिया है भाग 1 क्योंकि हम भयानक दृश्य प्रभाव बनाने के लिए बहुत सारे ग्रेडिएंट के साथ काम करना जारी रखेंगे। हम सीएसएस भी पेश करने जा रहे हैं mask अधिक जटिल सजावट और होवर प्रभाव के लिए संपत्ति।

आइए पहले उदाहरण की ओर मुड़ें, जिस पर हम एक साथ काम कर रहे हैं…

डाक टिकट

मानो या न मानो, डाक टिकट सीएसएस प्रभाव बनाने के लिए केवल दो ग्रेडिएंट और एक फिल्टर की आवश्यकता होती है:

img {
  --r: 10px; /* control the radius of the circles */
  padding: calc(2 * var(--r));
  filter: grayscale(.4);
  background: 
    radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#fff 0 0) no-repeat
      50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}

जैसा कि हमने saw में देखा पिछला लेख, पहला कदम छवि के चारों ओर जगह बनाना है padding इसलिए हम एक पृष्ठभूमि ढाल बना सकते हैं और इसे वहां देख सकते हैं। फिर हम के संयोजन का उपयोग करते हैं radial-gradient() और linear-gradient() छवि के चारों ओर उन मंडलियों को काटने के लिए।

यहां एक चरण-दर-चरण चित्रण है जो दिखाता है कि ग्रेडिएंट कैसे कॉन्फ़िगर किए जाते हैं:

के उपयोग पर ध्यान दें round दूसरे चरण में मूल्य। यह चाल के लिए बहुत महत्वपूर्ण है क्योंकि यह सुनिश्चित करता है कि ढाल के आकार को सभी पक्षों पर पूरी तरह से गठबंधन करने के लिए समायोजित किया गया है, इससे कोई फर्क नहीं पड़ता कि छवि चौड़ाई या ऊंचाई क्या है।

से विशेष विवरण: छवि को उतनी ही बार दोहराया जाता है, जितनी बार पृष्ठभूमि स्थिति क्षेत्र में फ़िट होगी। यदि यह कई बार फिट नहीं होता है, तो इसे फिर से बढ़ाया जाता है ताकि यह हो।

गोल फ्रेम

आइए एक और छवि सजावट देखें जो मंडलियों का उपयोग करती है…

यह उदाहरण भी a . का उपयोग करता है radial-gradient(), लेकिन इस बार मैंने मंडलियां बनाई हैं चारों ओर कट-आउट प्रभाव के बजाय छवि। ध्यान दें कि मैं भी उपयोग कर रहा हूँ round फिर से मूल्य। यहां सबसे मुश्किल हिस्सा फ्रेम और छवि के बीच का पारदर्शी अंतर है, जहां मैं सीएसएस के लिए पहुंचता हूं mask संपत्ति:

img {
  --s: 20px; /* size of the frame */
  --g: 10px; /* the gap */
  --c: #FA6900; 

  padding: calc(var(--g) + var(--s));
  background: 
    radial-gradient(farthest-side, var(--c) 97%, #0000) 
      0 0 / calc(2 * var(--s)) calc(2 * var(--s)) round;
  mask:
    conic-gradient(from 90deg at calc(2 * var(--s)) calc(2 * var(--s)), #0000 25%, #000 0)
      calc(-1 * var(--s)) calc(-1 * var(--s)),
    linear-gradient(#000 0 0) content-box;
}

मास्किंग हमें छवि के क्षेत्र को दिखाने की अनुमति देता है - धन्यवाद linear-gradient() वहाँ - साथ ही साथ 20px इसके हर तरफ - धन्यवाद conic-gradient()। 20px चर के अलावा कुछ नहीं है --s जो फ्रेम के आकार को परिभाषित करता है। दूसरे शब्दों में, हमें अंतर को छिपाने की जरूरत है।

मेरा मतलब यह है कि मेरा क्या मतलब है:

रैखिक ढाल पृष्ठभूमि का नीला भाग है जबकि शंकु ढाल पृष्ठभूमि का लाल भाग है। दोनों ग्रेडिएंट्स के बीच का वह पारदर्शी हिस्सा वह है जिसे हम अपने तत्व से काटते हैं ताकि आंतरिक पारदर्शी सीमा का भ्रम पैदा हो सके।

आंतरिक पारदर्शी सीमा

इसके लिए हम कोई फ्रेम नहीं बनाएंगे बल्कि कुछ अलग करने की कोशिश करेंगे। हम एक पारदर्शी आंतरिक सीमा बनाने जा रहे हैं अंदर हमारी छवि। शायद वास्तविक दुनिया के परिदृश्य में यह उपयोगी नहीं है, लेकिन सीएसएस मास्क के साथ यह अच्छा अभ्यास है।

पिछले उदाहरण के समान, हम दो ग्रेडिएंट्स पर भरोसा करने जा रहे हैं: a linear-gradient() आंतरिक भाग के लिए, और a conic-gradient() बाहरी भाग के लिए। हम पारदर्शी सीमा प्रभाव बनाने के लिए उनके बीच एक जगह छोड़ देंगे।

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */

  --_g: calc(100% - 2 * (var(--d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--d) var(--d), #0000 25%, #000 0)
      0 0 / calc(100% - var(--d)) calc(100% - var(--d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
}

आपने देखा होगा कि इस उदाहरण के शंक्वाकार प्रवणता का सिंटैक्स पिछले उदाहरण से भिन्न है। दोनों को एक ही आकार बनाना है, तो वे अलग क्यों हैं? ऐसा इसलिए है क्योंकि हम विभिन्न सिंटैक्स का उपयोग करके एक ही परिणाम तक पहुँच सकते हैं। यह पहली बार में भ्रमित करने वाला लग सकता है, लेकिन यह एक अच्छी विशेषता है। आप खोजने के लिए बाध्य नहीं हैं la एक विशेष आकार प्राप्त करने के लिए समाधान। आपको केवल एक समाधान खोजने की जरूरत है जो आपके लिए कई संभावनाओं में से काम करता है।

ग्रेडिएंट का उपयोग करके बाहरी वर्ग बनाने के चार तरीके यहां दिए गए हैं:

इसे दूर करने के और भी तरीके हैं, लेकिन आपको बात समझ में आ गई है।

कोई Best™ तरीका नहीं है। व्यक्तिगत रूप से, मैं सबसे छोटे और सबसे अनुकूलित कोड वाले को खोजने का प्रयास करता हूं। मेरे लिए, कोई भी समाधान जिसके लिए कम ग्रेडिएंट, कम गणना और कम दोहराए गए मानों की आवश्यकता होती है, वह सबसे उपयुक्त है। कभी-कभी मैं अधिक वर्बोज़ सिंटैक्स चुनता हूं क्योंकि यह मुझे चर बदलने और चीजों को संशोधित करने के लिए अधिक लचीलापन देता है। यह अनुभव और अभ्यास के साथ आता है। जितना अधिक आप ग्रेडिएंट के साथ खेलते हैं, उतना ही आप जानते हैं कि किस सिंटैक्स का उपयोग करना है और कब।

आइए अपनी आंतरिक पारदर्शी सीमा पर वापस जाएं और होवर प्रभाव में खुदाई करें। यदि आपने ध्यान नहीं दिया, तो एक शांत होवर प्रभाव होता है जो उस पारदर्शी सीमा को a . का उपयोग करके स्थानांतरित करता है font-size छल। विचार को परिभाषित करना है --d के मान के साथ चर 1em. यह चर किनारे से सीमा की दूरी को नियंत्रित करता है। हम इस तरह बदल सकते हैं:

--_d: calc(var(--d) + var(--s) * 1em)

…हमें निम्नलिखित अद्यतन सीएसएस दे रहे हैं:

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */
  --o: 15px; /* the offset on hover */
  --s: 1;    /* the direction of the hover effect (+1 or -1)*/

  --_d: calc(var(--d) + var(--s) * 1em);
  --_g: calc(100% - 2 * (var(--_d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--_d) var(--_d), #0000 25%, #000 0)
     0 0 / calc(100% - var(--_d)) calc(100% - var(--_d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
  font-size: 0;
  transition: .35s;
}
img:hover {
  font-size: var(--o);
}

RSI font-size प्रारंभ में के बराबर है 0 ,इसलिए 1em के बराबर भी है 0 और --_d के बराबर है --d. होवर पर, हालांकि, font-size a द्वारा परिभाषित मान के बराबर है --o वेरिएबल जो सीमा की ऑफसेट सेट करता है। यह, बदले में, अद्यतन करता है --_d चर, ऑफसेट द्वारा सीमा को स्थानांतरित करना। फिर मैं एक और चर जोड़ता हूं, --s, उस चिन्ह को नियंत्रित करने के लिए जो यह तय करता है कि सीमा अंदर या बाहर जाती है या नहीं।

RSI font-size चाल वास्तव में उपयोगी है यदि हम उन गुणों को चेतन करना चाहते हैं जो अन्यथा अचेतन हैं। के साथ परिभाषित कस्टम गुण @property इसे हल कर सकते हैं लेकिन इसके लिए समर्थन जिस समय मैं यह लिख रहा हूं उस समय अभी भी कमी है।

फ्रेम खुलासा

हमने इस श्रृंखला के पहले भाग में निम्नलिखित प्रकट एनीमेशन बनाया है:

हम एक ही विचार ले सकते हैं, लेकिन एक ठोस रंग के साथ सीमा के बजाय हम इस तरह एक ढाल का उपयोग करेंगे:

यदि आप दोनों कोडों की तुलना करते हैं तो आपको निम्नलिखित परिवर्तन दिखाई देंगे:

1. मैंने पहले उदाहरण से उसी ग्रेडिएंट कॉन्फ़िगरेशन का उपयोग किया था mask संपत्ति। मैं बस से ग्रेडिएंट्स को स्थानांतरित करता हूं background के लिए संपत्ति mask संपत्ति।
2. मैंने जोड़ा repeating-linear-gradient() ढाल सीमा बनाने के लिए।

इतना ही! मैंने पहले से ही देखे गए अधिकांश कोड का पुन: उपयोग किया - सुपर छोटे बदलावों के साथ - और होवर प्रभाव के साथ एक और अच्छी छवि सजावट प्राप्त की।

/* Solid color border */

img {
  --c: #8A9B0F; /* the border color */
  --b: 10px;   /* the border thickness*/
  --g: 5px;  /* the gap on hover */

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, var(--c) 0;
  background: 
    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200% no-repeat;
  transition: .3s, background-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, background-size .3s .3s;
}

/* Gradient color border */

img {
  --b: 10px; /* the border thickness*/
  --g: 5px;  /* the gap on hover */
  background: repeating-linear-gradient(135deg, #F8CA00 0 10px, #E97F02 0 20px, #BD1550 0 30px);

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, #000 0;
  mask: 
    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200% no-repeat,
    linear-gradient(#000 0 0) content-box;
  transition: .3s, mask-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, mask-size .3s .3s;
}

आइए एक और फ्रेम एनीमेशन का प्रयास करें। यह थोड़ा मुश्किल है क्योंकि इसमें a . है तीन-चरण एनीमेशन:

एनीमेशन का पहला चरण निचले किनारे को बड़ा करना है। इसके लिए, हम समायोजित करते हैं background-size एक की linear-gradient():

आप शायद सोच रहे होंगे कि मैं टॉप एज को भी क्यों जोड़ रहा हूं। हमें तीसरे चरण के लिए इसकी आवश्यकता है। मैं हमेशा अपने द्वारा लिखे गए कोड को अनुकूलित करने का प्रयास करता हूं, इसलिए मैं ऊपर और नीचे दोनों पक्षों को कवर करने के लिए एक ढाल का उपयोग कर रहा हूं, लेकिन शीर्ष एक छिपा हुआ है और बाद में एक के साथ प्रकट होता है mask.

दूसरे चरण के लिए, हम बाएँ और दाएँ किनारों को दिखाने के लिए एक दूसरा ग्रेडिएंट जोड़ते हैं। लेकिन इस बार, हम इसका उपयोग करके करते हैं background-position:

हम यहां रुक सकते हैं क्योंकि हमारे पास पहले से ही दो ग्रेडिएंट के साथ एक अच्छा प्रभाव है, लेकिन हम यहां सीमाओं को आगे बढ़ाने के लिए हैं, इसलिए तीसरे चरण को प्राप्त करने के लिए मास्क का एक स्पर्श जोड़ें।

चाल यह है कि शीर्ष किनारे को तब तक छिपाया जाए जब तक कि हम नीचे और किनारे न दिखा दें और फिर हम अपडेट करें mask-size (या mask-position) शीर्ष भाग दिखाने के लिए। जैसा कि मैंने पहले कहा, हम समान प्रभाव प्राप्त करने के लिए बहुत सारे ढाल विन्यास पा सकते हैं।

मेरे द्वारा उपयोग किए जा रहे ग्रेडिएंट्स का एक उदाहरण यहां दिया गया है:

मैं दो शंकु ग्रेडिएंट का उपयोग कर रहा हूं जिनकी चौड़ाई बराबर है 200%. दोनों ग्रेडियेंट उस क्षेत्र को कवर करते हैं जो केवल शीर्ष भाग को खुला छोड़ देता है (वह हिस्सा बाद में अदृश्य हो जाएगा)। होवर पर, मैं उस हिस्से को कवर करने के लिए दोनों ग्रेडियेंट को स्लाइड करता हूं।

क्या हो रहा है इसका एक बेहतर विचार देने के लिए यहां एक ग्रेडिएंट का बेहतर उदाहरण दिया गया है:

अब हम इसे अंदर डालते हैं mask संपत्ति और हम कर रहे हैं! यहाँ पूरा कोड है:

img {
  --b: 6px;  /* the border thickness*/
  --g: 10px; /* the gap */
  --c: #0E8D94;

  padding: calc(var(--b) + var(--g));
  --_l: var(--c) var(--b), #0000 0 calc(100% - var(--b)), var(--c) 0;
  background:
    linear-gradient(var(--_l)) 50%/calc(100% - var(--_i,80%)) 100% no-repeat,
    linear-gradient(90deg, var(--_l)) 50% var(--_i,-100%)/100% 200% no-repeat;  
  mask:
    conic-gradient(at 50% var(--b),#0000 25%, #000 0) calc(50% + var(--_i, 50%)) / 200%,
    conic-gradient(at 50% var(--b),#000 75%, #0000 0) calc(50% - var(--_i, 50%)) / 200%;
  transition: 
    .3s calc(.6s - var(--_t,.6s)) mask-position, 
    .3s .3s background-position,
    .3s var(--_t,.6s) background-size,
    .4s transform;
  cursor: pointer;
}
img:hover {
  --_i: 0%;
  --_t: 0s;
  transform: scale(1.2);
}

मैंने कोड को अनुकूलित करने के लिए कुछ चर भी पेश किए हैं, लेकिन आपको अभी इसका उपयोग करना चाहिए।

चार-चरणीय एनीमेशन के बारे में क्या? हाँ, यह मुमकिन है!

इसके लिए कोई स्पष्टीकरण नहीं है क्योंकि यह आपका गृहकार्य है! इस लेख में आपने जो कुछ भी सीखा है, उसे कोड को विच्छेदित करने के लिए लें और यह स्पष्ट करने का प्रयास करें कि यह क्या कर रहा है। तर्क पिछले सभी उदाहरणों के समान है। एनीमेशन के प्रत्येक चरण को समझने के लिए प्रत्येक ग्रेडिएंट को अलग करना महत्वपूर्ण है। चीजों को पढ़ने में थोड़ा आसान बनाने के लिए मैंने कोड को गैर-अनुकूलित रखा। मेरे पास है एक अनुकूलित संस्करण यदि आप रुचि रखते हैं, लेकिन आप स्वयं कोड को अनुकूलित करने का प्रयास कर सकते हैं और अतिरिक्त अभ्यास के लिए मेरे संस्करण के साथ इसकी तुलना कर सकते हैं।

ऊपर लपेटकर

रचनात्मक छवि सजावट पर इस तीन-भाग श्रृंखला के भाग 2 के लिए बस इतना ही तत्व। अब हमारे पास एक अच्छा नियंत्रण है कि कैसे ग्रेडिएंट और मास्क को जोड़ा जा सकता है ताकि भयानक दृश्य प्रभाव और यहां तक ​​​​कि एनिमेशन - अतिरिक्त तत्वों या छद्म तत्वों तक पहुंचे बिना। हाँ, एकल टैग पर्याप्त है!

इस श्रृंखला में हमारे पास जाने के लिए एक और लेख है। तब तक, यहाँ एक शांत होवर प्रभाव वाला एक बोनस डेमो है जहाँ मैं उपयोग करता हूँ mask एक टूटी हुई छवि को इकट्ठा करने के लिए।