CSS පාඩම් අංක 10
Browser එක Refresh කරන එක හෙන කරදරයක් නෙහ්?
ඒකට තමයි Inspect Element කියන එක තියෙන්නේ. හැම Browser එකකම වගේ මේ Option එක තියෙනවා. හැබැයි ඒවායේ ආකෘති සහ පහසුකම් විවිධයි. මොකද ඒවා Develop කරන්නේ ඒ ඒ Browser එක හදන Company එකෙන් නිසා. ඒත් වැඩිම ප්රතිශතයක් Browser එකක් හැටියට පාවිච්චි කරන්නේ Google Chrome නිසා, වැඩිම ජනප්රියත්වයක් දිනාගෙන ඉන්නේ එකේ Inspect Element Tool එක. මේ Tool එක හැම Designer / Developer කෙනෙක්ම අනිවාර්යෙන්ම පාවිච්චි කරනවා. නැත්නම් වැඩ කරන්න අමාරුයි. ඕනෑම වෙබ් පිටුවකට ගිහින්, ඒකෙ තියෙන ඕනෑම Element එකක් Right Click කරලා Inspect Element කියන එක Click කළාම, පහළ තියෙන විදිහේ Box එකක් ඇරෙනවා. නැත්නම් F12 එබුවත් හරි.
මේ Tool එක නිසා අදාළ වෙබ් එකට සම්බන්ධ ගොඩාක් දේවල් අපිට ඉගෙන ගන්න පුලුවන්. විශේෂයෙන්ම ඒ වෙබ් එක හදන්න පාවිච්චි කරලා තියෙන HTML සහ CSS Code කෑලි එහෙම. මොකද මේ Tool එකේ ඒ සෑම සියලු දෙයක්ම, පැහැදිලිව පෙන්නනවා. මේ Tool එකේ පළවෙනි Tab එක තමයි Elements කියන Tab එක. ඒකෙ වම් පැත්තේ තීරුවේ තියෙන්නේ HTML Codes ටික. මොකක් හරි HTML Code එකක් Click කළාම, ඒකට අදාළ CSS එක දකුණු පැත්තේ තීරුවේ පෙන්නනවා.
මේකෙ තියෙන තවත් වාසියක් තමයි අපිට මේක හරහා වෙබ් එකේ HTML සහ CSS ටික Edit කරන්න පුලුවන්. වෙබ් එක හදනකොට Codes එකින් එක Type කර කර, ඒක හරියට වැඩ කරනවද කියලා බලන්න, Browser එක තත්පරෙන් තත්පරේ Refresh කර කර ඉන්නවට වඩා, මේක හරහා Edit කරන එක ලේසියි. මොකද අපි කරන හැම දෙයක්ම, වෙබ් එකේ සජීවීව ඒ වෙලාවෙම පෙන්නනවා. ඉතින් ඒ වෙන වෙනස්කම් අපිට ඒ වෙලාවෙම බලාගෙන, ඒ ඒ Elements අපිට ඕන තැන්වලට දාගන්න පුලුවන්. ඊට පස්සේ එකේ අපි Type කරපු Code එක Copy කරලා, අපේ Machine එකේ File එකේ Save කරගන්න පුලුවන්.
Chrome එකේ Tool එක ගොඩක්ම වාසි සහගතයි, වෙබ් එක Responsive කරන වෙලාවෙදි. මොකද මේකේ Toggle Device Mode කියන Option එක හරහා අපිට පුලුවන් අද වෙනකොට වැඩි දෙනෙක් පාවිච්චි කරන, ප්රධානතම සහ නවීනතම Devicesවලින් බලනකොට, වෙබ් එක ඒවායේ Display වෙන හැටි බලාගන්න.
තව මොනවද කරන්න පුලුවන් අලුත් වැඩ?
CSS පැත්තෙන් ගත්තොත්, @keyframes කියලා එකක් තියෙනවා. මේ Key Frames හරහා අපිට පුලුවන් Animations හදන්න. මෙච්චර කාලෙකට ගොඩක් වෙබ්වල Animations පෙන්නුවේ Js / Jq / Flash වලින් වුණත්, දැන් CSS වලිනුත් Animations හදාගන්න පුලුවන් තත්වයක් උදාවෙලා තියෙනවා. ඒක Js වලින් හදනවාට වඩා ලේසියි. Animations කිව්වම ගොඩක් අයට මතක් වෙන්නේ Movements ගැන විතරයි. ඒත් Movements විතරක් නෙවේ ඕනෑම වෙනස් වෙන දෙයක් CSSවල Key Frames හරහා හදාගන්න පුලුවන්. ඒවා ටිකක් විතර සංකීර්ණයි. ඒ වගේම CSSවල මූලිකම දේවල් නෙවේ නිසා, මේ ලිපියේ පැහැදිලි කරන්න බලාපොරොත්තුවක් නෑ. සරල CSS Animationsවලට උදාහරණයක් විදිහට, මම හදපු මේ සරලම සරල Bounce වෙන බෝලය පෙන්නන්න පුලුවන්.
<< Bouncing Ball >>
පහළ තියෙන Link එකේ තියෙනවා CSS Key Frames වලින් කරන්න පුලුවන් ඔක්කොම වැඩ කෑලි ටික.
<< Animate CSS >>
සංකීර්ණ CSS Animationsවලට පහළ තියෙන Link එකේ තියෙන Animations ටික හොදටම ප්රමාණවත්.
<< 40 Cool CSS Animation Examples >>
CSS වලින් Animations හදන්නත් පුලුවන් නම් Icons / Images හදන්න බැරි කමක් නෑ නේද? ඔව් CSS වලින් එහෙම කරන්නත් පුලුවන්. Font Awesome වෙබ් එක තමයි මේකට දෙන්න තියෙන හොදම උදාහරණය.
<< Bouncing Ball >>
පහළ තියෙන Link එකේ තියෙනවා CSS Key Frames වලින් කරන්න පුලුවන් ඔක්කොම වැඩ කෑලි ටික.
<< Animate CSS >>
සංකීර්ණ CSS Animationsවලට පහළ තියෙන Link එකේ තියෙන Animations ටික හොදටම ප්රමාණවත්.
<< 40 Cool CSS Animation Examples >>
CSS වලින් Animations හදන්නත් පුලුවන් නම් Icons / Images හදන්න බැරි කමක් නෑ නේද? ඔව් CSS වලින් එහෙම කරන්නත් පුලුවන්. Font Awesome වෙබ් එක තමයි මේකට දෙන්න තියෙන හොදම උදාහරණය.
ඒ විතරක්ද? නෑ ! CSSවලින් Games හදන්නත් පුලුවන්. මහා ලොකු Games නෙවේ. MiniClip වගේ පොඩි පොඩි Games. CSS වලින් හදපු Games බලන්න කැමති නම් පහළ තියෙන Link එකට යන්න.
<< CSS3 Games Collection >>
මේත් එක්කම ලිපි 10කින් යුක්ත මේ ලිපි මාලාවේ අවසානය සනිටුහන් වෙනවා ඇතී..!!!!! මේ වගේ ලිපි මාලාවක් ලියන්න කියලා අදහස දැම්මේ අපේ දක්ෂික සර්. සර් තමයි අපිට CSS ඉගැන්නුවේ. ඒත් මේ ලිපි මාලාව ලියන තැනට වැඩ සිද්ධ කළේ මෙලාන්. මෙලාන් තමයි නිතරම ඇහුවේ "කෝ ලියන්නේ නැද්ද?" කියලා. ඒ වගේම එයා තමයි මට CSS උගන්නපු මුල් ගුරුවරයා. ඉතින් දක්ෂික සර්වත්, මෙලාන්වත් මේ වෙලාවේ ආදරයෙන් සිහිපත් කරනවා.
CSS ඉගෙන ගන්න හරිම ලේසියි. ඒ නිසා CSSවලට පොඩ්ඩක්වත් බය වෙන්න අවශ්ය නෑ. CSS කියන්නේ හරිම බුද්ධිමත් භාෂාවක්. ඒත් ඒ බුද්ධිමත් භාෂාව නිර්මාණය කළේ මිනිසා විසින්. එසේ නම් මිනිසා යනු CSSවලටත් වඩා බුද්ධිමත් කෙනෙක්. ඒ නිසා අපි හදපු CSSවලට, අපි බය වෙන්න ඕන නෑ. අපිට පුලුවන් CSSව අපිට ඕන විදිහට Control කරන්න. Internet එකේ හිසේ කෙස් ගාණටත් වඩා වෙබ්, බ්ලොග්, ලිපි, Videos තියෙනවා CSS ඉගෙන ගන්න පුලුවන්. ඉතින් ඒවා පරිශීලනය කළොත් තවත් හොදට CSS ගැන අවබෝධයක් ලබා ගන්න පුලුවන්. මොකද අපි මේ ලිපි මාලාවේ සාකච්ඡා කළේ එදිනෙදා නිතර පාවිච්චි වෙන, CSSවල මූලිකම මූලික දේවල් විතරයි. ඒ වුණාට CSSවල තව ගොඩාක් දේවල් තියෙනවා.
CSS ගැන ඉගෙන ගන්න පුලුවන් වෙබ් අතරින් ඉස්සරහින්ම ඉන්නේ w3schools එක. ඒක තමයි හැමෝම වගේ පාවිච්චි කරන්නේ. මම මේ ලිපි මාලාව ලිව්වෙත් ඒක අනුසාරයෙන්. ඊට අමතරව CSS-Tricks, StackOverflow, Tutorials Point වගේ තැන්වලිනුත් ඉගෙන ගන්න පුලුවන්. එහෙනං හැමෝටම ජය වේවා..!!!!!