දැනට තිබෙන පාඩම්...

Saturday, February 27, 2016

web ඉගෙන ගනිමු - 8 පාඩම

කොහොමද යාලුවන්ට, අද අපි කථා කරන්නෙ CSS වල තවත් ප්‍රධාන කොටසක්.
අපි type කරන code ඒක page ඒක scroll කලා කියලා නැති වෙන්නෙ නැතුව ඒ position ඒක නොවෙනස්ව තියෙනවනම් අපට ඒක සෑහෙන්න වැදගත් වේවි.
ඒක කරන්න අපි පාවිච්චි කරන්නෙ position කියන property ඒක.
position ඒකෙ ප්‍රධාන අනු කොටස් කිහිපයක් තියෙනවා.

1. Position:fixed
මේකේදි position ඒක fix වෙනවා. තවත් පැහැදිලි කරනවනම් page ඒක scroll කලා කියලා  මේ දේවල් චලනය වෙන්නෙ නෑ. ඒක ඒතනට fix වෙලයි තියෙන්නනෙ....

ex:

p.fixed_posion
{
     position: fixed;
     top:20px;
     left:20px;
}

2.Position:relative
මේකෙදි position ඒක අදාල property ඒකේ original position ඒකත් ඒක්ක වෙනස් වෙනවා. ඒකයි මේකෙ position ඒක relative කියන්නෙ.

ex:

p.relative_position
{
      position:relative;
      left:20px;
}

3.Position:absolute
මේකෙදි පාවිච්චි වෙන absolute position ඒකේදි position ඒක ගැන හිතන්නෙ නැතුව properties පාවිච්චි කරන්න පුලුවන්.මේක හුගක් වෙලාවට පාවිච්චි කරනවා headers දාන කොට.

ex:

h1{
       position:absolute;
       left:100px;
}

අපි type කරන code ඒකකට shadow ඒකක් වුනත් දාන්න පුලුවන් CSS පාවිච්චි කරලා....

ex:

h1{
        color: white;
        text-shadow: 2px 2px 2px #000000;
}

ඒ වගේම div tag ඒක පාවිච්චි කරලා වෙන් කරන කොටසකට වුනත් shadow ඒකක් දාන්න පුලුවන්.

ex:

div{
          background-color: yellow;
          box-shadow: 10px 10px;
}

මේ කොටසින් CSS ඉවර වෙනවා. අපි ඊලග පාර ඉදන් Software engineering basic theories කථා කරමු.

කවුද මේ සුන්දර් පිචායි ??

පිචායි සුන්දර්රාජන් ඔබ දන්නවාද? මං දන්න තරමින් නැහැ. නමුත් ඔබ සුන්දර් පිචායි හදුනනවා විය යුතුයි. ඔහු තමයි Google අායතනයේ ප්‍රධාන විධායක...