உலாவியில் வடிவமைப்பு

உள்ளடக்கம்

• குறியீட்டைக் கொண்டு வடிவமைப்பதன் நன்மைகள்
• தரவு முதலில்
• மொபைல் நன்மை இலவசம்
• பொதுவான மொழியைக் கண்டறிதல்
• வேகமாக கற்றுக்கொள்ளுங்கள்
• விரைவான மறு செய்கை
• தொடங்க விரைவான நேரம்
• ஏன் HTML5?
• மந்திர தரவு- பண்புக்கூறு
• CSS3 - இது புதிய ஃபோட்டோஷாப்
• சாஸ் + திசைகாட்டி: மாயமாக சுவையாக இருக்கும்
• jQuery: ஓ, ஆம் உங்களால் முடியும்
• கட்டமைப்புகள்
• இறுதி எண்ணங்கள்

இந்த கட்டுரை முதன்முதலில் .net பத்திரிகையின் 235 இதழில் வெளிவந்தது - வலை வடிவமைப்பாளர்கள் மற்றும் டெவலப்பர்களுக்காக உலகின் சிறந்த விற்பனையான இதழ்.

நான் ஒருபோதும் தேவைக்கு அதிகமாக எந்த வேலையும் செய்ய பெரிய ரசிகனாக இருந்ததில்லை. என்னை அல்லது எனது குழுவை மிகவும் பயனுள்ளதாக்குவதற்கான அவர்களின் திறனை அடிப்படையாகக் கொண்டு முறைகள் மற்றும் கருவிகளை மதிப்பீடு செய்ய முனைகிறேன். அவர்கள் எவ்வளவு விரைவாக ஒரு வேலை செய்யும் தயாரிப்புக்கு நம்மை அழைத்துச் செல்கிறார்கள்? அவர்கள் தொடர்புகொள்வதில் எவ்வளவு பயனுள்ளவர்கள்? அவர்கள் நம் வழியிலிருந்து விலகி இருக்கிறார்களா?

பல ஆண்டுகளாக, எனது வடிவமைப்பு செயல்முறை மற்றும் கருவிகளை சரிசெய்துள்ளேன். நான் தொடர்ந்து செய்வேன் என்று கற்பனை செய்கிறேன். தொழில்நுட்பம் மற்றும் இணையத்திற்கான வடிவமைப்பின் தன்மை இதுதான். இந்தத் தொழில் தொடர்ந்து உருவாகி வருகிறது; எங்கள் செயல்முறை மற்றும் கருவிகள் உருவாக வேண்டும்.

HTML5 மற்றும் CSS3 வடிவமைப்பு செயல்முறையை மேலதிகமாக மாற்றுவதை எளிதாக்குகின்றன - ஃபோட்டோஷாப்பிலிருந்து விலகி மேலும் ஒரு வாழ்க்கை, சுவாச வடிவமைப்பை நோக்கி. அறக்கட்டளை, பூட்ஸ்டார்ப் மற்றும் jQuery போன்ற கருவிகள் உங்கள் வடிவமைப்பு செயல்முறையை மேலும் அணுகக்கூடிய குறியீடாக நகர்த்தும்.

குறியீட்டைக் கொண்டு வடிவமைப்பதன் நன்மைகள்

முதலில், ஃபோட்டோஷாப் அல்லது வேறு எந்த காட்சி வடிவமைப்பு எடிட்டரையும் உங்கள் பணிப்பாய்வுகளில் இருந்து விலக்க நான் பரிந்துரைக்கவில்லை. அதற்கு பதிலாக, அந்த வடிவமைப்பை விரைவில் குறியீடாக நகர்த்துவதன் நன்மைகளில் கவனம் செலுத்துவேன்.

தரவு முதலில்

HTML உடன் வடிவமைப்பதில் நான் எப்போதும் விரும்பிய விஷயம் என்னவென்றால், இது தரவு முதல் கண்ணோட்டத்தில் சிந்திக்க ஊக்குவிக்கிறது. இதற்கு மாறாக, இல்லஸ்ட்ரேட்டர், ஆம்னிகிராஃபில் அல்லது பால்சாமிக் போன்ற வரைதல் நிரல்களைப் பயன்படுத்தி, நீங்கள் ஒரு பெட்டியுடன் தொடங்கி தரவை நிரப்பவும்.

HTML இல் நீங்கள் உள்ளடக்க அட்டவணையை உருவாக்குவது போன்ற DOM (ஆவண பொருள் மாதிரி) ஐ உருவாக்குகிறீர்கள். இது அர்த்தமுள்ள படிநிலைகளுடன் உண்மையான தகவல் வடிவமைப்பிற்கு திரும்பும். புதிய சொற்பொருள் கூறுகளைச் சேர்ப்பதன் மூலம் HTML5 ஒரு படி மேலே செல்கிறது: கட்டுரை, பிரிவு, தலைப்பு, ஒதுக்கி, அடிக்குறிப்பு மற்றும் பல. இந்த தரவு-முதல் அணுகுமுறை மொபைல் முதல், பதிலளிக்கக்கூடிய வடிவமைப்புகளுடன் நன்றாக கலக்கிறது.

மொபைல் நன்மை இலவசம்

நீங்கள் இதைப் படிக்கிறீர்கள் என்றால், நீங்கள் மொபைலுக்காக வடிவமைக்கிறீர்கள். நீங்கள் ஒரு படிவம் அல்லது இரண்டை வடிவமைக்க வேண்டிய வாய்ப்புகள் உள்ளன. HTML5 உடன், நீங்கள் அதிர்ஷ்டசாலி. HTML5 க்கு முன்பு, உங்கள் உள்ளீட்டு வகைகள் உரை அல்லது கடவுச்சொல் புலமாக இருந்தன. HTML5 பல கூடுதல் உள்ளீட்டு வகைகளை அறிமுகப்படுத்தியது, அவற்றுள்:

உள்ளீட்டு வகை = "மின்னஞ்சல்"> உள்ளீட்டு வகை = "தொலைபேசி"> உள்ளீட்டு வகை = "url"> உள்ளீட்டு வகை = "தேதி"> உள்ளீட்டு வகை = "தேதி-நேரம்">

இந்த கூடுதல், தனித்துவமான உள்ளீட்டு வகைகளைப் பற்றி மிகவும் அற்புதமானது என்னவென்றால், iOS மற்றும் Android இல் உள்ள மொபைல் உலாவிகள் அவற்றை அடையாளம் கண்டு, சூழல் ரீதியாக அறிந்த விசைப்பலகையை தானாகவே மாற்றிக் கொள்கின்றன - சிறப்பு jQuery செருகுநிரல்கள் அல்லது ஹேக்குகள் தேவையில்லை. ஓ, உங்கள் உலாவிக்கு என்ன என்று தெரியவில்லை என்றால் உள்ளீட்டு வகை = "மின்னஞ்சல்"> என்பது ஒரு உரை உள்ளீட்டிற்கு இயல்புநிலையாக இருக்கும்.

பொதுவான மொழியைக் கண்டறிதல்

“எங்கள் வடிவமைப்பாளர்கள் மற்றும் டெவலப்பர்கள் ஒரே மொழியில் எவ்வாறு செயல்பட முடியும் என்பது அருமை” - ஜான் டிராகோ, இன்ஃப்ளெக்ஷனில் பயன்பாட்டு டெவலப்பர்.

இது தெரிந்திருக்கிறதா என்று பாருங்கள். ரூபி, பைதான், ஜாவா அல்லது .NET இல் என்னைச் சுற்றி வட்டங்களை குறியிடக்கூடிய அரை டஜன் சேவையக பயன்பாட்டு டெவ்ஸுடன் நான் ஒரு மாநாட்டு அறையில் இருக்கிறேன். நான் மட்டுமே வடிவமைப்பாளர். எனது சில பரிந்துரைகள் ஆரம்பத்தில் செயல்படுத்த மிகவும் சிக்கலானவை என நிராகரிக்கப்படுகின்றன. நான் ஒயிட் போர்டு வரை நடந்து, வடிவமைப்பை எவ்வாறு செயல்படுத்த முடியும் என்பதற்காக போர்டில் சில HTML மற்றும் CSS ஐ எழுதத் தொடங்குகிறேன். திடீரென்று உரையாடல் தொனி மாறுகிறது மற்றும் டெவலப்பர்களில் ஒருவர் தயக்கத்துடன், “சரி, ஆமாம் - நாங்கள் அவ்வாறு செய்தால், அது செயல்படக்கூடும்” என்று கூறுகிறார்.

எனது வடிவமைப்பு செயல்முறையை குறியீடாக நகர்த்துவது டெவலப்பர்களுடனான உரையாடல்களை மேம்படுத்தியுள்ளது. உங்கள் வடிவமைப்புகளை குறியீட்டில் எவ்வாறு வடிவமைப்பது என்பதை அறிந்து சம்பாதித்த கூடுதல் மரியாதை உள்ளது. அந்த மரியாதை சம்பாதிக்க நீங்கள் ஒரு நிபுணராக இருக்க வேண்டியதில்லை. எனது HTML மற்றும் CSS திறன்கள் ராக் திடமானவை என்றாலும், எனது ஜாவாஸ்கிரிப்ட் திறன்கள் மிகச் சிறந்தவை. அதை ஒப்புக்கொள்வதில் நான் வெட்கப்படவில்லை. இருப்பினும், ஃபிரான்டென்ட் அல்லது சேவையக பக்க டெவலப்பர்களுடன் பணிபுரியும் போது, ​​நாம் ஒரு பொதுவான மொழியில் பேசலாம், அல்லது பாதியிலேயே சந்திக்க முடியும் என்பது ஒரு பெரிய நன்மை.

வேகமாக கற்றுக்கொள்ளுங்கள்

வயர்ஃப்ரேம்கள் மற்றும் காட்சி கலவைகள் திட்டமிடலுக்கு உதவக்கூடும், இந்த நிலையான கலைப்பொருட்கள் தத்துவார்த்தமானவை. ஒருவருடனான ஒரு தொடர்பை விளக்க நீங்கள் எத்தனை முறை முயற்சித்தீர்கள், அவர்கள் பதிலளிப்பதற்கு மட்டுமே, “நான் அதைப் பார்க்க வேண்டும் என்று நினைக்கிறேன்.” நீங்கள் விரைவில் ஒரு முன்மாதிரிக்கு வருகிறீர்கள், மக்கள் தொடர்பு கொள்ளக்கூடிய ஒன்று, விரைவில் நீங்கள் வடிவமைப்பை அனுபவித்து யோசனைகள் செயல்படுகிறதா என்று பார்க்கலாம்.

விரைவான மறு செய்கை

கடைசியாக தயாரிப்புக்கு அனுப்பப்பட்ட இறுதி வடிவமைப்பு உங்கள் ஃபோட்டோஷாப் தொகுப்போடு சரியாக பொருந்தியது எப்போது? பெரும்பாலும் முடியாது. டிஜிட்டல் தயாரிப்பு வடிவமைப்பில், மாற்றம் தொடர்ந்து நிகழ்கிறது. மேலும், இரண்டு டஜன் திரைகளில் உங்கள் தலைப்புகளின் அளவை 22pt முதல் 24pt வரை அதிகரிப்பது போன்ற மாற்றங்கள் ஃபோட்டோஷாப்பில் மணிநேரம் ஆகலாம். ஸ்மார்ட் பொருள்கள் ஃபோட்டோஷாப்பில் பொருள் சார்ந்த வடிவமைப்பை உங்களுக்கு வழங்குகின்றன. துரதிர்ஷ்டவசமாக, எனக்குத் தெரிந்த பெரும்பாலான காட்சி வடிவமைப்பாளர்கள் ஸ்மார்ட் பொருள்களைப் பயன்படுத்துவதில்லை. CSS உடன், இது வடிவமைப்பிற்கு மிகவும் முறையான அணுகுமுறையை ஊக்குவிப்பதால், அச்சுக்கலை மாற்றங்கள் மணிநேரங்களுக்குப் பதிலாக நிமிடங்கள் ஆகும்.

உங்கள் எல்லா பொத்தான்களிலும் நேரியல் சாய்வுகளை மாற்றுவது பற்றி என்ன? அல்லது எல்லையின் அளவு? ஸ்கொயர் மூலைகளிலிருந்து 2px வட்டமானவையாக மாற்றுவது எப்படி? ஃபோட்டோஷாப்பில், இதற்கு மணிநேரம் ஆகலாம், அதை நீங்கள் இன்னும் குறியிட வேண்டும். குறியீட்டில் வடிவமைக்கும் திறன் காட்சி வடிவமைப்பில் மீண்டும் செயல்படுவதற்காக ஃபோட்டோஷாப்பிற்குச் செல்வதற்கான சுற்று பயணத்தைத் தவிர்க்க உதவுகிறது. CSS3 மற்றும் சாஸைப் பயன்படுத்தி அந்த மாற்றங்களை நீங்கள் அப்ஸ்ட்ரீமில் குறியீடாக நகர்த்தும்போது (இந்த கட்டுரையில் நான் பின்னர் மறைப்பேன்) அவை நிகழ்நேரத்தில் நிகழலாம் மற்றும் சில நிமிடங்கள் மட்டுமே ஆகும்.

தொடங்க விரைவான நேரம்

பல ஆண்டுகளாக, எனது வடிவமைப்பு பணிப்பாய்வுகளை மேலதிக குறியீடாக மாற்றியபோது, ​​நான் ஒரு உண்மையான முன்னேற்றத்தை அனுபவித்தேன் - சந்தைக்கு 20 முதல் 30 சதவிகிதம் குறைப்பு. நான் இதை எவ்வளவு அதிகமாகச் செய்கிறேன், குறைந்த நேரத்தை நான் நகல் முயற்சிகளைச் செலவிடுகிறேன். ஃபோட்டோஷாப் அல்லது பட்டாசுக்குச் சென்று, குறியீட்டில் வேலையை மீண்டும் செய்கிறேன்.

சில சமயங்களில் வடிவமைப்பு சில வகையான பின்தளத்தில், அது ஒரு சிஎம்எஸ், ரெயில்ஸ் பயன்பாடு அல்லது வேறு ஏதேனும் ஒன்றுடன் தொடர்பு கொள்ள வேண்டும். எனது வடிவமைப்பு வேலைகளில் பெரும்பாலானவை குறியீட்டில் இருப்பதால், ஒருங்கிணைப்பு விரைவில் நிகழ்கிறது. சில ஆண்டுகளுக்கு முன்பு, எனது வாடிக்கையாளர்களில் ஒருவரான பாயிண்ட் ரோல், முன்மாதிரிகளிலிருந்து உற்பத்திக்கு ஐந்து நாட்களில் சென்றார்.

ஏன் HTML5?

HTML இன் முந்தைய பதிப்புகளை விட HTML5 எளிதானது. உதாரணமாக ஆவண வகை அறிவிப்பை எடுத்துக் கொள்ளுங்கள். HTML இன் முந்தைய பதிப்புகளில், தி DOCTYPE இது போன்ற ஒன்றைப் பார்த்தேன்:

! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">

ஆறு வெவ்வேறு பதிப்புகள் இருந்தன. அதிர்ஷ்டவசமாக HTML5 DOCTYPE இது போல் தெரிகிறது:

! DOCTYPE HTML>

தீவிரமாக. அவ்வளவுதான். அதிர்ச்சியூட்டும் எளிய.

நிலையான HTML பக்கத்தை உருவாக்கும்போது, ​​தலைப்பு, முக்கிய உள்ளடக்க பகுதி, பக்கப்பட்டி மற்றும் அடிக்குறிப்பு போன்ற பல பொதுவான கூறுகள் உள்ளன. இதற்கு முன்பு இதுபோன்ற ஒன்றை நீங்கள் பார்த்திருப்பீர்கள் என்று நான் நம்புகிறேன்:

div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>

அங்குள்ள சாதாரணத்திலிருந்து எதுவும் இல்லை. ஆனால் உள்ளடக்கத்துடன் நிரப்பப்பட்டவுடன், இந்த டெம்ப்ளேட் டிவ் சூப்பாக மாறும். இதற்கு மாறாக, HTML5 இன் புதிய சொற்பொருள் கூறுகளுடன், இது போன்ற எளிய மற்றும் ஸ்கேன் செய்ய எளிதான ஒன்றைப் பெறுவீர்கள்:

தலைப்பு> nav> / nav> / தலைப்பு> கட்டுரை> ஒதுக்கி> / ஒதுக்கி> / கட்டுரை> அடிக்குறிப்பு> / அடிக்குறிப்பு>

பாருங்கள். அர்த்தமுள்ள ஒன்று.

மந்திர தரவு- பண்புக்கூறு

HTML5 மற்றொரு அற்புதமான கொக்கி கொண்டு வருகிறது, இது உங்கள் சொந்த சொற்பொருள் பொருளை உருவாக்கும் திறனை உங்களுக்கு வழங்குகிறது: தி தகவல்கள்-. முன்னதாக, நீங்கள் ஒரு DOM உறுப்புக்கு அர்த்தமுள்ள ஒன்றை ஒதுக்க விரும்பினால், நீங்கள் ஐடிகள், வகுப்புகள் மற்றும் பாத்திரங்களுக்கு மட்டுப்படுத்தப்பட்டிருந்தீர்கள்.

துரதிர்ஷ்டவசமாக, ஐடிகள் தனித்துவமாக இருக்க வேண்டும். வகுப்புகள் உலகளாவியவை (யிப்பி!), ஆனால் அவற்றைப் பயன்படுத்துவது விரைவாக குழப்பமாக மாறும். பாத்திரங்கள் ARIA க்கு குறிப்பிடத்தக்க பொருளை வழங்கும் ஒரு பயன்படுத்தப்படாத சொத்து. சமீபத்தில், இன்ஃப்ளெக்ஷனில் நாங்கள் உருவாக்கி வரும் நிகழ்வு கண்காணிப்பு பகுப்பாய்வு தளத்திற்கு தரவைப் பயன்படுத்துகிறேன்.எங்கள் வடிவமைப்புகளைச் சோதிப்பதில் நாங்கள் பெரிய ரசிகர்கள். பயன்பாடுகள் அல்லது அதிகப்படியான ஊடாடும் பக்கங்களில் பணிபுரியும் போது, ​​பக்கத்திற்குள் வாடிக்கையாளர் ஈடுபாட்டைப் பற்றிய கூடுதல் நுண்ணறிவைப் பெற விரும்புகிறோம்.

உள்ளிடவும் தகவல்கள்-. அதைக் கொண்டு நீங்கள் ஒதுக்கலாம், கடந்து செல்லலாம், மேலும் ‘உங்கள் சொந்தத்தை வரையறுக்கவும்’ பொருள் மாதிரியாக இணைக்கலாம். எனவே, எடுத்துக்காட்டாக, நீங்கள் இதைச் செய்யலாம்:

உள்ளீட்டு வகை = "பொத்தான்" தரவு-ஐடி = "ஃபேஸ்புக்" டேட்டரேஜியன் = "பிரதான" தரவு-நிகழ்வு = "பதிவு"> உள்ளீட்டு வகை = "பொத்தான்" தரவு-ஐடி = "ட்விட்டர்" டேட்டரேஜியன் = "பிரதான" தரவு-நிகழ்வு = "பதிவு "> உள்ளீட்டு வகை =" பொத்தான் "தரவு-ஐடி =" இணைக்கப்பட்ட "டேட்டரேஜியன் =" பிரதான "தரவு-நிகழ்வு =" பதிவு ">

ஜாவாஸ்கிரிப்ட் மூலம் ஒரு கேட்பவரை நாங்கள் பக்கத்துடன் இணைக்க முடியும், எந்த நேரத்திலும் ஒரு வாடிக்கையாளர் வட்டமிடுகிறார், அல்லது இந்த பொத்தானைக் கிளிக் செய்தால், அந்தச் செயல்பாட்டைக் கண்காணிக்கலாம். ட்விட்டரில் OAuth வழியாக ஒருவர் பதிவுசெய்ததை மட்டும் கண்காணிப்பதற்குப் பதிலாக, அவர்கள் பேஸ்புக், பின்னர் ட்விட்டர், பின்னர் லிங்க்ட்இன், மற்றும் இறுதியாக அவர்களின் OAuth மாடலுக்கு ட்விட்டரைத் தேர்வு செய்ய முடிவு செய்ததை நாம் காணலாம்.

இதை Pinterest போன்ற தளத்திற்கு விரிவாக்குவதை கற்பனை செய்து பாருங்கள் அல்லது புதிய மைஸ்பேஸ் வடிவமைப்பு வாடிக்கையாளர்கள் ஆர்வத்தின் அடிப்படையில் மறுவரிசைப்படுத்த ஓடுகளை இழுத்து விடுகிறார்கள். அல்லது அவர்கள் ஆர்வமில்லாத ஓடுகளை மறைக்கக்கூடும். தி தகவல்கள்- நீங்கள் வரையறுக்கக்கூடிய விஷயங்களுக்கு சொற்பொருள் பொருளின் கூடுதல் அடுக்கை இணைக்க அல்லது ஒதுக்க பண்பு உங்களுக்கு உதவுகிறது. அஜாக்ஸை பெரிதும் நம்பியிருக்கும் தளங்கள் மற்றும் பயன்பாடுகளுக்கு இது வரம்பற்ற வாய்ப்புகளைத் திறக்கிறது.

CSS3 - இது புதிய ஃபோட்டோஷாப்

CSS3 பின்னணி படங்கள், துண்டுகள் மற்றும் பிரபலமற்ற ‘நெகிழ் கதவுகள்’ நுட்பம் தேவைப்படும் ஒரு புதிய அளவிலான வடிவமைப்பு மற்றும் தோற்றத்தை வடிவமைத்தது. அதிர்ஷ்டவசமாக, இது கடந்த காலத்தின் ஒரு விஷயம்.

ஒரு நேரியல் சாய்வு, வட்டமான மூலைகள், உரை நிழல் ஆகியவற்றைக் கொண்ட ஒரு ஆடம்பரமான பொத்தானை உருவாக்குவதைப் பார்ப்போம், இது ஒரு நல்ல எழுத்து அழுத்த விளைவை அளிக்கிறது, மற்றும் மிதவை ஒரு பிரகாசம். இந்த உத்திகளைக் கற்றுக்கொள்வது நீண்ட தூரம் செல்லும். அவை ஒவ்வொன்றும் சுயாதீனமாக அல்லது பல்வேறு சேர்க்கைகளில் இன்று வலையில் பிரபலமாக இருக்கும் தற்போதைய காட்சி வெப்பநிலையைப் பற்றி இழுக்க பயன்படுத்தலாம்.

முதலில், இயல்புநிலைக்கு சில மாற்றங்களைச் செய்யலாம் பொத்தான்> மற்றும் உள்ளீட்டு வகை = "சமர்ப்பி"> கூறுகள். நிலையான CSS மீட்டமைப்புகளில் ஒன்றைப் பயன்படுத்துகிறீர்கள் என்று வைத்துக் கொண்டால், நாங்கள் ஒரு சிறிய அளவு மற்றும் சுவாச அறையைச் சேர்ப்போம்.

/ * பொத்தான்கள் பொத்தான்கள், யாருடைய பொத்தான்கள் கிடைத்தன. ===================================== * * / பொத்தான், உள்ளீடு [type = "submit"] {உயரம்: 2.7em; திணிப்பு: .4em .7em; வரி உயரம்: 1.9; }

பாதுகாத்தல்: சமர்ப்பிக்கும் பொத்தான்கள் மற்றும் உள்ளீடுகள் மறுசீரமைப்பிற்கு தந்திரமானவை. வரி-உயரத்தை 1.6 அல்லது அதற்கும் அதிகமாக சரிசெய்வதன் மூலம் நான் கண்டறிந்தேன், உள்ளே கூடுதல் பிரிவு அல்லது இடைவெளி தேவைப்படுவதை நீங்கள் தவிர்க்கலாம் பொத்தான்> குறிச்சொல்.

இப்போது எங்கள் பொத்தானை சிக்கலை ‘சரிசெய்துள்ளோம்’, நாம் ஒரு உருவாக்க முடியும் .btn வட்டமான மூலைகள், ஒரு நேரியல் சாய்வு, அவுட்லைன் மற்றும் அந்த லெட்டர்பிரஸ் தோற்றத்துடன் கூடிய நல்ல சுத்தமான பொத்தானை எங்களுக்கு வழங்க வகுப்பு.

.btn {காட்சி: இன்லைன்-தொகுதி; எல்லை: 1px திட # d4d4cc; -moz-border-radius: 4px; -வெப்கிட்-எல்லை-ஆரம்: 4px; எல்லை-ஆரம்: 4px; திணிப்பு: .4em .7em; பின்னணி: # edeff2; பின்னணி: -வெப்கிட்-சாய்வு (நேரியல், 0% 0%, 0% 100%, (#fefefe) இலிருந்து, வண்ண-நிறுத்தம் (0.55, # edeff2), முதல் (# e4e6e9)); பின்னணி: -moz-linear-gradient (சென்டர் டாப், #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; -வெப்கிட்-பாக்ஸ்-நிழல்: rgba (160,172,187, .7) 0 0 .2em 0; box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; நிறம்: # 6c7786; எழுத்துரு அளவு: 1.1em; உரை-நிழல்: #fefefe 1px 0 1px; வரி-உயரம்: 1.375em; கர்சர்: சுட்டிக்காட்டி; }

பின்னர் ஒரு நுட்பமான பளபளப்புடன் ஒரு நல்ல மிதவை விளைவு பெட்டி-நிழல் முறை:

.btn: மிதவை, .btn: கவனம் {-moz-box-shadow: # 129ceb 0px 0px 2px; -வெப்கிட்-பாக்ஸ்-நிழல்: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2px; பின்னணி: # e6e9eb; பின்னணி: -வெப்கிட்-சாய்வு (நேரியல், 0% 0%, 0% 100%, (# f7f7f7) இலிருந்து, வண்ண-நிறுத்தம் (0.55, # f6f6f7), முதல் (# e6e9eb)); பின்னணி: -moz-lineargradient (சென்டர் டாப், # f7f7f7, # f6f6f7 55%, # e6e9eb); நிறம்: # 45484 பி; உரை-நிழல்: rgb (255,255,255) 1px 1px 0; எல்லை-வண்ணம்: # c9c9c0; }

இப்போது, ​​நான் நேரியல் சாய்வு குறியீட்டை எழுதுவதில் பெரிய விசிறி அல்ல. இது நீண்ட மற்றும் குழப்பமானதாகும். நீங்கள் பார்க்க முடியும் என, நான் பதிப்பை மட்டுமே சேர்த்துள்ளேன் -moz, -வெப்கிட், மற்றும் நிலையான மாதிரி. நீங்கள் -o மற்றும் -ms பதிப்புகளை சேர்க்க விரும்பினால், நீங்கள் குறியீட்டை இரட்டிப்பாக்க வேண்டும்.

வேறு இரண்டு விருப்பங்கள் உள்ளன. ஒன்று சிஎஸ்எஸ் 3 ஜெனரேட்டர்; கலர்ஸில்லா உட்பட வலையில் பல உள்ளன. ஆனால் உங்கள் விளையாட்டை சற்று முடுக்கிவிட விரும்பினால், சாஸில் டைவிங் செய்வதைக் கவனியுங்கள்: காம்பஸுடன் இணைந்து, இது ஒரு தெய்வபக்தி.

சாஸ் + திசைகாட்டி: மாயமாக சுவையாக இருக்கும்

CSS4 யூனிகார்ன் பதிப்பிற்கான நம்பிக்கையை நீங்கள் நிறுத்தலாம். இது இங்கே உள்ளது, இது சாஸ் + திசைகாட்டி என்று அழைக்கப்படுகிறது. சாஸ் என்பது வியத்தகு அற்புதமான ஸ்டைல்ஷீட்களைக் குறிக்கிறது: நீங்கள் CSS3 இன் அனைத்து பாரம்பரிய நன்மைகளையும் மாறிகள், மிக்சின்கள், நீட்டிப்புகள் மற்றும் பிற இன்னபிற பொருட்களின் கூடுதல் மகிழ்ச்சியுடன் பெறுகிறீர்கள்.

நீல நிற நிழலில் 30 க்கும் மேற்பட்ட மாறுபாடுகளைக் கொண்ட 5,000-வரி CSS கோப்பை நான் சமீபத்தில் மறுசீரமைத்தேன். சாஸுடன், இந்த குறியீட்டைக் கொண்டு ஒவ்வொரு மாறுபாட்டையும் மாற்றினேன்:

நிறம்: $ நீலம்;

வரையறுப்பதன் மூலம் $ நீலம் என் உள் _variables.scss கோப்பு, ஒவ்வொரு CSS அல்லது SCSS கோப்பும் குறிப்பிடக்கூடிய இயல்புநிலை வண்ணத்தை என்னால் உருவாக்க முடியும். CSS எழுதும் எவரும் பயன்படுத்தலாம் $ நீலம் மற்றும் ஒரு கண் இமைகளைப் பயன்படுத்துவது, ஹெக்ஸ் குறியீட்டைக் கண்டுபிடிப்பது அல்லது RGB, RGBA அல்லது HSL வண்ணத்தைப் பற்றி கவலைப்பட வேண்டியதில்லை.

அந்த நேரியல் சாய்வு குறியீட்டை நினைவில் கொள்கிறீர்களா? குறியீட்டின் பல வரிகளை எழுதுவதற்கு பதிலாக, இது எப்படி:

background பின்னணியைச் சேர்க்கவும் (நேரியல்-சாய்வு (# b1cfdc, # 7a9cac));

சாஸ் மற்றும் காம்பஸ் கனமான தூக்குதலைச் செய்து உங்களுக்காக சரியான தொடரியல் உருவாக்கட்டும்: முடிந்தது. வண்ணத்தின் இருண்ட அல்லது இலகுவான பதிப்பை நீங்கள் விரும்புகிறீர்கள் என்று சொல்லலாம். ஃபோட்டோஷாப்பில் நீங்கள் கண் இமைகளை நகர்த்தலாம் அல்லது சாஸில் ஒளி / இருண்ட கட்டளைகளைப் பயன்படுத்தலாம்:

background பின்னணியைச் சேர்க்கவும் (நேரியல்-சாய்வு (கருமை ($ இலக்கியம், 2%), இருட்டாக ($ இனிய வெள்ளை, 5%));

இது 2% இருண்ட ஒரு நேரியல் சாய்வு உருவாக்கும் $ லைட்-கிரே மற்றும் 5% இருண்டது வெள்ளை. குரல்! உங்களுக்கு HEX அல்லது RGB குறியீடுகள் கூட தேவையில்லை.

jQuery: ஓ, ஆம் உங்களால் முடியும்

நான் ஒரு ஒப்புதல் வாக்குமூலம் உள்ளது. ஜாவாஸ்கிரிப்ட் என்னை மிரட்ட பயன்படுகிறது. பின்னர் நான் jQuery ஐக் கண்டேன். நான் ஜாவாஸ்கிரிப்ட் குரு என்று கூறமாட்டேன், ஆனால் நான் எந்தவிதமான மாற்றத்தையும் அல்லது jQuery ஐப் பயன்படுத்த வேண்டிய செயல்பாட்டையும் பற்றி இழுக்க முடியும் என்று நான் நம்புகிறேன்.

எடுத்துக்காட்டாக, புதிய எண்ணைச் சேர் இணைப்பைக் கிளிக் செய்வதன் மூலம் இரண்டாம் நிலை தொலைபேசி எண் உள்ளீட்டை திரையில் காண்பிக்கும் திறனை எடுத்துக் கொள்ளுங்கள். JQuery ஐப் பயன்படுத்தி, இதை எழுதுங்கள்:

// - முற்போக்கான வெளிப்பாடு - // $ (’. புதிய எண்’). சொடுக்கவும் (செயல்பாடு () {$ (’. Alt-number’). FadeIn (’fast’);});

இன்னும் மேம்பட்ட ஒன்றைத் தேடுகிறீர்களா? அதற்கான செருகுநிரல் இருக்கலாம். அடிப்படை நடத்தைகள் எளிதானவை மற்றும் சிக்கலானவை jQuery உடன் அணுகக்கூடியவை.

கட்டமைப்புகள்

இன்று மிகவும் வலுவான இரண்டு கட்டமைப்புகள் அறக்கட்டளை மற்றும் பூட்ஸ்டார்ப். இப்போது, ​​நீங்கள் CSS கட்டமைப்பை நிராகரிப்பதற்கு முன், நான் உங்களிடம் ஏதாவது கேட்கிறேன். நீங்கள் jQuery பயன்படுத்துகிறீர்களா? ரெயில்ஸில் ரூபி? ஜாங்கோ? அனைத்து கட்டமைப்புகள்.

JQuery மற்றும் RoR ஐப் போலவே, அறக்கட்டளை மற்றும் பூட்ஸ்டார்ப் ஆகியவை மீண்டும் மீண்டும் நாம் செய்யும் நியாயமான எண்ணிக்கையிலான விஷயங்கள் உள்ளன என்பதை அங்கீகரிப்பதன் மூலம் பிறந்தவை (மீட்டமைப்புகள், அச்சுக்கலை, கட்டங்கள், படிவங்கள், பொத்தான்கள், nav மற்றும் பட்டியல்கள் போன்றவை). அறக்கட்டளை மற்றும் பூட்ஸ்டார்ப் இரண்டும் உதவி வகுப்புகளைப் பயன்படுத்துவதன் மூலம் பதிலளிக்கக்கூடிய வடிவமைப்புகளுக்கு ஆதரவை வழங்குகின்றன. இரண்டும் நன்கு ஆவணப்படுத்தப்பட்டுள்ளன மற்றும் சாலை சோதனை செய்யப்பட்டுள்ளன, எனவே நீங்கள் அவற்றை நம்பிக்கையுடன் பயன்படுத்தலாம்.

இரண்டிற்கும் இடையிலான ஒரு முக்கிய வேறுபாடு: பூட்ஸ்டார்ப் சிஎஸ்எஸ் முன் செயலாக்கத்திற்கான குறைந்த அமைப்பை அடிப்படையாகக் கொண்டது, அதே சமயம் அறக்கட்டளை சாஸை அடிப்படையாகக் கொண்டது. சாஸின் கூடுதல் திறன்களின் காரணமாக நான் அதை குறைவாக விரும்புகிறேன், ஆனால் சாஸ் மற்றும் குறைந்த ஸ்குவாஷ் பாரம்பரிய CSS இரண்டையும் துண்டுகளாக விரும்புகிறேன்.

கட்டமைப்பின் கடைசி சிந்தனை. வேறொருவரின் கட்டமைப்பின் கூடுதல் வீக்கத்தை மரபுரிமையாகப் பெற விரும்பாதவர்களுக்கு, ஏற்கனவே உள்ள ஒன்றைத் தேர்ந்தெடுத்து அதை வெறும் எலும்புகளுக்கு அகற்றுவதைக் கருத்தில் கொள்ளுங்கள், அல்லது சிலவற்றிலிருந்து செர்ரி எடுப்பதை உங்கள் சொந்தமாக உருட்டவும். எந்த வகையிலும், ஒவ்வொரு முறையும் புதிதாக தொடங்குவதற்கு உண்மையில் எந்த காரணமும் இல்லை.

இறுதி எண்ணங்கள்

உங்கள் வடிவமைப்பு இறுதியாக எப்படி மாறும் என்பதில் அதிக கட்டுப்பாடு வேண்டுமா? குறியீட்டிற்கு மேலதிக செயல்முறைகளை நகர்த்தவும். HTML5 இறுதியாக DOM க்கு சில அர்த்தங்களைக் கொண்டுவருகிறது. முட்டாள்தனத்திற்கு நல்ல முரட்டுத்தனம் DOCTYPEகள் மற்றும் டிவிடிஸ். CSS3 என்பது புதிய ஃபோட்டோஷாப் ஆகும்: நேரியல் சாய்வு, பார்டர்ராடியஸ் மற்றும் பெட்டி-நிழல்கள் FTW! பூட்ஸ்டார்ப், பவுண்டேஷன், சாஸ் மற்றும் jQuery போன்ற கருவிகளைக் கொண்டு, வடிவமைப்பை அப்ஸ்ட்ரீமில் குறியீட்டிற்கு நகர்த்துவது ஒருபோதும் எளிதாக இருந்ததில்லை.

கிரியேட்டிவ் பிளாக் இல் HTML5 இன் 55 அற்புதமான எடுத்துக்காட்டுகளைக் கண்டறியவும்.