Category: সি এস এস টিউটোরিয়াল (css tutorial)

সিএসএস ৩ ইউজার ইন্টারফেস (CSS3 User Interface)

Sheikh Mahfuzur Rahman   সিএসএস-থ্রি ইউজার ইন্টারফেস সিএসএস-থ্রি এর কিছু নতুন ইউজার ইন্টারফেস ফিচার হলো এলিমেন্ট রিসাইজিং, বক্স রিসাইজিং এবং আউটলাইনিং। এই অধ্যায়ে নিচের ইউজার ইন্টারফেস প্রপার্টিগুলো সম্পর্কে জানতে পারবেনঃ resize box-sizing outline-offset   ব্রাউজার সাপোর্ট নিচের তালিকায় প্রথম যে ব্রাউজার ভার্শনগুলো ইউজার ইন্টারফেস প্রপার্টিকে পুরোপুরিভাবে সাপোর্ট করে তা দেয়া হলো। -webkit-, -moz-, অথবা -o- …

Continue reading

সি এস এস মাল্টিপল কলাম (CSS3 Multiple Columns)

CSS3 Multiple Columns অর্থাৎ css3 তে একাধিক কলাম তৈরি করা css3 ব্যবহার করে আপনি টেক্সটগুলোকে প্রয়োজনমত সাজানোর জন্য একাধিক কলাম তৈরি করতে পারবেন। এই অধ্যায়ে আপনি নিম্নোক্ত কলাম প্রপার্টি গুলো সম্পর্কে জানবেন- column-count column-gap Column-rule   ব্রাউজার সাপোর্ট (Browser Support) এই প্রপার্টিটি সকল নতুন ভার্সন এর ব্রাউজারগুলোতে সাপোর্ট করে। IE তে 10.0, Google Chrome 4.0 …

Continue reading

সিএসএস ৩ অ্যানিমেশনস (CSS3 Animations)

সুদীপ্ত সাহা   ফ্লাস বা জাভাস্ক্রিপ্ট দ্বারা তৈরি ওয়েব পেজের অ্যানিমেশনগুলো সিএসএস3 অ্যানিমেশন দ্বারা বদল করা যায়।   ব্রাউজার সাপোর্ট নিচের টেবিলে প্রদর্শিত নাম্বারগুলো নির্দেশ করছে কোন ব্রাউজারের কোন ভার্শনগুলো এই প্রপার্টিকে সম্পূর্ণভাবে সাপোর্ট করে। -webkit-, -moz-, অথবা -o- যুক্ত ব্রাউজারের প্রিফিক্স ভার্সনগুলো নির্দেশ করছে যা প্রথম এই প্রপার্টি সাপোর্ট করছে। Property @keyframes 43.0 4.0 -webkit- …

Continue reading

সিএসএস৩ ট্রানজিশানস (CSS3 Transitions)

ডব্লিওথ্রিসি সিএসএস-থ্রিতে যেসব নতুন ফিচার যোগ করেছে তার মধ্যে উল্লেখযোগ্য ও অভিনব একটি হলো ট্রানজিশানস। ট্রানজিশানস ব্যবহার করে একটি স্টাইলকে অন্য স্টাইলে রূপান্তরিত করা যায় এবং এর জন্য ফ্লাশ অথবা জাভাস্ক্রিপ্ট ব্যবহার করতে হয় না।   ব্রাউজার সাপোর্ট নিচের টেবলটিতে প্রচলিত ব্রাউজারগুলোর প্রথম যে ভার্শনগুলো ট্রানজিশান প্রপার্টি পুরোপুরিভাবে সাপোর্ট করে তা দেয়া হয়েছে। -webkit-, -moz-, …

Continue reading

সিএসএস ৩ 3D ট্রান্সফর্মস (CSS3 3D Transforms in Bangla)

সিএসএস-থ্রি’তে থ্রিডি ট্রান্সফর্ম ব্যবহার করে পেজের এলিমেন্টগুলোকে ফর্মেট এবং স্টাইল করা যায়। এই অধ্যায়ে আমরা কিছু থ্রিডি ট্রান্সফর্ম এর পদ্ধতি সম্পর্কে জানবোঃ rotateX() rotateY() rotateZ()   একটি টুডি ট্রান্সফর্ম এবং একটি থ্রিডি ট্রান্সফর্ম এর মধ্যে পার্থক্য দেখতে নিচের এলিমেন্টটির উপর ক্লিক করুনঃ   থ্রিডি ট্রান্সফর্ম এর ব্রাউজার সাপোর্ট টেবলের নম্বরগুলো দিয়ে প্রথম যে ব্রাউজার ভার্শন …

Continue reading

সিএসএস ৩ 2D ট্রান্সফরম (CSS3 2D Transforms)

সিএসএস ৩ ট্রান্সফরম এর সাহায্যে আমরা যে কোন এলিমেন্ট সরাতে , টার্ন করতে, এবং ঘুরাতে পারি । ট্রান্সফরমেসান হল একটি ইফেক্ট যেটা শেপ , সাইজ, এবং জাইগা পরিবর্তন করতে বাবহারিত হয় । তুমি তোমার এলিমেন্ট এ ২ডি অথবা ৩ ডি ট্রান্সফরমেসান ব্যবহার করতে পার ।   সিএসএস ৩ ২ডি ট্রান্সফরমস এই পার্ট এ আমরা ২ডি …

Continue reading

সিএসএস ৩ ওয়েব ফন্ট (CSS3 Web Fonts)

Sheikh Mahfuzur Rahman সিএসএস-থ্রি পাবলিশ হওয়ার পর থেকে ওয়েব ডিজাইনারদের এখন আর “ওয়েব সেইফ ফন্টের” উপর নিউর্ভর করতে হয়না। সিএসএস-থ্রি ওয়েব ফন্ট ওয়েব ডিজাইনারদের এমন সব ফন্ট ব্যবহার করার সুযোগ করে দেয় যা ইউজারদের কম্পিউটারে ইন্সটল করা হয়নি। যখনই আপনি ওয়েব পেজে ব্যবহারের জন্য কোন পছন্দসই ফন্ট খুঁজে পাবেন বা কিনবেন, শুধু ফন্ট ফাইলটি ওয়েব …

Continue reading

সি এস এস ৩ টেক্সট ইফেক্টস (CSS3 Text Effects)

css3 তে বেশ কিছুই নতুন টেক্সট ইফেক্টস আছে। এই অধ্যায়ে আপনারা নিচের অধ্যায়গুলো সম্পর্কে জানবেন- text-shadow word-wrap   ব্রাউজার সাপোর্ট (Browser Support) এই প্রপার্টি দুটো css3 ভার্সন, তাই সকল নতুন বা latest version এর ব্রাউজার গুলো সাপোর্ট করবে। নিম্নে দেয়া browser version গুলি প্রাথমিক version যা এই property কে সম্পূর্ণ সমর্থন করে। সংখ্যা -o- দ্বারা …

Continue reading

সি এস এস ৩ গ্র্যাডিয়েন্টস (CSS3 Gradients)

CSS3 gradients দুটি color এর মধ্যে সংযোগ স্থল কে মসৃণ করে। এই কাজ টি করার জন্য আপনাকে একটি image ব্যাবহার করতে হবে। তবে CSS3 gradient ব্যাবহার করে আপনি download এবং bandwidth usage কমাতে পারবেন। একইসাথে gradient এর মাধ্যমে করা element গুলি ভাল দেখায় যখন zoom করা হয়, কেননা gradient সবসময় browser এ সৃষ্টি হয়। CSS3 …

Continue reading

সিএসএস ৩ ব্যাকগ্রাউন্ড (CSS3 Backgrounds)

Sheikh Mahfuzur Rahman   সিএসএস-থ্রি’তে কিছু নতুন ব্যাকগ্রাউন্ড প্রপার্টি যোগ করা হয়েছে, যার মাধ্যমে ব্যাকগ্রাউন্ড এলিমেন্টকে আরও ভালোভাবে নিয়ন্ত্রণ ও স্টাইল করা যায়। এই চ্যাপ্টারে আপনারা নিচের ব্যাকগ্রাউন্ড প্রপার্টিগুলো সম্পর্কে জানবেনঃ background-size background-origin background-clip কিভাবে মাল্টিপল (একাধিক) ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা যায় তা নিয়েও এখানে আলোচনা করা হবে। ব্রাউজার সাপোর্ট নিচের তালিকায় প্রথম যে ব্রাউজার …

Continue reading