கட்டற்ற கணிநுட்பம்
Cascading Style Sheets இணையப் பக்கங்களை அழகாக வடிவமைக்கும் ஒரு நுட்பம். கணினிக்கேற்ற வலை வடிவமைப்போடு கைபேசிக் கருவிகளுக்கான வலைத்தளங்கள், செயலிகள் உருவாக்கத்திலும் CSS பெரும்பங்கு வகிக்கிறது. இதை, இந்த நூல் எளிமையாக அறிமுகம் செய்கிறது. தமிழில் கட்டற்ற மென்பொருட்கள் பற்றிய தகவல்களை “கணியம்” மின் மாத இதழ், 2012 முதல் வெளியிட்டு வருகிறது.இதில் வெளியான CSS…
Read more
Border Radius CSS-ல் உள்ள border எனும் பண்பு நமது content-ஐ சுற்றி ஒரு border-ஐ உருவாக்கும். CSS3-ல் உள்ள border-radius எனும் பண்பு அவ்வாறு உருவாக்கப்பட்ட border-ன் நான்கு முனைகளையும் கூரியதாக இல்லாமல், ஓர் அழகிய வளைவாக மாற்றும். இந்தப் பண்பின் மதிப்பினை 25px, 50px, 100px எனக் கொடுத்து அந்த வளைவு எவ்வாறெல்லாம்…
Read more
Multiple Columns பொதுவாக செய்தித்தாளில் காணப்படும் வரிகள் பல்வேறு columns-க்குள் மடங்கி சிறு சிறு பகுதிகளாக செய்திகளை வெளிப்படுத்தும். இதுபோன்ற ஒரு அமைப்பினை வலைத்தளத்தில் உருவாக்க column-count எனும் பண்பு பயன்படுகிறது. முதலில் ஒரு சாதாரண paragraph-ஐ பின்வருமாறு program-ல் உருவாக்கிவிட்டு பின்னர் அதற்கான style section-ல் கீழே உள்ளவாறு கொடுக்கவும். <p><b>This blog will…
Read more
CSS3 CSS3 என்பது முழுக்க முழுக்க செயல்முறையில் செய்து பார்த்து மகிழ வேண்டிய ஒரு விஷயம். இதற்கு நான் என்னதான் screenshot எடுத்துக் காட்டினாலும் உங்களால் உணர முடியாது. எனவே இதற்கான concept-ஐ மட்டும் நான் விளக்குகிறேன். நீங்களே இதனை செய்து பார்த்து மகிழுங்கள். Transitions ஒருசில வலைத்தளப் பக்கங்களில் ஒரு சின்ன பெட்டிக்குள் ஒருசில…
Read more
Gallery என்பது ஒரே அளவிலான பல்வேறு படங்களின் தொகுப்பு ஆகும். Galary-க்குள் இருக்கும் ஒவ்வொரு படத்தின் மீது சென்று சொடுக்கும் போதும், அதற்கான முழு படம் பெரிய அளவில் வெளிப்படும். இது போன்ற ஒரு gallery-ஐ உருவாக்குவதற்கான code பின்வருமாறு அமையும். [code] <html> <head> <style> div.one {margin:5px; padding:5px; border:1px; solid red;…
Read more
Combinator என்பது இரண்டு selector-க்கு இடையில் அமைக்கப்படும் ஒரு உறவு ஆகும். <div> எவ்வாறு அமைக்கப்பட வேண்டும், <p> எவ்வாறு அமைக்கப்பட வேண்டும் என்பதெல்லாம் selectors. இவை இரண்டையும் இணைத்து ஏதேனும் ஒன்று சொல்லப்படுமாயின் அது combinator ஆகும். div p { —– } : இவ்வாறு div, p எனும் இரண்டு selector-க்கும்…
Read more
Positioning-ஐப் பயன்படுத்தி வலைத்தளப் பக்கங்களில் ஒருசில வார்த்தைகளை ஒரு குறிப்பிட்ட இடத்தில் வெளிப்படுமாறு செய்யலாம். Left, Right, Top, Bottom எனும் நான்கு வகையான பண்புகள் இதற்காகப் பயன்படுகின்றன. இங்கு Fixed, Static, Relative எனும் 3 வகையான positioning-ஐப் பற்றி பார்க்கலாம். வலைத்தளப் பக்கங்களில் இயல்பான விதத்தில் வரிகள் வெளிப்படுவதே static positioning ஆகும்….
Read more
Body background நமது வலைத்தளப் பக்கங்களின் பின்புறத்தை ஏதேனும் ஒரு நிறத்தைக் கொண்டு நிரப்ப style code-ஐப் பின்வருமாறு அமைக்க வேண்டும். [code] <html> <head> <style> body {background-color: skyblue;} </style> </head> <body> Dont Giveup! Keep on Trying! Even though it seems to be impossible, It will…
Read more
Divisions Division என்பது குறிப்பிட்ட ஒரு content ஐ மட்டும் தனியே அழைக்கவும் பலவகைகளில் பயன்படுத்தவும் பயன்படுகிறது. உதாரணமாக, நமது content-ஐச் சுற்றி கோடு போட்டு ஒரு பெட்டியை உருவாக்கப் பயன்படும். இதை எவ்வாறு அழகு செய்வது என்று பின்வருமாறு பார்க்கலாம். [code] <html> <head> <style> div {width:60%; height: 40%; border: 3px…
Read more
Tables CSS-ல் tables-ஐ அழகுபடுத்த அவற்றின் ஒவ்வொரு அங்கங்களும் தனித்தனியாகக் குறிப்பிடப்படுகின்றன. பின்வரும் உதாரணத்தில் table எவ்வாறு இருக்க வேண்டும், table heading எவ்வாறு இருக்க வேண்டும், table data எவ்வாறு இருக்க வேண்டும் என்று தனித்தனியே குறிப்பிடப்பட்டுள்ளது. [code] <html> <head> <style> table {width:”60%”; height: “40%”; border: 3px solid red;}…
Read more