ब्राउझरमध्ये डिझाइन करा

सामग्री

• कोडसह डिझाइन करण्याचे फायदे
• प्रथम डेटा
• मोबाईल चांगुलपणा
• एक सामान्य भाषा शोधत आहे
• जलद जाणून घ्या
• वेगवान पुनरावृत्ती
• लाँच करण्यासाठी वेगवान वेळ
• एचटीएमएल 5 का?
• जादुई डेटा- विशेषता
• CSS3 - ही नवीन फोटोशॉप आहे
• सस + कंपास: जादूने रुचकर
• jQuery: अगं, होय आपण हे करू शकता
• फ्रेमवर्क
• अंतिम विचार

हा लेख प्रथम .नेट मॅगझिनच्या 235 अंकात प्रकाशित झाला - वेब डिझायनर्स आणि विकसकांसाठी जगातील सर्वाधिक विक्री होणारी मॅगझिन.

मला आवश्यकतेपेक्षा जास्त काम करण्याची आवड नव्हती. मी किंवा माझे कार्यसंघ अधिक प्रभावी बनवण्याच्या त्यांच्या क्षमतेवर आधारित पद्धती आणि साधनांचे मूल्यांकन करण्याचा माझा कल आहे. ते आम्हाला किती लवकर कार्यरत उत्पादनावर घेऊन जातात? ते संवाद साधण्यात किती प्रभावी आहेत? ते आमच्या मार्गापासून दूर राहतात?

बर्‍याच वर्षांमध्ये, मी माझी डिझाइन प्रक्रिया आणि साधने समायोजित केली. मी असे करत आहे अशी मी कल्पना करतो. तंत्रज्ञानासाठी आणि वेबसाठी डिझाइन करण्याचाच प्रकार आहे. हा उद्योग सतत विकसित होत आहे; आपली प्रक्रिया आणि साधने देखील विकसित होणे आवश्यक आहे.

एचटीएमएल 5 आणि सीएसएस 3 फोटोशॉपपासून दूर आणि सजीव, श्वासोच्छ्वासाच्या डिझाईनकडे बरेच डिझाइन प्रक्रियेचे अपस्ट्रीम संक्रमण करणे सुलभ करते. फाउंडेशन, बूटस्ट्रॅप आणि jQuery सारखी साधने आपल्या डिझाइन प्रक्रियेची अधिक प्रक्रिया अधिक प्रवेश करण्यायोग्य कोडवर करते.

कोडसह डिझाइन करण्याचे फायदे

प्रथम, मी Photoshop सोडण्याच्या किंवा आपल्या वर्कफ्लोवरून अन्य कोणत्याही व्हिज्युअल डिझाइन संपादकाची बाजू घेत नाही. त्याऐवजी त्या डिझाइनला नंतरच्या काळात कोडमध्ये हलविण्याच्या फायद्यावर मी लक्ष केंद्रित करेन.

प्रथम डेटा

एचटीएमएल सह डिझाइन करण्याबद्दल मला नेहमीच आवडलेल्या गोष्टी म्हणजे डेटा-प्रथम दृष्टीकोनातून विचार करण्यास प्रोत्साहित करते. याउलट, इलस्ट्रेटर, ओम्नीग्रॅफल किंवा बाल्सामीक सारख्या रेखांकन प्रोग्रामचा वापर करून, आपण बॉक्ससह प्रारंभ करा आणि डेटासह भरा.

एचटीएमएलमध्ये आपण डीओएम (दस्तऐवज ऑब्जेक्ट मॉडेल) बनवता, अशा प्रकारच्या सामग्रीचे सारणी तयार करणे. हे अर्थपूर्ण श्रेणीरचनांसह वास्तविक माहिती डिझाइनवर परत आले आहे. एचटीएमएल 5 नवीन सिमेंटिक घटकांच्या समावेशासह हे एक पाऊल पुढे घेते: लेख, विभाग, शीर्षलेख, बाजूला, तळटीप इ. हा डेटा प्रथम दृष्टिकोन मोबाइल प्रथम, प्रतिसादात्मक डिझाइनसह छान मिसळला आहे.

मोबाईल चांगुलपणा

आपण हे वाचत असल्यास, आपण कदाचित मोबाइलसाठी डिझाइन करीत आहात. आणि आपल्याला एक किंवा दोन फॉर्म डिझाइन करण्याची शक्यता आहे. एचटीएमएल 5 सह, आपण भाग्यवान आहात. एचटीएमएल 5 पूर्वी, आपले इनपुट प्रकार मजकूर किंवा संकेतशब्द फील्डपैकी बरेच होते. एचटीएमएल 5 ने असे बरेच अतिरिक्त इनपुट प्रकार सादर केले:

इनपुट प्रकार = "ईमेल"> इनपुट प्रकार = "टेल"> इनपुट प्रकार = "यूआरएल"> इनपुट प्रकार = "तारीख"> इनपुट प्रकार = "तारीख-वेळ">

या अतिरिक्त, अद्वितीय इनपुट प्रकारांबद्दल खरोखर आश्चर्यकारक म्हणजे ते आहे की iOS आणि Android वरील मोबाइल ब्राउझर त्यांना ओळखतात आणि आपोआप संदर्भित जागरूक कीबोर्ड स्वॅप करतात - कोणतेही विशेष jQuery प्लग-इन किंवा हॅक्स आवश्यक नाहीत. अरेरे, आणि जर आपल्या ब्राउझरला हे माहित नसेल तर काय इनपुट प्रकार = "ईमेल"> आहे, तर ते फक्त मजकूर इनपुटवर डीफॉल्ट होते.

एक सामान्य भाषा शोधत आहे

“आमचे डिझाइनर आणि विकसक एकाच भाषेत कसे कार्य करू शकतात हे आश्चर्यकारक आहे” - जॉन ड्रॅगो, अ‍ॅप्लीकेशन मधील अ‍ॅप्लीकेशन डेव्हलपर.

हे परिचित वाटत आहे का ते पहा. मी रूबी, पायथन, जावा किंवा .नेट मध्ये माझ्याभोवती मंडळे कोड करू शकणारे अर्धा डझन सर्व्हर-साइड devप्लिकेशन डेव्हसह कॉन्फरन्स रूममध्ये आहे. मी एकमेव डिझाइनर आहे. माझ्या काही सूचना प्रारंभी अंमलात आणणे खूप जटिल असल्याने डिसमिस केल्या आहेत. मी व्हाईटबोर्डपर्यंत जात आहे आणि डिझाइनची अंमलबजावणी कशी केली जाऊ शकते यासाठी बोर्डवर काही एचटीएमएल आणि सीएसएस लिहिण्यास सुरवात करतो. अचानक संभाषणाचा स्वर बदलतो आणि विकसकांपैकी एक अनिच्छेने म्हणतो, "ठीक आहे, - जर आपण असे केले तर ते कार्य करू शकेल."

माझ्या अधिक डिझाइन प्रक्रियेस कोडमध्ये हलविण्यामुळे विकसकांसह संभाषण सुधारले आहेत. आपल्या डिझाईन्स कोडमध्ये कसे रचवायचे हे जाणून घेऊन मिळवलेल्या मानाचा एक अतिरिक्त स्तर आहे. आपण तो आदर मिळविण्यासाठी तज्ञ असण्याची गरज नाही. माझे एचटीएमएल आणि सीएसएस कौशल्ये रॉक आहेत, तरी माझी जावास्क्रिप्ट कौशल्ये सर्वात सामान्य आहेत. आणि हे कबूल करायला मला लाज वाटत नाही. तरीही, फ्रंटएंड किंवा सर्व्हर-साइड डेव्हलपरसह कार्य करताना, आम्ही सामान्य भाषेत बोलू शकतो किंवा अर्ध्या मार्गाने भेटू शकतो हा एक मोठा फायदा आहे.

जलद जाणून घ्या

वायरफ्रेम्स आणि व्हिज्युअल कंपोझिट्स नियोजन करण्यात मदत करू शकतात, तर या स्थिर कलाकृती सैद्धांतिक आहेत. एखाद्यास किती संवाद साधला हे सांगण्यासाठी आपण किती वेळा प्रयत्न केला आहे, केवळ त्यांना प्रतिसाद मिळावा म्हणून, "मला वाटतं मला ते पहावं लागेल." आपण जितक्या लवकर प्रोटोटाइपवर जाता, तितक्या लवकर लोक संवाद साधू शकतात, आपण डिझाइनचा अनुभव घेता आणि कल्पना कार्य करतात की नाही ते पाहू शकता.

वेगवान पुनरावृत्ती

आपल्या फोटोशॉप कॉम्पचा अचूक जुळत उत्पादनावर पाठविलेला अंतिम डिझाइन अंतिम वेळी कधी आला होता? बहुदा कधिच नाही. डिजिटल उत्पादनांच्या डिझाईनसह बदल सतत होत असतात. शिवाय, काही डझन स्क्रीनवर आपल्या हेडिंग्जचा आकार 22pt ते 24pt पर्यंत वाढवण्यासारखे बदल फोटोशॉपमध्ये काही तास लागू शकतात. स्मार्ट ऑब्जेक्ट्स आपल्याला फोटोशॉपमध्ये ऑब्जेक्ट-देणारं डिझाइनचे काही स्तर देतात. दुर्दैवाने, बहुतेक व्हिज्युअल डिझाइनर स्मार्ट ऑब्जेक्टचा पुरेपूर वापर करीत नाहीत. सीएसएस सह, कारण ते डिझाइन करण्यासाठी अधिक पद्धतशीर दृष्टिकोनास प्रोत्साहित करते, टायपोग्राफिक बदल काही तासांऐवजी काही मिनिटे घेतात.

आपल्या सर्व बटणावर रेषात्मक ग्रेडियंट बदलण्याबद्दल काय? किंवा सीमेचा आकार? चौरस कोप from्यातून 2px गोलाकारांपर्यंत बदलण्याबद्दल काय? फोटोशॉपमध्ये, यास काही तास लागू शकतात आणि आपल्याला अद्याप तो कोड करावा लागेल. कोड डिझाइन करण्याची क्षमता व्हिज्युअल डिझाइनवर पुनरावृत्ती करण्यासाठी फोटोशॉपमध्ये परत जाण्याची फेरी टाळण्यास मदत करते. जेव्हा आपण सीएसएस 3 आणि सस (जे या लेखात नंतर मी कव्हर करेन) वापरून त्या बदलांना कोडमध्ये हलवितो तेव्हा ते रिअल-टाइममध्ये होऊ शकतात आणि काही मिनिटेच घेतील.

लाँच करण्यासाठी वेगवान वेळ

वर्षानुवर्षे मी माझे बरेच डिझाइन वर्कफ्लो अपस्ट्रीम कोडमध्ये रूपांतरित केले तेव्हा मला ख improvement्या अर्थाने सुधारणा झाली - मार्केटमध्ये वेळेत 20 ते 30 टक्क्यांनी घट. मी जितके अधिक करते तितकेच मी डुप्लिकेट प्रयत्नात कमी वेळ घालवितो. मी फोटोशॉप किंवा फटाक्यांकडे जाण्यासाठी आणि नंतर कोडमध्ये काम पुन्हा पुन्हा सांगत आहे.

काही वेळा डिझाइनला काही प्रकारचे बॅकएंडसह इंटरफेस असणे आवश्यक आहे, ते सीएमएस असो, रेल्स अॅप असोत किंवा काहीतरी. माझ्या बहुतेक डिझाइनचे काम कोडमध्ये असल्याने, एकत्रीकरण नंतरच्या काळात लवकर होईल. काही वर्षांपूर्वी, माझा एक क्लायंट, पॉईंटरोल, पाच दिवसात प्रोटोटाइपपासून उत्पादनावर गेला.

एचटीएमएल 5 का?

HTML च्या मागील आवृत्तीपेक्षा HTML5 सोपे आहे. उदाहरणार्थ दस्तऐवज प्रकार घोषित करा. एचटीएमएलच्या मागील आवृत्त्यांमध्ये डॉक्ट यासारखे काहीतरी पाहिले:

! डॉक्टव्य एचटीएमएल सार्वजनिक "- // डब्ल्यू 3 सी // डीटीडी एक्सएचटीएमएल 1.1 // इं" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">

आणि तेथे सहा भिन्न आवृत्त्या होती. सुदैवाने एचटीएमएल 5 डॉक्ट असे दिसते:

! डॉक्टर एचटीएमएल>

गंभीरपणे. बस एवढेच. धक्कादायकपणे सोपे.

एक मानक एचटीएमएल पृष्ठ तयार करताना, हेडर, मुख्य सामग्री क्षेत्र, साइडबार आणि फूटर यासारखे असंख्य सामान्य घटक असतात. मला खात्री आहे की आपण यापूर्वी असे काहीतरी पाहिले असेल:

div id = "शीर्षलेख> Div id =" नाव "> </ div> / div> Div id =" मुख्य "> div id =" साइडबार "> </ div> / div> div id =" तळटीप "> / div>

तिथल्या सामान्य गोष्टींपैकी काहीच नाही. परंतु एकदा सामग्रीमध्ये भरल्यानंतर हे टेम्पलेट डीव्ही सूपकडे वळते. याउलट, एचटीएमएल 5 च्या नवीन सिमेंटिक घटकांसह, आपणास यासारखे काहीतरी सोपे आणि स्कॅन करणे सोपे होते:

शीर्षलेख> नॅव्ह </ एनव्ही </ हेडर> लेख> बाजूला </ बाजूला> / लेख> तळटीप </ पाद लेख>

तिकडे बघा. काहीतरी अर्थ प्राप्त होतो.

जादुई डेटा- विशेषता

एचटीएमएल 5 आणखी एक अप्रतिम हुक आहे जो आपल्याला आपल्या स्वत: च्या अर्थपूर्ण क्राफ्टची क्षमता देते: द डेटा-. यापूर्वी, आपण डीओएम घटकाला अर्थपूर्ण काहीतरी नियुक्त करू इच्छित असाल तर आपण आयडी, वर्ग आणि भूमिकांपुरते मर्यादित आहात.

दुर्दैवाने, आयडी अद्वितीय असणे आवश्यक आहे. वर्ग सार्वत्रिक (यिप्पी!) आहेत, परंतु त्यांचा वापर करणे गोंधळात लवकर बदलू शकते. भूमिका एआरआयएसाठी अर्थपूर्ण अर्थ प्रदान करणारी एक न्यूनतम मालमत्ता आहे. अलीकडे, मी इन्फ्लेक्शनमध्ये विकसित करीत असलेल्या इव्हेंट ट्रॅकिंग ticsनालिटिक्स प्लॅटफॉर्मसाठी मी डेटा वापरत आहे.आम्ही आमच्या डिझाइनची चाचणी करण्याचे मोठे चाहते आहोत. परस्पर क्रियाशीलतेसह अनुप्रयोगांवर किंवा पृष्ठांवर कार्य करीत असताना, आम्ही पृष्ठामध्ये ग्राहकांच्या गुंतवणूकीबद्दल अधिक दाणेदार अंतर्ज्ञान घेऊ इच्छितो.

प्रविष्ट करा डेटा-. त्याद्वारे आपण नियुक्त करू शकता, पुढे जाऊ शकता आणि ‘आपल्या स्वतःच्या परिभाषित’ अर्थ मॉडेलमध्ये हुक करू शकता. तर, उदाहरणार्थ, आपण हे करू शकता:

इनपुट प्रकार = "बटण" डेटा-आयडी = "फेसबुक" डेटारेजिन = "मुख्य" डेटा-इव्हेंट = "रजिस्टर"> इनपुट प्रकार = "बटण" डेटा-आयडी = "ट्विटर" डेटारेजिन = "मुख्य" डेटा-इव्हेंट = "नोंदणी "> इनपुट प्रकार =" बटण "डेटा-आयडी =" दुवा साधलेला "डेटारेजीयन =" मुख्य "डेटा-इव्हेंट =" नोंदणी ">

आम्ही जावास्क्रिप्टसह श्रोत्यास पृष्ठाशी संलग्न करू शकतो आणि जेव्हा एखादा ग्राहक त्यावर फिरतो किंवा या बटणावर क्लिक करतो तेव्हा आम्ही त्या क्रियेचा मागोवा घेऊ शकतो. कोणीतरी ट्विटरवर ओएथ द्वारे नोंदणीकृत आहे याचा मागोवा घेण्याऐवजी, आपण ते फेसबुक, त्यानंतर ट्विटर, त्यानंतर लिंक्डइन आणि त्यानंतर त्यांच्या ओएथ मॉडेलसाठी ट्विटर निवडण्याचे निश्चित केले.

याची कल्पना Pinterest सारख्या साइटवर किंवा नवीन मायस्पेस डिझाइनवर करा जेथे ग्राहक व्याज आधारावर त्या पुन्हा पुन्हा व्यवस्थित करण्यासाठी फरशा ड्रॅग आणि ड्रॉप करतात. किंवा शक्यतो त्यांना आवड नसलेल्या फरशा लपवत आहे डेटा- विशेषता आपल्याला परिभाषित करू शकणार्‍या गोष्टींसाठी अर्थपूर्ण अर्थाचा अतिरिक्त स्तर संलग्न करण्यास किंवा असाइन करण्यास सक्षम करते. अ‍ॅजेक्सवर जास्त अवलंबून असलेल्या साइट्स आणि अ‍ॅप्ससाठी ते अमर्याद संधी उघडतात.

CSS3 - ही नवीन फोटोशॉप आहे

सीएसएस 3 ने पार्श्वभूमी प्रतिमा, स्लाइस आणि कुप्रसिद्ध ‘सरकत्या दरवाजे’ तंत्राची आवश्यकता असलेल्या डिझाईन-लुक-डिझाइनची संपूर्ण नवीन नवीन पातळी आणली. कृतज्ञतापूर्वक, ती भूतकाळातील सर्व गोष्ट आहे.

चला एक रेखीय ग्रेडियंट, गोलाकार कोपरे, मजकूर सावलीसह फॅन्सी बटण बनविण्यावर एक नजर टाकूया ज्यामुळे तो एक छान पत्र प्रेस प्रभाव देईल आणि होवरवरील चमक. या तंत्रे शिकणे फारच पुढे जाईल. त्यापैकी प्रत्येकाचा स्वतंत्रपणे किंवा आजच्या वेब ट्रेंडिंगमध्ये असलेल्या विद्यमान व्हिज्युअल हॉटनेसपैकी काही काढण्यासाठी स्वतंत्रपणे किंवा विविध संयोजनांमध्ये वापरली जाऊ शकते.

प्रथम, डीफॉल्टमध्ये काही adjustडजस्ट करू बटण> आणि इनपुट प्रकार = "सबमिट करा"> घटक. आपण सीएसएस रीसेटपैकी एक मानक रीसेट वापरत आहात असे गृहीत धरुन आम्ही थोडासा आकार आणि श्वास घेणारी खोली जोडू.

/ * बटणे बटणे, ज्यांची बटणे मिळाली. ======================================= * * / बटण, इनपुट [प्रकार = "सबमिट करा]] {उंची: 2.7 मी; पॅडिंगः .4 एम .7 ईएम; ओळ-उंची: 1.9; }

संरक्षण: सबमिट केलेले बटणे आणि निविष्ठा पुनर्संचयित करण्यासाठी अवघड असू शकते. मी ओळ-उंची 1.6 किंवा त्याहून अधिक समायोजित करुन आढळली आहे, आपण आतमध्ये अतिरिक्त डिव्ह किंवा स्पॅनची आवश्यकता खाच टाळू शकता बटण> टॅग

आता आम्ही आमच्या बटणाची समस्या ‘निश्चित’ केली आहे, आम्ही एक तयार करू शकतो .बीटीएन गोलाकार कोपरे, एक रेखीय ग्रेडियंट, बाह्यरेखा आणि ते लेटरप्रेस लुक असलेले एक छान स्वच्छ बटण देण्यासाठी वर्ग.

.btn {प्रदर्शन: इनलाइन-ब्लॉक; सीमा: 1 पीएक्स सॉलिड # डी 4 डी 4 सीसी; -मोझ-बॉर्डर-त्रिज्या: 4 पीएक्स; -वेबकिट-सीमा-त्रिज्या: 4 पीएक्स; सीमा-त्रिज्या: 4 पीएक्स; पॅडिंगः .4 एम .7 ईएम; पार्श्वभूमी: # edeff2; पार्श्वभूमी: -वेबकिट-ग्रेडियंट (रेषीय, 0% 0%, 0% 100%, पासून (#fefefe), कलर-स्टॉप (0.55, # edeff2), ते (# e4e6e9)); पार्श्वभूमी: -मोझ-रेषीय-ग्रेडियंट (मध्यभागी शीर्ष, # फेफी, # edeff2 55%, # e4e6e9); -मोझ-बॉक्स-सावली: आरजीबा (160,172,187, .7) 0 0 .2 एम 0; -वेबकिट-बॉक्स-सावली: आरजीबा (160,172,187, .7) 0 0 .2 एम 0; बॉक्स-सावली: आरजीबा (160,172,187, .7) 0 0 .2 एम 0; रंग: # 6c7786; फॉन्ट-आकार: 1.1 मी; मजकूर-सावली: #fefefe 1px 0 1px; ओळ-उंची: 1.375 मी; कर्सर: पॉईंटर; }

आणि नंतर सूक्ष्म ग्लोचा वापर करून एक छान फिरवा प्रभाव बॉक्स-सावली पद्धत:

.btn: होव्हर, .btn: फोकस {-मोझ-बॉक्स-सावली: # 129ceb 0px 0px 2px; -वेबकिट-बॉक्स-सावली: # 129ceb 0 0 2px; बॉक्स-सावली: # 129ceb 0 0 2px; पार्श्वभूमी: # e6e9eb; पार्श्वभूमी: -वेबकिट-ग्रेडियंट (रेषीय, 0% 0%, 0% 100%, पासून (# f7f7f7), कलर-स्टॉप (0.55, # f6f6f7), ते (# e6e9eb)); पार्श्वभूमी: -मोझ-लाइनरग्रेडियंट (मध्यभागी शीर्ष, # f7f7f7, # f6f6f7 55%, # e6e9eb); रंग: # 45484 बी; मजकूर-सावली: आरजीबी (255,255,255) 1 पीएक्स 1 पीएक्स 0; सीमा-रंग: # c9c9c0; }

आता, मी रेषात्मक ग्रेडियंट कोड लिहिण्याचा एक मोठा चाहता नाही. हे लांब आणि गोंधळात टाकणारे आहे. आपण पहातच आहात की मी फक्त आवृत्ती समाविष्ट केली आहे -मोझ, -वेबकीट, आणि मानक मॉडेल. आपण -o आणि -ms आवृत्ती समाविष्ट करू इच्छित असल्यास आपल्याला कोड दुप्पट करणे आवश्यक आहे.

इतर दोन पर्याय आहेत. एक सीएसएस 3 जनरेटर आहे; वेबवर कलरझिलासह अनेक उपलब्ध आहेत. परंतु आपणास आपला गेम थोडासा वाढवायचा असेल तर ससमध्ये गोताखोरांचा विचार कराः कंपाससह एकत्रित केलेले ते एक देवस्थान आहे.

सस + कंपास: जादूने रुचकर

आपण CSS4 युनिकॉर्न आवृत्तीची आशा ठेवणे थांबवू शकता. हे येथे आहे आणि त्याला Sass + Compass असे म्हणतात. सस याचा अर्थ सिंटेक्टीकली अद्भुत स्टाईलशीटः आपण सीएसएस 3 चे सर्व पारंपारिक फायदे व्हेरिएबल्स, मिक्सन, एक्सटेंडर आणि इतर वस्तूंच्या जोड्या आनंदात मिळवता.

मी अलीकडे निळ्या रंगाच्या समान सावलीत 5,000० हून अधिक भिन्नता असलेल्या -०००-ओळींच्या सीएसएस फाईलचे रिफेक्टर केले. Sass सह, मी या कोडसह प्रत्येक भिन्नता पुनर्स्थित केली:

रंग: $ निळा;

परिभाषित करून . निळा माझ्या _variables.scss फाइल, मी प्रत्येक सीएसएस किंवा एससीएसएस फाईल संदर्भित करू शकतो असा डीफॉल्ट रंग तयार करू शकतो. सीएसएस लिहिणारे प्रत्येकजण वापरू शकतात . निळा आणि आयड्रोपर वापरणे, हेक्स कोड शोधणे किंवा आरजीबी, आरजीबीए किंवा एचएसएल रंगाची चिंता करण्याची गरज नाही.

तो रेषात्मक ग्रेडियंट कोड लक्षात आहे? कोडच्या अनेक ओळी लिहिण्याऐवजी याबद्दल:

@ सामील पार्श्वभूमी (रेखीय-ग्रेडियंट (# बी 1 सीएफडीसी, # 7 ए 9 सीएसी));

सस आणि कम्पास ला भारी उचल करू द्या आणि आपल्यासाठी योग्य वाक्यरचना व्युत्पन्न द्या: पूर्ण झाले. असे म्हणावे की आपल्याला रंगाची गडद किंवा फिकट आवृत्ती हवी आहे. आपण फोटोशॉपमध्ये आयड्रोपर फिरवू शकता किंवा ससमध्ये फक्त लाईट / गडद आज्ञा वापरू शकता:

@ सामील पार्श्वभूमी (रेखीय-ग्रेडियंट (गडद ($ अक्षरे, 2%), गडद ($ ऑफ-व्हाइट, 5%)));

हे 2% अंधार असलेल्या एक रेखीय ग्रेडियंट तयार करेल $ लाइट-ग्रे आणि 5% अंधार पांढरा. आवाज! आपल्यास हेक्स किंवा आरजीबी कोडची देखील आवश्यकता नाही.

jQuery: अगं, होय आपण हे करू शकता

माझ्याकडे एक कबुलीजबाब आहे. मला घाबरायला जावास्क्रिप्ट वापरली गेली. मग मला jQuery सापडले. मी जावास्क्रिप्टचा गुरू असल्याचा दावा करणार नाही, परंतु मला पूर्ण विश्वास आहे की मी जेक्यूरी वापरण्यासाठी आवश्यक असलेल्या कोणत्याही प्रकारच्या संक्रमण, किंवा कार्यपद्धती बद्दल काढू शकतो.

उदाहरणार्थ, नवीन नंबर जोडा दुव्यावर क्लिक करून स्क्रीनवर दुय्यम फोन नंबर इनपुट प्रदर्शित करण्याची क्षमता घ्या. JQuery वापरुन, आपण फक्त हे लिहा:

// - प्रोग्रेसिव्ह प्रकट - // $ (’. नवीन-नंबर’). क्लिक (फंक्शन () {$ (’. Alt-नंबर’). फेडइन (’वेगवान’);});

आणखी प्रगत शोधत आहात? त्यासाठी कदाचित एक प्लग-इन असेल. मूलभूत वर्तणूक सुलभ आहेत आणि ज्यूक्यूरीसह जटिल आहेत.

फ्रेमवर्क

आज सर्वात मजबूत फ्रेमवर्कपैकी दोन म्हणजे फाउंडेशन आणि बूटस्ट्रॅप. आता आपण सीएसएस फ्रेमवर्क डिसमिस करण्यापूर्वी, मी तुम्हाला काही विचारू. आपण jQuery वापरता? रेलवरील रुबी? झांगो? सर्व फ्रेमवर्क.

जसे की jQuery आणि RoR, फाऊंडेशन आणि बूटस्ट्रॅप यांचा जन्म आपण पुन्हा पुन्हा करत असलेल्या बर्‍याच गोष्टी (जसे की रीसेट, टायपोग्राफी, ग्रीड, फॉर्म, बटणे, नॅव्ही आणि याद्या) ओळखल्यामुळे उद्भवल्या आहेत. फाऊंडेशन आणि बूटस्ट्रॅप हेल्पर क्लासेसच्या माध्यमातून प्रतिसाद देणार्‍या डिझाइनसाठी समर्थन देतात. दोघांचेही चांगले दस्तऐवजीकरण झाले आहे आणि रस्त्याची चाचणी घेण्यात आली आहे, जेणेकरून आपण त्यांचा आत्मविश्वासाने वापरू शकता.

दोघांमधील एक मुख्य फरकः बूटस्ट्रॅप सीएसएस प्रीप्रोसेसिंगच्या कमी प्रणालीवर आधारित आहे, तर फाउंडेशन सस वर आधारित आहे. मी त्याच्या अतिरिक्त क्षमतेमुळे SSS ला कमी पसंत करतो, परंतु Sass आणि LSS स्क्वॅश पारंपारिक CSS दोन्ही तुकडे करतात.

फ्रेमवर्कवरील शेवटचा विचार. ज्यांना दुसर्‍या एखाद्याच्या चौकटीचा अतिरिक्त फुगाराचा वारसा घ्यायचा नाही, त्यांच्यासाठी अस्तित्वातील एक निवडणे आणि तो उघडा हाडे घेऊन जाण्याचा विचार करा किंवा काही जणांकडून चेरी उचलून स्वतःचे रोल करा. एकतरच, प्रत्येक वेळी स्क्रॅचपासून प्रारंभ करण्याचे खरोखर कारण नाही.

अंतिम विचार

आपले डिझाइन शेवटी कसे वळते यावर अधिक नियंत्रण हवे आहे? कोडवर अधिक प्रक्रिया अपस्ट्रीम हलवा. एचटीएमएल 5 शेवटी डीओएमला काही अर्थ प्राप्त करते. मूर्खपणाचा चांगला प्रयत्न डॉक्टएस आणि डिव्हिटिस सीएसएस 3 नवीन फोटोशॉप आहेः रेखीय ग्रेडियंट्स, बॉर्डरडियस आणि बॉक्स-सावली एफटीडब्ल्यू! आणि बूटस्ट्रॅप, फाऊंडेशन, सस आणि जेक्यूरी सारख्या साधनांसह, अपस्ट्रीम कोडमध्ये कोड हलविणे कधीही सोपे नव्हते.

क्रिएटिव्ह ब्लॉकवर एचटीएमएल 5 ची 55 आश्चर्यकारक उदाहरणे शोधा.