CSS3 के साथ Gmail लोगो कैसे बनाएं
कुछ महीने पहले मैंने आपको CSS3 के साथ RSS फ़ीड लोगो बनाने का तरीका दिखाया था। मुझे लगा कि यह कुछ और थोड़ा जटिल बनाने में मज़ा आएगा। आज की पोस्ट में, मैं आपको दिखाने जा रहा हूं कि कैसे एक नहीं, बल्कि सिर्फ CSS3 का उपयोग करके जीमेल लोगो के दो बदलाव किए जाएंगे.
शॉर्टकट:
- जीमेल लोगो सीएसएस ट्यूटोरियल # 1 | पूर्वावलोकन
- जीमेल लोगो सीएसएस ट्यूटोरियल # 2 | पूर्वावलोकन
Gmail लोगो # 1
यह पहला लोगो सरल है, और निर्मित करने में काफी आसान है। आगे की हलचल के बिना, यहाँ कदम हैं। आइए अपने पसंदीदा कोड संपादक को फायर करना शुरू करें और निम्नलिखित HTML कोड दर्ज करें, और इसे सहेजें लोगो-gmail.html.
जीमेल सीएसएस लोगो
निम्नलिखित सीएसएस शैलियों को बीच में जोड़ें डिफ़ॉल्ट सीएसएस मूल्यों को रीसेट करने के लिए.
.gmail-logo; .gmail-logo *: .gmail-logo *: इससे पहले, .gmail-logo *: मार्जिन = 0 के बाद; गद्दी: 0; पृष्ठभूमि: पारदर्शी; सीमा: 0; रूपरेखा: 0; प्रदर्शन क्षेत्र; फ़ॉन्ट: सामान्य सामान्य 0/0 सेरिफ़;
निम्नलिखित सीएसएस कोड हमें जीमेल लोगो की लाल पृष्ठभूमि और एक गोल पक्ष देते हैं.
.जीमेल-लोगो मार्जिन: 110 पीएक्स ऑटो; पृष्ठभूमि: आरजीबी (201, 44, 25); चौड़ाई: 600px; ऊँचाई: 400px; सीमा-शीर्ष: 4px ठोस आरजीबी (201, 44, 25); बॉर्डर-बॉटम: 4px सॉलिड आरजीबी (201, 44, 25); बॉर्डर-त्रिज्या: 10px; -moz-बॉर्डर-त्रिज्या: 10px; -webkit-बॉर्डर-त्रिज्या: 10px;
फिर, हम लाल पृष्ठभूमि के भीतर सफेद बॉक्स बनाते हुए आगे बढ़ते हैं.
.gmail-logo .gmail-box अतिप्रवाह: छिपा हुआ; बाईंओर तैरना; चौड़ाई: 440px; ऊँचाई: 400px; मार्जिन: 0 0 0 80px; पृष्ठभूमि: सफेद; बॉर्डर-त्रिज्या: 5px; -moz-बॉर्डर-त्रिज्या: 5px; -webkit-बॉर्डर-त्रिज्या: 5px;
लाल "एम" प्रभाव बनाने के लिए, हम पहले लाल बॉर्डर वाला एक बॉक्स बनाएंगे.
.gmail-logo .gmail-box: इससे पहले स्थिति: रिश्तेदार; सामग्री: "; z- सूचकांक: 1; पृष्ठभूमि; सफेद; फ्लोट: बाईं; चौड़ाई: 320px; ऊंचाई: 320px; सीमा: 100px ठोस आरजीबी (201, 44, 25); मार्जिन: -310px 0 0 -40px; सीमा- त्रिज्या: 10px; -moz- सीमा-त्रिज्या: 10px; -webkit-border-त्रिज्या: 10px; -मोज़-ट्रांसफ़ॉर्म: रोटेट (45deg); -webkit- ट्रांसफ़ॉर्म: रोटेट (45deg); -ओ-ट्रांसफ़ॉर्म: रोटेट (45deg) );
फिर हम अत्यधिक पक्षों को छिपाते हुए आगे बढ़ते हैं, जिससे हमें लाल रंग में एक पूर्ण "एम" मिलता है.
.gmail-logo .gmail-box अतिप्रवाह: छिपा हुआ;
अब, दो पतली लाल सीमा दें, जिससे यह लिफाफा दिखे.
.gmail-logo .gmail- बॉक्स: कंटेंट: "; फ्लोट: लेफ्ट; चौड़ाई: 360px; हाईट: 360px; बॉर्डर: 2px सॉलिड आरजीबी (201, 44, 25); मार्जिन: 10px 0 0 40px; -o-transform : घुमाएँ (45deg); -webkit- परिवर्तन: रोटेट (45deg); -मोज़-ट्रांसफ़ॉर्म: रोटेट (45deg);
हम लगभग कर चुके हैं। लाल लिफाफे में कुछ ढाल जोड़ते हैं.
.जीमेल-लोगो: कंटेंट: "; पोज़िशन: रिलेटिव; जेड-इंडेक्स: 2; कंटेंट:"; बाईंओर तैरना; मार्जिन टॉप: -404px; चौड़ाई: 600px; ऊँचाई: 408px; प्रदर्शन क्षेत्र; पृष्ठभूमि: -मोज़-लीनियर-ग्रेडिएंट (टॉप, आरजीबीए (255, 255, 255, 0.3) 0%, / * आरजीबीए (255, 255, 255, 0.3) 30%, * / आरजीबी (255, 255, 255, 0.1) ) 100%); बैकग्राउंड: -ओ-लीनियर-ग्रेडिएंट (टॉप, आरजीबीए (255, 255, 255, 0.3) 0%, / * आरजीबीए (255, 255, 255, 0.2) 30%, * / आरजीबी (255, 255, 255, 0.1) ) 100%); पृष्ठभूमि: -बेटक-ग्रेडिएंट (रैखिक, बाएं ऊपर, बाएं नीचे, रंग-रोक (0%, आरजीबीए (255, 255, 255, 0.3)), / * रंग-रोक (30%, आरजीबीए (255, 255, 255) , 0.2)), * / रंग-रोक (100%, आरजीबीए (255, 255, 255, 0.1)));
पिछले नहीं बल्कि कम से कम, चलो यह मँडरा पर एक अलग रंग दे। पहले HTML DOCTYPE जोड़ें
और निम्नलिखित सीएसएस शैलियों से पहले
.जीमेल-लोगो: होवर पृष्ठभूमि: # 313131; सीमा रंग: # 313,131; / * कर्सर: पॉइंटर; * /। gmail-logo: hover .gmail-box: इससे पहले बॉर्डर-कलर: # 313131; .gmail-logo: hover .gmail-box: के बाद बॉर्डर-कलर: # 313131; सीमा-नीचे-रंग: #fff; बॉर्डर-दायां-रंग: #fff;
पूर्वावलोकन | स्रोत फ़ाइल डाउनलोड करें
Gmail लोगो # 2
अगला, हम थोड़ा और 3 डी प्रभाव के साथ दूसरे दृष्टिकोण से जीमेल लोगो बनाएंगे। हम मूल HTML मार्कअप से शुरू करेंगे.
जीमेल लोगो २
चूंकि लोगो का एक अलग दृष्टिकोण है, हम इसे थोड़ा घुमाकर शुरू करेंगे और आवश्यक परतों को बनाएंगे (जिसे हम उन्हें कॉल करेंगे तत्वों) क्रम में.
# जीमेल-लोगो 2 मार्जिन: 0 ऑटो; प्रदर्शन क्षेत्र; चौड़ाई: 380px; ऊँचाई: 290px; -moz-परिणत: घुमाएँ (6deg); -webkit-परिणत: घुमाएँ (6deg); -ओ-परिणत: बारी बारी से (6deg); परिणत: घुमाएँ (6deg); # gmail-logo2 .element1 प्रदर्शन: ब्लॉक; चौड़ाई: 380px; ऊँचाई: 290px; # gmail-logo2 .element2, # gmail-logo2 .element3, # gmail-logo2 .element4, # gmail-logo2 .element5 float: left; प्रदर्शन क्षेत्र; चौड़ाई: 380px; ऊँचाई: 290px; मार्जिन: -290px 0 0 0;
स्टाइलिंग .element1 :: से पहले
# gmail-logo2 .element1 :: कंटेंट: "से पहले; पोजीशन: रिलेटिव; मार्जिन: 2px 0 0 14px; फ्लोट: लेफ्ट; डिस्प्ले: ब्लॉक; बैकग्राउंड: rgb (201, 44, 25); चौड़ाई: 30px; height 276px; -moz-transform: रोटेट (3deg); -webkit- ट्रांसफॉर्म: रोटेट (3deg); -ओ-ट्रांसफॉर्म: रोटेट (3deg); ट्रांसफॉर्म: रोटेट (3deg); बॉर्डर-रेडियस: 22px 0 0 20px -moz -बार्डर-त्रिज्या: 22px 0 0 20px; -webkit-border-radius: 22px 0 0 20px; बॉक्स-छाया: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0) ), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10) , 0); -webkit-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb (109, 10, 0) -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -मोज़-बॉक्स-छाया: -1px 0px 0x; rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0); -6px 6px 0 rgb (109, 10, 0);;
स्टाइलिंग .element1 :: के बाद
# gmail-logo2 .element1 :: कंटेंट: "; स्थिति: रिलेटिव; मार्जिन: 40px 5px 0 0; फ्लोट: राइट; डिस्प्ले: ब्लॉक; बैकग्राउंड: rgb (201, 44, 25); चौड़ाई: 30px; height; 238px; -मोज़-ट्रांसफ़ॉर्म: रोटेट (3 डीजी); -वेबकिट-ट्रांसफॉर्म: रोटेट (3 डीजी); -ओ-ट्रांसफ़ॉर्म: रोटेट (3 डीजी); ट्रांसफ़ॉर्म: रोटेट (3 डीजी); बॉर्डर-रेडियस: 0 18px 26px 0 -webkit -बार्डर-त्रिज्या: 0 18px 26px 0; -मोज़-बॉर्डर-त्रिज्या: 0 18px 26px 0; बॉक्स-छाया: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0) ), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10) , 0), -6px 7px 0 rgb (109, 10, 0); -मोज़-बॉक्स-छाया: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0) -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0) ), -6px 7px 0 rgb (109, 10, 0); -webkit-box-shadow: -1px 1px 0 rgb (109, 10, 0), -2px 2px 0 rgb (109, 10, 0), -3px 3px 0 rgb (109, 10, 0), -4px 4px 0 rgb (109, 10, 0), -5px 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0), -6 पीएक्स 7 पीएक्स 0 आरजी बी (109, 10, 0);
स्टाइलिंग .element2 :: से पहले
# gmail-logo2 .element2 :: कंटेंट: "से पहले; मार्जिन: 22px 0 0 48px; फ्लोट: लेफ्ट; डिस्प्ले: ब्लॉक; बैकग्राउंड: rgb (201, 44, 25); चौड़ाई: 315px; height: 14px -moz; -ट्रांसफॉर्म: रोटेट (6.8deg); -webkit- ट्रांसफॉर्म: रोटेट (6.8deg); -ओ-ट्रांसफॉर्म: रोटेट (6.8deg); ट्रांसफॉर्म: रोटेट (6.8deg); बॉक्स-शैडो: 0 1px 0 rgb (109) 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10) 0), -6px 6px 0 rgb (109, 10, 0); -webkit-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -moz- बॉक्स -शादो: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0) , 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);
स्टाइलिंग .element2 :: के बाद
# gmail-logo2 .element2 :: कंटेंट: "; स्थिति: रिलेटिव; मार्जिन: 230px 0 0 36px; फ्लोट: लेफ्ट; डिस्प्ले: ब्लॉक; बैकग्राउंड: rgb (201, 44, 25); चौड़ाई: 310px; height 12px; बॉक्स-छाया: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0), 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10) , 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -webkit-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 आरजीबी (109, 10, 0), 0 3px 0 आरजीबी (109, 10, 0), 0 4px 0 आरजीबी (109, 10, 0), 0 5px 0 आरजीबी (109, 10, 0), -6px 0px 0x आरजीबी (109, 10, 0); -मोज़-बॉक्स-छाया: 0 1 पीएक्स 0 आरजीबी (109, 10, 0), 0 2 पीएक्स 0 आरजीबी (109, 10, 0), 0 3 पीएक्स 0 आरजीबी (109, 10, 0) ), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);;
स्टाइलिंग .element3 :: से पहले
# gmail-logo2 .element3 :: कंटेंट: "से पहले; पोज़िशन: रिलेटिव; मार्जिन: 8px 0 0 42px; फ्लोट: लेफ्ट; डिस्प्ले: ब्लॉक; बैकग्राउंड: rgb (201, 44, 25); चौड़ाई: 42px; height 268px; -मोज़-ट्रांसफॉर्म: रोटेट (3 डीजी); -वेबकैट-ट्रांसफॉर्म: रोटेट (3 डीजी); -ओ-ट्रांसफॉर्म: रोटेट (3 डीजी); ट्रांसफॉर्म: रोटेट (3 डीजी);
स्टाइलिंग .element3 :: के बाद
# gmail-logo2 .element3 :: कंटेंट: "; स्थिति: रिलेटिव; मार्जिन: 40px 32px 0 0; फ्लोट: राइट; डिस्प्ले: ब्लॉक; बैकग्राउंड: rgb (201, 44, 25); चौड़ाई: 22px; height; 236px; -moz-transform: रोटेट (3.0deg); -webkit- ट्रांसफॉर्म: रोटेट (3.0deg); -ओ-ट्रांसफॉर्म: रोटेट (3.0deg); ट्रांसफॉर्म: रोटेट (3.0deg); बॉक्स-शैडो: 0 1px 0 आरजीबी (109, 10, 0), 0 2px 0 आरजीबी (109, 10, 0), 0 3px 0 आरजीबी (109, 10, 0), 0 4px 0 आरजीबी (109, 10, 0), 0 5px 0 जीबी 109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -webkit-box-shadow: 0 1px 0 rgb (109, 10, 0), 0 2px 0 rgb (109, 10, 0) , 0 3px 0 rgb (109, 10, 0), 0 4px 0 rgb (109, 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0); -मोज़-बॉक्स-छाया: 0 1 पीएक्स 0 आरबीजी (109, 10, 0), 0 2 पीएक्स 0 आरजीबी (109, 10, 0), 0 3 पीपीएस 0 आरजीबी (109, 10, 0), 0 4 पीएक्स 0 आरजीबी (109) 10, 0), 0 5px 0 rgb (109, 10, 0), -6px 6px 0 rgb (109, 10, 0);;
स्टाइलिंग .element4 :: से पहले
# gmail-logo2 .element4 :: कंटेंट: "से पहले; पोजीशन: रिलेटिव; मार्जिन: -2px 0 0 130px; फ्लोट: लेफ्ट; डिस्प्ले: ब्लॉक; बैकग्राउंड: rgb (201, 44, 25); चौड़ाई: 54px; height : 192px; -moz-transform: रोटेट (-49deg); -webkit- ट्रांसफॉर्म: रोटेट (-49deg); -ओ-ट्रांसफॉर्म: रोटेट (-49deg); ट्रांसफॉर्म: रोटेट (-49deg); बॉक्स-शैडो: -1px 0 0 आरजीबी (109, 10, 0), -2 पीएक्स 0 0 आरजीबी (109, 10, 0), -3 पीएक्स 0 0 आरजीबी (109, 10, 0), -4 पीएक्स 0 0 आरजीबी (109, 10, 0), -5px 0 0 rgb (109, 10, 0), -6px 0 0 rgb (109, 10, 0), -7px 0 0 rgb (109, 10, 0), -8px 0 0 rgb (109, 10, 0) ); -मोज़-बॉक्स-छाया: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 0 rgb (109, 10, 0), -4px 0 0 आरजीबी (109, 10, 0), -5 पीएक्स 0 0 आरजीबी (109, 10, 0), -6 पीपीएस 0 0 आरजीबी (109, 10, 0), -7 पीएक्स 0 0 आरजीबी (109, 10, 0), एसबी -8px 0 0 rgb (109, 10, 0); -webkit-box-shadow: -1px 0 0 rgb (109, 10, 0), -2px 0 0 rgb (109, 10, 0), -3px 0 आरजीबी (109, 10, 0), -4 पीएक्स 0 0 आरबीजी (109, 10, 0), -5 पीएक्स 0 0 आरजीबी (109, 10, 0), -6 पीएक्स 0 0 आरजीबी (109, 10, 0), -7 पीएक्स 0 0 आरजीबी (109, 10, 0), -8 पीएक्स 0 0 आरजीबी (109, 10, 0);;
स्टाइलिंग .element4 :: के बाद
# gmail-logo2 .element4 :: कंटेंट: "; स्थिति: रिलेटिव; मार्जिन: 12px 88px 0 0; फ्लोट: राइट; डिस्प्ले; ब्लॉक; बैकग्राउंड: rgb (201, 44, 25); चौड़ाई: 54px; height; 186px; बॉर्डर-त्रिज्या: 30px 0 0 0; -webkit-border-radius: 30px 0 0; -moz-border-radius: 30px 0 0 0; -moz-transform: रोटेट (53deg) - -webkit-transform: रोटेट (53deg); -ओ-ट्रांसफॉर्म: रोटेट (53 डीजी); ट्रांसफॉर्म: रोटेट (53 डीजी);
स्टाइलिंग .element5 :: से पहले
# gmail-logo2 .element5 :: कंटेंट: "से पहले; स्थिति: रिलेटिव; मार्जिन: 115px 0 0 125px; फ्लोट: लेफ्ट; डिस्प्ले: ब्लॉक; बैकग्राउंड: rgb (201, 44, 25); चौड़ाई: 2px; height 150px; -मोज़-ट्रांसफ़ॉर्म: रोटेट (55deg); -ओ-ट्रांसफ़ॉर्म: रोटेट (55deg) -webkit- ट्रांसफ़ॉर्म: रोटेट (55deg); ट्रांसफ़ॉर्म: रोटेट (55deg);
स्टाइलिंग .element5 :: के बाद
# gmail-logo2 .element5 :: स्थिति के बाद: रिश्तेदार; कंटेंट: "; मार्जिन: 115px 0 0 150px; फ्लोट: लेफ्ट; डिस्प्ले: ब्लॉक; बैकग्राउंड: आरजीबी (201, 44, 25); चौड़ाई: 2 पीएक्स; ऊंचाई: 150 पीएक्स; -मोज-ट्रांसफॉर्मेशन: रोटेट (-50 डीजीजी); - वेबकिट-ट्रांसफ़ॉर्म: रोटेट (-50deg); -ओ-ट्रांसफ़ॉर्म: रोटेट (-50deg); ट्रांसफ़ॉर्म: रोटेट (-50deg);
की प्राथमिकता को समायोजित करना z- सूचकांक.
# gmail-logo2 .element1 :: z-index: 3; से पहले # gmail-logo2 .element1 :: z-index: 1; के बाद; / * # gmail-logo2 .element2 :: / # से पहले। gmail-logo2 .element2 :: z-index: 2; # gmail-logo2 .element3 :: के बाद z-index: 5; # gmail-logo2 .element3 :: के बाद z-index: 1;; # gmail-logo2 .element4 :: z-index: 4; से पहले # gmail-logo2 .element4 :: के बाद z-index: 3; / * # gmail-logo2 .element5 :: से पहले # gmail-। logo2 .element5 :: * / के बाद
हम लगभग कर चुके हैं। आपका Gmail लोगो कुछ इस तरह दिखना चाहिए:
अंत में, आइए इसे मँडरा पर एक अलग रंग दें.
# gmail-logo2: hover * :: के बाद, # gmail-logo2: hover * :: इससे पहले पृष्ठभूमि: rgba (20, 196, 7, 1); # gmail-logo2: hover .element1 :: इससे पहले बॉक्स-छाया: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 जीबी (10) , 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -webkit-box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 0px 0px आरजीबी (10, 90, 4), -5 पीएक्स 5 पीएक्स 0 आरजीबी (10, 90, 4), -6 पीपीएस 6 पीएक्स 0 आरजीबी (10, 90, 4); -मोज़-बॉक्स-शेडो: -1 पीएक्स 1 पीएक्स 0 आरजीबी (10, 90, 4), -2 पीएक्स 2 पीएक्स 0 आरजीबी (10, 90, 4), -3 पीएक्स 3 पीएस 0 आरजीबी (10, 90, 4), -4 पीओएस 4 पीएस 0 आरजीबी (10, 90, 4), -5 पीएक्स 5 पीएक्स 0 आरजीबी (10, 90, 4), -6 पीपीएस 6 पीएक्स 0 आरजीबी (10, 90, 4); # gmail-logo2: hover .element1 :: के बाद बॉक्स-छाया: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 जीबी (10) , 90, 4), -4px 4px 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4), -6px 7px 0 rgb (10, 90, 4); -मोज़-बॉक्स-शेडो: -1 पीएक्स 1 पीएक्स 0 आरजीबी (10, 90, 4), -2 पीएक्स 2 पीएक्स 0 आरजीबी (10, 90, 4), -3 पीएक्स 3 पीएस 0 आरजीबी (10, 90, 4), -4 पीओएस 4 पीएस 0 rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4), -6px 7px 0 rgb (10, 90, 4); -webkit-box-shadow: -1px 1px 0 rgb (10, 90, 4), -2px 2px 0 rgb (10, 90, 4), -3px 3px 0 rgb (10, 90, 4), -4px 0px 0px rgb (10, 90, 4), -5px 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4), -6px 7px 0 rgb (10, 90, 4); # gmail-logo2: hover .element2 :: इससे पहले बॉक्स-छाया: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90) 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -वेबकैट-बॉक्स-छाया: 0 1px 0 आरजीबी (10, 90, 4), 0 2px 0 आरजीबी (10, 90, 4), 0 3px 0 आरजीबी (10, 90, 4), 0 4px 0 आरजीबी (10,) 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -मोज़-बॉक्स-छाया: 0 1px 0 आरजीबी (10, 90, 4), 0 2px 0 आरजीबी (10, 90, 4), 0 3px 0 आरजीबी (10, 90, 4), 0 4px 0 आरजीबी (10) 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); # gmail-logo2: hover .element2 :: के बाद बॉक्स-छाया: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90) 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -वेबकैट-बॉक्स-छाया: 0 1px 0 आरजीबी (10, 90, 4), 0 2px 0 आरजीबी (10, 90, 4), 0 3px 0 आरजीबी (10, 90, 4), 0 4px 0 आरजीबी (10,) 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -मोज़-बॉक्स-छाया: 0 1px 0 आरजीबी (10, 90, 4), 0 2px 0 आरजीबी (10, 90, 4), 0 3px 0 आरजीबी (10, 90, 4), 0 4px 0 आरजीबी (10) 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); # gmail-logo2: hover .element3 :: के बाद बॉक्स-छाया: 0 1px 0 rgb (10, 90, 4), 0 2px 0 rgb (10, 90, 4), 0 3px 0 rgb (10, 90) 4), 0 4px 0 rgb (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -वेबकैट-बॉक्स-छाया: 0 1px 0 आरजीबी (10, 90, 4), 0 2px 0 आरजीबी (10, 90, 4), 0 3px 0 आरजीबी (10, 90, 4), 0 4px 0 आरजीबी (10, 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); -मोज़-बॉक्स-छाया: 0 1px 0 आरजीबी (10, 90, 4), 0 2px 0 आरजीबी (10, 90, 4), 0 3px 0 आरजीबी (10, 90, 4), 0 4px 0 आरजीबी (10) 90, 4), 0 5px 0 rgb (10, 90, 4), -6px 6px 0 rgb (10, 90, 4); # gmail-logo2: hover .element4 :: इससे पहले बॉक्स-छाया: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10) , 90, 4), -4 पीएक्स 0 0 आरबीजी (10, 90, 4), -5 पीएक्स 0 0 आरजीबी (10, 90, 4), -6 पीएक्स 0 0 आरजीबी (10, 90, 4), -7 पीएक्स 0 0 आरजीबी (10, 90, 4), -8px 0 0 rgb (10, 90, 4); -मोज़-बॉक्स-छाया: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4), -4px 0 0 आरजीबी (10, 90, 4), -5 पीएक्स 0 0 आरजीबी (10, 90, 4), -6 पीपीएस 0 0 आरजीबी (10, 90, 4), -7 पीपीएस 0 0 आरजीबी (10, 90, 4), -8 पीएक्स 0 0 आरजीबी (10, 90, 4); -webkit-box-shadow: -1px 0 0 rgb (10, 90, 4), -2px 0 0 rgb (10, 90, 4), -3px 0 0 rgb (10, 90, 4), -4px 0 0 आरजीबी (10, 90, 4), -5 पीएक्स 0 0 आरजीबी (10, 90, 4), -6 पीपीएस 0 0 आरजीबी (10, 90, 4), -7 पीपीएस 0 0 आरजीबी (10, 90, 4), -8 पीएक्स 0 0 आरजीबी (10, 90, 4);
पूर्वावलोकन | स्रोत फ़ाइल डाउनलोड करें
संपादक की टिप्पणी: इस पोस्ट के द्वारा लिखा गया है इरहम केंडनी Hongkiat.com के लिए। इरम, जिसे इंदम के रूप में भी जाना जाता है, इंडोनेशिया से एक वेब डिजाइनर और डेवलपर है। वह सीएसएस और वर्डप्रेस थीम के विकास से भी प्यार करता है.
