# मेन चौड़ाई: 400 पीएक्स; ऊंचाई: 50 पीएक्स; पृष्ठभूमि: # f2f2f2; गद्दी: 6px 10px; बॉर्डर: 1px ठोस # b5b5b5; -मोज़-बॉर्डर-रेडियस: 5 पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 5 पीएक्स; सीमा-त्रिज्या: 5 पीएक्स; -मोज़-बॉक्स-छाया: इनसेट 0 0 3px rgba (255, 255, 255, 0.8), इनसेट 0 2px 2px 2g rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit- बॉक्स-छाया: इनसेट 0 0 3px rgba (255, 255, 255, 0.8), इनसेट 0 2px 2px 2 rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; बॉक्स-छाया: इनसेट 0 0 3px rgba (255, 255, 255, 0.8), इनसेट 0 2px 2px 2 rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;  

यहाँ कोड का महत्वपूर्ण टुकड़ा है बॉर्डर-त्रिज्या घोषणा और डब्बे की छाया घोषणा। गोल कोनों को बनाने के लिए, हमने CSS3 सीमा-त्रिज्या घोषणा, "-moz-" और "-webkit-" ब्राउज़र उपसर्गों का उपयोग किया है ताकि यह सुनिश्चित हो सके कि यह जेको और वेबकिट आधारित ब्राउज़रों में काम करता है। बॉक्स छाया घोषणाएं थोड़ी भ्रामक लग सकती हैं लेकिन यह वास्तव में बहुत सरल है.

 बॉक्स-छाया: इनसेट 0 0 3px rgba (255, 255, 255, 0.8), इनसेट 0 2px 2px 2 rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; 

स्पष्टीकरण: यहां, कीवर्ड इनसेट निर्दिष्ट करता है कि छाया बॉक्स के अंदर होगी या नहीं। पहले दो शून्य x- ऑफसेट और y- ऑफसेट को इंगित करते हैं और 3px धब्बा इंगित करता है। अगला रंग घोषणा है। मैंने यहाँ rgba मान का उपयोग किया है; आरजीबीए लाल हरे नीले और अल्फा (अस्पष्टता) के लिए खड़ा है। इस प्रकार कोष्ठक के अंदर के 4 मान लाल, हरे, नीले और उसके अल्फा (अपारदर्शिता) की मात्रा को इंगित करते हैं। आप देखेंगे कि छाया घोषणाओं के 5 सेटों को एक साथ जोड़ा गया है। यह उन्हें अल्पविराम से अलग करके किया जा सकता है। पहले दो छाया सफेद "आंतरिक चमक" प्रभाव को परिभाषित करते हैं और अगले में घोषणाएं बॉक्स को अपना ठोस / चंकी लुक देती हैं.

यह कैसे काम करता है यह समझने के लिए इन मूल्यों के साथ खेलें.

पूर्वावलोकन

3. इनपुट क्षेत्र को स्टाइल करना

अब जब बॉक्स पूरा हो गया है, तो इनपुट क्षेत्र को स्टाइल करने के लिए आगे बढ़ें.

 इनपुट [प्रकार = "पाठ"] फ्लोट: बाएं; चौड़ाई: 230px; गद्दी: 15px 5px 5px 5px; मार्जिन-टॉप: 5 पीएक्स; मार्जिन-बाएं: 3 पीएक्स; बॉर्डर: 1px ठोस # 999999; -मोज़-बॉर्डर-रेडियस: 5 पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 5 पीएक्स; सीमा-त्रिज्या: 5 पीएक्स; -मोज़-बॉक्स-छाया: इनसेट 0 5px 0 #ccc, इनसेट 0 6px 0 # 989898, इनसेट 0 13px 0 #dfdede; -webkit-box-shadow: इनसेट 0 5px 0 #ccc, इनसेट 0 6px 0 # 989898, इनसेट 0 13px 0 #dfdede; बॉक्स-छाया: इनसेट 0 5px 0 #ccc, इनसेट 0 6px 0 # 989898, इनसेट 0 13px 0 #dfdede;  

इनपुट फ़ील्ड के लिए घोषित की गई शैली बड़े बॉक्स के लिए कम होने वाले समान हैं #मुख्य. हमने एक ही सीमा त्रिज्या (5 पीएक्स) का उपयोग किया है। फिर से, कई बॉक्स-शैडो को क्लब किया गया है.

 बॉक्स-छाया: इनसेट 0 5px 0 #ccc, इनसेट 0 6px 0 # 989898, इनसेट 0 13px 0 #dfdede; 

स्पष्टीकरण: आप देखेंगे कि इस बार, तेज छाया प्राप्त करने के लिए छाया धुंधला को 0 पर रखा गया है और 5px की ऊर्ध्वाधर ऑफसेट का उपयोग किया जाता है। क्रमिक घोषणाओं में, धुंधला 0px पर रखा गया है, लेकिन रंग और y- ऑफसेट को बदल दिया गया है। फिर, विभिन्न परिणामों को प्राप्त करने के लिए इन मूल्यों के साथ खेलें.

पूर्वावलोकन

4. सबमिट बटन को स्टाइल करना

आइए सर्च बटन को स्टाइल करें.

 इनपुट [प्रकार = "सबमिट"]। ठोस फ्लोट: बाएं; कर्सर: सूचक; चौड़ाई: 130 पीएक्स; गद्दी: 8px 6px; मार्जिन-बाएं: 20 पीएक्स; पृष्ठभूमि-रंग: # f8b838; रंग: आरजीबीए (134, 79, 11, 0.8); पाठ-परिवर्तन: अपरकेस; फोंट की मोटाई: बोल्ड; बॉर्डर: 1px ठोस # 99631d; -मोज़-बॉर्डर-रेडियस: 5 पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 5 पीएक्स; सीमा-त्रिज्या: 5 पीएक्स; पाठ-छाया: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -मोज़-बॉक्स-छाया: इनसेट 0 0 3px rgba (255, 255, 255, 0.6), इनसेट 0 1px 2px 2 rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: इनसेट 0 0 3px rgba (255, 255, 255, 0.6), इनसेट 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; बॉक्स-छाया: इनसेट 0 0 3px rgba (255, 255, 255, 0.6), इनसेट 0 1px 2px 2 rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px # # 593a11, 0 13px 0 # सीसीसी; -वेबकैट-संक्रमण: पृष्ठभूमि 0.2s आसानी से बाहर;  

रंगों के अलावा, खोज बटन में ज्यादातर बाहरी बॉक्स की तरह ही शैलियाँ होती हैं। बटन पर इसी तरह की सीमा-त्रिज्या और बॉक्स-छाया का उपयोग किया गया है। पेश किया गया नया फीचर है पाठ की छाया.

 पाठ-छाया: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); 

स्पष्टीकरण: में पाठ की छाया घोषणा, पहले तीन संख्यात्मक मूल्य क्रमशः एक्स-ऑफसेट, वाई-ऑफसेट और ब्लर हैं। आरजीबीए मान छाया रंग का संकेत देते हैं। घोषणा के अगले सेट में (अल्पविराम द्वारा अलग), y- ऑफसेट को -1 का मान दिया जाता है। यह पाठ को देने के लिए किया जाता है a “भीतरी छाया” प्रभाव। सबमिट बटन के होवर / फोकस स्थिति में पृष्ठभूमि रंग और छाया के विभिन्न मूल्य होते हैं.

पूर्वावलोकन

"बटन के लिए सक्रिय स्थिति"

बटन की सक्रिय स्थिति में थोड़ा और बदलाव होता है। इसमें, मैंने बटन को पूर्ण और 5px के 'शीर्ष' मान का स्थान दिया है। यह इसे और अधिक प्राकृतिक रूप देने के लिए किया गया है, जैसे कि ऐसा लगता है कि बटन को वास्तव में 5 पिक्सेल से नीचे धकेल दिया गया है। सक्रिय स्थिति में अन्य परिवर्तन पृष्ठभूमि-रंग और छाया के होते हैं। ध्यान दें कि मैंने इसे 'प्रेस-डाउन' रूप देने के लिए छाया के y- ऑफसेट को कम कर दिया है। यहां सबमिट बटन की सक्रिय स्थिति का कोड दिया गया है:

 इनपुट [प्रकार = "सबमिट"]। ठोस: सक्रिय पृष्ठभूमि: # f6a000; स्थिति: रिश्तेदार; शीर्ष: 5 पीएक्स; बॉर्डर: 1px ठोस # 702d00; -मोज़-बॉक्स-छाया: इनसेट 0 0 3px rgba (255, 255, 255, 0.6), इनसेट 0 1px 2px 2 rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit- बॉक्स-छाया: इनसेट 0 0 3px rgba (255, 255, 255, 0.6), इनसेट 0 1px 2px 2 rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; बॉक्स-छाया: इनसेट 0 0 3px rgba (255, 255, 255, 0.6), इनसेट 0 1px 2px 2 rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px # # 593a11, 0 8px 0 # सीसीसी;  

पूरा (सीएसएस) कोड

यह हमारे खोज क्षेत्र को पूरा करता है। हमने नई CSS3 की कुछ विशेषताओं का उपयोग किया है। इस खोज क्षेत्र का पूरा CSS और HTML यहां दिया गया है.

 # मेन चौड़ाई: 400 पीएक्स; ऊंचाई: 50 पीएक्स; पृष्ठभूमि: # f2f2f2; गद्दी: 6px 10px; बॉर्डर: 1px ठोस # b5b5b5; -मोज़-बॉर्डर-रेडियस: 5 पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 5 पीएक्स; सीमा-त्रिज्या: 5 पीएक्स; -मोज़-बॉक्स-छाया: इनसेट 0 0 3px rgba (255, 255, 255, 0.8), इनसेट 0 2px 2px 2g rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit- बॉक्स-छाया: इनसेट 0 0 3px rgba (255, 255, 255, 0.8), इनसेट 0 2px 2px 2 rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; बॉक्स-छाया: इनसेट 0 0 3px rgba (255, 255, 255, 0.8), इनसेट 0 2px 2px 2 rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;  इनपुट [प्रकार = "टेक्स्ट"] फ्लोट: बाएं; चौड़ाई: 230px; गद्दी: 15px 5px 5px 5px; मार्जिन-टॉप: 5 पीएक्स; मार्जिन-बाएं: 3 पीएक्स; बॉर्डर: 1px ठोस # 999999; -मोज़-बॉर्डर-रेडियस: 5 पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 5 पीएक्स; सीमा-त्रिज्या: 5 पीएक्स; -मोज़-बॉक्स-छाया: इनसेट 0 5px 0 #ccc, इनसेट 0 6px 0 # 989898, इनसेट 0 13px 0 #dfdede; -webkit-box-shadow: इनसेट 0 5px 0 #ccc, इनसेट 0 6px 0 # 989898, इनसेट 0 13px 0 #dfdede; बॉक्स-छाया: इनसेट 0 5px 0 #ccc, इनसेट 0 6px 0 # 989898, इनसेट 0 13px 0 #dfdede;  इनपुट [प्रकार = "सबमिट"]। ठोस फ्लोट: बाएं; कर्सर: सूचक; चौड़ाई: 130 पीएक्स; गद्दी: 8px 6px; मार्जिन-बाएं: 20 पीएक्स; पृष्ठभूमि-रंग: # f8b838; रंग: आरजीबीए (134, 79, 11, 0.8); पाठ-परिवर्तन: अपरकेस; फोंट की मोटाई: बोल्ड; बॉर्डर: 1px ठोस # 99631d; -मोज़-बॉर्डर-रेडियस: 5 पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 5 पीएक्स; सीमा-त्रिज्या: 5 पीएक्स; पाठ-छाया: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -मोज़-बॉक्स-छाया: इनसेट 0 0 3px rgba (255, 255, 255, 0.6), इनसेट 0 1px 2px 2 rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: इनसेट 0 0 3px rgba (255, 255, 255, 0.6), इनसेट 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; बॉक्स-छाया: इनसेट 0 0 3px rgba (255, 255, 255, 0.6), इनसेट 0 1px 2px 2 rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px # # 593a11, 0 13px 0 # सीसीसी; -वेबकैट-संक्रमण: पृष्ठभूमि 0.2s आसानी से बाहर;  इनपुट [टाइप = "सबमिट"]। सॉलिड: होवर, इनपुट [टाइप = "सबमिट"]। सॉलिड: फोकस बैकग्राउंड: # ffd842; -मोज़-बॉक्स-छाया: इनसेट 0 0 3px rgba (255, 255, 255, 0.9), इनसेट 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit- बॉक्स-छाया: इनसेट 0 0 3px rgba (255, 255, 255, 0.9), इनसेट 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; बॉक्स-छाया: इनसेट 0 0 3px rgba (255, 255, 255, 0.9), इनसेट 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6x 0 # 593a11, 0 13px 0 # सीसीसी;  इनपुट [प्रकार = "सबमिट"]। ठोस: सक्रिय पृष्ठभूमि: # f6a000; स्थिति: रिश्तेदार; शीर्ष: 5 पीएक्स; बॉर्डर: 1px ठोस # 702d00; -मोज़-बॉक्स-छाया: इनसेट 0 0 3px rgba (255, 255, 255, 0.6), इनसेट 0 1px 2px 2 rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit- बॉक्स-छाया: इनसेट 0 0 3px rgba (255, 255, 255, 0.6), इनसेट 0 1px 2px 2 rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; बॉक्स-छाया: इनसेट 0 0 3px rgba (255, 255, 255, 0.6), इनसेट 0 1px 2px 2 rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px # # 593a11, 0 8px 0 # सीसीसी;  

आशा है कि आप इस ट्यूटोरियल का आनंद लेंगे। इन सुविधाओं के साथ प्रयोग करने के लिए स्वतंत्र महसूस करें और अपने विचारों को साझा करना न भूलें.

संपादक की टिप्पणी: इस पोस्ट के द्वारा लिखा गया है भरनी एम Hongkiat.com के लिए। भारानी नई दिल्ली, भारत के एक डिजाइनर / डेवलपर हैं.