সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-১২)

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: justify;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="allowfullscreen" frameborder="0" height="360" mozallowfullscreen="mozallowfullscreen" src="https://www.youtube.com/embed/Zf_Wn5O8px0?feature=player_embedded" webkitallowfullscreen="webkitallowfullscreen" width="640"></iframe></div> আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। আজকের টিউটোরিয়ালটিতে আমরা কোনও কাজ করবো না। বলতে পারেন এটি হলো গাইড-লাইন টিউটোরিয়াল। যারা বুঝতে পারছেন না যে কোনটির পর কোন টিউটোরিয়াল সিরিজটি দেখতে হবে, তা এখানে আলোচনা করা হয়েছে। আর সিএসএসের জন্য কিছু ওয়েবসাইট সম্পর্কে আলোচনা করা হয়েছে, যা আপনাকে সিএসএস অ্যাডভান্স কাজ করতে সাহায্য করবে। এছাড়া বিভিন্ন নতুন নতুন টিপস পেতে সাহায্য করবে। পুরো টিউটোরিয়াল সিরিজটিতে যেসব ফাইল সমূহ নিয়ে কাজ করা হয়েছে, যদি মনে করেন যেগুলো আপনার দরকার তবে নিচে থেকে ডাউনলোড করে নিতে পারেন।<br /> <div class="separator" style="clear: both; text-align: justify;"> <img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDF_7pL7z5xZtMyTF1C-PNMqzf9FoElatgvUTcgNESUbL1taTKHLYToIIiaxPanso4GX4gMa-H1Rbq8ecu3Y6-N7y1yMfLezOvZ2hBT2DO_14oBel_Rw7ebGhyphenhyphenk1EL-2A__5eb0Pef3Z0a/s1600/12.jpg" width="640" /></div> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="http://goo.gl/RY630M"><img alt=" Download Now" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDvP3vgLAK9jjsMQdLRuji7AKa8nhVwFJIeea7b-xfAwQ1xTmW21hg16BXABV9fovWZfMDkn1vwUOFlyxgAjPxdxy2hNOmpWoQmjvu6tDakfFPot4gufPYyNqj7bJjhePcgUIPRBDvjrM/s1600/Button.png" /></a></div> <blockquote> <div style="text-align: justify;"> বি. দ্র.: পুরো টিউটোরিয়ালটি কেমন হলো জানাতে ভুলবেন না। কারণ আপনাদের মন্তব্যই আমার একমাত্র উৎসাহের হাতিয়ার। সম্পুর্ণ ভিডিওতে আমার জানা-অজানায় অনেক ভুল হতে পারে। ভিডিওতে কোনো কথা কোন ব্যক্তি বা প্রতিষ্ঠানকে নিয়ে যদি বলা হয়ে থাকে, তা নিতান্তই অনিচ্ছাকৃত। নিজ গুণে ক্ষমা করে দিবেন। কোথাও কোনো ভুল থাকলে অথবা কোনো প্রশ্ন থাকলে অবশ্যই মন্তব্য করে জানাবেন।</div> </blockquote> </div>

সিএসএস ৩ বাংলা টিউটোরিয়াল সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-১২)

আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। আজকের টিউটোরিয়ালটিতে আমরা কোনও কাজ করবো না। বলতে পারেন এটি হলো গাইড-লাইন টিউটোরিয়াল। যারা ব...

আরও পড়ুন »

সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-১১)

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="allowfullscreen" frameborder="0" height="360" mozallowfullscreen="mozallowfullscreen" src="https://www.youtube.com/embed/f-qx2gG2sOw?feature=player_embedded" webkitallowfullscreen="webkitallowfullscreen" width="640"></iframe></div> <div style="text-align: justify;"> আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। আজকের টিউটোরিয়ালটিতেও আমরা সিএসএসের ট্রানজিশন ও ট্রান্সফর্ম নিয়ে আলোচনা করবো এবং আরও কিছু উদাহরণ দেখবো। বিগত টিউটোরিয়ালটির আগের টিউটোরিয়ালটিতে আমরা যে বেসিক ট্যাগ গুলো নিয়ে আলোচনা করে ছিলাম সেগুলোরই কিছু বাস্তবিক ও কিছুটা জটিল কিন্তু আকর্ষনীয় কিছু উদাহরণ এই টিউটোরিয়ালটিতে দেওয়া হয়েছে। যেমন: ফন্ট সাইজ বড় করা, সিএসএস দিয়ে তৈরি করা এনিমেটেড ব্যানার, স্বয়ংক্রিয় ভাবে রং পরিবর্তন, চার ধরনের স্লাইডশো। এই উদাহরণ গুলো যদি আপনারা বুঝতে পারেন, তবে এই ধরনের আরও আকর্ষনীয় ইফেক্ট ও ডিজাইন তৈরি করা সম্ভব।</div> <div class="separator" style="clear: both; text-align: justify;"> <img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuDUJpgTMXUbNo25egi6wc5-i_D43KK4_c1rUoN-_oSOb137GWkso8NnrOwPlVOMyObYJuVUWE539Lrw9CPvBEtD8VpSA-W3pjUUtPMsihXGlZs98MI4psXfZZTIeKrxpK1EhuM6RRCnbn/s1600/11.jpg" width="640" /></div> <div style="text-align: justify;"> <br /></div> </div>

সিএসএস ৩ বাংলা টিউটোরিয়াল সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-১১)

আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। আজকের টিউটোরিয়ালটিতেও আমরা সিএসএসের ট্রানজিশন ও ট্রান্সফর্ম নিয়ে আলোচনা করবো এবং আরও কিছু উ...

আরও পড়ুন »

সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-১০)

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="allowfullscreen" frameborder="0" height="360" mozallowfullscreen="mozallowfullscreen" src="https://www.youtube.com/embed/Jl9GN5_O4_U?feature=player_embedded" webkitallowfullscreen="webkitallowfullscreen" width="640"></iframe></div> <div style="text-align: justify;"> আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। আজকের টিউটোরিয়ালটিতেও আমরা সিএসএসের ট্রানজিশন ও ট্রান্সফর্ম নিয়ে আলোচনা করবো। তবে বিগত পর্বে আমরা বিভিন্ন প্রপার্টি/ট্যাগ নিয়ে আলোচনা করে ছিলাম। কিন্তু আজকের টিউটোরিয়ালটিতে সেই সব প্রপার্টি/ট্যাগ ব্যবহার করে কিছু কাজ করা হয়েছে। যেমন: ফর্ম স্টাইল, বাক্স হোভার স্টাইল, ইমেজ হোভার ইফেক্ট, ছবিকে ঘুরানো ইত্যাদি। এইসব উদাহরণের মাধ্যমে সিএসএসের ট্রানজিশন ও ট্রান্সফর্মের বাস্তব জীবনে মানে ওয়েবসাইটে কিভাবে ব্যবহার করা যায়, তাই বোঝানোর চেষ্টা করা হয়েছে।<br /> <div class="separator" style="clear: both; text-align: justify;"> <img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0nRaa4xsW9z1mPrTy7FiB6ZKtmwBLoh52BAXI6_HEq0rwy60zSZC8_dHz7pr09Qpk2sqoDZHaEIdpwDrq0sSmrvtgSqszBOCCo23LN4-D3NpYT3d4zwSZsiqdnxQO-HdrdME8Vy2lAirp/s1600/10.jpg" width="640" /></div> </div> <div style="text-align: justify;"> <br /></div> </div>

সিএসএস ৩ বাংলা টিউটোরিয়াল সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-১০)

আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। আজকের টিউটোরিয়ালটিতেও আমরা সিএসএসের ট্রানজিশন ও ট্রান্সফর্ম নিয়ে আলোচনা করবো। তবে বিগত পর্ব...

আরও পড়ুন »

সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-৯)

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="allowfullscreen" frameborder="0" height="360" mozallowfullscreen="mozallowfullscreen" src="https://www.youtube.com/embed/IqUMpMMy8C8?feature=player_embedded" webkitallowfullscreen="webkitallowfullscreen" width="640"></iframe></div> <div style="text-align: justify;"> আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। আজকের টিউটোরিয়ালটিতে আমরা সিএসএসের ট্রানজিশন ও ট্রান্সফর্ম নিয়ে আলোচনা করবো। এই টিউটোরিয়ালটিতে আমরা ট্রানজিশন ও ট্রান্সফর্মের বিভিন্ন প্রপার্টি নিয়ে আলোচনা করা হয়েছে। সময়, অবজেক্ট মুভিং এই সকল বিষয় নিয়ে আলোচনা করা হয়েছে। এছাড়া খুব সহজ কিছু ইফেক্ট কিভাবে তৈরি করা যায় তা দেখানো হয়েছে। এই সম্পর্কে আরও বিস্তারিত জানতে W3C ওয়েবসাইট থেকে <a href="http://www.w3.org/TR/css3-transitions/" target="_blank" title="সিএসএসের ট্রানজিশন">ট্রানজিশন</a> ও <a href="http://www.w3.org/TR/css3-transforms/" target="_blank" title="সিএসএসের ট্রান্সফর্ম">ট্রান্সফর্ম</a> সম্পর্কে জানতে পারবেন। এছাড়া W3SCHOOL থেকেও <a href="http://www.w3schools.com/css3/css3_transitions.asp" target="_blank" title="ট্রানজিশন">ট্রানজিশন</a> ও <a href="http://www.w3schools.com/cssref/css3_pr_transform.asp" target="_blank" title="ট্রান্সফর্ম">ট্রান্সফর্ম</a> সম্পর্কে জানতে পারবেন।</div> <div class="separator" style="clear: both; text-align: justify;"> <img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9nKwZd9OqpmMtDnyRMwg1b9CPROFFozqnVJLuIRP8wGpHoEG7f3tU3PGlczvoxxY9facIhQqfWENQxLLc1Y39pgz6kc7whFo8DEkIPOrAskoGHamBPUZ9o8eWRVCmNMFtoxeXSfTUk9GK/s1600/09.jpg" width="640" /></div> <div style="text-align: justify;"> <br /></div> </div>

সিএসএস ৩ বাংলা টিউটোরিয়াল সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-৯)

আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। আজকের টিউটোরিয়ালটিতে আমরা সিএসএসের ট্রানজিশন ও ট্রান্সফর্ম নিয়ে আলোচনা করবো। এই টিউটোরিয়াল...

আরও পড়ুন »

সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-৮)

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="allowfullscreen" frameborder="0" height="360" mozallowfullscreen="mozallowfullscreen" src="https://www.youtube.com/embed/qC71UnTF_Bc?feature=player_embedded" webkitallowfullscreen="webkitallowfullscreen" width="640"></iframe></div> <div style="text-align: justify;"> আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। আজকের টিউটোরিয়ালটিতে আমরা কিছু সাধারণ বিষয় নিয়ে আলোচনা করবো যা ওয়েব পেইজে প্রায়ই দরকার লাগে।উদাহরণস্বরূপ:</div> <div class="starlist"> <ul> <li>বাক্স: অনেক সময় আমাদের বাক্স তৈরি করার দরকার পড়ে, এই টিউটোরিয়ালটিতে সিএসএস দিয়ে কিভাবে আমরা আকর্ষনীয় বাক্স তৈরি করতে পারি যা দেখানো হয়েছে।</li> <li>টেবিল: কিছু তথ্য ইউজারের সামনে সুন্দর ও গুছিয়ে প্রদর্শন করার জন্য আমরা প্রায়ই টেবিল ব্যবহার করে থাকি। এই টিউটোরিয়ালটিতে দুই ধরনের টেবিল নিয়ে আলোচনা করা হয়েছে। একটি হলো শুধু সিএসএস দিয়ে হোভার ইফেক্ট ব্যবহার করে, অপরটি হলো জাভাস্ক্রিপ্ট ব্যবহার করে।</li> <li>চার্ট: বিভিন্ন সময় আমাদের ওয়েব পেইজে চার্ট ব্যবহার করার দরকার পড়ে। আমরা সাধারণত তিন ধরনের চার্ট ব্যবহার করে থাকি। যেমন:</li> </ul> </div> <div class="checklist"> <ul> <li>বার চার্ট</li> <li>পাই চার্ট</li> <li>ভেন ডায়াগ্রাম</li> </ul> </div> <div style="text-align: justify;"> <div class="separator" style="clear: both; text-align: justify;"> <img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsQzEPfXwoDp13MBaNBF4Qv4FQGMIaM4vyKsZSLbou5Hn3Gn9PdCScfdcpvyWtC010ftU97xTsueval2HAmn1CZV1WG_SB2pzDEU9DEabwBb3inxaG6AVdAaUSp2pEngXx76WunG5sNIRv/s1600/08.jpg" width="640" /></div> <br /> এই টিউটোরিয়ালটিতে এই তিন ধরনের চার্ট নিয়েই বিস্তারিত আলোচনা করা হয়েছে আর সাথে থাকছে কিছু টিপস।</div> </div>

সিএসএস ৩ বাংলা টিউটোরিয়াল সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-৮)

আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। আজকের টিউটোরিয়ালটিতে আমরা কিছু সাধারণ বিষয় নিয়ে আলোচনা করবো যা ওয়েব পেইজে প্রায়ই দরকার ল...

আরও পড়ুন »

সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-৭)

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="allowfullscreen" frameborder="0" height="360" mozallowfullscreen="mozallowfullscreen" src="https://www.youtube.com/embed/uXB1R5Lwm40?feature=player_embedded" webkitallowfullscreen="webkitallowfullscreen" width="640"></iframe></div> আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। গত টিউটোরিয়ালটিতে আমরা মেনু নিয়ে কিছু কাজ করে ছিলাম। আজকে আমরা গ্রেডিয়েন্ট নিয়ে কাজ করবো। আজকের পর্বে গ্রেডিয়েন্টের বিভিন্ন এট্রিবিউট/ট্যাগ নিয়ে আলোচনা করা হয়েছে। ওয়েবসাইটের গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড, বিভিন্ন ধরনের প্যাটার্ন ইত্যাদি নিয়ে এই টিউটোরিয়ালে বিস্তারিত আলোচনা করা হয়েছে। এছাড়া আমরা জানি প্যাটার্ন তৈরি করার জন্য আমাদের কিছু জটিল কালার কোড ব্যবহার করতে হয়। সেটির জন্য বরাবরের মতই থাকছে কিছু টিপস।<br /> <div class="separator" style="clear: both; text-align: center;"> <img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsLLmI4Y43bR85pu_k55e1PwSQ703w8knxi7CZG1HNtuRZqkVjwqO4qeCvcW0q1DM8KVK5d8iux59eBLoGSq7Rs4kyJVQbIDQvpA6okPkGkvHw4ixITjLEzlw5PQlGKZTr35Of_xHCG6ek/s1600/07.jpg"/></div> <br /> আশা করি গ্রেডিয়েন্ট সম্পর্কে যাদের সমস্যা রয়েছে, তারা খুব সহজেই সমাধান করতে পারবেন এই টিউটোরিয়ালটি থেকে।</div>

সিএসএস ৩ বাংলা টিউটোরিয়াল সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-৭)

আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। গত টিউটোরিয়ালটিতে আমরা মেনু নিয়ে কিছু কাজ করে ছিলাম। আজকে আমরা গ্রেডিয়েন্ট নিয়ে কাজ করবো। আ...

আরও পড়ুন »

সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-৬)

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="allowfullscreen" frameborder="0" height="266" mozallowfullscreen="mozallowfullscreen" src="https://www.youtube.com/embed/HZbE5hmlwco?feature=player_embedded" webkitallowfullscreen="webkitallowfullscreen" width="320"></iframe></div> <div style="text-align: justify;"> আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। গত টিউটোরিয়ালটিতে অনুভূমিক, উল্লম্ব ও ড্রপ-ডাউন এই তিন ধরনের মেনু নিয়ে আলোচনা করা হয়েছিল। আজকের টিউটোরিয়ালটিতেও আমরা ড্রপ-ডাউন মেনু নিয়ে কাজ করবো। তবে আজকে সেই ড্রপ-ডাউন মেনুটি আরেকটু জটিল ভাবে তৈরি করা হয়েছে। আর তা হলো ড্রপ-ডাউন মেনুর মাঝে আইকন যুক্ত করা হয়েছে। অনেক সময় আমরা দেখি মেনুতে বিভিন্ন আইকন যুক্ত করা হয়। সেই আইকন যুক্ত করা মেনু কিভাবে তৈরি করতে হয়, সেই বিষয়টি নিয়েই আমাদের আজকের টিউটোরিয়াল।<br /> <div class="separator" style="clear: both; text-align: justify;"> <img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiQJ950L8feigQPfR9JUiaByUHNjLEjegWg21a1KUK0g0U-y8JnFhyphenhyphen8hjrkHiwRNzUcJanT1ekT6HkpY2N-dU4DJ7gB6qsNkzC0xd_OaG4DydjOGw2N7QVxSnsYSHUDi19gdBzBMd5b4aB/s1600/06.jpg" width="640" /></div> </div> <div style="text-align: justify;"> এছাড়া এই টিউটোরিয়ালটিতে আমরা কিভাবে গ্রাডিয়েন্ট ইফেক্ট সম্পন্ন বাটন তৈরি করা যায়, তা নিয়েও আলোচনা করা হয়েছে। একটি বাটনকে কিভাবে আরও আকর্ষনীয় করে তৈরি করা যেতে পারে তাই দেখানো হয়েছে।</div> </div>

সিএসএস ৩ বাংলা টিউটোরিয়াল সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-৬)

আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। গত টিউটোরিয়ালটিতে অনুভূমিক, উল্লম্ব ও ড্রপ-ডাউন এই তিন ধরনের মেনু নিয়ে আলোচনা করা হয়েছিল। ...

আরও পড়ুন »

সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-৫)

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="allowfullscreen" frameborder="0" height="360" mozallowfullscreen="mozallowfullscreen" src="https://www.youtube.com/embed/ry1u1nQG91s?feature=player_embedded" webkitallowfullscreen="webkitallowfullscreen" width="640"></iframe></div> <div style="text-align: justify;"> আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। একটি ওয়েবসাইট তৈরি করতে গেলে যেটি আমাদের প্রায় সব সময়ই লাগে তা হলো মেনু। আজকের টিউটোরিয়ালটিতে এই মেনু নিয়ে বিস্তারিত আলোচনা করা হয়েছে। অনেকেরই মেনু নিয়ে কিছু সমস্যা/ভয় থাকতে পারে। আর সেই ভয়টি দূর করার জন্যই আজকের টিউটোরিয়াল। এই টিউটোরিয়ালটিতে অনুভূমিক, উল্লম্ব ও ড্রপ-ডাউন এই তিন ধরনের মেনু নিয়ে আলোচনা করা হয়েছে। </div> <div style="text-align: justify;"> <br /></div> <div class="separator" style="clear: both; text-align: justify;"> <img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWRVZ6EB-rcvpzBnfp3ODmVofe-ZumYLeGdHMuoP0kDxYL59Wolnp74hooZPgWXw6FG9OaFPXSLvws4TjptPWkVFLBqQiASwAul5VRBL-cp3-qjpXjK0mkdv-MmYq201ro2i0zcZsiUbp8/s1600/05.jpg" width="640" /></div> <div style="text-align: justify;"> বিভিন্ন ওয়েবসাইট তৈরির সময় আমরা সাধারণত এই তিন ধরনের মেনুই ব্যবহার করে থাকি। আর তাই আমাদের এই তিন ধরনের মেনু সম্পর্কেই পর্যাপ্ত জ্ঞান থাকা উচিত। সেই লক্ষেই আমার আজকের এই টিউটোরিয়াল।</div> </div>

সিএসএস ৩ বাংলা টিউটোরিয়াল সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-৫)

আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। একটি ওয়েবসাইট তৈরি করতে গেলে যেটি আমাদের প্রায় সব সময়ই লাগে তা হলো মেনু। আজকের টিউটোরিয়ালট...

আরও পড়ুন »

সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-৪)

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="allowfullscreen" frameborder="0" height="360" mozallowfullscreen="mozallowfullscreen" src="https://www.youtube.com/embed/KpHmBvxCyXs?feature=player_embedded" webkitallowfullscreen="webkitallowfullscreen" width="640"></iframe></div> আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। এই টিউটোরিয়ালটিতে সিএসএসের পজিশনিং নিয়ে আলোচনা করবো। পজিশনিং এর বিভিন্ন মান ও ব্যবহার নিয়ে বিস্তারিত আলোচনা করা হয়েছে। একটি পেইজের মাঝে ইলিমেন্ট সমূহকে বিভিন্ন স্থানে আমাদের মন মত বসানোর জন্য এটি ব্যবহার করা যেতে পারে। এছাড়া এই টিউটোরিয়ালটিতে ওভারফ্লো নিয়েও আলোচনা করা হয়েছে। যার ফলে পেইজের কনটেন্টকে বিভিন্ন ভাবে উপস্থাপন করা সম্ভব।<br /> <div class="separator" style="clear: both; text-align: justify;"> <img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrS_JDhrUKRpxCTPrs7Z7AaaiEowwzbo2cTeBSSgjlEmY_Rh36C7Eh4ij0GD41Ufop8iHWYyFuS9oR1A-HzeDMaPRmYcKpuGoua5gS6xmQjIV5I89-AeyvEMDjNO6QlVv9Y_rkcguScfIh/s1600/04.jpg" width="640" /></div> <br /> সত্যি কথা বলতে এই সকল ইলিমেন্ট সমূহ কখন কোনটি ব্যবহার করতে হবে, তা নির্ভর করে আমাদের কোনটি দরকার সেটির উপর। আমাদের নিজেদের উপস্থিত বুদ্ধির মাধ্যমে প্রয়োজনীয় ইলিমেন্ট সমূহকে বসাতে হবে।</div>

সিএসএস ৩ বাংলা টিউটোরিয়াল সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-৪)

আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। এই টিউটোরিয়ালটিতে সিএসএসের পজিশনিং নিয়ে আলোচনা করবো। পজিশনিং এর বিভিন্ন মান ও ব্যবহার নিয়ে ...

আরও পড়ুন »

সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-৩)

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="allowfullscreen" frameborder="0" height="360" mozallowfullscreen="mozallowfullscreen" src="https://www.youtube.com/embed/4Wv_0dvQMvY?feature=player_embedded" webkitallowfullscreen="webkitallowfullscreen" width="604"></iframe></div> আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। এই টিউটোরিয়ালটিতে সিএসএসের ফ্লোট প্রপার্টি নিয়ে বিস্তারিত আলোচনা করা হয়েছে। এই বিষয় সমূহ একটি ওয়েবসাইট তৈরি করতে গেলে আমাদের প্রতিনিয়ত ব্যবহার করতে হয়। উপাদানসমূহ অনুভূমিকভাবে ফ্লোট করা হয়, মানে একটি উপাদান শুধুমাত্র বাম বা ডানে ফ্লোট করা যেতে পারে, উপরে বা নিচে নয়। ফ্লোট প্রপার্টি প্রায়ই ছবির জন্য ব্যবহৃত হয়, কিন্তু পেইজ লেআউটের জন্যও এটি বেশ উপকারী।<br /> <div class="separator" style="clear: both; text-align: justify;"> <img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGaF8xrRrMCRgJr-plob3_1cSuTWSPN74BXO7OSgVT8ucSyCfVzCYwVVsagcd7Uo7T7XongLmCa7l29x0pm_ITYs362DxVgxuFaEDAvXLQKqZSW5fIFL9KjTwmUnVyLtD1S1mxRpSHLjtb/s1600/03.jpg" width="640" /></div> <br /> এছাড়া এই পর্বে কলাম নিয়েও আলোচনা করা হয়েছে। পেইজের ডিজাইন করতে যা আমাদের প্রায়ই দরকার পড়ে।</div>

সিএসএস ৩ বাংলা টিউটোরিয়াল সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-৩)

আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। এই টিউটোরিয়ালটিতে সিএসএসের ফ্লোট প্রপার্টি নিয়ে বিস্তারিত আলোচনা করা হয়েছে। এই বিষয় সমূহ এক...

আরও পড়ুন »

সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-২)

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="allowfullscreen" frameborder="0" height="266" mozallowfullscreen="mozallowfullscreen" src="https://www.youtube.com/embed/0hW4MEyIsWM?feature=player_embedded" webkitallowfullscreen="webkitallowfullscreen" width="320"></iframe></div> <div style="text-align: justify;"> আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। গত পর্বে সিএসএসের কিছু নতুন প্রযুক্তি নিয়ে আলোচনা করা হয়েছে। আমি চেষ্টা করেছি পুরো সিএসএসের নতুন ইলিমেন্ট গুলোর সাথে পরিচয় করিয়ে দেওয়ার। সিএসএসের এই সিরিজটি শুধু মাত্র CSS3 নিয়ে নয়, বরং আমি চেষ্টা করেছি পূর্বের সিএসএসের বিসিক টিউটোরিয়ালটিতে যে ইলিমেন্ট গুলো বাদ পড়ে গেছে ও অ্যাডভান্স কিছু কাজ দেখাতে, যা আমাদের প্রতিনিয়ত প্রয়োজন পড়ে।</div> <div class="checklist"> <ul> <li>সিএসএসের এই টিউটোরিয়াল সিরিজটিকে আমি সাতটি ভাগে ভাগ করেছি</li> <li>সিএসএসের নতুন ইলিমেন্ট, যা পূর্বের টিউটোরিয়ালটিতে দেখানো হয়েছে</li> <li>সিএসএসের পেইজ লেআউট, যা এই টিউটোরিয়াল ও পরবর্তী দুটি টিউটোরিয়ালে আলোচনা করা হয়েছে</li> <li>সিএসএসের মেনু ডিজাইন, যা দুটি পর্বে আলোচনা করা হয়েছে</li> <li>সিএসএসের গ্রেডিয়েন্ট, যা একটি পর্বে আলোচনা করা হয়েছে</li> <li>সিএসএসের মাধ্যমে টেবিল ও চার্ট ডিজাইন, যা একটি পর্বে আলোচনা করা হয়েছে</li> <li>সিএসএসের ট্রানজিশন ও ট্রান্সফর্ম, যা তিনটি পর্বে আলোচনা করা হয়েছে</li> <li>সিএসএস শিক্ষার জন্য প্রয়োজনীয় কিছু ওয়েবসাইট, যা শেষ পর্বে আলোচনা করা হয়েছে</li> </ul> </div> <div class="separator" style="clear: both; text-align: justify;"> <img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqOZN4qEFDRzZ55eljp8n2kvskIW7L7bAW9LZFUK_sDlAebUn0PUYvCAPXmQqQZ0d4hbugci-cKwsaB7PELinVBPHK2xBP5bcm2GJJe7kHQP8CJTkI5fAkGoHVp0ZZWiLjvjxdVC6-u_cc/s1600/02.jpg" width="640" /></div> <br /> সুতরাং বোঝতেই পারছেন, মোট বারটি পর্বে এই টিউটোরিয়ালটি শেষ করা হবে এবং বরাবরের মতই শেষ পর্বে সকল ফাইল গুলো ডাউনলোড করতে পারবেন। </div>

সিএসএস ৩ বাংলা টিউটোরিয়াল সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-২)

আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। গত পর্বে সিএসএসের কিছু নতুন প্রযুক্তি নিয়ে আলোচনা করা হয়েছে। আমি চেষ্টা করেছি পুরো সি...

আরও পড়ুন »

সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-১)

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <iframe allowfullscreen="allowfullscreen" frameborder="0" height="360" mozallowfullscreen="mozallowfullscreen" src="https://www.youtube.com/embed/NilU7QxlVus?feature=player_embedded" webkitallowfullscreen="webkitallowfullscreen" width="640"></iframe></div> <div style="text-align: justify;"> Cascading style sheet (CSS) ওয়েবপেইজ ডিজাইন করার জন্য একটি জনপ্রিয় প্রযুক্তি। সিএসএস ওয়ার্ল্ড ওয়াইড ওয়েব সাহচর্য দ্বারা বিকশিত হয় যা <a href="http://www.w3.org/Style/CSS/current-work.en.html" target="_blank" title="W3C">W3C </a>হিসেবেও পরিচিত। গত কয়েক বছরে আধুনিক প্রযুক্তির সাথে তাল মিলাতে নাটকীয়ভাবে বিবর্তিত হয়েছে ও হচ্ছে। পাশাপাশি অনেক নতুন নতুন সুবিধা যুক্ত করা হয়েছে ও হচ্ছে। তবে এই মুহূর্তে প্রস্তাবিত নতুন বৈশিষ্ট্য, অধিকাংশ প্রধান ওয়েব ব্রাউজার দ্বারা সমর্থন করা হয়েছে ও হচ্ছে। তাই আমরা ইতিমধ্যেই CSS3 এর ক্ষমতা উপভোগ করতে পারছি।<br /> <div class="separator" style="clear: both; text-align: justify;"> <img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFVnOq-4N_8NU4621DMKVwILHA3kGAfIX_B86evR1D6QMqiBK9rYbyvYjU26upQTnZPIAoDelDkqwCqUpq0sE7t-_yjSCaPDOJjTceqXGbPu9AjMBoOs8tG9VpQGYEMdhrj0TWyUrX01oJ/s1600/01.jpg" width="640" /></div> </div> <div style="text-align: justify;"> CSS1 1996 সালে চালু হয় যা ক্যাসকেডিং স্টাইল শীট প্রথম সংস্করণ। CSS2 1998 সালে প্রকাশিত হয়। সিএসএসের দুইটি আপডেট এবং বৈশিষ্ট্য ও ত্রুটি সংশোধনের জন্য আসে 2.1 সর্বশেষ দ্বিতীয় প্রজন্মের সংস্করণ। CSS3 সিএসএস স্টাইলশীট এর সর্বশেষ সংস্করণ। বেশ কিছু নতুন বৈশিষ্ট্য CSS3 এর মাধ্যমে প্রদান করা হয়েছে। নিচে কিছু নতুন বৈশিষ্ট্য সম্পর্কে ধারণা দেওয়া হলো:</div> <div style="text-align: justify;"> <div> <h5> Borders</h5> <div class="checklist"> <ul> <li><a href="http://www.css3.info/preview/colored-border/" target="_blank">border-color</a></li> <li><a href="http://www.css3.info/preview/border-image/" target="_blank">border-image</a></li> <li><a href="http://www.css3.info/preview/rounded-border/" target="_blank">border-radius</a></li> <li><a href="http://www.css3.info/preview/box-shadow/" target="_blank">box-shadow</a></li> </ul> </div> </div> <div> <h5> Backgrounds</h5> <div class="checklist"> <ul> <li><a href="http://www.css3.info/preview/background-origin-and-background-clip/" target="_blank">background-origin and background-clip</a></li> <li><a href="http://www.css3.info/preview/background-size/" target="_blank">background-size</a></li> <li><a href="http://www.css3.info/preview/multiple-backgrounds/" target="_blank">multiple backgrounds</a></li> </ul> </div> </div> <div> <h5> Color</h5> <div class="checklist"> <ul> <li><a href="http://www.css3.info/preview/hsl/" target="_blank">HSL colors</a></li> <li><a href="http://www.css3.info/preview/hsla/" target="_blank">HSLA colors</a></li> <li><a href="http://www.css3.info/preview/opacity/" target="_blank">opacity</a></li> <li><a href="http://www.css3.info/preview/rgba/" target="_blank">RGBA colors</a></li> </ul> </div> </div> <div> <h5> Text effects</h5> <div class="checklist"> <ul> <li><a href="http://www.css3.info/preview/text-shadow/" target="_blank">text-shadow</a></li> <li><a href="http://www.css3.info/preview/text-overflow/" target="_blank">text-overflow</a></li> <li><a href="http://www.css3.info/preview/word-wrap/" target="_blank">word-wrap</a></li> </ul> </div> </div> <div> <h5> User-interface</h5> <div class="checklist"> <ul> <li><a href="http://www.css3.info/preview/box-sizing/" target="_blank">box-sizing</a></li> <li><a href="http://www.css3.info/preview/resize/" target="_blank">resize</a></li> <li><a href="http://www.css3.info/preview/outline/" target="_blank">outline</a></li> <li>nav-top, nav-right, nav-bottom, nav-left</li> </ul> </div> </div> <div> <h5> Selectors</h5> <div class="checklist"> <ul> <li><a href="http://www.css3.info/preview/attribute-selectors/" target="_blank">attribute selectors</a></li> </ul> </div> </div> <div> <h5> Basic box model</h5> <div class="checklist"> <ul> <li>overflow-x, overflow-y</li> </ul> </div> </div> <div> <h5> Generated Content</h5> <div class="checklist"> <ul> <li>content</li> </ul> </div> </div> <div> <h5> Other modules</h5> <div class="checklist"> <ul> <li><a href="http://www.css3.info/preview/css3-transitions/" target="_blank">CSS3 Transitions</a></li> <li><a href="http://www.css3.info/preview/media-queries/" target="_blank">media queries</a></li> <li><a href="http://www.css3.info/preview/multi-column-layout/" target="_blank">multi-column layout</a></li> <li><a href="http://www.css3.info/preview/web-fonts-with-font-face/" target="_blank">Web fonts</a></li> <li><a href="http://www.css3.info/preview/speech/" target="_blank">speech</a></li> </ul> </div> </div> </div> </div>

সিএসএস ৩ বাংলা টিউটোরিয়াল সিএসএস ৩ বাংলা টিউটোরিয়াল (পর্ব-১)

Cascading style sheet (CSS) ওয়েবপেইজ ডিজাইন করার জন্য একটি জনপ্রিয় প্রযুক্তি। সিএসএস ওয়ার্ল্ড ওয়াইড ওয়েব সাহচর্য দ্বারা বিকশিত হয...

আরও পড়ুন »