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> Based on the requirement we need to calculate the overall tables count and we need to categorize them as simple tables, medium tables and complex tables. Rough values are given below. Here I have considered all the 30 staging tables as simple. So I have categorized only the warehouse tables. All the values mentioned in the above ‘Test Case Unit Efforts’ are fact values. We can’t change it. So no need to worry about this. We can keep this as it is and let’s go for the staging table & warehouse table’s validation part.</div>
div{-webkit-column-count: 3;}
இது கொடுக்கப்பட்டுள்ள paragraph-ஐ தனித்தனிப் பகுதிகளாகப் பிரித்து அதனை 3 column-ல் வெளிப்படுத்தும். ஒவ்வொரு column-க்கும் இடையில் ஏதேனும் இடைவெளி அமைக்க விரும்பினால் column-gap: 40px; எனவும் கொடுக்கலாம். அந்த இடைவெளியில் கோடு போட விரும்பினால் column-rule எனும் பண்பு பயன்படும். column-rule: 1px solid lightblue; இதில் 1px என்பது கோட்டின் அடர்த்தியையும், solid என்பது திடமான கோட்டையும், lightblue என்பது அக்கோட்டிற்கு அளிக்கப்படும் நிறத்தையும் குறிக்கும்.
மேலே உள்ள paragraph-ல் h1-க்குள் உள்ள வரி மட்டும் எந்த column-க்குள்ளும் அடங்கிவிடாமல் அனைத்து column-ன் மீதும் தெரியுமாறு கொடுக்க விரும்பினால், column-span எனும் பண்பு பயன்படும். இது style section-க்குள் பின்வருமாறு அமையும்.
h1 {column-span: all;}
Re-sizing
நமது வலைத்தளத்தைப் பயன்படுத்தும் பயனர்கள், அவர்களின் விருப்பத்திற்கு border-ஐ நீட்டிக் குறுக்குமாறு செய்ய உதவும் பண்பு Re-sizing எனப்படும். ஓர் heading, division, paragraph என்று எதற்கு வேண்டுமானாலும் இந்தப் பண்பைக் கொடுக்கலாம். முதலில் பின்வருமாறு ஒரு heading-ஐ program-ல் உருவாக்கிவிட்டு பின்னர் அதற்கான style section-ல் கீழே உள்ளவாறு கொடுக்கவும்.
<h1>This blog will tells you about how to make estimation for an ETL project with SMC Model.</h1>
h1 {border: 2px solid; padding: 20px; width: 300px; resize: both; overflow: auto;}
இதில் resize: both என்பது heading-ஐ நீளவாட்டிலும் அகலவாட்டிலும் resize செய்ய உதவும். நீளவாட்டில் மட்டும் resize செய்ய விரும்பினால் horizontal எனவும், அகலவாட்டிற்கு vertical எனவும் கொடுக்கலாம். overflow: auto என்பது resize-உடன் எப்பொழுதும் இணைக்கப்பட வேண்டிய ஒரு பண்பு ஆகும்.
Shadows
Shadows என்பது நிழல் போன்ற வடிவத்தை உருவாக்கப் பயன்படுகிறது. text-shadow என்பது எழுத்துக்களை நிழலுடன் வெளிப்படுத்தவும், box-shadow என்பது பெட்டியினை நிழலுடன் வெளிப்படுத்தவும் பயன்படும் பண்புகள் ஆகும். அவ்வாறு வெளிப்படும் நிழலினை வண்ணங்களுடன் வெளிப்படுத்துதல், அந்த நிழலின் அகலத்தை அதிகப்படுத்துதல் போன்ற விஷயங்களை இந்தப் பண்பின் மதிப்புகளாகச் சேர்த்துக்கொண்டே செல்லலாம்.
முதலில் பின்வருமாறு ஒரு text மற்றும் division-ஐ program-ல் உருவாக்கிவிட்டு பின்னர் அதற்கான style section-ல் அதன்கீழ் உள்ளவாறு கொடுக்கவும்.
<h1>This blog will tells you about how to make estimation for an ETL project with SMC Model.</h1>
<div>SMC Model is nothing but simple, medium and complex estimation</div>
h1 {text-shadow: 2px 2px 5px red;}
div {width: 300px; height: 50px; border: 2px solid; box-shadow: 10px 10px 5px blue;}
இங்கு text-shadow-ன் முதல் இரண்டு மதிப்புகளாகக் காணப்படும் 2px 2px என்பது அந்த நிழலின் நீள அகல மதிப்புகளைக் குறிக்கிறது. அதன் தொடர்ச்சியாக உள்ள 5px red என்பது அந்த நிழலின் நிறத்தையும், அந்த நிறம் எவ்வளவு மங்களாகத் தெரிய வேண்டும் என்பதை pixel-ளிலும் குறிப்பிடுகிறது.
து. நித்யா
தொடரின் பிற பகுதிகளைப் படிக்க – www.kaniyam.com/category/css-in-tamil/