Tag Archives: css

லேங்க்ஸ்கேப், பயிலகம், கணியம் இணைந்து நடத்தும் வெப் டிசைனிங் இலவச இணையவழிப் பயிற்சிகள்

மொழிபெயர்ப்புத் துறை முன்னணி நிறுவனங்களுள் ஒன்றான லேங்ஸ்கேப்(Langscape) நிறுவனம், பயிலகம், கணியம் ஆகியவற்றுடன் இணைந்து வெப் டிசைனிங் (HTML, CSS,JS, Canvas) பயிற்சிகளை இலவசமாக நடத்த முன்வந்துள்ளது. பயிற்சி இணையவழியே ஆறு (கூடினால் எட்டு) வாரங்கள் நடத்தப்படும். பயிற்சி ஒவ்வொரு நாளும் ஒரு மணிநேரத்தில் இருந்து ஒன்றரை மணிநேரம் வரை இருக்கும். பயிற்சியில் கலந்து கொள்ள: 1) ஏதாவது ஒரு நிரல்மொழி(programming) அடிப்படைகள் தெரிந்திருக்க வேண்டும். 2) ஒவ்வொரு நாளும் பயிற்சி நேரம் தவிர, ஓரிரு மணிநேரங்கள்… Read More »

எளிய தமிழில் 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 – 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 – 6 – body background

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 happen in your life one day. All the very best friends! Wait to see the… Read More »

எளிய தமிழில் CSS – 5 – div

Divisions Division என்பது குறிப்பிட்ட ஒரு content ஐ மட்டும் தனியே அழைக்கவும் பலவகைகளில் பயன்படுத்தவும் பயன்படுகிறது. உதாரணமாக, நமது content-ஐச் சுற்றி கோடு போட்டு ஒரு பெட்டியை உருவாக்கப் பயன்படும். இதை எவ்வாறு அழகு செய்வது என்று பின்வருமாறு பார்க்கலாம். [code] <html> <head> <style> div {width:60%; height: 40%; border: 3px solid red; } </style> </head> <body> <div>Dont Giveup! Keep on Trying! Even though it seems… Read More »

எளிய தமிழில் CSS – 4 – Tables

Tables CSS-ல் tables-ஐ அழகுபடுத்த அவற்றின் ஒவ்வொரு அங்கங்களும் தனித்தனியாகக் குறிப்பிடப்படுகின்றன. பின்வரும் உதாரணத்தில் table எவ்வாறு இருக்க வேண்டும், table heading எவ்வாறு இருக்க வேண்டும், table data எவ்வாறு இருக்க வேண்டும் என்று தனித்தனியே குறிப்பிடப்பட்டுள்ளது. [code] <html> <head> <style> table {width:”60%”; height: “40%”; border: 3px solid red;} th {border: 2px solid green;} td {border: 1px solid orange;} </style> </head> <body> <table> <tr>… Read More »