फैंसी छवि सजावट: एकल तत्व जादू

जैसा कि शीर्षक कहता है, हम छवियों को सजाने जा रहे हैं! वहाँ अन्य लेखों का एक समूह है जो इस बारे में बात करते हैं, लेकिन हम यहाँ जो कवर कर रहे हैं वह काफी अलग है क्योंकि यह एक चुनौती से अधिक है। चुनौती? केवल का उपयोग करके एक छवि को सजाएं टैग और कुछ नहीं।

वह अधिकार, कोई अतिरिक्त मार्कअप नहीं, कोई div नहीं, और कोई छद्म तत्व नहीं। सिर्फ एक टैग।

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

आइए अपने पहले उदाहरण से शुरू करते हैं

कोड में खुदाई करने से पहले आइए स्टाइल करने की संभावनाओं की गणना करें बिना किसी अतिरिक्त तत्व या छद्म तत्वों के। हम प्रयोग कर सकते हैं border, box-shadow, outline, और, ज़ाहिर है, background. किसी छवि में पृष्ठभूमि जोड़ना अजीब लग सकता है क्योंकि हम इसे नहीं देख सकते क्योंकि यह छवि के पीछे होगा - लेकिन चाल अंतरिक्ष बनाने की है चारों ओर छवि का उपयोग कर padding और / या border और फिर उस स्थान के अंदर हमारी पृष्ठभूमि बनाएं।

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

आइए अपने पहले उदाहरण पर वापस आते हैं:

img {
  --s: 10px; /* control the size */
  padding: var(--s);
  border: calc(2 * var(--s)) solid #0000;
  outline: 1px solid #000;
  outline-offset: calc(-1 * var(--s));
  background: conic-gradient(from 90deg at 1px 1px, #0000 25%, #000 0);
}

हम परिभाषित कर रहे हैं padding और एक पारदर्शी border चर का उपयोग करना --s हमारी छवि के चारों ओर उस चर के तीन गुना के बराबर एक स्थान बनाने के लिए।

हम दोनों का उपयोग क्यों कर रहे हैं padding और border एक या दूसरे के बजाय? हम उनमें से केवल एक का उपयोग करके प्राप्त कर सकते हैं लेकिन मुझे अपने ग्रेडिएंट के लिए इस संयोजन की आवश्यकता है, क्योंकि डिफ़ॉल्ट रूप से, का प्रारंभिक मान background-clip is border-box और background-origin के बराबर है padding-box.

तर्क को समझने के लिए यहां चरण-दर-चरण चित्रण दिया गया है:

प्रारंभ में, हमारे पास छवि पर कोई सीमा नहीं है, इसलिए हमारा ग्रेडिएंट दो खंड बनाएगा 1px मोटाई का। (मै इस्तेमाल कर रहा हूँ 3px इस विशिष्ट डेमो में इसलिए इसे देखना आसान है।) हम एक रंगीन बॉर्डर जोड़ते हैं और ग्रेडिएंट अभी भी हमें पैडिंग क्षेत्र के अंदर वही परिणाम देता है (के कारण) background-origin) लेकिन यह सीमा के पीछे दोहराता है। यदि हम बॉर्डर के रंग को पारदर्शी बनाते हैं, तो हम दोहराव का उपयोग कर सकते हैं और हमें मनचाहा फ्रेम मिल जाता है।

RSI outline डेमो में एक नकारात्मक ऑफसेट है। यह ग्रेडिएंट के शीर्ष पर एक चौकोर आकार बनाता है। इतना ही! हमने एक ढाल और एक का उपयोग करके अपनी छवि में एक अच्छी सजावट जोड़ी है outline. हम और अधिक ग्रेडिएंट इस्तेमाल कर सकते थे! लेकिन मैं हमेशा अपने कोड को यथासंभव सरल रखने की कोशिश करता हूं और मैंने पाया कि a adding outline उस तरह से बेहतर है।

यहाँ एक ढाल-केवल समाधान है जहाँ मैं केवल उपयोग कर रहा हूँ padding अंतरिक्ष को परिभाषित करने के लिए। अभी भी वही परिणाम लेकिन अधिक जटिल वाक्यविन्यास के साथ।

आइए एक और विचार का प्रयास करें:

इसके लिए, मैंने पिछले उदाहरण को हटा दिया था outline, और लागू किया गया clip-path प्रत्येक तरफ ढाल को काटने के लिए। clip-path value थोड़ा वर्बोज़ और भ्रमित करने वाला है लेकिन इसके बिंदुओं को बेहतर ढंग से देखने के लिए यहां एक उदाहरण दिया गया है:

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

कॉर्नर-ओनली फ्रेम

यह चार ग्रेडिएंट लेता है। प्रत्येक ग्रेडिएंट एक कोने को कवर करता है और, होवर पर, हम छवि के चारों ओर एक पूर्ण फ्रेम बनाने के लिए उनका विस्तार करते हैं। आइए किसी एक ग्रेडिएंट के लिए कोड को विच्छेदित करें:

--b: 5px; /* border thickness */
background: conic-gradient(from 90deg at top var(--b) left var(--b), #0000 90deg, darkblue 0) 0 0;
background-size: 50px 50px; 
background-repeat: no-repeat;

हम बराबर आकार के साथ एक ढाल बनाने जा रहे हैं 50px 50px और इसे ऊपरी-बाएँ कोने में रखें (0 0) ग्रेडिएंट के कॉन्फ़िगरेशन के लिए, यहां चरण-दर-चरण चित्रण दिखाया गया है कि मैं उस परिणाम तक कैसे पहुंचा।

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

#0000 25%, darkblue 0

यह मूल रूप से कह रहा है: "ग्रेडिएंट को पारदर्शी रंग से तब तक भरें जब तक 25% क्षेत्र का, फिर शेष क्षेत्र को से भरें darkblue.

हो सकता है कि आप अपना सिर खुजला रहे हों 0 मूल्य। वाक्य रचना को सरल बनाने के लिए यह एक छोटा सा हैक है। वास्तव में, हमें इसका उपयोग रंगों के बीच एक कठिन पड़ाव बनाने के लिए करना चाहिए:

#0000 25%, darkblue 25%

यह अधिक तार्किक है! पारदर्शी रंग समाप्त होता है 25% और darkblue ठीक वहीं से शुरू होता है जहां पारदर्शिता समाप्त होती है, एक कठिन पड़ाव बनाते हुए। अगर हम दूसरे को से बदल दें 0, ब्राउज़र हमारे लिए काम करेगा, इसलिए इसके बारे में जाने का यह थोड़ा अधिक कुशल तरीका है।

कहीं विशेष विवरण, इसे कहते हैं:

अगर एक रंग रोक or संक्रमण संकेत एक स्थिति है जो सूची में किसी भी रंग स्टॉप या संक्रमण संकेत की निर्दिष्ट स्थिति से कम है, इसकी स्थिति को किसी भी रंग स्टॉप या संक्रमण संकेत की सबसे बड़ी निर्दिष्ट स्थिति के बराबर सेट करें।

0 हमेशा किसी भी अन्य मान से छोटा होता है, इसलिए ब्राउज़र हमेशा इसे घोषणा में इससे पहले आने वाले सबसे बड़े मान में बदल देगा। हमारे मामले में, वह संख्या है 25%.

अब, हम सभी कोनों पर एक ही तर्क लागू करते हैं और हम निम्नलिखित कोड के साथ समाप्त करते हैं:

img {
  --b: 5px; /* border thickness */
  --c: #0000 90deg, darkblue 0; /* define the color here */
  padding: 10px;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b), var(--c)) 0 0,
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--c)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b), var(--c)) 0 100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--c)) 100% 100%;
  background-size: 50px 50px; /* adjust border length here */
  background-repeat: no-repeat;
}

मैंने कुछ अतिरेक से बचने के लिए CSS चर पेश किए हैं क्योंकि सभी ग्रेडिएंट समान रंग विन्यास का उपयोग करते हैं।

होवर प्रभाव के लिए, मैं केवल पूर्ण फ्रेम बनाने के लिए ग्रेडिएंट के आकार को बढ़ा रहा हूं:

img:hover {
  background-size: 51% 51%;
}

हा ये है 51% के बजाय 50% - जो एक छोटा ओवरलैप बनाता है और संभावित अंतराल से बचाता है।

आइए उसी तकनीक का उपयोग करके एक और विचार का प्रयास करें:

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

img {
  --b: 8px;  /* border thickness*/
  --s: 60px; /* size of the corner*/
  --g: 14px; /* the gap*/
  --c: #EDC951; 

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

क्यों करते हैं? --_i और --_p चर के नाम पर अंडरस्कोर है? अंडरस्कोर एक नामकरण सम्मेलन का हिस्सा हैं जिसका उपयोग मैं कोड को अनुकूलित करने के लिए उपयोग किए जाने वाले "आंतरिक" चर पर विचार करने के लिए करता हूं। वे कुछ खास नहीं हैं लेकिन मैं फ्रेम को नियंत्रित करने के लिए हमारे द्वारा समायोजित किए जाने वाले चर के बीच अंतर करना चाहता हूं (जैसे --b, --c, आदि) और जिन्हें मैं कोड को छोटा बनाने के लिए उपयोग करता हूं।

कोड भ्रमित करने वाला लग सकता है और समझने में आसान नहीं है लेकिन मैंने लिखा a तीन भाग श्रृंखला जहां मैं ऐसी तकनीक का विवरण देता हूं। मैं यह समझने के लिए कम से कम पहला लेख पढ़ने की अत्यधिक अनुशंसा करता हूं कि मैं उपरोक्त कोड तक कैसे पहुंचा।

विभिन्न मूल्यों को बेहतर ढंग से समझने के लिए यहां एक उदाहरण दिया गया है:

फ्रेम खुलासा

आइए एक अन्य प्रकार के एनीमेशन का प्रयास करें जहां हम होवर पर पूर्ण फ्रेम प्रकट करते हैं:

बिल्कुल सटीक? और यदि आप बारीकी से देखें, तो आप देखेंगे कि माउस पर विपरीत दिशा में रेखाएं गायब हो जाती हैं जो प्रभाव को और भी अधिक आकर्षक बनाती है! मैंने इसी तरह के प्रभाव का इस्तेमाल किया पिछले लेख.

लेकिन इस बार, सभी तत्वों को कवर करने के बजाय, मैं एक को परिभाषित करके केवल एक छोटे से हिस्से को कवर करता हूं height ऐसा कुछ पाने के लिए:

यह हमारे फ्रेम की ऊपरी सीमा है। हम छवि के प्रत्येक पक्ष पर एक ही प्रक्रिया दोहराते हैं और हमारा होवर प्रभाव होता है:

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

  padding: calc(var(--g) + var(--b));
  --_g: no-repeat linear-gradient(var(--c) 0 0);
  background: 
    var(--_g) var(--_i, 0%) 0,
    var(--_g) 100% var(--_i, 0%),
    var(--_g) calc(100% - var(--_i, 0%)) 100%,
    var(--_g) 0 calc(100% - var(--_i, 0%));
  background-size: var(--_i, 0%) var(--b),var(--b) var(--_i, 0%);
  transition: .4s, background-position 0s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
}

जैसा कि आप देख सकते हैं, मैं एक ही ग्रेडिएंट को चार बार लागू कर रहा हूं और एक समय में केवल एक ही पक्ष को कवर करने के लिए प्रत्येक की एक अलग स्थिति है।

और एक? चलिए चलते हैं!

यह थोड़ा मुश्किल लग रहा है और वास्तव में यह समझने के लिए कुछ कल्पना की आवश्यकता है कि कैसे दो शंकु ग्रेडियेंट इस तरह के जादू को खींच रहे हैं। यहाँ एक ग्रेडिएंट को चित्रित करने के लिए एक डेमो दिया गया है:

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

लेकिन मैंने ग्रेडिएंट की चौड़ाई क्यों बनाई? 200%? आप सोचेंगे 100% पर्याप्त होगा, है ना?

100% पर्याप्त होना चाहिए, लेकिन मैं ढाल को स्थानांतरित नहीं कर पाऊंगा जैसे मैं चाहता हूं अगर मैं इसकी चौड़ाई के बराबर रखता हूं 100%. यह कैसे से संबंधित एक और छोटी सी विचित्रता है background-position काम करता है। मैं इसे कवर करता हूँ पिछले लेख। मैं भी स्टैक ओवरफ़्लो पर एक उत्तर पोस्ट किया इससे निपटने। मुझे पता है कि यह बहुत पढ़ना है, लेकिन यह वास्तव में आपके समय के लायक है।

अब जब हमने एक ग्रेडिएंट के लिए तर्क समझा दिया है, तो दूसरा आसान है क्योंकि यह बिल्कुल वही काम कर रहा है, लेकिन इसके बजाय बाएं और निचले किनारों को कवर कर रहा है। हमें बस कुछ मूल्यों को स्वैप करना है और हम कर चुके हैं:

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

  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;
}

जैसा कि आप देख सकते हैं, दोनों ग्रेडिएंट लगभग समान हैं। मैं बस आकार और स्थिति के मूल्यों की अदला-बदली कर रहा हूं।

फ्रेम रोटेशन

इस बार हम अपनी छवि के चारों ओर एक फ्रेम नहीं बनाने जा रहे हैं, बल्कि मौजूदा एक के रूप को समायोजित करने जा रहे हैं।

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

आइए देखें कि शीर्ष ग्रेडिएंट के लिए एनीमेशन कैसे बनाया जाता है:

मैं बस एक दोहराए जाने वाले ग्रेडिएंट की स्थिति को अपडेट कर रहा हूं। अभी कुछ भी फैंसी नहीं है! आइए दाईं ओर के लिए भी ऐसा ही करें:

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

अब, हम शेष किनारों को कवर करने के लिए दो और ग्रेडिएंट जोड़ते हैं और हम कर चुके हैं:

img {
  --g: 4px; /* the gap */
  --b: 12px; /* border thickness*/
  --c: #669706; /* the color */

  padding: calc(var(--g) + var(--b));
  --_c: #0000 0 25%, var(--c) 0 50%;
  --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
  background:
    var(--_g1) var(--_p, 25%) 0, 
    var(--_g2) 0 var(--_p, 125%),
    var(--_g1) var(--_p, 125%) 100%, 
    var(--_g2) 100% var(--_p, 25%);
  background-size: 200% var(--b), var(--b) 200%;
  transition: .3s;
}
img:hover {
  --_p: 75%;
}

यदि हम इस कोड को लेते हैं और इसे थोड़ा समायोजित करते हैं, तो हम एक और अच्छा एनीमेशन प्राप्त कर सकते हैं:

क्या आप इस उदाहरण में तर्क समझ सकते हैं? वह तुम्हारा गृहकार्य है! कोड डरावना लग सकता है लेकिन यह उसी तर्क का उपयोग करता है जैसा हमने पिछले उदाहरणों में देखा था। प्रत्येक ग्रेडिएंट को अलग करने का प्रयास करें और कल्पना करें कि यह कैसे एनिमेट करता है।

ऊपर लपेटकर

यह एक लेख में बहुत सारे ग्रेडिएंट हैं!

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

अगर आप कुछ स्पष्टीकरणों में खो गए हैं तो चिंता न करें। मैं हमेशा अपने कुछ पुराने लेखों की अनुशंसा करता हूं जहां मैं इस चुनौती के लिए पुनर्नवीनीकरण की गई कुछ अवधारणाओं के साथ अधिक विस्तार से जाता हूं।

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