Category Archives: css in tamil

எளிய தமிழில் CSS – மின்னூல்

Cascading Style Sheets இணையப் பக்கங்களை அழகாக வடிவமைக்கும் ஒரு நுட்பம். கணினிக்கேற்ற வலை வடிவமைப்போடு கைபேசிக் கருவிகளுக்கான வலைத்தளங்கள், செயலிகள் உருவாக்கத்திலும் CSS பெரும்பங்கு வகிக்கிறது. இதை, இந்த நூல் எளிமையாக அறிமுகம் செய்கிறது. தமிழில் கட்டற்ற மென்பொருட்கள் பற்றிய தகவல்களை “கணியம்” மின் மாத இதழ், 2012 முதல் வெளியிட்டு  வருகிறது.இதில் வெளியான CSS பற்றிய கட்டுரைககளை இணைத்து ஒரு முழு புத்தகமாக வெளியிடுவதில் பெரு மகிழ்ச்சி கொள்கிறோம். உங்கள் கருத்துகளையும், பிழை திருத்தங்களையும் editor@kaniyam.com… Read More »

எளிய தமிழில் CSS – 12 – CSS3 – Border Radius – Gradients

Border Radius CSS-ல் உள்ள border எனும் பண்பு நமது content-ஐ சுற்றி ஒரு border-ஐ உருவாக்கும். CSS3-ல் உள்ள border-radius எனும் பண்பு அவ்வாறு உருவாக்கப்பட்ட border-ன் நான்கு முனைகளையும் கூரியதாக இல்லாமல், ஓர் அழகிய வளைவாக மாற்றும். இந்தப் பண்பின் மதிப்பினை 25px, 50px, 100px எனக் கொடுத்து அந்த வளைவு எவ்வாறெல்லாம் மதிப்பிற்கு ஏற்ப மாறுகிறது என்பதை கவனிக்கவும். அதற்கு பின்வருமாறு ஒரு heading-ஐ program-ல் உருவாக்கிவிட்டு பின்னர் அதற்கான style section-ல்… Read More »

எளிய தமிழில் CSS – 11 – CSS3 – MultipleColumns – shadows

Multiple Columns பொதுவாக செய்தித்தாளில் காணப்படும் வரிகள் பல்வேறு columns-க்குள் மடங்கி சிறு சிறு பகுதிகளாக செய்திகளை வெளிப்படுத்தும். இதுபோன்ற ஒரு அமைப்பினை வலைத்தளத்தில் உருவாக்க column-count எனும் பண்பு பயன்படுகிறது. முதலில் ஒரு சாதாரண paragraph-ஐ பின்வருமாறு program-ல் உருவாக்கிவிட்டு பின்னர் அதற்கான style section-ல் கீழே உள்ளவாறு கொடுக்கவும். <p><b>This blog will tells you about how to make estimation for an ETL project with SMC Model.</b></p> <div>… Read More »

எளிய தமிழில் CSS – 10 – CSS3 – Animations – Transitions

CSS3 CSS3 என்பது முழுக்க முழுக்க செயல்முறையில் செய்து பார்த்து மகிழ வேண்டிய ஒரு விஷயம். இதற்கு நான் என்னதான் screenshot எடுத்துக் காட்டினாலும் உங்களால் உணர முடியாது. எனவே இதற்கான concept-ஐ மட்டும் நான் விளக்குகிறேன். நீங்களே இதனை செய்து பார்த்து மகிழுங்கள். Transitions ஒருசில வலைத்தளப் பக்கங்களில் ஒரு சின்ன பெட்டிக்குள் ஒருசில எழுத்துக்கள் காணப்படும். நாம் அதன்மீது cursor-ஐக் கொண்டு சென்றால், அந்தப் பெட்டி கொஞ்சம் கொஞ்சமாக ஒரு குறிப்பிட்ட அளவு வரை… Read More »

எளிய தமிழில் CSS – 9 – Gallery

Gallery என்பது ஒரே அளவிலான பல்வேறு படங்களின் தொகுப்பு ஆகும். Galary-க்குள் இருக்கும் ஒவ்வொரு படத்தின் மீது சென்று சொடுக்கும் போதும், அதற்கான முழு படம் பெரிய அளவில் வெளிப்படும். இது போன்ற ஒரு gallery-ஐ உருவாக்குவதற்கான code பின்வருமாறு அமையும். [code] <html> <head> <style> div.one {margin:5px; padding:5px; border:1px; solid red; float:left; text-align:center;} div.one img { display:inline; margin: 5px; border:1px solid yellow; width:170px; height:150px;} div.one a:hover… Read More »

எளிய தமிழில் CSS – 7 – Combinators

Combinator என்பது இரண்டு selector-க்கு இடையில் அமைக்கப்படும் ஒரு உறவு ஆகும். <div> எவ்வாறு அமைக்கப்பட வேண்டும், <p> எவ்வாறு அமைக்கப்பட வேண்டும் என்பதெல்லாம் selectors. இவை இரண்டையும் இணைத்து ஏதேனும் ஒன்று சொல்லப்படுமாயின் அது combinator ஆகும். div p { —– } : இவ்வாறு div, p எனும் இரண்டு selector-க்கும் இடையில் இடைவெளி விட்டு style-ஐக் குறிப்பிட்டோமானால், அந்த style-ஆனது divக்குள் இருக்கும் p-க்கு மட்டுமே பொருந்தும். [code] <html> <head>… Read More »

எளிய தமிழில் CSS – 7 – Positioning

Positioning-ஐப் பயன்படுத்தி வலைத்தளப் பக்கங்களில் ஒருசில வார்த்தைகளை ஒரு குறிப்பிட்ட இடத்தில் வெளிப்படுமாறு செய்யலாம். Left, Right, Top, Bottom எனும் நான்கு வகையான பண்புகள் இதற்காகப் பயன்படுகின்றன. இங்கு Fixed, Static, Relative எனும் 3 வகையான positioning-ஐப் பற்றி பார்க்கலாம். வலைத்தளப் பக்கங்களில் இயல்பான விதத்தில் வரிகள் வெளிப்படுவதே static positioning ஆகும். இது மேற்கூறிய 4 பண்புகளாலும் பாதிக்கப்படாது. இது பின்வருமாறு. [code] <html> <head> <style> p.a {position:static; top:5px; right:30px}… Read More »

எளிய தமிழில் CSS – 3 – links, lists

Links ஒரு link-ஐ அழகுபடுத்த color, font-family, font size என்று மேற்கூறிய அனைத்து விஷயங்களையும் பயன்படுத்தலாம். இவை அனைத்தும் கீழ்வரும் நான்கு விதங்களுக்குள் வரையறுக்கப்படும். a:link = ஒரு link எவ்வாறு இருக்க வேண்டும் என்பதை வரையறுக்கிறது. a:hover = Mouse cursor-ஐ அந்த link-ன் அருகே கொண்டு செல்லும்போது அந்த link எவ்வாறு காட்சியளிக்க வேண்டும் என்பது இங்கு வரையறுக்கப்படுகிறது. a:active = அந்த link-ன் மீது சொடுக்கும்போது அது எவ்வாறு காட்சியளிக்க வேண்டும்… Read More »

எளிய தமிழில் CSS – 2 – Text, Font

Text color என்பது எழுத்துக்களின் நிறத்தைக் குறிக்க உதவும். பின்வரும் 3 விதங்களில் இதன் மதிப்பைக் கொடுக்கலாம் : HEX மதிப்பாகக் கொடுக்கலாம் (e.g: “#ff0000”) , ஒரு RGB மதிப்பாகக் கொடுக்கலாம் (e.g: “rgb(255,0,0)”) அல்லது ஒரு நிறத்தின் பெயரையே கூட கொடுக்கலாம். (e.g: “red”). text-align என்பது எழுத்துக்களை ஒரே பக்கமாக ஒதுங்குபடுத்த உதவுகிறது. இதன் மதிப்பு Left என்று இருந்தால் இடப்பக்கத்திலும், Right என்று இருந்தால் வலப்பக்கத்திலும், center என்று இருக்கும்போது மையத்திலும்… Read More »

எளிய தமிழில் CSS – 1 – அறிமுகம்

Cascading Style Sheets என்பதே CSS என்றழைக்கப்படுகிறது. இது HTML மூலம் உருவாக்கப்படும் வலைத்தளப் பக்கங்களை இன்னும் அழகுபடுத்த உதவும் ஒரு சிறப்பு வகை நிரல் ஆகும். அதாவது HTML-ல் font color, size, bgcolor என்பது போன்ற பல்வேறு வகையான attributes-ஐப் பயன்படுத்தி நாம் விரும்பும் நிறம் வடிவம், அளவு போன்ற சில குறிப்பிட்ட விவரங்களைக் கொடுப்போம். மேலும் ஒவ்வொரு பக்கத்திற்கும் இத்தகைய விவரங்களை நாம் இணைக்க வேண்டியிருக்கும். அதனால் இவ்வாறு அமைக்கும்போது HTML code படிப்பதற்கும் பார்ப்பதற்கும்… Read More »