हम उठाते हैं जहां हमने वीडियो # 034 में छोड़ा और खोज क्षेत्र का निर्माण जारी रखा।
इस बार हम खोज के "खुले" राज्य पर ध्यान केंद्रित कर रहे हैं, वास्तविक रूप तत्वों का निर्माण खुद कर रहे हैं। खोज फ़ील्ड स्वयं HTML5 फ़ॉर्म तत्व प्रकार "खोज" का उपयोग करती है - जिसमें आमतौर पर कुछ कस्टम स्टाइल जुड़े होते हैं, लेकिन क्योंकि हम Normalize (वीडियो # 011) का उपयोग कर रहे हैं, यह हमारे लिए कोई समस्या नहीं है।
हम साइट पर स्टाइलिंग बटन में अपने स्वयं के उपयोग के लिए CSS (_buttons.scss) का एक नया मॉड्यूलर बिट बनाते हैं। देखें कि हम वहां क्या कर रहे हैं? किसी भी तरह की स्टाइल जो मानसिक रूप से अलग-थलग करने के लिए समझ में आता है, हम एक नई फ़ाइल बनाते हैं। हम इसे बिना किसी चिंता के जितना चाहें, कर सकते हैं, क्योंकि फाइलों को वैसे भी सास के साथ मिल कर सब मिल जाता है।
थ्री-डायमेंशनल बटन लुक को सिर्फ कॉमा से अलग किए गए बॉक्स शैडो द्वारा बनाया गया है। रंगों को बदलना आसान है, क्योंकि उपयोग (आपने इसका अनुमान लगाया है!) चर।
$bottomSide: #3852b1; $rightSide: #203891; .button, #rcp_submit ( border: 0; // kill default styling background: #4e68c7; box-shadow: // right side // bottom 1px 0px 1px $rightSide, 0px 1px 1px $bottomSide, 2px 1px 1px $rightSide, 1px 2px 1px $bottomSide, 3px 2px 1px $rightSide, 2px 3px 1px $bottomSide, 4px 3px 1px $rightSide, 3px 4px 1px $bottomSide, 5px 4px 1px $rightSide, 4px 5px 1px $bottomSide, 6px 5px 1px $rightSide; )हम 3 डी लुक को पूरा करते हुए इनपुट एलिमेंट में उसी स्टाइल (केवल बाहर के बजाय अंदर) पर गूँजते हैं। छाया की मात्रा ऑफसेट होती है जो हमारे $ ऑफसेट चर से मेल खाती है, जिससे कुछ डिजाइन स्थिरता होती है।
इस वीडियो में नहीं, लेकिन बाद में, हम यह पता लगाते हैं कि इनपुट पर आंतरिक छाया सभी छाया (बजाय कोण पर एक दूसरे से मिलते हैं) के बजाय सिर्फ दो सीमाओं के साथ करना बहुत आसान है। दुर्भाग्य से बटन पर संभव नहीं है।
यह इनसेट-इनपुट शैली साइट के सभी इनपुट शैलियों को बेहतर या बदतर के लिए समाप्त करती है।