CSS3 में बीटिंग हार्ट

शुभ दिन, प्रिय habrazhitel! आज मैं आपको सीएसएस की अंतहीन संभावनाएं दिखाऊंगा और उन्हें सिखाऊंगा कि कैसे एक खूबसूरत धड़कन पैदा की जाए।

---

STEP 1: HTML डॉक्यूमेंट लिखना

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

<div class="heart"></div>

हमें अब इसकी आवश्यकता है

---

चरण 2: दिल कैसे आकर्षित करें?

नीचे दिए गए चित्र में दिखाए गए आरेख के अनुसार, हम अपने दिल को आकर्षित करेंगे। ड्राइंग एल्गोरिथ्म को निम्नलिखित चरणों में अधिक विस्तार से वर्णित किया गया है।

---

चरण 3: ड्राइंग शुरू करें

चलो हमारे ब्लॉक का आकार 100x100px सेट करते हैं, एक फ्रेम 1 पिक्सेल मोटी लाल करें और ऊपर और बाएं फ्रेम हटा दें। छद्म तत्वों के लिए .heart: इससे पहले और .heart: के बाद, हम आयामों को 70x100px पर सेट करेंगे, वही लाल बॉर्डर से 1 पिक्सेल, बॉर्डर को दाईं ओर निकालें, और बाईं ओर के ऊपरी और बाएं निचले कोनों को 50px की त्रिज्या के साथ गोल करें।

 .आहार करो {
	 स्थिति: रिश्तेदार;
	 चौड़ाई: 100px;
	 ऊंचाई: 100 पीएक्स;
	 सीमा: ठोस 1px लाल;
	 सीमा-शीर्ष: कोई नहीं;
	 सीमा-वाम: कोई नहीं;
 }

 .heart: से पहले, .heart: के बाद {
	 स्थिति: निरपेक्ष;
	 सामग्री: '';
	 -वेबकिट-बॉर्डर-त्रिज्या: 50px 0 0 50px;  / * क्रोम और सफारी के लिए * /
	 -मोज़-बॉर्डर-त्रिज्या: 50px 0 0 50px;  / * फ़ायरफ़ॉक्स के लिए * / 
	 सीमा-त्रिज्या: 50px 0 0 50px;
	 चौड़ाई: 70 पीएक्स;
	 ऊंचाई: 100 पीएक्स;
	 सीमा: ठोस 1px लाल;
	 सीमा-अधिकार: कोई नहीं;
 } 

---

चरण 4: दिल की सूरत

नतीजतन, हमें कुछ अजीब लाइनें मिलीं। उनसे हमारे लिए सही दिल बनाने के लिए, आपको निम्नलिखित कार्य करने की आवश्यकता है:

• घुमाएँ .heart: रूपांतरण संपत्ति का उपयोग करके 90 ^ओ द्वारा छद्म तत्व के बाद : घुमाएँ (90deg) ;
• छद्म तत्वों को स्थानांतरित करें। पहले: पहले और बाद में: हमारे बाद का तत्व हमारे दिल का रूप ले लेता है ;
• ब्लॉक तत्व को 45 ^{ओ से} घुमाएं।

परिणामस्वरूप, हमें निम्नलिखित कोड मिलते हैं:

  .आहार करो {
	 स्थिति: रिश्तेदार;
	 चौड़ाई: 100px;
	 ऊंचाई: 100 पीएक्स;
	 -वेबकैट-ट्रांसफॉर्म: रोटेट (45 डीजी);  / * क्रोम और सफारी के लिए * /
	 -मोज़-ट्रांसफ़ॉर्म: रोटेट (45 डिग्री);  / * फ़ायरफ़ॉक्स के लिए * / 
	 -ओ-परिवर्तन: घुमाव (45 डिग्री);  / * ओपेरा के लिए * / 
	 परिवर्तन: घुमाएँ (45 डिग्री);
	 सीमा: ठोस 1px लाल;
	 सीमा-शीर्ष: कोई नहीं;
	 सीमा-वाम: कोई नहीं;
 }

 .heart: से पहले, .heart: के बाद {
	 स्थिति: निरपेक्ष;
	 सामग्री: '';
	 -वेबकिट-बॉर्डर-त्रिज्या: 50px 0 0 50px;
	 -मोज़-बॉर्डर-त्रिज्या: 50px 0 0 50px;
	 सीमा-त्रिज्या: 50px 0 0 50px;
	 चौड़ाई: 70 पीएक्स;
	 ऊंचाई: 100 पीएक्स;
	 सीमा: ठोस 1px लाल;
	 सीमा-अधिकार: कोई नहीं;
	 बाएं: -70 पीएक्स;
 }
 .हार्ट: के बाद। "
	 स्थिति: निरपेक्ष;
	 बाएं: 15 पीएक्स;
	 टॉप: -85 पीएक्स;
	 -वेबकैट-ट्रांसफॉर्म: रोटेट (90 डीजी);
	 -मोज़-ट्रांसफ़ॉर्म: रोटेट (90 डीजी);
	 -ओ-परिवर्तन: घुमाव (90 डिग्री);
 } 

हमें ऐसा क्या मिला है:

---

चरण 5: पृष्ठभूमि बनाना

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

  .आहार करो {
	 पृष्ठभूमि: लाल;
		 / * उन ब्राउज़रों के लिए जो ग्रेडिएंट का समर्थन नहीं करते हैं * /
	 पृष्ठभूमि: -webkit-radial-gradient (115% 50%, 75px 110px, # 8B0000, # 8B0000, लाल);
		 / * क्रोम और सफारी के लिए * /
	 पृष्ठभूमि: -मोज़-रेडियल-ग्रेडिएंट (170% 50%, सर्कल, # 8B0000 0%, # 8B0000 52%, लाल 76%);
		 / * फ़ायरफ़ॉक्स के लिए * /
	 पृष्ठभूमि: -ओ-रेडियल-ग्रेडिएंट (115% 50%, 75px 110px, # 8B0000, # 8B0000, लाल);
		 / * ओपेरा के लिए * /
	 पृष्ठभूमि: रेडियल-ढाल (115% 50%, 75px 110px, # 8B0000, # 8B0000, लाल);
		 / * CSS3 मानकों के अनुसार * /
 } 

रोगी के लिए .heart: छद्म तत्व से पहले :

  .हार्ट: इससे पहले। "
	 पृष्ठभूमि: लाल;
	 पृष्ठभूमि: -webkit- रेडियल-ग्रेडिएंट (15% 50%, 65px 65px, # FFE4E1, लाल);
	 पृष्ठभूमि: -मोज़-रेडियल-ग्रेडिएंट (15% 50%, सर्कल, # FFE4E1, लाल 85%);
	 पृष्ठभूमि: -ओ-रेडियल-ग्रेडिएंट (15% 50%, 65% 65%, # FFE4E1, लाल);
	 पृष्ठभूमि: रेडियल-ढाल (15% 50%, 65% 65%, # FFE4E1, लाल);
 } 

रोगी के लिए .heart: छद्म तत्व से पहले :

  .हार्ट: के बाद। "
	 पृष्ठभूमि: लाल;
	 पृष्ठभूमि: -webkit-radial-gradient (50% 80%, 85px 80px, # FFB6C1, red, # 8B0000);
	 पृष्ठभूमि: -मोज़-रेडियल-ग्रेडिएंट (50% 80%, सर्कल, # FFB6C1, लाल, # 8B0000 90%);
	 पृष्ठभूमि: -ओ-रेडियल-ढाल (50% 80%, 85px 80px, # FFB6C1, लाल, # 8B0000);
	 पृष्ठभूमि: रेडियल-ढाल (50% 80%, 85px 80px, # FFB6C1, लाल, # 8,0000000);
 } 

वैज्ञानिक प्रहार की विधि द्वारा मेरे द्वारा व्यक्तिगत रूप से चुने गए हैं;)
ब्राउज़र जो किसी कारण से CSS3 ग्रेडिएंट्स को नहीं समझते हैं, बस एक लाल दिल देखेंगे।

---

कदम 6: चलो हमारे दिल की धड़कन बनाते हैं

अब हमारे दिल की धड़कन बनाने की कोशिश करो। अद्भुत CSS3 की संपत्ति, एनीमेशन, इससे हमें मदद मिलेगी। तथाकथित कीफ़्रेम का नाम इसमें दर्ज किया गया है (यह बताता है कि एनीमेशन के दौरान तत्व की शैली कैसे बदलती है), एनीमेशन की अवधि, पुनरावृत्ति की संख्या, आदि।
ब्राउज़र को यह बताने के लिए कि उसे .heart वर्ग में हमारे तत्व को चेतन करना चाहिए , लिखें:

  .आहार करो {
	 एनीमेशन-नाम: 'एनीमे';
		 / * एनीमेशन के लिए कीफ्रेम का नाम * /
	 एनीमेशन-अवधि: 300ms;
		 / * एनिमेशन अवधि * /
	 एनीमेशन-पुनरावृति-गणना: अनंत;
		 इस मामले में / * दोहराव की संख्या - असीम रूप से * /
	 एनीमेशन-दिशा: वैकल्पिक;
		 / * आगे और पीछे के क्रम में एनीमेशन खेलें * /
	 एनीमेशन-टाइमिंग-फ़ंक्शन: आसानी से;
		 / * एनीमेशन के लिए समय अंतराल की गणना, इस मामले में एनीमेशन त्वरित है * /
 } 

अब आइये एनीमेशन के लिए हमारी keyframe लिखते हैं। इसमें, हम लिखते हैं कि एनीमेशन के दौरान तत्व 1.1 गुना बढ़ जाना चाहिए, और फिर अपने मूल आकार में वापस आ जाना चाहिए। यह मत भूलो कि हमने तत्व को 45 ^{ओ से} घुमाया।

  @keyframes 'एनीमे' {
	 {से
		 रूपांतर: स्केल (1) रोटेट (45 डिग्री);
	 }
	 को {
		 रूपांतर: स्केल (1.1) रोटेट (45 डिग्री);
	 }
 }

---

चरण 7: क्रॉस-ब्राउज़र समस्याएं

तथ्य यह है कि ब्राउज़र अभी तक अधिकांश मूल CSS3 गुणों का समर्थन नहीं करते हैं, लेकिन उनके नाम के तहत अपने स्वयं के एनालॉग हैं। इसलिए, कई गुणों के लिए, हमें शुरुआत में -webkit- या -moz- जैसे उपसर्ग लिखना होगा।
विभिन्न ब्राउज़रों के लिए, उनके उपसर्ग हैं:

• -webkit- वेबकिट इंजन (क्रोम, सफारी) पर ब्राउज़रों के लिए;
• -मोज़- गेको इंजन (फ़ायरफ़ॉक्स, सीमॉन्की) पर ब्राउज़रों के लिए;
• -o- प्रेस्टो इंजन (ओपेरा, निंटेंडो डीएस ब्राउज़र) का उपयोग करने वाले ब्राउज़रों के लिए;

हमारे एनीमेशन के लिए विभिन्न ब्राउज़रों में काम करने के लिए (और यह क्रोम, सफारी 5 और फ़ायरफ़ॉक्स में काम करेगा), हमें विभिन्न उपसर्गों के साथ एनीमेशन के साथ ब्लॉक लिखने की आवश्यकता है। Google Chrome ब्राउज़र के मामले पर विचार करें:

  .आहार करो {
	 -वेबकिट-एनीमेशन-नाम: 'एनीमे';
	 -webkit- एनीमेशन-अवधि: 300ms;
	 -webkit- एनीमेशन-पुनरावृत्ति-गणना: अनंत;
	 -webkit- एनीमेशन-दिशा: वैकल्पिक;
	 -webkit- एनीमेशन-टाइमिंग-फ़ंक्शन: आसानी-में;
 } 

  @ -webkit- कीफ्रेम 'एनीमे' {
	 {से
		 -वेबकैट-ट्रांसफॉर्म: स्केल (1) रोटेट (45 डीजी);
	 }
	 को {
		 -वेबकैट-ट्रांसफॉर्म: स्केल (1.1) रोटेट (45 डीजी);
	 }
 }

कृपया ध्यान दें कि गेको इंजन पर ब्राउज़रों के लिए कीफ़्रेम लिखते समय, कीफ़्रेम के नाम से उद्धरण डालने की आवश्यकता नहीं है।

---

परिणाम

परिणाम मेरे लिए आश्चर्यजनक है: सुंदर, सुरुचिपूर्ण, सरल। आप यहां डेमो देख सकते हैं ।
मोज़िला फ़ायरफ़ॉक्स 4.0+, सफारी 4, Google क्रोम 3.0+ में सही ढंग से काम करेगा। ओपेरा 12 संस्करण से शुरू होने पर केवल ग्रेडिएंट दिखाई देंगे।

पुनश्च: यह मुझे लगता है कि यह दिल वेलेंटाइन डे पर एक आईटी लड़की के लिए एक शानदार उपहार होगा। आपको क्या लगता है?