সিএসএস৩ border-image প্রোপার্টি সিএসএস৩ border-image প্রোপার্টি দিয়ে একটি এলিমেন্ট এর চারদিকে বর্ডার সেট করতে পারেন। ব্রাউজার সাপর্ট টেবিলে উল্লেখিত সংখ্যা ব্রাউজার এর প্রথম ভার্সন যা এই প্রোপার্টি সম্পূর্ণভাবে সাপর্ট করে তা বোঝায়। -webkit- বা -moz- দ্বারা প্রথম প্রিফিক্স ভার্সন বুঝায় যা এই প্রোপার্টি সাপর্ট করে। Property border-image 11.0 16.0 …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8%e0%a7%a9-%e0%a6%ac%e0%a6%b0%e0%a7%8d%e0%a6%a1%e0%a6%be%e0%a6%b0-%e0%a6%87%e0%a6%ae%e0%a7%87%e0%a6%9c/
সিএসএস৩ border-radius প্রোপার্টি সাহায্যে আপনি যেকোন এলিমেনন্ট এর “গোলাকৃতির কোর্ণার বা পার্শ্ব” তৈরি করতে পারেন। ব্রাউজার সাপর্ট টেবিলে উল্লেখিত সংখ্যা ব্রাউজার এর প্রথম ভার্সন যা এই প্রোপার্টি সম্পূর্ণভাবে সাপর্ট করে তা বোঝায়। -webkit- বা -moz- দ্বারা প্রথম প্রিফিক্স ভার্সন বুঝায় যা এই প্রোপার্টি সাপর্ট করে। Property border-radius 9.0 5.0 4.0 -webkit- 4.0 …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8%e0%a7%a9-%e0%a6%97%e0%a7%8b%e0%a6%b2%e0%a6%be%e0%a6%95%e0%a7%83%e0%a6%a4%e0%a6%bf%e0%a6%b0-%e0%a6%95%e0%a6%b0%e0%a7%8d%e0%a6%a3%e0%a6%be%e0%a6%b0/
width, max-width এবং margin: auto এর ব্যবহার পূর্ববর্তী অধ্যায় এ উল্লেখ করা হয়েছিল যে, block-level এলিমেন্ট সবসময়ই ব্যবহারযোগ্য পূর্ণ প্রসস্থ জায়গা দখল করে (ডানে ও বায়ে যতটা সম্ভব প্রসারিত হয়) block-level এলিমেন্ট এর প্রসস্থতা নির্ধারণ করে দিলে ধারক এর প্রসারিত হওয়া বন্ধ করে দেয়া যেতে পারে। তারপর, আপনি মার্জিন auto হিসেবে সেট করে দিতে …
Permanent link to this article: http://bangla.sitestree.com/css-layout-width-and-max-width/
ইনলাইন-ব্লক মান এখন অনেক কাল পরে বক্স এর গ্রিড তৈরি সম্ভব যা float প্রোপার্টি ব্যবহার করলে ব্রাউজার এর প্রসস্থতা অনুসারে পূর্ণ এবং সুন্দরভাবে ফিট হয়ে যায় (যখন ব্রাউজার এর আকার পরিবর্তন করা হয়)। display প্রোপার্টি এর inline-block মান এটিকে আরও সহজ করেছে। inline-block এলিমেন্ট inline এলিমেন্ট এর মতই, কিন্তু এদের প্রসস্ততা ও উচ্চতা নির্ধারণ করা …
Permanent link to this article: http://bangla.sitestree.com/css-layout-inline-block/
ছদ্ম- এলিমেন্টসমূহ কি কি? একটি CSS এর ছদ্ম-এলিমেন্ট একটি এলিমেন্ট এর সুনির্দিষ্ট অংশের স্টাইল করার জন্য ব্যবহার করা হয়। উদাহরণস্বরূপ, এটি ব্যবহার করা হতে পারে: একটি এলিমেন্ট এর মধ্যকার প্রথম অক্ষর বা লাইন স্টাইল করার জন্য একটি এলিমেন্ট এর উপাদান এর আগে বা পরে উপাদান প্রবেশ করানোর জন্য সিনটেক্স selector::pseudo-element { property:value; } …
Permanent link to this article: http://bangla.sitestree.com/css-pseudo-elements/
যখন একটি ব্রাউজার স্টাইল শীট পরে, এটি স্টাইল শীট এর তথ্য অনুসারে ডকুমেন্টকে ফরমেট করে। সিএসএস প্রবেশ করানোর তিনটি উপায় আছে বহিস্থিত স্টাইল শীট অন্তস্থিত স্টাইল শীট ইনলাইন স্টাইল বহিস্থিত স্টাইল শীট বহিস্থিত স্টাইল শীট দিয়ে, মাত্র একটি ফাইল পরিবর্তনের মাধ্যমে ওয়েব সাইটের চেহারা পরিবর্তন করে ফেলতে পারবেন। প্রতিটি পেজের <link> এলিমেন্ট এর মধ্যে অবশ্যই …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8-%e0%a6%95%e0%a6%bf%e0%a6%ad%e0%a6%be%e0%a6%ac%e0%a7%87-css-how-to/
সি এস এস এ তৈরি ইমেজ গ্যালারী উদাহরণঃ <head> <style> div.img { margin: 5px; padding: 5px; border: 1px solid #0000ff; height: auto; width: auto; float: left; text-align: center; } div.img img { display: inline; margin: 5px; border: 1px …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8-%e0%a6%87%e0%a6%ae%e0%a7%87%e0%a6%9c-%e0%a6%97%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%b2%e0%a6%be%e0%a6%b0%e0%a7%80-css-image-gallery/
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8-%e0%a6%95%e0%a7%81%e0%a6%87%e0%a6%9c-%e0%a5%a4-css-quiz/
লেখকঃ মোঃমিনহাজুল ইসলাম সিএসএস হলো Cascading Style Sheets. । সিএসএস ফাইল সেভ করতে হয় .css দিয়ে। সিএসএস ব্যবহার করা হয় এইচটিএমএল পেজটে কে আরও দৃষ্টিনন্দন করা জন্য। সিএসএস ৩ দরনে হয়। ১) ইন্টারনাল সিএসএস । ২) এক্সটার্নাল সিএসএস । ৩) ইনলাইন সিএসএস । ইন্টারনাল সিএসএসঃ যেকোন এইচটিএমএল ডকুমেন্টে <head></head> এর ভিতর style ট্যাগ ব্যবহার করে …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8-%e0%a6%b9%e0%a6%b2%e0%a7%8b-cascading-style-sheets/
লিখেছেন সুদীপ্ত সাহা রেস্পনসিভ ওয়েব ডিজাইন কি? রেস্পনসিভ ওয়েব ডিজাইন হল ওয়েব সাইটকে এমন করে তৈরি করা যেন তা সকল ডিভাইসে ঠিকভাবে প্রদর্শিত হয়। রেস্পনসিভ ওয়েব ডিজাইন কোন প্রোগ্রাম বা জাভাস্ক্রিপ্টের মতো নয়। রেস্পনসিভ ওয়েব ডিজাইন মূলত মোবাইল ডিভাইসগুলোর কথা মাথায় রেখে তৈরি করা হয়েছে। নিজের জন্য রেস্পনসিভ ডিজাইন তৈরি করা সহজে সিএসএস …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8-%e0%a7%a9-%e0%a6%b0%e0%a7%87%e0%a6%b8%e0%a7%8d%e0%a6%aa%e0%a6%a8%e0%a6%b8%e0%a6%bf%e0%a6%ad-%e0%a6%93%e0%a7%9f%e0%a7%87%e0%a6%ac-%e0%a6%a1/
Sheikh Mahfuzur Rahman সিএসএস-থ্রি ইউজার ইন্টারফেস সিএসএস-থ্রি এর কিছু নতুন ইউজার ইন্টারফেস ফিচার হলো এলিমেন্ট রিসাইজিং, বক্স রিসাইজিং এবং আউটলাইনিং। এই অধ্যায়ে নিচের ইউজার ইন্টারফেস প্রপার্টিগুলো সম্পর্কে জানতে পারবেনঃ resize box-sizing outline-offset ব্রাউজার সাপোর্ট নিচের তালিকায় প্রথম যে ব্রাউজার ভার্শনগুলো ইউজার ইন্টারফেস প্রপার্টিকে পুরোপুরিভাবে সাপোর্ট করে তা দেয়া হলো। -webkit-, -moz-, অথবা -o- …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8-%e0%a7%a9-%e0%a6%87%e0%a6%89%e0%a6%9c%e0%a6%be%e0%a6%b0-%e0%a6%87%e0%a6%a8%e0%a7%8d%e0%a6%9f%e0%a6%be%e0%a6%b0%e0%a6%ab%e0%a7%87%e0%a6%b8-css3-u/
CSS3 Multiple Columns অর্থাৎ css3 তে একাধিক কলাম তৈরি করা css3 ব্যবহার করে আপনি টেক্সটগুলোকে প্রয়োজনমত সাজানোর জন্য একাধিক কলাম তৈরি করতে পারবেন। এই অধ্যায়ে আপনি নিম্নোক্ত কলাম প্রপার্টি গুলো সম্পর্কে জানবেন- column-count column-gap Column-rule ব্রাউজার সাপোর্ট (Browser Support) এই প্রপার্টিটি সকল নতুন ভার্সন এর ব্রাউজারগুলোতে সাপোর্ট করে। IE তে 10.0, Google Chrome 4.0 …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%ae%e0%a6%be%e0%a6%b2%e0%a7%8d%e0%a6%9f%e0%a6%bf%e0%a6%aa%e0%a6%b2-%e0%a6%95%e0%a6%b2%e0%a6%be%e0%a6%ae-css3-multiple-columns/
সুদীপ্ত সাহা ফ্লাস বা জাভাস্ক্রিপ্ট দ্বারা তৈরি ওয়েব পেজের অ্যানিমেশনগুলো সিএসএস3 অ্যানিমেশন দ্বারা বদল করা যায়। ব্রাউজার সাপোর্ট নিচের টেবিলে প্রদর্শিত নাম্বারগুলো নির্দেশ করছে কোন ব্রাউজারের কোন ভার্শনগুলো এই প্রপার্টিকে সম্পূর্ণভাবে সাপোর্ট করে। -webkit-, -moz-, অথবা -o- যুক্ত ব্রাউজারের প্রিফিক্স ভার্সনগুলো নির্দেশ করছে যা প্রথম এই প্রপার্টি সাপোর্ট করছে। Property @keyframes 43.0 4.0 -webkit- …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8-%e0%a7%a9-%e0%a6%85%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%a8%e0%a6%bf%e0%a6%ae%e0%a7%87%e0%a6%b6%e0%a6%a8%e0%a6%b8-css3-animations/
ডব্লিওথ্রিসি সিএসএস-থ্রিতে যেসব নতুন ফিচার যোগ করেছে তার মধ্যে উল্লেখযোগ্য ও অভিনব একটি হলো ট্রানজিশানস। ট্রানজিশানস ব্যবহার করে একটি স্টাইলকে অন্য স্টাইলে রূপান্তরিত করা যায় এবং এর জন্য ফ্লাশ অথবা জাভাস্ক্রিপ্ট ব্যবহার করতে হয় না। ব্রাউজার সাপোর্ট নিচের টেবলটিতে প্রচলিত ব্রাউজারগুলোর প্রথম যে ভার্শনগুলো ট্রানজিশান প্রপার্টি পুরোপুরিভাবে সাপোর্ট করে তা দেয়া হয়েছে। -webkit-, -moz-, …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8-%e0%a7%a9-%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a6%be%e0%a6%a8%e0%a6%9c%e0%a6%bf%e0%a6%b6%e0%a6%be%e0%a6%a8%e0%a6%b8-css3-transitions/
সিএসএস-থ্রি’তে থ্রিডি ট্রান্সফর্ম ব্যবহার করে পেজের এলিমেন্টগুলোকে ফর্মেট এবং স্টাইল করা যায়। এই অধ্যায়ে আমরা কিছু থ্রিডি ট্রান্সফর্ম এর পদ্ধতি সম্পর্কে জানবোঃ rotateX() rotateY() rotateZ() একটি টুডি ট্রান্সফর্ম এবং একটি থ্রিডি ট্রান্সফর্ম এর মধ্যে পার্থক্য দেখতে নিচের এলিমেন্টটির উপর ক্লিক করুনঃ থ্রিডি ট্রান্সফর্ম এর ব্রাউজার সাপোর্ট টেবলের নম্বরগুলো দিয়ে প্রথম যে ব্রাউজার ভার্শন …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8-%e0%a7%a9-3d-%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a6%be%e0%a6%a8%e0%a7%8d%e0%a6%b8%e0%a6%ab%e0%a6%b0%e0%a7%8d%e0%a6%ae%e0%a6%b8/
সিএসএস ৩ ট্রান্সফরম এর সাহায্যে আমরা যে কোন এলিমেন্ট সরাতে , টার্ন করতে, এবং ঘুরাতে পারি । ট্রান্সফরমেসান হল একটি ইফেক্ট যেটা শেপ , সাইজ, এবং জাইগা পরিবর্তন করতে বাবহারিত হয় । তুমি তোমার এলিমেন্ট এ ২ডি অথবা ৩ ডি ট্রান্সফরমেসান ব্যবহার করতে পার । সিএসএস ৩ ২ডি ট্রান্সফরমস এই পার্ট এ আমরা ২ডি …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8-%e0%a7%a9-2d-%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a6%be%e0%a6%a8%e0%a7%8d%e0%a6%b8%e0%a6%ab%e0%a6%b0%e0%a6%ae-css3-2d-transforms/
Sheikh Mahfuzur Rahman সিএসএস-থ্রি পাবলিশ হওয়ার পর থেকে ওয়েব ডিজাইনারদের এখন আর “ওয়েব সেইফ ফন্টের” উপর নিউর্ভর করতে হয়না। সিএসএস-থ্রি ওয়েব ফন্ট ওয়েব ডিজাইনারদের এমন সব ফন্ট ব্যবহার করার সুযোগ করে দেয় যা ইউজারদের কম্পিউটারে ইন্সটল করা হয়নি। যখনই আপনি ওয়েব পেজে ব্যবহারের জন্য কোন পছন্দসই ফন্ট খুঁজে পাবেন বা কিনবেন, শুধু ফন্ট ফাইলটি ওয়েব …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8-%e0%a7%a9-%e0%a6%93%e0%a7%9f%e0%a7%87%e0%a6%ac-%e0%a6%ab%e0%a6%a8%e0%a7%8d%e0%a6%9f-css3-web-fonts/
css3 তে বেশ কিছুই নতুন টেক্সট ইফেক্টস আছে। এই অধ্যায়ে আপনারা নিচের অধ্যায়গুলো সম্পর্কে জানবেন- text-shadow word-wrap ব্রাউজার সাপোর্ট (Browser Support) এই প্রপার্টি দুটো css3 ভার্সন, তাই সকল নতুন বা latest version এর ব্রাউজার গুলো সাপোর্ট করবে। নিম্নে দেয়া browser version গুলি প্রাথমিক version যা এই property কে সম্পূর্ণ সমর্থন করে। সংখ্যা -o- দ্বারা …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a7%a9-%e0%a6%9f%e0%a7%87%e0%a6%95%e0%a7%8d%e0%a6%b8%e0%a6%9f-%e0%a6%87%e0%a6%ab%e0%a7%87%e0%a6%95%e0%a7%8d%e0%a6%9f%e0%a6%b8-css3-text-eff/
CSS3 gradients দুটি color এর মধ্যে সংযোগ স্থল কে মসৃণ করে। এই কাজ টি করার জন্য আপনাকে একটি image ব্যাবহার করতে হবে। তবে CSS3 gradient ব্যাবহার করে আপনি download এবং bandwidth usage কমাতে পারবেন। একইসাথে gradient এর মাধ্যমে করা element গুলি ভাল দেখায় যখন zoom করা হয়, কেননা gradient সবসময় browser এ সৃষ্টি হয়। CSS3 …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a7%a9-%e0%a6%97%e0%a7%8d%e0%a6%b0%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%a1%e0%a6%bf%e0%a7%9f%e0%a7%87%e0%a6%a8%e0%a7%8d%e0%a6%9f%e0%a6%b8-css3/
Sheikh Mahfuzur Rahman সিএসএস-থ্রি’তে কিছু নতুন ব্যাকগ্রাউন্ড প্রপার্টি যোগ করা হয়েছে, যার মাধ্যমে ব্যাকগ্রাউন্ড এলিমেন্টকে আরও ভালোভাবে নিয়ন্ত্রণ ও স্টাইল করা যায়। এই চ্যাপ্টারে আপনারা নিচের ব্যাকগ্রাউন্ড প্রপার্টিগুলো সম্পর্কে জানবেনঃ background-size background-origin background-clip কিভাবে মাল্টিপল (একাধিক) ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা যায় তা নিয়েও এখানে আলোচনা করা হবে। ব্রাউজার সাপোর্ট নিচের তালিকায় প্রথম যে ব্রাউজার …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8-%e0%a7%a9-%e0%a6%ac%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%95%e0%a6%97%e0%a7%8d%e0%a6%b0%e0%a6%be%e0%a6%89%e0%a6%a8%e0%a7%8d%e0%a6%a1-css3-backgrounds/
সিএসএস ৩ এর সাহায্যে তুমি গোলআকৃতির বর্ডার তৈরি করতে পারবা, এবং বক্স এ ছায়া দিতে পারবা, এবং যেকোন ইমেজ কে বর্ডার করতে পারবা ফটোশপ অথবা অন্য যে কোন ধরনের ডিজাইন প্রোগ্রাম ছাড়াই। এই অংশে আমরা শিখব বর্ডার এর প্রপার্টিজ এর কিছু বিষয় সম্পর্কেঃ বর্ডার – রেডিয়াস বক্স – ছায়া বর্ডার – ইমেজ এই কাজ গুল …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8-%e0%a7%a9-%e0%a6%ac%e0%a6%b0%e0%a7%8d%e0%a6%a1%e0%a6%be%e0%a6%b0-css3-borders/
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8-%e0%a6%a8%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%ad%e0%a6%bf%e0%a6%97%e0%a7%87%e0%a6%b6%e0%a6%a8-%e0%a6%ac%e0%a6%be%e0%a6%b0-css-navigation-bar-2/
Ali Hossain Student of English Literature, Jahangirnagar University. CSS (সিএসএস) এর আধুনিক মানদন্ড বা নিশান হচ্ছে CSS3 (সিএসএস৩) পূর্বের CSS (সিএসএস) এর ভার্সন এর সাথে CSS3 (সিএসএস৩) সম্পূর্নভাবে সামঞ্জস্যপূর্ণ । এই অধ্যায়ে আপনি CSS3 (সিএসএস৩) এর নতুন বৈশিষ্ট্য সম্পর্কে জানতে পারবেন। CSS3 Modules (সিএসএস৩ মডিউলস) CSS3 (সিএসএস৩) কে “Modules” (মডিউলস) এ বিভক্ত করা …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8%e0%a7%a9-%e0%a6%aa%e0%a6%b0%e0%a6%bf%e0%a6%9a%e0%a6%bf%e0%a6%a4%e0%a6%bf-css3-introduction/
সিএসএস সিলেক্টর টিউটোরিয়াল সিএসএস সিলেক্টর কে সিএসএস এর হৃদপিন্ড বলা হয়। বিভিন্ন ধরনের সিলেক্টর আছে, এসব দিয়ে এইচটিএমএল পেজের এলিমেন্ট সিলেক্ট করা যায় এবং সিলেক্ট করার পর নিজের ইচ্ছেমত স্টাইলিং করা যায়। সিএসএস সিলেক্টর এর ব্যাপারে খুব গভীর এবং স্বচ্ছ ধারনা থাকতে হবে। সিলেক্টর নিয়ে কাজ করার আগে কিছু টার্ম জানতে হবে যেমনঃ ১। এইচটিএমএল …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a6%bf%e0%a6%ac%e0%a6%bf%e0%a6%89%e0%a6%9f-%e0%a6%b8%e0%a6%bf%e0%a6%b2%e0%a7%87%e0%a6%95%e0%a7%8d/
মৃত্যুঞ্জয় বিশ্বাস এই @media পদ্ধতি ব্যবহার করে, একটি ওয়েবসাইট এর স্কৃণ্, মুদ্রণ, মোবাইল ফোন, ট্যাবলেট ইত্যাদি জন্য একটি ভিন্ন লেআউট করতে পাড়বো। মিডিয়ার ধরন সমূহ কিছু CSS এর বৈশিষ্ট্য শুধুমাত্র একটি নির্দিষ্ট মিডিয়া জন্য ডিজাইন করা হয়। উদাহরণস্বরূপ “voice-family” বৈশিষ্ট শ্রবণেন্দ্রিয় সংক্রান্ত ব্যবহারকারী এজেন্ট এর জন্য ডিজাইন করা হয়েছে। অন্যান্য বেশ কয়েকটি বৈশিষ্ট্য বিভিন্ন …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%ae%e0%a6%bf%e0%a6%a1%e0%a6%bf%e0%a7%9f%e0%a6%be-%e0%a6%9f%e0%a6%be%e0%a6%87%e0%a6%aa%e0%a6%b8-css-media-types/
অঞ্জন দাস (American international univetsity) আপাসিটি দ্বারা নিধারণ করা হয় অবজেক্টটি কতটা স্বচ্ছ। সাধারণত কোন ইমেজের অপাসিটি নিয়ন্ত্রণের মাধ্যমে ঐ ইমেজের উপর বিভিন্ন ইফেক্ট দেয়া যায়। CSS এর মাধ্যমে সহজে স্বচ্ছ ইমেজ তৈরি করা। CSS এর অস্বচ্ছতা (Opacity) CSS 3 এর একটি একটি অংশ। উদাহরণ 1 – একটি স্বচ্ছ ইমেজ তৈরি করাঃ CSS 3 …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8-%e0%a6%8f-%e0%a6%85%e0%a6%b8%e0%a7%8d%e0%a6%ac%e0%a6%9a%e0%a7%8d%e0%a6%9b%e0%a6%a4%e0%a6%be-%e0%a6%b8%e0%a7%8d%e0%a6%ac%e0%a6%9a%e0%a7%8d/
মৃত্যুঞ্জয় বিশ্বাস ইমেজ স্প্রাইটস্ কি? ওয়েব সাইটের জন্য আকর্ষণীয় বাটন তৈরির জন্য এবং নেভিগেশন বার তৈরির ক্ষেত্রে ইমেজ স্প্রাইটস একটা ভালো কৌশল। এক্ষেত্রে অনেকগুলো ইমেজ একত্রে করে একটা সিঙ্গেল ইমেজ তৈরি করা হয় এবং প্রয়োজন অনুসারে ইমেজের বিশেষ অংশ প্রদর্শন করা হয়। সাধারণত একটা বাটন তৈরির ক্ষেত্রে দুইটি অবস্থা বিবেচনা করা হয়। একটা হচ্ছে …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%87%e0%a6%ae%e0%a7%87%e0%a6%9c-%e0%a6%b8%e0%a7%8d%e0%a6%aa%e0%a7%8d%e0%a6%b0%e0%a6%be%e0%a6%87%e0%a6%9f%e0%a6%b8%e0%a7%8d-css-image-spri/
Pseudo-classes কি ??? Pseudo-classes ব্যবহার করা হয় একটি উপাদান এর একটি বিশেষ state নির্ধারণ করতে । উদাহরণস্বরূপ এটি ব্যবহার করা হয়ঃ যখন user এর উপর মাউস নিয়ে নাড়াচাড়া করে তখন ভিন্ন Style প্রদর্শন করে । visited লিঙ্ক এবং unvisited লিঙ্ক ভিন্ন ভিন্ন Style প্রদর্শন করে। Syntax বা শব্দবিন্যাস pseudo-classes এর শব্দবিন্যাসঃ selector:pseudo-class { property:value; …
Permanent link to this article: http://bangla.sitestree.com/css-pseudo-classes/
শেখ মাহফুজুর রহমান সিএসএস কম্বিনেটর সিলেক্টরগুলোর মধ্যে সম্পর্ক নির্দেশ করে। একটি সিএসএস সিলেক্টর একাধিক সিম্পল সিলেক্টর ধারণ করতে পারে। এই সিম্পল সিলেক্টরগুলোর মধ্যে আমরা একটি কম্বিনেটর যোগ করতে পারি। সিএসএস-থ্রি’তে চার প্রকার কম্বিনেটর রয়েছেঃ ডিসেন্ডেন্ট সিলেক্টর চাইল্ড সিলেক্টর অ্যাডজাসেন্ট সিবলিং সিলেক্টর জেনেরাল সিবলিং সিলেক্টর ডিসেন্ডেন্ট সিলেক্টর ডিসেন্ডেন্ট সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের সবগুলো ডিসেন্ডেন্ট এলিমেন্টকে …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8-%e0%a6%95%e0%a6%ae%e0%a7%8d%e0%a6%ac%e0%a6%bf%e0%a6%a8%e0%a7%87%e0%a6%9f%e0%a6%b0%e0%a6%b8-css-combinators/
ইন্দ্র ভূষণ শুভ CSS এ, উপাদানকে আনুভূমিক ভাবে সারিবদ্ধ করার জন্য বিভিন্ন ধরনের বৈশষ্ট্য ব্যবহার করা হয়। সারিবদ্ধ ব্লক উপাদানসমূহ ব্লক উপাদান হলো এক ধরণের উপাদান যা ব্যবহারযোগ্য সব width ব্যবহার করে, এবং আগে ও পরে একটি লাইন বিরতি থাকে। ব্লক উপাদানের উদাহরণ সারিবদ্ধ টেক্সটের জন্য, CSS Text অধ্যায় দেখুন। এই অধ্যায়ে আমরা …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%86%e0%a6%a8%e0%a7%81%e0%a6%ad%e0%a7%82%e0%a6%ae%e0%a6%bf%e0%a6%95-%e0%a6%b8%e0%a6%be%e0%a6%b0%e0%a6%bf-css-horizontal-align/
শেখ মাহফুজুর রহমান সিএসএস ফ্লোট কি? ফ্লোটের বাংলা হলো ভাসা। সিএসএস ফ্লোটের মাধ্যমে একটি এলিমেন্টকে ব্রাউজার স্ক্রিনের বাম অথবা ডান দিকে ঠেলে বা ভাসিয়ে দেয়া যায়। এতে ডকুমেন্টের অন্যান্য এলিমেন্টগুলো এর চারপাশ ঘিরে অবস্থান করে যা রেপ (wrap) নামে পরিচিত। ইমেজ নিয়ে কাজ করার ক্ষেত্রে সাধারণত ফ্লোট ব্যবহার করা হয় কিন্তু এর মূল ব্যবহার …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%ab%e0%a7%8d%e0%a6%b2%e0%a7%8b%e0%a6%9f-css-float/
পজিশনিং সিএসএস এ পজিশনিং খুব গুরত্বপূর্ন একটি বিষয়। সিএসএস পজিশনিং বৈশিষ্ট্য আপনাকে একটি উপাদান (element) উপস্থাপন করার অনুমতি দেয়। এর মাধ্যমে উপাদান গুলো একটির পিছনে আরেকটি উপাদান রাখা যায়। এমন কি উপাদান এর কন্টেন্ট খুব বড় হলে কি হবে তা উল্লেখ করতে পারে। উপাদানসমূহ উপরে, নীচে, বাম, ডান এবং বৈশিষ্ট্যাবলী ব্যবহার করে স্থান দিতে পারে। …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%aa%e0%a6%9c%e0%a6%bf%e0%a6%b6%e0%a6%a8%e0%a6%bf%e0%a6%82-css-positioning/
display প্রোপার্টিজ দিয়ে ব্লক লেভেল এলিমেন্টকে ইনলাইন আবার ইনলাইন এলিমেন্ট কে ব্লক লেভেল বানানো যায়। এছাড়া এই প্রোপার্টিজ দিয়ে এলিমেন্ট অদৃশ্য করে রাখা যায়। মূলত এর ৩/৪ টি মান খুব ব্যবহার হয় বাকি মানগুলি দিয়েও অনেক কাজ হয় তবে কম ব্যবহৃত হয়ে থাকে। navigation a { display: block; margin-left: 0.5em; padding: 5px; …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%a1%e0%a6%bf%e0%a6%b8%e0%a6%aa%e0%a7%8d%e0%a6%b2%e0%a7%87-%e0%a6%8f%e0%a6%a8%e0%a7%8d%e0%a6%a1-%e0%a6%ad%e0%a6%bf%e0%a6%9c%e0%a6%bf/
CSS dimension হচ্ছে এমন একটি properties যা element এর height এবং width নিয়ন্ত্রণ করে। height এবং width নির্ধারণ করা এলিমেন্ট এর উচ্চতা এবং প্রসস্থতা নির্ধারণ করতে height এবং width প্রোপার্টিজ ব্যবহার করা হয়। height এবং width সয়ংক্রিয় হতে পারে (ডিফল্ট হিসেবে ব্রাউজার উচ্চতা এবং প্রসস্থতা নির্ধারণ করে) বা px, cm ইত্যাদি দ্বারা বা শতকরা হারে (%) নির্ধারণ …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8%e0%a7%87%e0%a6%b8-%e0%a6%a1%e0%a6%be%e0%a7%9f%e0%a6%ae%e0%a7%87%e0%a6%a8%e0%a6%b6%e0%a6%a8-css-dimension/
CSS Padding হচ্ছে element border এবং element content এর মধ্যে ফাকা স্থান। প্যাডিং Padding হচ্ছে content (border এর ভিতরে থাকে) এর চারপাশে একটি ফাকা স্থান। Padding কার্যকর হয় element এর background color দিয়ে। top, right, bottom এবং left padding পরিবর্তন করা যায় আলাদা properties ব্যাবহার করে । একটি shorthand padding (সংক্ষিপ্ত প্যাডিং) প্রোপার্টি ব্যাবহার করে …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%aa%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%a1%e0%a6%bf%e0%a6%82-css-padding/
সিএসএস মার্জিন দ্বারা elements এর চার পাশের কিছু ফাঁকা স্থান নির্দেশ করে । মার্জিন Margin দ্বারা element এর চার পাশের clear স্থান (outside the border) কে নির্দেশ করে । Margin এর কোন background color নেই, এটি পুরোপুরি transparent। Top, right, bottom, and left margin স্বাধীন ভাবে পরিবর্তন করা যায় তাদের আলাদা আলাদা properties ব্যাবহার করে। …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%ae%e0%a6%be%e0%a6%b0%e0%a7%8d%e0%a6%9c%e0%a6%bf%e0%a6%a8-css-margin/
এটি elements এর চারপাশে একটি অমীমাংসিত স্থান যা element কে “stand out” করে। outline properties টি outline এর style, color, and width বিশেষ রূপে উল্লেখ করে। সি এস এস আউটলাইন্স Outline হচ্ছে এমন একটা line যা elements এর চারপাশে অমীমাংসিত (border এর বাইরে ) স্থান যা element কে “stand out” করে। তবে outline property …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%86%e0%a6%89%e0%a6%9f%e0%a6%b2%e0%a6%be%e0%a6%87%e0%a6%a8%e0%a7%8d%e0%a6%b8-css-outlines/
CSS border properties এলিমেন্ট এর border এর style, size, and color নির্ধারণ করতে সাহায্য করে । বর্ডার স্টাইল Border-style property নির্ধারণ করা হয় কি ধরনের border প্রদর্শিত হবে। বি: দ্র: Border properties এর কোন প্রভাব কাজ করবে না যদি না border-style property নির্ধারণ করা হয়। বর্ডার স্টাইল মান none কোন border না থাকা …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%ac%e0%a6%b0%e0%a7%8d%e0%a6%a1%e0%a6%be%e0%a6%b0-css-border/
সব HTML উপাদানগুলোকে বক্স হিসাবে বিবেচনা করা যেতে পারে । CSS এ “ বক্স মডেল” শব্দটি ব্যবহার করা হয় যখন নকশা এবং বিন্যাস নিয়ে আলোচনা করা হয়। সিএসএস বক্স মডেল মূলত চারপাশে HTML উপাদানে ঘেরা একটি বক্স, এবং এতে রয়েছে মার্জিন, সীমানা, প্যাডিং, এবং প্রকৃত বিষয়বস্তু। বক্স মডেল আমাদেরকে উপাদানের কাছাকাছি একটি সীমানা, এবং উপাদানের …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%ac%e0%a6%95%e0%a7%8d%e0%a6%b8-%e0%a6%ae%e0%a6%a1%e0%a7%87%e0%a6%b2-css-box-model/
একটি HTML টেবিলকে CSS এর সাহায্যে সুন্দরভাবে উপস্থাপন করা যায়। নিম্নে একটি টেবিলের উদাহরণ দেয়া হলো: টেবিল বর্ডার (Borders) CSS এ টেবিল বর্ডার যোগ করার জন্য border property ব্যবহার করতে হবে। নিম্নে উদাহরণে <table>, <th>, এবং <td> এলিমেন্টে কালো (black) বর্ডার যোগ করা হয়েছে: table, th, td { border: 1px solid black; } …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%9f%e0%a7%87%e0%a6%ac%e0%a6%bf%e0%a6%b2-css-tables/
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%b2%e0%a6%bf%e0%a6%b8%e0%a7%8d%e0%a6%9f-css-lists/
স্টাইলিং লিঙ্ক সিএসএস প্রোপার্টি দ্বারা লিঙ্ক স্টাইল করা যেতে পারে (যেমন: color, font-family, background, ইত্যাদি) a { color: #FF0000; } লিঙ্ক এর অবস্থা অনুসারে একে স্টাইল করা যেতে পারে। লিঙ্ক এর চারটি অবস্থা রয়েছে: a:link – সাধারণ, ভিজিট করা হয়নি এমন লিঙ্ক a:visited – যে লিঙ্ক এ ভিজিটর ভিজিট করেছেন a:hover – যে …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%b2%e0%a6%bf%e0%a6%99%e0%a7%8d%e0%a6%95-css-links/
এইচটিএমএল এলিমেন্টের ভিতরের টেক্সটের আকার, ফন্ট, গাঢ়তা ইত্যাদি পরিবর্তন এবং সাজাতে সিএসএস ফন্ট গুরত্বপূর্ল। এজন্য বেশ কিছু সিএসএস প্রোপার্টিজ আছে যেগুলির বহুল ব্যবহার প্রচলিত। নিচের সেগুলির উদাহরনসহ আলোচনা করা হলঃ ফন্ট পরিবার (Font Family) font-family প্রোপার্টিজ দিয়ে এলিমেন্টের ফন্ট কি হবে সেটা ঠিক করা যায়। একসাথে একাধিক ফন্ট কমা (,) দিয়ে দেয়া যায়। এক্ষেত্রে ব্রাউজার …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%ab%e0%a6%a8%e0%a7%8d%e0%a6%9f-css-font/
text formatting This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the “Try it yourself” link. লেখা ফরম্যাটিং ওয়েব সাইট তো কত গুলো টেক্সট আর …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%9f%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%95%e0%a7%8d%e0%a6%b8%e0%a6%9f-css-text/
CSS background properties ব্যাবহার করা হয় element এর background effects নির্দেশ করার জন্য। যে CSS properties গুলি background effects এর জন্য ব্যাবহার করা হয় তা নিম্নরুপঃ background-color background-image background-repeat background-attachment background-position Background Color একটি element এর background color নির্দিষ্ট করার জন্য background-color property ব্যাবহার করা হয়। একটি page এর background color নির্ধারণ করার উপায় …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%ac%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%95%e0%a6%97%e0%a7%8d%e0%a6%b0%e0%a6%be%e0%a6%89%e0%a6%a8%e0%a7%8d%e0%a6%a1-css-background/
এইচটিএমএল এর সব element গুলোকে manipulate করার জন্য সিএসএস এর বিভিন্ন selector ব্যবহার করা হয়। id , class, type, attribute ইত্যাদির উপর ভিত্তি করে এইচটিএমএল এলিমেন্টগুলো খোঁজা বা নির্বাচন করার জন্য সিএসএস সিলেক্টর ব্যবহার করা হয়। এলিমেন্ট সিলেক্টর এলিমেন্ট সিলেক্টর এলিমেন্টের নামের উপর ভিত্তি করে উপাদান নির্বাচন করে। আমরা সকল <p> এলিমেন্টগুলোকে সিলেক্ট করতে পারি এইভাবে …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%b8%e0%a6%bf%e0%a6%b2%e0%a7%87%e0%a6%95%e0%a7%8d%e0%a6%9f%e0%a6%b0-css-selectors/
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%b8%e0%a6%bf%e0%a6%a8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%af%e0%a6%be%e0%a6%95%e0%a7%8d%e0%a6%b8-css-syntax/
মোঃ রফিকুল ইসলাম এই সিএসএস টিউটোরিয়াল এর মাধ্যমে সিএসএস কিভাবে স্টাইল নিয়ন্ত্রণ করে এবং একইসাথে একাধিক ওয়েব পেজ এ ব্যবহার করা যায় সে সম্পর্কে জানতে পারবেন। প্রতি অধ্যায় এ উদাহরণ এই টিউটোরিয়াল এ শত শত সিএসএস টিউটোরিয়াল সন্নিবেশ করা হয়েছে। সিএসএস উদাহরণঃ body { background-color: #d0e4fe; } h1 { color: orange; …
Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf-%e0%a6%8f%e0%a6%b8-%e0%a6%8f%e0%a6%b8-%e0%a6%aa%e0%a6%b0%e0%a6%bf%e0%a6%9a%e0%a6%bf%e0%a6%a4%e0%a6%bf-css-introduction/
সিএসএস সিন্ট্যাক্স (CSS Syntax)
Protap Chandra CSS (সিএসএস) Syntax বা গঠনরীতি সিএসএস স্টেটমেন্ট একটি selector (সিলেক্টর) এবং একটি declaration block (ডিক্লেয়ারেশন ব্লক) নিয়ে গঠিত। নিচের ডায়াগ্রামটি থেকে এ ব্যাপারে পরিষ্কার ধারণা পাবেন: selector (সিলেক্টর) সেই HTML উপাদানের কথা ইঙ্গিত করে যা আপনি style করতে চান। অন্যদিকে, declaration block অংশে এক বা একাধিক declaration থাকে। ডিক্লেয়ারেশন যদি একাধিক হয় তবে …
Continue reading