সিএসএস(৩) বর্ডার-ইমেজ

HTML এলিমেন্টকে আরও আকর্ষণীয় করে উপস্থাপন করার জন্য আপনি এটির চারপাশে বর্ডার ব্যবহার করতে পারেন।

আর বর্ডারকে আরও আকর্ষণীয় করে তুলার জন্য বর্ডার-ইমেজ ব্যবহার করতে পারেন। সিএসএস(৩) border-image প্রোপার্টির মাধ্যমে আপনি এই কাজটি খুব সহজেই করতে পারবেন।

এক নজরে বর্ডার-ইমেজের সম্ভাব্য প্রোপার্টিসমূহ

সিএসএস(৩) border-image প্রোপার্টি

সিএসএস(৩) border-image প্রোপার্টির মাধ্যমে আপনি একটি এলিমেন্টের চারপাশে বর্ডার হিসেবে ইমেজ ব্যবহার করতে পারেন।

বর্ডার ইমেজ প্রোপার্টির ৩টি অংশ থাকেঃ

1. বর্ডার হিসেবে ব্যবহার করার জন্য একটি ইমেজ।
2. ইমেজটি কোথায় স্লাইস হবে তা নির্দেশ করে।
3. মাঝের সেকশনটি রিপিট বা প্রসারিত হবে কিনা তা নির্দেশ করে।

উদাহরণ হিসেবে আমরা নিম্নের "border_image.jpg" ইমেজটি ব্যবহার করে বর্ডার তৈরি করবোঃ

ইমেজটির চারটি কর্ণার উক্ত বডারের চার কর্ণারে অবস্থান নিবে এবং ইমেজের মাঝের অংশটি নির্দেশিত উপায়ে বর্ডারের মাঝখানের অংশে রিপিট বা প্রসারিত হবে।

নোটঃ কোনো এলিমেন্টে border-image প্রোপার্টি ব্যবহার করতে হলে, প্রথমে ঐ এলিমেন্টে border প্রোপার্টি সেট করতে হবে।

kt_satt_skill_example_id=1327

নিচের উদাহরণে ছবির মাঝের অংশকে প্রসারিত করে বর্ডার তৈরি করা দেখানো হলোঃ

kt_satt_skill_example_id=1328

নোটঃ border-image প্রোপার্টিটি border-image-source, border-image-slice, border-image-width, border-image-outset এবং border-image-repeat প্রোপার্টি গুলো একত্রে সেট করার জন্য একটি সংক্ষিপ্ত প্রোপার্টি।

সিএসএস(৩) border-image-slice প্রোপার্টি

স্লাইস ভ্যালু সম্পূর্ণ বর্ডারকেই পরিবর্তন করে দিতে পারে। নিম্নে বিভিন্ন ধরনের স্লাইস ভ্যালুর ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=1330

গ্র্যাডিয়েন্ট বর্ডার

border-image প্রোপার্টির ভ্যালু হিসেবে linear-gradient() ব্যবহার করে এইচটিএমএল এলিমেন্টে গ্রাডিয়েন্ট বর্ডার সেট করা যায়।

kt_satt_skill_example_id=1334

এক নজরে ব্যাকগ্রাউন্ড প্রোপার্টিসমূহ

একাধিক ব্যাকগ্রাউন্ড ইমেজ

সিএসএস(৩) background-image প্রোপার্টির মাধ্যমে আমরা একটি এলিমেন্টে একাধিক ব্যাকগ্রাউন্ড ইমেজ যুক্ত করতে পারি।

একাধিক ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করার সময় কমা(,) চিহ্ন দ্বারা এগুলোকে পৃথক করতে হবে। এক্ষেত্রে ছবিগুলো যেহেতু স্ট্যাক অর্ডারে থাকে, তাই আপনি যে ছবিটি সবগুলো ছবির উপরে দেখতে চান সেটির URL প্রথমে যোগ করুন।

নিম্নের উদাহরণটি দেখলে ব্যাকগ্রাউন্ডে ইমেজ সেট করার ধারনা আপনার কাছে আরও স্পষ্ট হয়ে উঠবেঃ

kt_satt_skill_example_id=1862

উপরের উদাহরণে একাধিক ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করার জন্য ব্যাকগ্রাউন্ড প্রোপার্টিগুলো আলদা আলদা ভাবে ব্যবহার করা হয়েছে। নিম্নের উদাহরণেও আমরা উপরের উদাহরণের মত একই কাজ করবো। কিন্তু এক্ষেত্রে আমরা ব্যাকগ্রাউন্ডের সংক্ষিপ্ত প্রোপার্টি background ব্যবহার করবোঃ

kt_satt_skill_example_id=1863

ব্যাকগ্রাউন্ড সাইজ

সিএসএস(৩) background-size প্রোপার্টির মাধ্যমে আপনি একটি ব্যাকগ্রাউন্ড ইমেজের সাইজ বা আকার নিয়ন্ত্রন করতে পারবেন। সিএসএস(৩) আসার পূর্বে ব্যকগ্রাউন্ড ইমেজের আকার নিয়ন্ত্রন করা যেত না। মূল ইমেজের আকারই হতো ব্যকগ্রাউন্ড ইমেজের আকার।

সুতরাং আপনি সিএসএস(৩) ব্যবহার করে একটি ইমেজকে পুনঃব্যবহার করে এর সাইজ দৈর্ঘ্য এবং শতকরায় নির্ধারণ করতে পারবেন। এছাড়া contain অথবা cover এই দুইটি কি-ওয়ার্ড ব্যবহার করেও আপনি ব্যাকগ্রাউন্ড ইমেজ এর আকার পরিবর্তন করতে পারবেন।

নিম্নের উদাহরণে background-size প্রোপার্টি ব্যবহার করে ব্যাকগ্রাউন্ড ইমেজ এর সাইজ পরিবর্তন করে দেখানো হলোঃ

kt_satt_skill_example_id=1864

contain এবং cover কীওয়ার্ড

background-size এর আরো দুইটি ভ্যালু হলো contain এবং cover।

contain কীওয়ার্ড ব্যাকগ্রাউন্ড ইমেজকে যতদুর সম্ভব বৃদ্ধি করে। তবে এই ইমেজের প্রস্থ এবং উচ্চতা অবশ্যই কন্টেন্ট এরিয়ার সাথে খাপ খেতে হবে।

cover কীওয়ার্ড ব্যাকগ্রাউন্ড ইমেজকে উভয় দিকে বৃদ্ধি করে যাতে কন্টেন্ট এরিয়া ব্যাকগ্রাউন্ড ইমেজ দ্বারা আচ্ছাদিত হয়।

নিম্নের উদাহরণে contain এবং cover এর ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=1865

একাধিক ব্যাকগ্রাউন্ড ইমেজের আকার নির্ধারণ

সিএসএস(৩) এর মাধ্যমে একাধিক ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা যায়। background-size প্রোপার্টিতে একাধিক ভ্যালু ব্যবহার করে আপনি এই ব্যাকগ্রাউন্ড ইমেজগুলোর সাইজ নির্ধারণ করতে পারবেন। এক্ষেত্রে কমা চিহ্ন দ্বারা ভ্যালুসমূহকে পৃথক করতে হবে।

নিম্নের উদাহরণে ৩টি ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা হয়েছে এবং প্রত্যেকটি ইমেজের জন্য background-size এর পৃথক মান দেওয়া হয়েছেঃ

kt_satt_skill_example_id=1866

সম্পূর্ণ সাইজের ব্যাকগ্রাউন্ড ইমেজ

আমাদের ওয়েবসাইটে এমন একটি ব্যাকগ্রাউন্ড ইমেজ চাই যা ব্রাউজারের সম্পূর্ণ উইন্ডোকে সর্বদাই আচ্ছাদিত করে রাখবে।

এটি করার জন্য শর্তগুলো নিম্নরুপঃ

• সঠিক সাইজের ইমেজ নিতে হবে।
• ইমেজ দিয়ে পুরো পেজকে পূর্ণ করতে হবে।
• ইমেজটি পেজের মাঝখানে রাখতে হবে।
• এবং কোনো স্ক্রলবার তৈরি করা যাবে না।

নিম্নের উদাহরণে এটি করে দেখানো হলোঃ

kt_satt_skill_example_id=1867

সুতরাং একটি ওয়েব পেজে সম্পূর্ন ব্যাকগ্রাউন্ড ইমেজ দেওয়ার জন্য আপনাকে নিম্নোক্ত কাজ গুলো করতে হবেঃ

• ট্যাগে ব্যাকগ্রাউন্ড ইমেজ সেট করতে হবে।
• ব্যাকগ্রাউন্ড ইমেজটির পজিশন fixed এবং center রাখতে হবে।
• এবং background-size প্রোপার্টির সাইজ সমন্বয় করতে হবে।

সিএসএস(৩) background-origin প্রোপার্টি

ব্যাকগ্রাউন্ড ইমেজটি কোথায় অবস্থান করবে তা সিএসএস(৩) background-origin প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়।

এই প্রোপার্টির ৩টি ভ্যালু রয়েছে। যথাঃ

• border-box - ব্যাকগ্রাউন্ড ইমেজটি বর্ডারের উপরের বাম কর্ণার থেকে শুরু হয়।
• padding-box - ব্যাকগ্রাউন্ড ইমেজটি প্যাডিং এর উপরের বাম কর্ণার থেকে শুরু হয়। এবং এটি ডিফল্ট।
• content-box - ব্যাকগ্রাউন্ড ইমেজটি কন্টেন্টের উপরের বাম কর্ণার থেকে শুরু হয়।

নিম্নের উদাহরণে আমরা background-origin প্রোপার্টির ব্যবহার দেখবোঃ

kt_satt_skill_example_id=1868

সিএসএস(৩) background-clip প্রোপার্টি

ব্যাকগ্রাউন্ড প্রোপার্টিটি কতটুকু জায়গা জুড়ে অবস্থান করবে তা সিএসএস(৩) background-clip প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়।

এই প্রোপার্টির ৩টি ভ্যালু রয়েছে। যথাঃ

• border-box - বর্ডারসহ সম্পূর্ণ কন্টেন্টে ব্যাকগ্রাউন্ড থাকবে। এটি ডিফল্ট।
• padding-box - প্যাডিংসহ সম্পূর্ণ কন্টেন্টে ব্যাকগ্রাউন্ড থাকবে। এক্ষেত্রে বর্ডার অংশে কোনো ব্যাকগ্রাউন্ড থাকবে না।
• content-box - শুধুমাত্র কন্টেন্ট বক্সে ব্যাকগ্রাউন্ড থাকবে। এক্ষেত্রে বর্ডার এবং প্যাডিং অংশে কোনো ব্যাকগ্রাউন্ড থাকবে না।

নিম্নে background-clip প্রোপার্টির উদাহরণ দেখানো হলোঃ

kt_satt_skill_example_id=1869

ব্রাউজার সাপোর্ট

সিএসএস(৩) কালার

সিএসএস(৩) আসার পূর্বে সিএসএসে শুধুমাত্র কালারের নাম, হেক্সাডেসিমাল এবং RGB ভ্যালুর কালার সাপোর্ট করত।

সিএসএস(৩) তে আরও কিছু কালার-ভ্যালু যোগ হয়েছে। যথাঃ

• RGBA কালার
• HSL কালার
• HSLA কালার
• opacity

RGBA কালার

RGBA কালার ভ্যালু হচ্ছে alpha channel এর মাধ্যমে RGB কালারের সম্প্রসারিত কালার-ভ্যালু যা কালারের অস্পষ্টতা(opacity) নির্দেশ করে।

RGBA কালার-ভ্যালুর সিনটেক্স

rgba(red, green, blue, alpha)

এখানে প্রথম তিনটি মান হলো RGB ভ্যালু অর্থাৎ red, green এবং blue। আর চতুর্থ মানটি হলো আলফা মান যা কালারের অপাসিটি নির্দেশ করে। আলফা প্যারামিটারটির সর্বনিম্ন মান ০.০(সম্পূর্ণ স্বচ্ছ) এবং সর্বোচ্চ মান ১.০(সম্পূর্ণ অস্বচ্ছ)।

নিম্নে RGBA কালার এর ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=1340

HSL কালার

HSL কালার-ভ্যালুর সিনটেক্স:

hsl(hue, saturation, lightness)

HSL কালার তিনটি অংশে বিভিক্ত। যথাঃ Hue, Saturation এবং Lightness।

প্রথম অংশ Hue। যা কালেরর মান নির্ধারণ করে। এটি ডিগ্রী এককে ভ্যালু গ্রহণ করে। যেখানে ০(শূন্য) হলো সর্বনিম্ন ডিগ্রী এবং ৩৬০ সর্বোচ্চ ডিগ্রী। এখানে ০ এবং ৩৬০ ডিগ্রী হচ্ছে লাল কালার। ১২০ ডিগ্রী হচ্ছে সবুজ কালার আর ২৪০ ডিগ্রী হচ্ছে নীল কালার।

দ্বিতীয় অংশ Saturation যা কালারের পূর্ণতা প্রদান করে। এটি শতকরা এককে ভ্যালু গ্রহণ করে। যেখানে ০% হলো সর্বনিম্ন এবং ১০০% সর্বোচ্চ মান।

তৃতীয় অংশ Lightness যা কালারের উজ্জ্বলতা নির্দেশ করে। এটি শতকরা এককে মান/ভ্যালু গ্রহণ করে। যেখানে ০% হলো সর্বনিম্ন এবং ১০০% সর্বোচ্চ মান। সুতরাং এখানে ০% হচ্ছে কালো এবং ১০০% হচ্ছে সাদা বা উজ্জ্বল।

নিম্নে HSL কালার এর ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=1436

HSLA কালার

HSLA কালার-ভ্যালু হচ্ছে alpha channel এর মাধ্যমে HSL কালারের সম্প্রসারিত কালার-ভ্যালু যা কালারের অস্পষ্টতা(opacity) নির্দেশ করে।

HSLA কালার-ভ্যালুর সিন

hsla(hue, saturation, lightness, alpha)

kt_satt_skill_example_id=1433

Opacity(অস্বচ্ছতা)

সিএসএস(৩) opacity প্রোপার্টির মাধ্যমে একটি এলিমেন্টকে স্বচ্ছ/অস্বচ্ছ করা যায়।

opacity(অস্বচ্ছতা) প্রোপার্টির সর্বনিম্ন মান ০.০(সম্পূর্ণ স্বচ্ছ) এবং সর্বোচ্চ মান ১.০(সম্পূর্ণ অস্বচ্ছ) এর মধ্যে হতে হবে।

নিম্নে Opacity প্রোপার্টির ব্যবহার দেখানো হলোঃ

উপরের কালারগুলো লক্ষ্য করলে দেখবেন যে, কালারের সাথে লেখাগুলোও অস্পষ্ট হয়ে গেছে। অর্থাৎ আমরা opacity ব্যবহার করে কালারের সাথে লেখাও অস্বচ্ছ বা ট্রান্সপারেন্ট করতে পারি।

kt_satt_skill_example_id=1428

ব্রাউজার সাপোর্ট

সিএসএস(৩) গ্রেডিয়েন্ট দুই বা ততোধিক কালারের মধ্যে প্রগতিশীল পরিবর্তন(transition) সাধন এর মাধ্যমে একটি ইমেজ তৈরি করে। সুতরাং আপনি গ্রেডিয়েন্ট ব্যবহার করে একাধিক কালারের মিশ্রণে একটি এলিমেন্ট এর ব্যাকগ্রাউন্ড কালার সেট করতে পারবেন।

সিএসএস(৩) আসার পূর্বে গ্রেডিয়েন্ট তৈরি করার জন্য ইমেজ ব্যবহার করা হতো। যাইহোক, বর্তমানে আপনি সিএসএস(৩) গ্রেডিয়েন্ট ব্যবহার করে সময় এবং ব্যান্ডউইডথ উভয়ই সাশ্রয় করতে পারবেন।

এছাড়া আপনি যদি ইমেজ ব্যবহার করে গ্রেডিয়েন্ট তৈরি করেন তাহলে পেজ zoom করা হলে ইমেজ এর কালার খারাপ দেখাতে পারে। কিন্তু একই কাজ আপনি যদি গ্রেডিয়েন্ট ব্যবহার করে করেন তাহলে কালার একই থাকবে এবং ব্যাকগ্রাউন্ডও অনেক চমৎকার দেখাবে। কারণ গ্রেডিয়েন্ট ব্রাউজার কর্তৃক সৃষ্টি হয়।

সিএসএস(৩) তে দুই ধরনের গ্রেডিয়েন্ট রয়েছেঃ

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

সিএসএস(৩) linear-gradient() ফাংশন এমন একটি চিত্র তৈরি করে যা একটি সরল রেখা বরাবর দুই বা ততোধিক রং এর মধ্যে একটি প্রগতিশীল পরিবর্তন(transition) সৃষ্টি করে।

লিনিয়ার গ্রেডিয়েন্ট তৈরির জন্য আপনাকে কমপক্ষে দুটি কালার সিলেক্ট করতে হবে। কালার গুলোর সুষম ট্রানজিশনের মাধ্যমে গ্রেডিয়েন্ট তৈরি হয়।

লিনিয়ার গ্রেডিয়েন্টের গঠন

background: linear-gradient(দিক, প্রথম কালার, দ্বিতীয় কালার, ...); 

গঠন এর ভ্যালুসমূহের ব্যাখ্যা

• দিক - এটি দুই বা ততোধিক কালার এর পরিবর্তন(transition) এর দিক নির্ধারণ করে। যেমন- উপর থেকে নিচে, বাম থেকে ডানে, কোণাকুণি ইত্যাদি।
• প্রথম কালার, দ্বিতীয় কালার, ... - এগুলো হলো কালার স্টপ এবং এর ঠিক পরেই শতকরা অথবা দৈর্ঘ্য এককে গ্রেডিয়েন্ট অক্ষের জন্য স্টপ(stop) পজিশন দেওয়া হয়।

লিনিয়ার গ্রেডিয়েন্ট এর উদাহরণ

kt_satt_skill_example_id=1457

কোণ এর ব্যবহার

আপনি যদি গ্রেডিয়েন্টের দিক আরো ভালভাবে নিয়ন্ত্রন করতে চান তাহলে পূর্ব নির্ধারিত দিকের পরিবর্তে একটি কোণ নির্ধারণ করুন।

গঠন

background: linear-gradient(কোণ, প্রথম কালার, দ্বিতীয় কালার, ...); 

এখানে কোণ এর প্রাথমিক ভ্যালু 0deg(top) এবং ধনাত্মক মান বৃদ্ধির সাথে সাথে ঘড়ির কাঁটার দিকে ঘুরে এবং ঋণাত্মক মান বৃদ্ধির সাথে সাথে ঘড়ির কাঁটার বিপরীতে ঘুরে।

আমরা কোণ ব্যবহার করে যেকোনো ধরনের গ্রেডিয়েন্ট তৈরি করতে পারি।

kt_satt_skill_example_id=1458

একাধিক কালার ব্যবহার করে লিনিয়ার গ্রেডিয়েন্ট তৈরি

নিম্নের উদাহরণে আমরা একাধিক কালার ব্যবহার করে লিনিয়ার লগ্রেডিয়েন্ট তৈরি করবোঃ

kt_satt_skill_example_id=1461

ট্রান্সপারেন্সি(Transparency) ব্যবহার

গ্রেডিয়েন্টে আমরা ট্রান্সপারেন্সি বা স্বচ্ছতা ব্যবহার করতে পারি যা ফেইড(fade) ইফেক্ট তৈরি করতে ব্যবহৃত হয়।

ট্রান্সপারেন্সি যুক্ত করতে হলে আপনাকে কালার নির্ধারণ করার সময় rgba() ফাংশনটি ব্যবহার করতে হবে। rgba() ফাংশনের মধ্যে শেষ প্যারামিটারটির মান ০.০ থেকে ১.০ পর্যন্ত হতে হবে এবং এটি কালারের ট্রান্সপারেন্সি নির্ধারণ করে। যেখানে ০.০ সম্পূর্ণ ট্রান্সপারেন্সি নির্দেশ করে এবং ১.০ সম্পূর্ণ কালার নির্দেশ করে।

নিম্নের উদাহরণে একটি লিনিয়ার গ্রেডিয়েন্ট দেখানো হয়েছে যা বাম থেকে শুরু হয়। সুতরাং এটি লাল কালারের ৫০% ট্রান্সপারেন্সি দিয়ে শুরু হয়ে হুলদ কালারে রূপান্তর হয়ঃ

kt_satt_skill_example_id=1463

লিনিয়ার গ্রেডিয়েন্ট রিপিট

সিএসএস(৩) repeating-linear-gradient() ফাংশনটি ব্যবহার করে লিনিয়ার গ্রেডিয়েন্টকে রিপিট করা যায়ঃ

kt_satt_skill_example_id=1465

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

রেডিয়াল গ্রেডিয়েন্ট একটি এলিমেন্টের মাঝ বা কেন্দ্র থেকে শুরু হয়ে ক্রমান্বয়ে সব দিকে ছড়িয়ে পড়ে।

একটি রেডিয়াল গ্রেডিয়েন্ট তৈরি করার জন্য আপনাকে কমপক্ষে দুটি কালার স্টপ অবশ্যই নির্ধারণ করতে হবে।

রেডিয়াল গ্রেডিয়েন্টের গঠন

background: radial-gradient(নির্দিষ্ট পজিশনে গ্রেডিয়েন্ট এর আকৃতি, শুরুর কালার, ..., শেষ কালার); 

রেডিয়াল গ্রেডিয়েন্টের ডিফল্ট আকার উপবৃত্ত, সাইজ দূরবর্তী-কর্ণার(farthest-corner) এবং পজিশন center এ থাকে।

রেডিয়াল গ্রেডিয়েন্টে একটি কালার থেকে অন্য একটি কালারের ব্যবধান ডিফল্টভাবে সমান হয়।

kt_satt_skill_example_id=1470

রেডিয়াল গ্রেডিয়েন্টের আকার(shape) নির্ধারণ

রেডিয়াল গ্রেডিয়েন্টের প্রথম প্যারামিটারটি এর আকার নির্ধারণ করে। এটি circle অথবা ellipse হতে পারে। তবে ellipse হচ্ছে ডিফল্ট ভ্যালু।

নিম্নের উদাহরণে আমরা উপবৃত্ত(ellipse) এবং বৃত্ত(circle) আকারের দুটি রেডিয়াল গ্রেডিয়েন্ট দেখবোঃ

kt_satt_skill_example_id=1475

রেডিয়াল গ্রেডিয়েন্টের অবস্থান নির্ধারণ

রেডিয়াল গ্রেডিয়েন্টের অবস্থান নির্ধারণের জন্য আমরা চারটি কীওয়ার্ড এর মধ্য থেকে যেকোনো একটি ব্যবহার করতে পারি। এই চারটি কীওয়ার্ড রেডিয়াল গ্রেডিয়েন্টের চার ধরনের অবস্থান নির্ধারণ করে। নিম্নে এই চারটি কীওয়ার্ড দেওয়া হলোঃ

kt_satt_skill_example_id=1478

রেডিয়াল গ্রেডিয়েন্ট রিপিট

সিএসএস(৩) repeating-radial-gradient() ফাংশন ব্যবহার করে আপনি রেডিয়াল গ্রেডিয়েন্টকে রিপিট করতে পারেনঃ

kt_satt_skill_example_id=1481

ব্রাউজার সাপোর্ট

সিএসএস(৩) shadow ব্যবহার করে আপনি যেকোনো এলিমেন্টে বা এলিমেন্টের টেক্সটে এক বা একাধিক স্যাডো ইফেক্ট যুক্ত করতে পারেন।

নিম্নে যথাক্রমে text-shadow এবং box-shadow প্রোপার্টির ব্যবহার দেখানো হলোঃ

এক নজরে সিএসএস(৩) স্যাডো প্রোপার্টি

সিএসএস(৩) text-shadow প্রোপার্টি

সিএসএস(৩)text-shadow প্রোপার্টি ব্যবহার করে আপনি যেকোনো টেক্সটে এক বা একাধিক স্যাডো ইফেক্ট যুক্ত করতে পারেন।

একটি এলিমেন্টে একাধিক স্যাডো ইফেক্ট যুক্ত করতে চাইলে এগুলোকে কমা(,) চিহ্ন দ্বারা পৃথক করতে হবে। স্যাডো ইফেক্টের ডিফল্ট কালার কালো থাকে।

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px orange;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #C0A 1px 0 10px;
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558ABB;
/* color | offset-x | offset-y */
text-shadow: green 2px 5px;
/* offset-x | offset-y
/* color এবং  blur-radius ডিফল্টভাবে ব্যবহৃত হবে*/
text-shadow: 5px 10px;

text-shadow প্রোপার্টির একাধিক স্যাডোকে কমা(,) চিহ্ন দ্বারা আলাদা করতে হয়।

• প্রত্যেকটি স্যাডোর মধ্যে দুই বা তিনটি length ভ্যালু থাকে এবং এর পরেই color ভ্যালু থাকে। প্রথম দুটি length ভ্যালু হলো offset-x এবং offset-y অর্থাৎ x অক্ষ এবং y অক্ষ থেকে টেক্সট স্যাডোর অবস্থান
• এবং তৃতীয় ঐচ্ছিক length ভ্যালু হলো blur-radius। blur-radius এর ভ্যালু যত বেশী হবে blur ও তত বড় হবে; টেক্সট স্যাডোর বিস্তৃতি বাড়বে এবং স্যাডো হালকা হবে।
• আর color ভ্যালু হলো স্যাডোর কালার। ডিফল্ট কালার কালো।

যখন একের অধিক স্যাডো দেওয়া হয় তখন front-to-back অর্থাৎ সামনে থেকে পিছনে স্যাডোর প্রয়োগ ঘটে, যেখানে প্রথম নির্ধারিত স্যাডো সবার উপরে বা সম্মুখে থাকে।

এই প্রোপার্টিটি ::first-line এবং ::first-letter সুডো(pseudo) এলিমেন্টেও প্রয়োগ করা যায়।

নিম্নের উদাহরণে বিভিন্ন প্রকার স্যাডো ইফেক্ট এর ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=1500

একাধিক স্যাডো

একটি টেক্সটে একাধিক স্যাডো যুক্ত করার জন্য আপনাকে text-shadow প্রোপার্টিতে স্যাডো ইফেক্টের ভ্যালুগুলো ক্রমান্বয়ে একাধিক বার লিখতে হবে এবং ভ্যালু গুলোকে আলাদা করার জন্য কমা(,) চিহ্ন ব্যবহার করতে হবে।

নিম্নের উদাহরণে একাধিক স্যাডো ইফেক্ট এর ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=1508

3D-Text Effect

নিম্নের উদাহরণে একাধিক স্যাডো ইফেক্ট ব্যবহার করে 3D-Text তৈরি করে দেখানো হলোঃ

kt_satt_skill_example_id=1510

সিএসএস(৩) box-shadow প্রোপার্টি

সিএসএস(৩) box-shadow প্রোপার্টি ব্যবহার করে আপনি যে কোনো এলিমেন্টে এক বা একাধিক স্যাডো ইফেক্ট যুক্ত করতে পারেন। একাধিক স্যাডো ইফেক্টকে কমা দ্বারা পৃ্থক করতে হয়।

বক্স-স্যাডোর বিভিন্ন সিনট্যাক্স

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(100, 100, 100, 0.4);
/* offset-x | offset-y | blur-radius | color */
box-shadow: 5px 5px 5px green;
/* offset-x | offset-y | color */
box-shadow: 15px -10px orange;
/* default color */
/* offset-x | offset-y */
box-shadow: 15px -10px;
/* inset | offset-x | offset-y |blur-radius | color */
box-shadow: inset 2px 2px 1em red;
/* একাধিক স্যাডোকে কমা(,) চিহ্ন দ্বারা পৃথক করতে হয় */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

একটি একক box-shadow তৈরি করার জন্য নিম্নোক্ত প্যারামিটার বা ভ্যালুগুলো ব্যবহার করতে হয়।

• দুই, তিন বা ৪টি length ভ্যালু দেওয়া যেতে পারেঃ
  • যদি শুধুমাত্র দুটি ভ্যালু দেওয়া হয় তাহলে ভ্যালু দুটি যথাক্রমে offset-x(অনুূভূমিক) এবং offset-y(উলম্ব) ভ্যালুকে নির্দেশ করে।
  • যদি ৩য় ভ্যালু দেওয়া হয় তাহলে এটি blur-radius কে নির্দেশ করে।
  • যদি ৪র্থ ভ্যালু দেওয়া হয় তাহলে এটি spread-radius কে নির্দেশ করে।
• ঐচ্ছিক inset কীওয়ার্ড। এটি না ব্যবহার করলে এমন স্যাডো তৈরি হবে যেন মনে হবে বক্স সামনের দিকে বৃদ্ধি পাচ্ছে। আর এটি বিদ্যমান থাকলে বর্ডারের ভিতরে স্যাডো তৈরি হবে।
• ঐচ্ছিক color ভ্যালু। এটি দ্বারা স্যাডোর জন্য কালার নির্ধারণ করা হয়। ডিফিল্ট কালার কালো।

নিম্নের উদাহরণে বিভিন্ন প্রকার বক্স স্যাডো ইফেক্ট এর ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=1521

::before এবং ::after এর ব্যবহার

আরও আকর্ষনীয় ইফেক্ট তৈরি করতে আপনি স্যাডোর সাথে ::before এবং ::after সুডো-ক্লাস(pseudo-class) যুক্ত করতে পারেনঃ

kt_satt_skill_example_id=1526

বক্স-স্যাডোর মাধ্যমে কার্ড তৈরি

আপনি box-shadow প্রোপার্টি ব্যবহার করে যেকোনো এলিমেন্টকে কার্ডে রুপান্তর করাতে পারবেন।

নিম্নে বিভিন্ন প্রকার কার্ড তৈরি করে দেখানো হলোঃ

kt_satt_skill_example_id=1530

ব্রাউজার সাপোর্ট

সিএসএস(৩) তে টেক্সট এর জন্য কিছু নতুন বৈশিষ্ট্য যুক্ত হয়েছে।

এক নজরে সিএসএস(৩) টেক্সট ইফেক্ট প্রোপার্টি

সিএসএস(৩) Text-overflow প্রোপার্টি

কিছু কিছু ক্ষেত্রে কন্টেন্ট তার কন্টেন্ট-বক্স থেকে উপচে পড়ে(overflow হয়) এবং প্রদর্শিত হয় না। এ সকল ক্ষেত্রে সিএসএস(৩) text-overflow প্রোপার্টি ব্যবহারকারীকে একটি সংকেত প্রদান করে।

এই সংকেতটি বিভিন্ন ধরণের হতে পারে। যেমন- এটি clip, ellipsis(...) string, fade ইত্যাদি হতে পারে। উদাহরণস্বরূপঃ

/* Overflow behavior at line end
  Right end if LTR, left end if RTL */
text-overflow: clip;
text-overflow: ellipsis;
text-overflow: "…";
text-overflow: fade;
text-overflow: fade(10px);
text-overflow: fade(5%);
/* Overflow behavior at left end | at right end
  Directionality has no influence */
text-overflow: clip ellipsis;
text-overflow: "…" "…";
text-overflow: fade clip;
text-overflow: fade(10px) fade(10px);
text-overflow: fade(5%) fade(5%);
/* Global values */
text-overflow: inherit;
text-overflow: initial;
text-overflow: unset;

text-overflow প্রোপার্টি overflow ঘটানোর জন্য কোনো শক্তি প্রয়োগ করে না। টেক্সটকে তার কন্টেইনার থেকে overflow করার জন্য আপনাকে কিছু অন্যান্য সিএসএস প্রোপার্টি ব্যবহার করতে হবে। উদাহরণস্বরুপ-

overflow: hidden;
white-space: nowrap;

বিঃদ্রঃ শুধুমাত্র ব্লক কনটেইনার এলিমেন্টের ক্ষেত্রে text-overflow প্রোপার্টি কাজ করে।

kt_satt_skill_example_id=1540

নিম্নের উদাহরণে দেখানো হয়েছে overflow কন্টেন্ট এর উপর মাউস হোভার করলে এটি কিভাবে প্রদর্শিত হয়।

kt_satt_skill_example_id=1541

সিএসএস(৩) overflow-wrap প্রোপার্টি

যখন একটি শব্দ তার নির্ধারিত এরিয়ার চেয়ে বড় হয় তখন এটি তার এরিয়া থেকে বাইরে সম্প্রসারিত হয়।

সুতরাং যখন কোনো টেক্সট তার কন্টেন্ট-বক্স থেকে উপচে পড়ে(overflow হয়) তখন একটি বড় শব্দকে ভেঙ্গে নতুন লাইন তৈরি করতে সিএসএস(৩) overflow-wrap প্রোপার্টি ব্যবহৃত হয়। 

overflow-wrap প্রোপার্টি টেক্সটকে পরের লাইনে যাওয়ার জন্য বাধ্য করে। এমনকি এটি শব্দের মাঝখান থেকেও text কে বিভক্ত করে।

kt_satt_skill_example_id=1544

সিএসএস(৩) word-break প্রোপার্টি

কোনো টেক্সট তার কন্টেন্ট-বক্স থেকে উপচে পড়লে(overflow হলে) লাইন ব্রেক হবে কিনা তা নির্ধারণ করার জন্য সিএসএস(৩) word-break প্রোপার্টি ব্যবহার করা হয়।

kt_satt_skill_example_id=1546

বিশেষ দ্রষ্টব্যঃ word-break প্রোপার্টি অপেরা ১২ এবং পূর্ববর্তী ভার্সনে সাপোর্ট করে না।

ব্রাউজার সাপোর্ট

@font-face প্রোপার্টির এর মাধ্যমে একজন ওয়েব-ডিজাইনার ঐ সকল ফন্ট ব্যবহার করতে পারে যা ব্যবহারকারীর কম্পিউটারে ইনস্টল করা থাকে না।

সুতরাং আপনি যদি আপনার ওয়েব সাইটে আপনার ইচ্ছামত বা নিজের তৈরি ফন্ট ব্যবহার করতে চান, তাহলে আপনার সার্ভারে উক্ত ফন্ট ফাইলটি যুক্ত করুন। এরপরে ব্যবহারকারী যখন আপনার সাইট ভিজিট করবে তখন ফন্ট ফাইলটি স্বয়ংক্রিয়ভাবে তার ডিভাইজে ডাউনলোড হবে এবং সে আপনার নিজের ব্যবহৃত ফন্টেই সাইট এর কন্টেন্ট দেখবে।

এক কথায় আপনি সিএসএস(৩) @font-face এর মধ্যে আপনার ওয়েব সাইটে নিজস্ব ফন্ট ব্যবহার করতে পারবেন।

এক নজরে সিএসএস(৩) ফন্ট প্রোপার্টিসমূহ

নিন্মের টেবিলে @font-face এ ব্যবহত সবগুলো প্রোপার্টির মান সম্পর্কে আলোচনা করা হলো।

ফন্ট এর বিভিন্ন ফরম্যাট

TrueType Fonts(TTF)

TrueType হলো ফন্ট স্টান্ডার্ড যা ১৯৮০ সালে এ্যাপল এবং মাইক্রোসফট কর্তৃক ডেভেলপ হয়। ম্যাক অপারেটিং সিস্টেম এবং মাইক্রোসফট উইন্ডোজ অপারেটিং সিস্টেম উভয়ের জন্য ট্রু টাইপ ফন্ট একটি সাধারণ ফন্ট ফরম্যাট।

OpenType Fonts(OTF)

OpenType হলো স্ক্যালেবেল কম্পিউটার ফন্ট। এটি TrueType এর উপর ভিত্তিকরে তৈরি হয়েছিল এবং এটি হলো মাইক্রোসফট এর রেজিস্টার্ড ট্রেডমার্ক। বর্তমানে অধিকাংশ কম্পিউটার প্ল্যাটফর্মেই সচরাচর OpenType ফন্ট ব্যবহৃত হয়।

Web Open Font Format(WOFF)

ওয়েব পেজে ব্যবহারের জন্য WOFF একটি ফন্ট ফরম্যাট। WOFF মূলত সংকোচনশীল এবং অতিরিক্ত মেটাডাটা সম্পন্ন ওপেন টাইপ অথবা ট্রু টাইপ ফন্ট। এটি ২০০৯ সালে ডেভেলপ করা হয়েছে। বর্তমান ওয়েবের জন্য W3C এই ফন্ট ফরম্যাট ব্যবহারের পরামর্শ দেয়।

ওয়েব ওপেন ফন্ট ফরম্যাট(WOFF 2.0)

ট্রু টাইপ অথবা ওপেন টাইপ ফন্ট যা WOFF 1.0 থেকে অধিক সংকোচনশীল।

SVG Font

টেক্সট প্রদর্শিত হওয়ার সময় SVG ফন্ট গ্লিফ(glyphs) হিসেবে SVG ব্যবহার করে। SVG 1.1 এ ফন্ট তৈরি করার জন্য একটি মডিউল নির্ধারণ করা আছে। এছাড়া আপনি SVG ডকুমেন্টেও সিএসএস প্রয়োগ করে SVG টেক্সট এর জন্য @font-face প্রোপার্টি ব্যবহার করতে পারেন।

Embeded Open Type Font(EOT)

এম্বেডেড ওপেন টাইপ ফন্ট ওপেন টাইপ ফন্টের একটি সংক্ষিপ্ত রুপ যা ওয়েব পেজে এম্বেডেড বা সম্প্রসারিত ফন্ট হিসাবে ব্যবহার করা যায় এবং এটি মাইক্রোসফট কর্তৃক ডিজাইন করা হয়েছে।

ফন্ট ফরম্যাট এর জন্য ব্রাউজার সাপোর্ট

নিজস্ব ফন্ট এর ব্যবহার

সিএসএস(৩) @font-face নিয়মটি প্রয়োগ করতে হলে প্রথমেই এর মধ্যে ফন্ট এর নাম(যেমন- Serif) নির্ধারণ করতে হবে এবং এরপরে ফন্ট ফাইলটির অবস্থান(URL) নির্দেশ করতে হবে।

এখন আপনি যদি কোনো এইচটিএমএল এলিমেন্টে এই ফন্ট ব্যবহার করতে চান তাহলে সিএসএস font-family প্রোপার্টির মাধ্যমে ফন্টটির নাম নির্দেশ করে দিন।

kt_satt_skill_example_id=1557

কাস্টম বোল্ড(Bold) টেক্সট

আপনার ব্যবহৃত টেক্সটকে বোল্ড বা গাঢ় করতে চাইলে @font-face এর মধ্যে আরো একটি প্রোপার্টি font-weight যুক্ত করতে হবে।

kt_satt_skill_example_id=1559

ব্রাউজার সাপোর্ট

এই অধ্যায়ে আপনি 2D transform এর মাধ্যমে একটি এইচটিএমএল এলিমেন্ট এর অবস্থান পরিবর্তন করা শিখবেন।

সিএসএস(৩) transform এর বিভিন্ন মেথড যেমন- translate(), scale(), rotate(), skew() ইত্যাদি ব্যবহার করে আপনি একটি এলিমেন্টের উপর বিভিন্ন প্রভাব(effect) ফেলতে পারেন।

সুতরাং ট্রান্সফর্মেশন এর মাধ্যমে আপনি একটি এলিমেন্টের আকার, আকৃতি, দিক এবং অবস্থান পরিবর্তন করতে পারবেন।

এক নজরে সিএসএস(৩) ট্রান্সফর্ম প্রোপার্টিসমূহ

এক নজরে সিএসএস(৩) 2D ট্রান্সফর্ম মেথডসমূহ

translate() মেথড

translate() মেথড একটি এলিমেন্টের বর্তমান অবস্থান পরিবর্তন করতে পারে। আমরা translate() মেথডে দুটি প্যারামিটার ব্যবহার করতে পারি। যেখানে প্রথম প্যারামিটার দ্বারা X-অক্ষ এবং দ্বিতীয় প্যারামিটার দ্বারা Y-অক্ষ নির্দেশ করে।

নিম্নের উদাহরণে আমরা

এলিমেন্টটিকে বর্তমান অবস্থান থেকে ডানে ৩০ পিক্সেল এবং নিচে ৩০ পিক্সেল সরাবোঃ

kt_satt_skill_example_id=1586

সিএসএস(৩) translate মেথডসমূহঃ

---

rotate() মেথড

সিএসএস(৩) rotate() মেথড 2D Transformation এর মাধ্যমে একটি এলিমেন্টকে প্রদত্ত ডিগ্রী অনুযায়ী ঘড়ির কাঁটার দিকে অথবা বিপরীত দিকে ঘুরায়।

kt_satt_skill_example_id=1590

rotate() মেথডে নেগেটিভ ভ্যালু ব্যবহার করলে এটি একটি এলিমেন্টকে ঘড়ির কাটার বিপরীত দিকে ঘুরায়।

kt_satt_skill_example_id=1594

সিএসএস(৩) rotate মেথডঃ

---

scale() মেথড

সিএসএস(৩) scale() মেথড 2D Transformation এর মাধ্যমে একটি এলিমেন্টের আকার বৃদ্ধি অথবা হ্রাস করে।

kt_satt_skill_example_id=1598

---

skew() মেথড

সিএসএস(৩) skew() মেথড প্রদত্ত কোণদ্বয় অনুযায়ী X এবং Y-অক্ষের সাপেক্ষে একটি এলিমেন্টর অবস্থান তির্যকভাবে পরিবর্তন করে।

নিম্নের উদাহরণে আমরা

এলিমেন্টের অবস্থান তির্যকভাবে X-অক্ষের সাপেক্ষে ১০ডিগ্রী এবং Y-অক্ষের সাপেক্ষে ১৫ডিগ্রী পরিবর্তন করবোঃ

kt_satt_skill_example_id=1601

skew() মেথডের মধ্যে দুটি প্যারামিটার ব্যবহার করা হয়। যদি কোনো ক্ষেত্রে দ্বিতীয় প্যারামিটারটি উল্লেখ করা না হয় তাহলে এটির ভ্যালু ডিফল্টভাবে শূন্য হয়।

নিম্নের উদাহরণে skew() মেথডে একটি মাত্র প্যারামিটার ব্যবহার করায়

এলিমেন্টেটি শুধুমাত্র X-অক্ষের সাপেক্ষে ১৫ডিগ্রী তির্যক ভাবে ঘুরবেঃ

kt_satt_skill_example_id=1602

সিএসএস(৩) skew মেথডসমূহঃ

---

matrix() মেথড

সিএসএস(৩) matrix() মেথড এর মাধ্যমে 2D ট্রান্সফর্মে ব্যবহৃত সবগুলো মেথড একত্রে ব্যবহার করা যায়।

matrix() মেথডে ৬টি প্যারামিটার থাকে। যা একটি এলিমেন্টকে rotate, scale, translate এবং skew করে।

ম্যাট্রিক্স এর গঠনঃ

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

kt_satt_skill_example_id=1606

সিএসএস(৩) matrix মেথডঃ

---

ব্রাউজার সাপোর্ট

Content added || updated By

Nayan Islam