সিএসএস একটি প্রোগ্রামিং ভাষা যা এইচটিএমএল ডকুমেন্টকে সুদর্শনীয় করে তোলার জন্য ব্যবহৃত হয়।
আর সিএসএস(৩) হলো এই ক্যাসকেডিং স্টাইল শীট(CSS) ভাষার সর্বশেষ ভার্সন। সিএসএস(২) কে সম্প্ররসারিত করার লক্ষ্যেই মূলত সিএসএস(৩) এর আবির্ভাব।
সুতরাং দীর্ঘ-প্রতীক্ষার পর সিএসএস(৩) ডেভেলপারদের কাছে অনেক নতুনত্ব নিয়ে হাজির হয়। যেমন- সিএসএস(৩) তে rounded corners, shadows, gradients, transitions, animations, multi-columns, flexible box এবং media query ইত্যাদি নতুন নতুন বৈশিষ্ট্য যুক্ত হয়েছে। এছাড়া সিএসএস(৩) পূর্ববর্তী ভার্সনগুলোর সাথেও সম্পূর্ণ সামঞ্জস্যপূর্ণ।
আমাদের টিউটিরিয়ালের সিএসএস(৩) অংশে উপরোক্ত উপাদানগুলো নিয়ে আমরা বিস্তারিত আলোচনা করবো।
সিএসএস(৩) কে বিভিন্ন মডিউলে বিভক্ত করা হয়েছে। সিএসএস(২) এর বৈশিষ্ট্যসহ আরো কিছু নতুন বৈশিষ্ট্যের সমন্বয়ে সিএসএস(৩) মডিউলগুলো তৈরি করা হয়েছে।
নিম্নে সিএসএস(৩) এর কিছু গুরুত্বপূর্ণ মডিউল তুলে ধরা হলোঃ
| সিলেক্টর | বক্স মডেল | ব্যাকগ্রাউন্ড |
| বর্ডার | ইমেজ ভ্যালু | টেক্সট ইফেক্ট |
| 2D/3D ট্রান্সফর্মেশন | এনিমেশন | মাল্টি কলাম লে- আউট |
সিএসএস(৩) এর নতুন প্রোপার্টিসমূহের অধিকাংশই সকল মডার্ন ওয়েব ব্রাউজারে সাপোর্ট করে।
বৃত্তাকার ইবৃত্তাকার ইমে
জ!মেজ!বৃত্তাকার ইমেজ!
আপনি কোনো ইমেজ বা একাধিক
border-radius প্রোপার্টির মাধ্যমে আপনি এই কাজটি খুব সহজেই করতে পারেন।বর্ডারের সবগুলো কর্ণারের আকৃতি সেট করে।
বর্ডারের উপরের-বাম কর্ণারের আকৃতি সেট করে।
বর্ডারের উপরের-ডান কর্ণারের আকৃতি সেট করে।
বর্ডারের নিচের-ডান কর্ণারের আকৃতি সেট করে।
বর্ডারের নিচের-বাম কর্ণারের আকৃতি সেট করে।
সিএসএস(৩) border-radius প্রোপার্টি ব্যবহার করে আপনি যেকোনো এলিমেন্টের কর্ণার বৃত্তাকার করতে পারেন।
নিচের উদাহরণে তা দেখানো হলোঃ
kt_satt_skill_example_id=1306
বিঃদ্রঃ border-radius প্রোপার্টিটি আসলে border-top-left-radius, border-top-right-radius, border-bottom-right-radius এবং border-bottom-left-radius প্রোপার্টিসমূহ একত্রে সেট করার জন্য একটি সংক্ষিপ্ত প্রোপার্টি।
আপনি যদি border-radius প্রোপার্টিতে ১টি ভ্যালু উল্লেখ করেন তাহলে এটি ৪টি কর্ণারের জন্যই প্রযোজ্য হবে।
যাইহোক, আপনি ইচ্ছা করলে প্রত্যেক কর্ণারের জন্যই ভিন্ন ভিন্ন ভ্যালু নির্ধারণ করতে পারেন। এক্ষেত্রে আপনি একটি থেকে চারটি পর্যন্ত ভ্যালু ব্যবহার করতে পারেন। border-radius প্রোপার্টিতে ভ্যালু ব্যবহার পদ্ধতি নিম্নে তুলে ধরা হলোঃ
kt_satt_skill_example_id=1311
border-radius প্রোপার্টি ব্যবহার করে আপনি উপবৃত্তাকার কর্ণারও তৈরি করতে পারেনঃ
kt_satt_skill_example_id=1313
HTML এলিমেন্টকে আরও আকর্ষণীয় করে উপস্থাপন করার জন্য আপনি এটির চারপাশে বর্ডার ব্যবহার করতে পারেন।
আর বর্ডারকে আরও আকর্ষণীয় করে তুলার জন্য বর্ডার-ইমেজ ব্যবহার করতে পারেন। সিএসএস(৩) border-image প্রোপার্টির মাধ্যমে আপনি এই কাজটি খুব সহজেই করতে পারবেন।
border-image প্রোপার্টিসিএসএস(৩) border-image প্রোপার্টির মাধ্যমে আপনি একটি এলিমেন্টের চারপাশে বর্ডার হিসেবে ইমেজ ব্যবহার করতে পারেন।
বর্ডার ইমেজ প্রোপার্টির ৩টি অংশ থাকেঃ
উদাহরণ হিসেবে আমরা নিম্নের "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 প্রোপার্টি গুলো একত্রে সেট করার জন্য একটি সংক্ষিপ্ত প্রোপার্টি।
স্লাইস ভ্যালু সম্পূর্ণ বর্ডারকেই পরিবর্তন করে দিতে পারে। নিম্নে বিভিন্ন ধরনের স্লাইস ভ্যালুর ব্যবহার দেখানো হলোঃ
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
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 প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়।
এই প্রোপার্টির ৩টি ভ্যালু রয়েছে। যথাঃ
border-box - ব্যাকগ্রাউন্ড ইমেজটি বর্ডারের উপরের বাম কর্ণার থেকে শুরু হয়।padding-box - ব্যাকগ্রাউন্ড ইমেজটি প্যাডিং এর উপরের বাম কর্ণার থেকে শুরু হয়। এবং এটি ডিফল্ট।content-box - ব্যাকগ্রাউন্ড ইমেজটি কন্টেন্টের উপরের বাম কর্ণার থেকে শুরু হয়।নিম্নের উদাহরণে আমরা background-origin প্রোপার্টির ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1868
ব্যাকগ্রাউন্ড প্রোপার্টিটি কতটুকু জায়গা জুড়ে অবস্থান করবে তা সিএসএস(৩) background-clip প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়।
এই প্রোপার্টির ৩টি ভ্যালু রয়েছে। যথাঃ
border-box - বর্ডারসহ সম্পূর্ণ কন্টেন্টে ব্যাকগ্রাউন্ড থাকবে। এটি ডিফল্ট।padding-box - প্যাডিংসহ সম্পূর্ণ কন্টেন্টে ব্যাকগ্রাউন্ড থাকবে। এক্ষেত্রে বর্ডার অংশে কোনো ব্যাকগ্রাউন্ড থাকবে না।content-box - শুধুমাত্র কন্টেন্ট বক্সে ব্যাকগ্রাউন্ড থাকবে। এক্ষেত্রে বর্ডার এবং প্যাডিং অংশে কোনো ব্যাকগ্রাউন্ড থাকবে না।নিম্নে background-clip প্রোপার্টির উদাহরণ দেখানো হলোঃ
kt_satt_skill_example_id=1869
সিএসএস(৩) আসার পূর্বে সিএসএসে শুধুমাত্র কালারের নাম, হেক্সাডেসিমাল এবং RGB ভ্যালুর কালার সাপোর্ট করত।
সিএসএস(৩) তে আরও কিছু কালার-ভ্যালু যোগ হয়েছে। যথাঃ
RGBA কালার ভ্যালু হচ্ছে alpha channel এর মাধ্যমে RGB কালারের সম্প্রসারিত কালার-ভ্যালু যা কালারের অস্পষ্টতা(opacity) নির্দেশ করে।
rgba(red, green, blue, alpha)এখানে প্রথম তিনটি মান হলো RGB ভ্যালু অর্থাৎ red, green এবং blue। আর চতুর্থ মানটি হলো আলফা মান যা কালারের অপাসিটি নির্দেশ করে। আলফা প্যারামিটারটির সর্বনিম্ন মান ০.০(সম্পূর্ণ স্বচ্ছ) এবং সর্বোচ্চ মান ১.০(সম্পূর্ণ অস্বচ্ছ)।
নিম্নে RGBA কালার এর ব্যবহার দেখানো হলোঃ
kt_satt_skill_example_id=1340
HSL কালার-ভ্যালুর সিনটেক্স:
hsl(hue, saturation, lightness)HSL কালার তিনটি অংশে বিভিক্ত। যথাঃ Hue, Saturation এবং Lightness।
প্রথম অংশ Hue। যা কালেরর মান নির্ধারণ করে। এটি ডিগ্রী এককে ভ্যালু গ্রহণ করে। যেখানে ০(শূন্য) হলো সর্বনিম্ন ডিগ্রী এবং ৩৬০ সর্বোচ্চ ডিগ্রী। এখানে ০ এবং ৩৬০ ডিগ্রী হচ্ছে লাল কালার। ১২০ ডিগ্রী হচ্ছে সবুজ কালার আর ২৪০ ডিগ্রী হচ্ছে নীল কালার।
দ্বিতীয় অংশ Saturation যা কালারের পূর্ণতা প্রদান করে। এটি শতকরা এককে ভ্যালু গ্রহণ করে। যেখানে ০% হলো সর্বনিম্ন এবং ১০০% সর্বোচ্চ মান।
তৃতীয় অংশ Lightness যা কালারের উজ্জ্বলতা নির্দেশ করে। এটি শতকরা এককে মান/ভ্যালু গ্রহণ করে। যেখানে ০% হলো সর্বনিম্ন এবং ১০০% সর্বোচ্চ মান। সুতরাং এখানে ০% হচ্ছে কালো এবং ১০০% হচ্ছে সাদা বা উজ্জ্বল।
নিম্নে HSL কালার এর ব্যবহার দেখানো হলোঃ
kt_satt_skill_example_id=1436
HSLA কালার-ভ্যালু হচ্ছে alpha channel এর মাধ্যমে HSL কালারের সম্প্রসারিত কালার-ভ্যালু যা কালারের অস্পষ্টতা(opacity) নির্দেশ করে।
hsla(hue, saturation, lightness, alpha)
kt_satt_skill_example_id=1433
সিএসএস(৩) opacity প্রোপার্টির মাধ্যমে একটি এলিমেন্টকে স্বচ্ছ/অস্বচ্ছ করা যায়।
opacity(অস্বচ্ছতা) প্রোপার্টির সর্বনিম্ন মান ০.০(সম্পূর্ণ স্বচ্ছ) এবং সর্বোচ্চ মান ১.০(সম্পূর্ণ অস্বচ্ছ) এর মধ্যে হতে হবে।
নিম্নে Opacity প্রোপার্টির ব্যবহার দেখানো হলোঃ
উপরের কালারগুলো লক্ষ্য করলে দেখবেন যে, কালারের সাথে লেখাগুলোও অস্পষ্ট হয়ে গেছে। অর্থাৎ আমরা opacity ব্যবহার করে কালারের সাথে লেখাও অস্বচ্ছ বা ট্রান্সপারেন্ট করতে পারি।
kt_satt_skill_example_id=1428
সিএসএস(৩) গ্রেডিয়েন্ট দুই বা ততোধিক কালারের মধ্যে প্রগতিশীল পরিবর্তন(transition) সাধন এর মাধ্যমে একটি ইমেজ তৈরি করে। সুতরাং আপনি গ্রেডিয়েন্ট ব্যবহার করে একাধিক কালারের মিশ্রণে একটি এলিমেন্ট এর ব্যাকগ্রাউন্ড কালার সেট করতে পারবেন।
সিএসএস(৩) আসার পূর্বে গ্রেডিয়েন্ট তৈরি করার জন্য ইমেজ ব্যবহার করা হতো। যাইহোক, বর্তমানে আপনি সিএসএস(৩) গ্রেডিয়েন্ট ব্যবহার করে সময় এবং ব্যান্ডউইডথ উভয়ই সাশ্রয় করতে পারবেন।
এছাড়া আপনি যদি ইমেজ ব্যবহার করে গ্রেডিয়েন্ট তৈরি করেন তাহলে পেজ zoom করা হলে ইমেজ এর কালার খারাপ দেখাতে পারে। কিন্তু একই কাজ আপনি যদি গ্রেডিয়েন্ট ব্যবহার করে করেন তাহলে কালার একই থাকবে এবং ব্যাকগ্রাউন্ডও অনেক চমৎকার দেখাবে। কারণ গ্রেডিয়েন্ট ব্রাউজার কর্তৃক সৃষ্টি হয়।
সিএসএস(৩) তে দুই ধরনের গ্রেডিয়েন্ট রয়েছেঃ
সিএসএস(৩) linear-gradient() ফাংশন এমন একটি চিত্র তৈরি করে যা একটি সরল রেখা বরাবর দুই বা ততোধিক রং এর মধ্যে একটি প্রগতিশীল পরিবর্তন(transition) সৃষ্টি করে।
লিনিয়ার গ্রেডিয়েন্ট তৈরির জন্য আপনাকে কমপক্ষে দুটি কালার সিলেক্ট করতে হবে। কালার গুলোর সুষম ট্রানজিশনের মাধ্যমে গ্রেডিয়েন্ট তৈরি হয়।
background: linear-gradient(দিক, প্রথম কালার, দ্বিতীয় কালার, ...); গঠন এর ভ্যালুসমূহের ব্যাখ্যা
kt_satt_skill_example_id=1457
আপনি যদি গ্রেডিয়েন্টের দিক আরো ভালভাবে নিয়ন্ত্রন করতে চান তাহলে পূর্ব নির্ধারিত দিকের পরিবর্তে একটি কোণ নির্ধারণ করুন।
background: linear-gradient(কোণ, প্রথম কালার, দ্বিতীয় কালার, ...); এখানে কোণ এর প্রাথমিক ভ্যালু 0deg(top) এবং ধনাত্মক মান বৃদ্ধির সাথে সাথে ঘড়ির কাঁটার দিকে ঘুরে এবং ঋণাত্মক মান বৃদ্ধির সাথে সাথে ঘড়ির কাঁটার বিপরীতে ঘুরে।
আমরা কোণ ব্যবহার করে যেকোনো ধরনের গ্রেডিয়েন্ট তৈরি করতে পারি।
kt_satt_skill_example_id=1458
নিম্নের উদাহরণে আমরা একাধিক কালার ব্যবহার করে লিনিয়ার লগ্রেডিয়েন্ট তৈরি করবোঃ
kt_satt_skill_example_id=1461
গ্রেডিয়েন্টে আমরা ট্রান্সপারেন্সি বা স্বচ্ছতা ব্যবহার করতে পারি যা ফেইড(fade) ইফেক্ট তৈরি করতে ব্যবহৃত হয়।
ট্রান্সপারেন্সি যুক্ত করতে হলে আপনাকে কালার নির্ধারণ করার সময় rgba() ফাংশনটি ব্যবহার করতে হবে। rgba() ফাংশনের মধ্যে শেষ প্যারামিটারটির মান ০.০ থেকে ১.০ পর্যন্ত হতে হবে এবং এটি কালারের ট্রান্সপারেন্সি নির্ধারণ করে। যেখানে ০.০ সম্পূর্ণ ট্রান্সপারেন্সি নির্দেশ করে এবং ১.০ সম্পূর্ণ কালার নির্দেশ করে।
নিম্নের উদাহরণে একটি লিনিয়ার গ্রেডিয়েন্ট দেখানো হয়েছে যা বাম থেকে শুরু হয়। সুতরাং এটি লাল কালারের ৫০% ট্রান্সপারেন্সি দিয়ে শুরু হয়ে হুলদ কালারে রূপান্তর হয়ঃ
kt_satt_skill_example_id=1463
সিএসএস(৩) repeating-linear-gradient() ফাংশনটি ব্যবহার করে লিনিয়ার গ্রেডিয়েন্টকে রিপিট করা যায়ঃ
kt_satt_skill_example_id=1465
রেডিয়াল গ্রেডিয়েন্ট একটি এলিমেন্টের মাঝ বা কেন্দ্র থেকে শুরু হয়ে ক্রমান্বয়ে সব দিকে ছড়িয়ে পড়ে।
একটি রেডিয়াল গ্রেডিয়েন্ট তৈরি করার জন্য আপনাকে কমপক্ষে দুটি কালার স্টপ অবশ্যই নির্ধারণ করতে হবে।
background: radial-gradient(নির্দিষ্ট পজিশনে গ্রেডিয়েন্ট এর আকৃতি, শুরুর কালার, ..., শেষ কালার); রেডিয়াল গ্রেডিয়েন্টের ডিফল্ট আকার উপবৃত্ত, সাইজ দূরবর্তী-কর্ণার(farthest-corner) এবং পজিশন center এ থাকে।
kt_satt_skill_example_id=1470
রেডিয়াল গ্রেডিয়েন্টের প্রথম প্যারামিটারটি এর আকার নির্ধারণ করে। এটি 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 প্রোপার্টি ব্যবহার করে আপনি যেকোনো টেক্সটে এক বা একাধিক স্যাডো ইফেক্ট যুক্ত করতে পারেন।
একটি এলিমেন্টে একাধিক স্যাডো ইফেক্ট যুক্ত করতে চাইলে এগুলোকে কমা(,) চিহ্ন দ্বারা পৃথক করতে হবে। স্যাডো ইফেক্টের ডিফল্ট কালার কালো থাকে।
/* 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 প্রোপার্টির একাধিক স্যাডোকে কমা(,) চিহ্ন দ্বারা আলাদা করতে হয়।
যখন একের অধিক স্যাডো দেওয়া হয় তখন front-to-back অর্থাৎ সামনে থেকে পিছনে স্যাডোর প্রয়োগ ঘটে, যেখানে প্রথম নির্ধারিত স্যাডো সবার উপরে বা সম্মুখে থাকে।
এই প্রোপার্টিটি ::first-line এবং ::first-letter সুডো(pseudo) এলিমেন্টেও প্রয়োগ করা যায়।
নিম্নের উদাহরণে বিভিন্ন প্রকার স্যাডো ইফেক্ট এর ব্যবহার দেখানো হলোঃ
kt_satt_skill_example_id=1500
একটি টেক্সটে একাধিক স্যাডো যুক্ত করার জন্য আপনাকে text-shadow প্রোপার্টিতে স্যাডো ইফেক্টের ভ্যালুগুলো ক্রমান্বয়ে একাধিক বার লিখতে হবে এবং ভ্যালু গুলোকে আলাদা করার জন্য কমা(,) চিহ্ন ব্যবহার করতে হবে।
নিম্নের উদাহরণে একাধিক স্যাডো ইফেক্ট এর ব্যবহার দেখানো হলোঃ
kt_satt_skill_example_id=1508
নিম্নের উদাহরণে একাধিক স্যাডো ইফেক্ট ব্যবহার করে 3D-Text তৈরি করে দেখানো হলোঃ
kt_satt_skill_example_id=1510
সিএসএস(৩) 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 তৈরি করার জন্য নিম্নোক্ত প্যারামিটার বা ভ্যালুগুলো ব্যবহার করতে হয়।
নিম্নের উদাহরণে বিভিন্ন প্রকার বক্স স্যাডো ইফেক্ট এর ব্যবহার দেখানো হলোঃ
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
সিএসএস(৩) তে টেক্সট এর জন্য কিছু নতুন বৈশিষ্ট্য যুক্ত হয়েছে।
কিছু কিছু ক্ষেত্রে কন্টেন্ট তার কন্টেন্ট-বক্স থেকে উপচে পড়ে(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 হয়) তখন একটি বড় শব্দকে ভেঙ্গে নতুন লাইন তৈরি করতে সিএসএস(৩) overflow-wrap প্রোপার্টি ব্যবহৃত হয়।
overflow-wrap প্রোপার্টি টেক্সটকে পরের লাইনে যাওয়ার জন্য বাধ্য করে। এমনকি এটি শব্দের মাঝখান থেকেও text কে বিভক্ত করে।
kt_satt_skill_example_id=1544
কোনো টেক্সট তার কন্টেন্ট-বক্স থেকে উপচে পড়লে(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
আপনার ব্যবহৃত টেক্সটকে বোল্ড বা গাঢ় করতে চাইলে @font-face এর মধ্যে আরো একটি প্রোপার্টি font-weight যুক্ত করতে হবে।
kt_satt_skill_example_id=1559
এই অধ্যায়ে আপনি 2D transform এর মাধ্যমে একটি এইচটিএমএল এলিমেন্ট এর অবস্থান পরিবর্তন করা শিখবেন।
সিএসএস(৩) transform এর বিভিন্ন মেথড যেমন- translate(), scale(), rotate(), skew() ইত্যাদি ব্যবহার করে আপনি একটি এলিমেন্টের উপর বিভিন্ন প্রভাব(effect) ফেলতে পারেন।
সুতরাং ট্রান্সফর্মেশন এর মাধ্যমে আপনি একটি এলিমেন্টের আকার, আকৃতি, দিক এবং অবস্থান পরিবর্তন করতে পারবেন।
translate() মেথড একটি এলিমেন্টের বর্তমান অবস্থান পরিবর্তন করতে পারে। আমরা translate() মেথডে দুটি প্যারামিটার ব্যবহার করতে পারি। যেখানে প্রথম প্যারামিটার দ্বারা X-অক্ষ এবং দ্বিতীয় প্যারামিটার দ্বারা Y-অক্ষ নির্দেশ করে।
নিম্নের উদাহরণে আমরা
kt_satt_skill_example_id=1586
সিএসএস(৩) translate মেথডসমূহঃ
সিএসএস(৩) rotate() মেথড 2D Transformation এর মাধ্যমে একটি এলিমেন্টকে প্রদত্ত ডিগ্রী অনুযায়ী ঘড়ির কাঁটার দিকে অথবা বিপরীত দিকে ঘুরায়।
kt_satt_skill_example_id=1590
rotate() মেথডে নেগেটিভ ভ্যালু ব্যবহার করলে এটি একটি এলিমেন্টকে ঘড়ির কাটার বিপরীত দিকে ঘুরায়।
kt_satt_skill_example_id=1594
সিএসএস(৩) rotate মেথডঃ
সিএসএস(৩) scale() মেথড 2D Transformation এর মাধ্যমে একটি এলিমেন্টের আকার বৃদ্ধি অথবা হ্রাস করে।
kt_satt_skill_example_id=1598
সিএসএস(৩) skew() মেথড প্রদত্ত কোণদ্বয় অনুযায়ী X এবং Y-অক্ষের সাপেক্ষে একটি এলিমেন্টর অবস্থান তির্যকভাবে পরিবর্তন করে।
নিম্নের উদাহরণে আমরা
kt_satt_skill_example_id=1601
skew() মেথডের মধ্যে দুটি প্যারামিটার ব্যবহার করা হয়। যদি কোনো ক্ষেত্রে দ্বিতীয় প্যারামিটারটি উল্লেখ করা না হয় তাহলে এটির ভ্যালু ডিফল্টভাবে শূন্য হয়।
নিম্নের উদাহরণে skew() মেথডে একটি মাত্র প্যারামিটার ব্যবহার করায়
kt_satt_skill_example_id=1602
সিএসএস(৩) skew মেথডসমূহঃ
সিএসএস(৩) matrix() মেথড এর মাধ্যমে 2D ট্রান্সফর্মে ব্যবহৃত সবগুলো মেথড একত্রে ব্যবহার করা যায়।
matrix() মেথডে ৬টি প্যারামিটার থাকে। যা একটি এলিমেন্টকে rotate, scale, translate এবং skew করে।
ম্যাট্রিক্স এর গঠনঃ
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())kt_satt_skill_example_id=1606
সিএসএস(৩) matrix মেথডঃ
সিএসএস(৩) 3D ট্রান্সফর্মেশন এর মাধ্যমে একটি এলিমেন্টেকে ত্রিমাত্রিকভাবে পরিবর্তন করা যায়।
এই অধ্যায়ে আপনি নিম্নলিখিত 3D ট্রান্সফর্ম মেথড সম্পর্কে জানতে পারবেনঃ
rotateX() মেথড একট এলিমেন্টকে প্রদত্ত ডিগ্রী অনুসারে তার X-অক্ষের চারপাশে ঘুরাবেঃ
rotateY() মেথড একট এলিমেন্টকে প্রদত্ত ডিগ্রী অনুসারে তার Y-অক্ষের চারপাশে ঘুরাবেঃ
rotateZ() মেথড একট এলিমেন্টকে প্রদত্ত ডিগ্রী অনুসারে তার Z-অক্ষের চারপাশে ঘুরাবেঃ
kt_satt_skill_example_id=1617
সিএসএস(৩) ট্রানজিশন প্রোপার্টি গুলোকে একটা প্রদত্ত সময় কাল ধরে (অন্য এক মান থেকে) মসৃণভাবে পরিবর্তন করে।
উদাহরণ: সিএসএস(৩) ট্রানজিশন ইফেক্ট দেখার জন্য নিচের এলিমেন্টের উপর মাউস হোভার করুন
ট্রাঞ্জিশন
নিচের টেবিলে সকল ট্রানজিশন প্রোপার্টি দেখানো হল :
একটি ট্রানজিশন ইফেক্ট তৈরি করতে আপনাকে অবশ্যই দু'টি বিষয় নির্দিষ্ট করতে হবে
নোট : যদি সময়ব্যাপ্তি নির্ধারণ করা না হয় তবে ইফেক্টের কোন ট্রানজিশন হবে না কারণ এটির ডিফল্ট মান 0 থাকে।
নিচের উদাহরণে দেখানো হয়েছে একটি 120px * 120px সবুজ
kt_satt_skill_example_id=1648
যখন সিএসএস প্রোপার্টি তার মান পরিবর্তন করবে তখন ইফেক্টটি কাজ শুরু করবে।
এখন, width প্রোপার্টির একটি নতুন ভ্যালু নির্দিষ্ট করে যখন ব্যবহারকারী তার মাউস
div:hover {
width: 400px;
}
লক্ষ্য করুন যখন মাউসটি এলিমেন্টের উপর থেকে সরিয়ে নেয়া হয় তখন এটি আবার ধীরে ধীরে আগের অবস্থানে ফিরে যায়।
নিচের উদাহরণে width এবং height উভয় প্রোপার্টির জন্য ট্রানজিশন ইফেক্ট ব্যবহার করা হয়েছে এখানে width এর জন্য সময়ব্যাপ্তি ৩ সেকেন্ড এবং height এর জন্য ৪ সেকেন্ড নির্ধারণ করা হয়েছে :
kt_satt_skill_example_id=1649
transition-timing-function প্রোপার্টি দ্বারা ট্রানজিশনে বক্ররেখার গতিকে নির্দেশ করা হয়।
transition-timing-function প্রোপার্টির জন্য নিচের ভ্যালুগুলো ব্যবহার করা যেতে পারে :
ease - এনিমেশনটি ধীরে ধীরে শুরু হয়ে তারপর দ্রুত চলবে এবং আবার ধীরে ধীরে শেষ করবে (এটি ডিফল্ট)।linear - এনিমেশনটি একই গতিতে শুরু হবে এবং শেষ হবে।ease-in - এনিমেশনটি ধীর গতিতে শুরু হবে।ease-out - এনিমেশনটি ধীর গতিতে শেষ হবে।ease-in-out - এনিমেশনটি ধীর গতিতে শুরু এবং শেষ হবে।cubic-bezier(n,n,n,n) - cubic-bezier ফাংশনে আপনি আপনার ভ্যালু নির্ধারণ করতে পারেন।নিচের উদাহরণে ব্যবহারযোগ্য কিছু ভিন্ন ভিন্ন গতির বক্ররেখা দেখানো হয়েছে :
kt_satt_skill_example_id=1650
transition-delay প্রোপার্টির নির্দেশ করে যে ট্রানজিশন ইফেক্টটি বিলম্বে শুরু হবে
নিচের উদাহরণে ট্রানজিশন ইফেক্টটি শুরু হতে ১ সেকেন্ড বিলম্ব করেঃ
kt_satt_skill_example_id=1651
নিচের উদাহরণে ট্রানজিশন ইফেক্টের মধ্যে ট্রান্সফর্মেনশন যুক্ত করা হয়েছেঃ
kt_satt_skill_example_id=1652
সিএসএস(৩) ট্রানজিশন প্রোপার্টি গুলো একটি একটি করে নির্ধারণ করা যায় :
kt_satt_skill_example_id=1653
অথবা transition শর্টহ্যান্ড প্রোপার্টি ব্যবহার করেও নির্ধারণ করা যায়ঃ
kt_satt_skill_example_id=1654
নোটঃ উপরের উদাহরণগুলো ইন্টারন্টে এক্সপ্লোরার ৯ এবং আগের ভার্সনে কাজ করবে না।
টেবিলের নাম্বার গুলো নির্দেশ করে ব্রাউজারের প্রথম ভার্সন, যেটি প্রোপার্টিকে সম্পুর্নভাবে সাপোর্ট করে।
আপনি জাভাস্ক্রিপ্ট ব্যবহার করা ছাড়া অধিকাংশ এইচটিএমএল এলিমেন্টকে সিএসএস(৩) এনিমেশন দ্বারা প্রাণবন্ত করে তুলতে পারেন।
এনিমেশন
Animation
নিচের টেবিলে @keyframes এবং সকল এনিমেশন প্রোপার্টি গুলো দেওয়া হলোঃ
এনিমেশন দ্বারা একটি এলিমেন্টকে এক স্টাইল থেকে অন্য স্টাইলে পরিবর্তন করা যায়। আপনি আপনার ইচ্ছে মত প্রোপার্টিকে যতবার চাইবেন ততবার পরিবর্তন করতে পারবেন।
সিএসএস(৩) এনিমেশন ব্যবহার করতে হলে এনিমেশনের জন্য প্রথমে আপনাকে কিছু প্রোপার্টি নির্দিষ্ট করে দিতে হবে। আর এই প্রোপার্টি গুলো keyframes এর মধ্যে রাখতে হবে। যা পরবর্তিতে এনিমেশন ঘটার সময় আপনার এলিমেন্ট গুলোর স্টাইল পরিবর্তন করবে।
কোনো এলিমেন্টে এনিমেশন করতে হলে এর স্টাইল গুলো পরিবর্তন করতে হয়। আর এই পরিবর্তিত স্টাইল গুলো আমরা @keyframes এর ভিতর নির্দিষ্ট করে দিব। আর এই স্টাইল গুলোই এনিমেশনের সময় কাজ করবে।
@keyframes দ্বারা তৈরি এনিমেশনকে কাযে লাগাতে হলে আপনাকে অবশ্যই এটিকে animation প্রোপার্টি দ্বারা যে কোনো এলিমেন্টের সাথে বাইন্ড করতে হবে।
নিচের উদাহরণে দেখা যাবে এনিমেশনটিকে একটি
kt_satt_skill_example_id=1683
সর্তকতাঃ যদি animation-duration প্রোপার্টি ব্যবহার করা না হয় তবে এনিমেশনটির কোন প্রভাব থাকবেনা। কারণ এটির ডিফল্ট মান 0 থাকে।
উপরের উদাহরণে আমরা @keyframes এর মধ্যে "from" এবং "to" এই দুইটি কীওয়ার্ড দ্বারা এনিমেশনটি ডিফাইন করেছিলাম। এছাড়াও আমরা শতকরা(%) হারে এনিমেশনের মান ডিফাইন করতে পারি। এক্ষেত্রে এনিমেশনটি 0% থেকে শুরু করবে এবং 100% এ সম্পূর্ণ করবে।
শতকরা(%) ব্যবহার করে আপনি অনেক জটিল এবং কঠিন এনিমেশন তৈরি করতে পারেন।
নিম্নের উদাহরণে < div> এলিমেন্টি এনিমেশন চলাকালীন অবস্থায় ৪টি ব্যাকগ্রাউন্ড কালার পরিবর্তন করবেঃ
kt_satt_skill_example_id=1684
নিম্নের উদাহরণে < div> এলিমেন্টি এনিমেশনের সময় শতকরা(%) মান অনুযাই ব্যাকগ্রাউন্ড কালার এবং অবস্থান উভয় পরিবর্তন হবেঃ
kt_satt_skill_example_id=1685
animation-delay প্রোপার্টি নির্দেশ করে যে এনিমেশনটি কত সময়-কাল পর শুরু হবে।
নিচের উদাহরণে এনিমেশনটি শুরু হতে ২ সেকেন্ড বিলম্ব করবেঃ
kt_satt_skill_example_id=1686
animation-iteration-count প্রোপার্টি একটি এনিমেশন কতবার চলবে তা নির্দেশ করে।
নিম্নের উদাহরণে এনিমেশনটি ৩ বার চলার পর বন্ধ হবেঃ
kt_satt_skill_example_id=1688
নিম্নের উদাহরণে এনিমেশনটি সব-সময় চলতে থাকবে। আর এর জন্য animation-iteration-count প্রোপার্টি ভ্যালু "infinite" সেট করা হয়েছেঃ
kt_satt_skill_example_id=1689
কোনো এনিমেশনকে বিপরীত দিক হতে চালু করার জন্য animation-direction প্রোপার্টি ব্যবহার করা হয়।
নিম্নের উদাহরণে এনিমেশনটিকে বিপরীত দিক হতে চালু করা হলোঃ
kt_satt_skill_example_id=1691
নিম্নের উদাহরণে এনিমেশনটিকে প্রথমে সামনের দিকে তারপর বিপরীত দিকে আবার সামনের দিকে চালু করার জন্য animation-direction প্রোপার্টি ভ্যালু "alternate" সেট করা হয়েছেঃ
kt_satt_skill_example_id=1692
এনিমেশনের বক্ররেখা গতি নিয়ন্ত্রন করার জন্য animation-timing-function প্রোপার্টি ব্যবহার করা হয়।
animation-timing-function প্রোপার্টির ভ্যালু গুলো নিম্নের দেওয়া হলোঃ
ease - এনিমেশনটি ধীরে ধীরে শুরু হয়ে তারপর দ্রুত চলবে এবং আবার ধীরে ধীরে শেষ হবে। এটি ডিফল্ট।linear - এনিমেশনটি একই গতিতে শুরু হবে এবং শেষ হবে।ease-in - এনিমেশনটি ধীর গতিতে শুরু হবে।ease-out - এনিমেশনটি ধীর গতিতে শেষ হবে।ease-in-out - এনিমেশনটি ধীর গতিতে শুরু এবং শেষ হবে।cubic-bezier(n,n,n,n) - এই ফাংশনের মাধ্যমে আপনার ইচ্ছেমত ভ্যালু নির্দিষ্ট করে দিতে পারেন।নিচের উদাহরণে এনিমেশনের কিছু ভিন্ন ভিন্ন গতিবিধি দেখানো হলোঃ
নিম্নের উদাহরনে ছয়টি প্রোপার্টির ব্যবহার একত্রে দেখানো হয়েছেঃ
kt_satt_skill_example_id=1694
সংক্ষিত্ত প্রোপার্টি animation ব্যবহার করে উপরের এনিমেশন এর মতোই ইফেক্ট পাওয়া যায়ঃ
kt_satt_skill_example_id=1696
বিশেষ দ্রষ্টব্যঃ উপরের উদাহরণগুলো ইন্টারনেট এক্সপ্লোরার ৯ এবং তার পূর্বের ভার্সনে কাজ করে না
সিএসএস(৩) দ্বারা আপনি একটি বাটনে আপনার পছন্দমত স্টাইল করতে পারেন। আমরা এই অধ্যায়ে দেখবো কিভাবে সিএসএস ব্যবহার করে বাটনের স্টাইল করা যায়।
kt_satt_skill_example_id=1730
বাটনের ব্যাকগ্রাউন্ড কালার পরিবর্তন করতে background-color প্রোপারটি ব্যবহার করুনঃ
kt_satt_skill_example_id=1733
বাটনের ফন্ট সাইজ পরিবর্তন করতে font-size প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1735
বাটনের পেডিং পরিবর্তন করতে padding প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1736
বাটনের কোণগুলোকে গোলাকৃতি করার জন্য border-radius প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1737
বাটনে বর্ডার কালার যুক্ত করতে border প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1738
আপনি বাটনে হোবার ইফেক্ট যুক্ত করতে hover সিলেক্টর ব্যবহার করুন।
পরামর্শঃ হোভার এর গতি নিয়ন্ত্রন করার জন্য transition-duration প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1740
বাটনে শ্যাডো যুক্ত করার জন্য box-shadowপ্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1742
একটি বাটনকে ডিজেবল এর মত দেখানোর জন্য বাটনে opacity প্রোপার্টি ব্যবহার করুন।
পরামর্শঃ যখন আপনি বাটনের উপর মাউস নিয়ে যাবেন তখন একটি "no parking sign" দেখানোর জন্য cursor প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1744
ডিফল্ট ভাবে একটি বাটনের সাইজ এর ভিতর অবস্থিত টেক্সটের সাইজের উপর নির্ভর করে। একটি বাটনের সাইজ পরিবর্তন করতে width প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1745
বাটন গুলো থেকে মার্জিন বাদ দিয়ে float:left প্রোপার্টি যুক্ত করে বাটনের গ্রুপ তৈরি করা যায়ঃ
kt_satt_skill_example_id=1746
বর্ডার সহ বাটন গ্রুপ তৈরি করতে বাটন গ্রুপের সাথে border প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1748
একটি বাটনে আপনি বিভিন্ন ধরনের এনিমেশন যুক্ত করতে পারবেন। তার মধ্যে আমরা নিম্নের বাটনের ভিতর হোবার ইফেক্টে এরো (arrow ) চিহ্ন যুক্ত করবোঃ
kt_satt_skill_example_id=1749
এই উদাহরনে আমরা বাটন ক্লিকে একটি রিপল("ripple") ইফেক্ট যুক্ত করবোঃ
kt_satt_skill_example_id=1751
এই উদাহরনে আমরা বাটন ক্লিকে একটি প্রেস("pressed") ইফেক্ট যুক্ত করবোঃ
kt_satt_skill_example_id=1752
সিএসএস(৩) ব্যবহার করে আপনি বিভিন্ন স্টাইলের পেজিনেশন তৈরি করতে পারেন। তবে এর মধ্যে সব চেয়ে কার্যকরী হচ্ছে রেস্পন্সিভ পেজিনেশন তৈরি করা। আমরা এই অধ্যায়ে শিখবো কিভাবে একটি রেস্পন্সিভ পেজিনেশন তৈরি করা যায়।
যদি আপনার অসংখ্য পেইজের একটি ওয়েবসাইট থাকে তাহলে আপনি প্রত্যেকটি পেইজে পেজিনেশন যুক্ত করতে চাইবেনঃ
চলুন পেজিনেশন তৈরি করার জন্য একটি এইচটিএমএল লিস্টকে স্টাইল করিঃ
kt_satt_skill_example_id=1758
পেজিনেশনে .active ক্লাস ব্যবহার করে চলতি পেইজ কে হাইলাইট করুন এবং পেজিনেশনের সকল নাম্বারের ক্ষেত্রে :hover সিলেক্টর ব্যবহার করে একটি হোবার ইফেক্ট দিনঃ
kt_satt_skill_example_id=1759
এক্টিভ এবং হোভার বাটনকে গোলাকৃতি করার জন্য border-radius প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1760
পেজিনেশনের বাটনে ট্রানজিশন ইফেক্ট যুক্ত করার জন্য transition প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1761
পেজিনেশনে বর্ডার যুক্ত করার জন্য border প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1762
বর্ডার যুক্ত পেজিনেশনে গোলাকৃতি বর্ডার যুক্ত করার জন্য border-radius প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1763
পেজিনেশনে লিংকের মাঝে দূরত্ব তৈরি করার জন্য margin প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1764
পেজিনেশনের সাইজ পরিবর্তন করতে font-size প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1765
পেজিনেশনকে পেজের মাঝে আনতে text-align:center প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1766
kt_satt_skill_example_id=1767
পেজিনেশনের আরেকটি ধরণকে বলে "ব্রেডকার্ম্ব"। নিম্নে আমরা দেখবো কিভাবে একটি ব্রেডকার্ম্ব তৈরি করবেনঃ
kt_satt_skill_example_id=1768
আপনি সিএসএস(৩) মাল্টিপল কলাম লেআউট ব্যবহার করে আপনার ওয়েব পেজে সহজে খবরের কাগজের মত একাধিক কলাম লিখতে পারবেনঃ
নিম্নের টেবিলে সকল মাল্টিপল কলাম প্রোপার্টিগুলো দেখানো হলঃ
একটি এলিমেন্টকে কয়টি কলামে বিভক্ত করবে তা column-count প্রোপার্টির দ্বারা নির্ধারণ করা হয়।
নিম্নের উদাহরণে
kt_satt_skill_example_id=1792
দুইটি কলামের মাঝে দূরত্ব নির্ধারণ করার জন্য column-gap প্রোপার্টি ব্যবহার করা হয়।
নিম্নের উদাহরণে দুইটি কলামের মাঝে ফাকাস্থান 30px রাখা হয়েছেঃ
kt_satt_skill_example_id=1794
দুইটি কলামের মাঝে যেকোন ধরনের স্টাইল দেওয়ার জন্য column-rule-style প্রোপার্টি ব্যবহার করা হয়। ইহা অনেকটাই বর্ডারের মত কাজ করে। আপনি একটি বর্ডারে যে সকল স্টাইল ব্যবহার করতে পারেন ঠিক ঐ সকল স্টাইলই কলামের মাঝে এই প্রোপার্টি দ্বারা ব্যবহার করতে পারবেনঃ
kt_satt_skill_example_id=1795
দুইটি কলামের মাঝের স্টাইলটির প্রস্থ নির্ধারণ করার জন্য column-rule-width প্রোপার্টি ব্যবহার করা হয়ঃ
kt_satt_skill_example_id=1798
দুইটি কলামের মাঝের স্টাইলটির কালার নির্ধারণ করার জন্যcolumn-rule-colorপ্রোপার্টি ব্যবহার করা হয়ঃ
kt_satt_skill_example_id=1801
column-rule-width, column-rule-style এবং column-rule-color এই তিনটি প্রোপার্টি একত্রে column-rule প্রোপার্টি দ্বারা প্রকাশ করা যায়। অর্থাৎ তিনটি প্রোপার্টির সংক্ষিপ্ত প্রোপার্টি হচ্ছে column-rule প্রোপার্টি।
নিচের উদাহরণে কলামের মাঝে width, style এবং color নির্দেশ করা হয়েছেঃ
kt_satt_skill_example_id=1804
আপনি কলামের মাঝে অবস্থিত যে কোনো এলিমেন্ট কয়টি কলাম নিয়ে অবস্থান করবে তা column-span প্রোপার্টি দ্বারা নির্ধারণ করে দিতে পারেন।
নিচের উদাহরণে
kt_satt_skill_example_id=1807
একটি কলামের প্রস্থ কত হবে বা এটি কতটুকু জায়গা দখল করবে তা column-width প্রোপার্টি দ্বারা নির্ধারণ করে দিতে পারেন।
নিম্নের উদাহরণে প্রতিটি কলামের প্রস্থ 120px হবেঃ
kt_satt_skill_example_id=1809
সিএসএস(৩) ইউজার ইন্টারফেস ব্যবহৃত যেকোনো এলিমেন্টকে একজন ইউজার তার নিজের ইচ্ছামত পরিবর্তন করতে পারবে। সিএসএস(৩) তে অনেক ধরণের ইউজার ইন্টারফেস প্রোপার্টি রয়েছে। যেমন- resize, appearance, box-sizing, icon, outline-offset, nav-up, nav-down, nav-left, nav-right ইত্যাদি।
resize এবং outline-offset প্রোপার্টিগুলো নিয়ে আলোচনা করবোঃ
আপনার পেজের কোনো এলিমেন্টের আকার ব্যবহারকারী পরিবর্তন করতে পারবে কিনা তা নির্ধারণ করতে resize প্রোপার্টি ব্যবহার করুন।
নিম্নের উদাহরণে একজন ব্যবহারকারী < div> এলিমেন্টটির শুধুমাত্র প্রস্থ পরিবর্তন করতে পারবেঃ
kt_satt_skill_example_id=1769
নিম্নের উদাহরণে একজন ব্যবহারকারী < div> এলিমেন্টটির শুধুমাত্র উচ্চতা পরিবর্তন করতে পারবেঃ
kt_satt_skill_example_id=1770
নিম্নের উদাহরণে একজন ব্যবহারকারী kt_satt_skill_example_id=1771 একটি এলিমেন্টের বর্ডার এবং আউটলাইনের মধ্যে দূরত্ব নির্ধারণ করতে আউটলাইন বর্ডার থেকে তিনটি কারণে ভিন্ন হয়ঃ নিম্নের উদাহরণে বর্ডার এবং আউটলাইনের মাঝে ২০ পিক্সেল দূরত্ব তৈরি করার জন্য kt_satt_skill_example_id=1772সিএসএস(৩) আউটলাইন অফসেট
outline-offset প্রোপার্টি ব্যবহার করা হয়।outline-offset প্রোপার্টি ব্যবহার করা হয়েছেঃ
একটি এলিমেন্টের মোট উচ্চতা এবং প্রস্থের সাথে প্যাডিং এবং বর্ডার যুক্ত করে এলিমেন্টের সাইজ নির্ধারণ করতে সিএসএস(৩) box-sizing প্রোপার্টি ব্যবহার করা হয়।
এলিমেন্ট এর প্রস্থ এবং উচ্চতা নিম্নের ন্যায় গননা করেঃ
অর্থাৎ আপনি যদি box-sizing প্রোপার্টি না ব্যবহার করেন তাহলে একটি এলিমেন্টের সাথে ডিফল্টভাবে বর্ডার ও প্যাডিং যুক্ত হবে এবং আপনার কাংখিত প্রস্থ ও উচ্চতা থেকে ফলাফল ভিন্ন হবে।
নিম্নের উদাহরণে একই উচ্চতা এবং প্রস্থের সাথে প্যাডিং যুক্ত এবং প্যাডিং ব্যতীত দুটি
kt_satt_skill_example_id=1780
তাই দীর্ঘ সময় ধরে ওয়েব-ডেভেলপারদেরকে প্রয়োজনের তুলনায় কম প্রস্থ এবং উচ্চতা নির্ধারণ করতে হত। কারণ তাদেরকে প্যাডিং এবং বর্ডারের মান বাদ দিয়ে হিসাব করতে হত। এই সমস্যার সমাধান হিসেবে সিএসএস(৩) box-sizing প্রোপার্টির উৎপত্তি হয়
একটি এলিমেন্টের মোট প্রস্থ এবং উচ্চতার মধ্যে প্যাডিং এবং বর্ডার যুক্ত করে এলিমেন্টের সাইজ নির্ধারণ করতে সিএসএস(৩) box-sizing প্রোপার্টি ব্যবহার করা হয়।
আপনি যদি একটি এলিমেন্টে box-sizing: border-box; সেট করেন তাহলে ঐ এলিমেন্টে সেটকৃত সাইজ(width এবং height) এর সাথে প্যাডিং এবং বর্ডারও যুক্ত হবেঃ
kt_satt_skill_example_id=1781
box-sizing: border-box; এর ব্যবহার অনেক বেশি সুবিধাজনক হওয়া অধিকাংশ ডেভেলপার তাদের ওয়েব-পেইজের সকল এলিমেন্টেই এটি ব্যবহার করে থাকে।
ফ্লেক্সবক্স হচ্ছে সিএসএস(৩) এর নতুন লেআউট। পেজ লেআউট যখন বিভিন্ন সাইজের স্ক্রিন এবং বিভিন্ন ডিভাইসে প্রদর্শিত হবে তখন এলিমেন্ট গুলোকে পূর্ব নির্ধারিত নকশা অনুযায়ী প্রদর্শন করানোর জন্য সিএসএস(৩) ফ্লেক্সবক্স ব্যবহার করা হয়।
ফ্লেক্স কন্টেইনার এবং ফ্লেক্স কন্টেন্ট নিয়ে গঠিত হয় ফ্লেক্সবক্স। একটি কন্টেইনারকে ফ্লেক্সে রূপান্তর করতে উক্ত এলিমেন্টের display প্রোপার্টিতে ভ্যালু হিসেবে flex অথবা inline-flex সেট করতে হয়।
একটি ফ্লেক্স কন্টেইনারের মধ্যে এক বা একাধিক ফ্লেক্স কন্টেন্ট থাকতে পারে। ফ্লেক্স কন্টেন্ট ফ্লেক্স কন্টেইনারের ভিতরে লাইনে অবস্থান করে। ডিফল্ট ভাবে প্রতিটি ফ্লেক্স কনটেইনারে একটি করে লাইন থাকে।
নিম্নের উদাহরণে তিনটি ফ্লেক্স কন্টেন্ট দেখানো হল যেগুলোকে ডিফল্ট ভাবে অনুভূমিক আকারে লাইনে অর্থাৎ বাম থেকে ডান দিকে সাজবেঃ
kt_satt_skill_example_id=1840
আমরা direction প্রোপার্টি ব্যবহার করে ফ্লেক্সবক্সেরে গতিপথ পরিবর্তন করতে পারি। এখন আমরা যদি < /body> ট্যাগে direction প্রোপার্টির মান rtl সেট করি সেক্ষেত্রে ফ্লেক্সবক্সেরে গতিপথের সাথে সাথে সম্পূর্ণ পেজের লেআউটও পরিবর্তন হয়ে যাবে।
নিম্নের উদাহরণে দেখবো কিভাবে ফ্লেক্স এলিমেন্টের গতিপথ ডান থেকে বামে হয়ঃ
kt_satt_skill_example_id=1841
ফ্লেক্স কন্টেইনারের মধ্যে ফ্লেক্স এলিমেন্ট গুলোর গতিপথ flex-direction প্রোপার্টি দ্বারা করে। আমরা flex-direction প্রোপার্টি ব্যবহার করে ফ্লেক্স এলিমেন্ট গতিপথ পরিবর্তন করতে পারি। নিম্নের এতে ব্যবহৃত ভ্যালু গুলো দেওয়া হলোঃ
row - টেক্সটের গতিমুখ যদি উপর থেকে নিচে হয় তবে ফ্লেক্সবক্সের গতিমুখ হবে বাম থেকে ডানে। এটি ডিফল্ট ভ্যালু।row-reverse - টেক্সটের গতিমুখ যদি বাম থেকে ডানে হয় তবে ফ্লেক্সবক্সের গতিমুখ হবে ডান থেকে বামে।column - টেক্সট যদি অনুভূমিক হয় তবে ফ্লেক্স হবে উলম্ব।column-reverse - এটি column এর বিপরীত কাজ করে।নিম্নের উদাহরণে আমরা row-reverse এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1842
নিম্নের উদাহরণে আমরা column এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1843
নিম্নের উদাহরণে আমরা column-reverse এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1844
আপনি justify-content প্রোপার্টি ব্যবহার করে একটি ফ্লেক্সিবল কন্টেইনারের সকল কন্টেন্ট গুলোকে অনুভূমিক ভাবে সাজাতে পারবেন।
justify-content এর সম্ভাব্য ভ্যালু গুলো নিচে দেওয়া হলোঃ
flex-start - ডিফল্টভাবে কন্টেন্ট গুলো কন্টেইনারের শুরুতে অবস্থান করেflex-end - কন্টেন্টগুলো কন্টেইনারের শেষে অবস্থান করেcenter - কন্টেন্টগুলো কন্টেইনারের কেন্দ্রে অবস্থান করেspace-between -কন্টেন্ট গুলো নিজেদের মধ্যে দূরত্ব বঝায় রেখে অবস্থান করেspace-around - কন্টেন্ট গুলো নিজেদের চারপাশে দূরত্ব বঝায় রেখে অবস্থান করেনিম্নের উদাহরণে আমরা flex-end এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1845
নিম্নের উদাহরণে আমরা center এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1846
নিম্নের উদাহরণে আমরা space-between এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1847
নিম্নের উদাহরণে আমরা space-around এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1848
আপনি align-items প্রোপার্টি ব্যবহার করে একটি ফ্লেক্সিবল কন্টেইনারের সকল কন্টেন্ট গুলোকে উলম্ব ভাবে সাজাতে পারবেন।
align-items এর সম্ভাব্য ভ্যালু গুলো নিচে দেওয়া হলোঃ
stretch - ডিফল্ট ভাবে কন্টেন্টগুলো সম্পূর্ন কন্টেইনার জুড়ে থাকে।flex-start - কন্টেন্ট গুলো কন্টেইনারের উপরে অবস্থান করে।flex-end - কন্টেন্ট গুলো কন্টেইনারের নিচে অবস্থান করে।center - কন্টেন্ট গুলো কন্টেইনারের কেন্দ্রে উলম্বভাবে অবস্থান করে।baseline - কন্টেন্টগুলো কন্টেইনারের বেসলাইনে অবস্থান করে।নিম্নের উদাহরণে আমরা stretch এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1849
নিম্নের উদাহরণে আমরা flex-start এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1850
নিম্নের উদাহরণে আমরা flex-end এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1851
নিম্নের উদাহরণে আমরা center এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1852
নিম্নের উদাহরণে আমরা baseline এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1853
আপনি flex-wrap প্রোপার্টি ব্যবহার করে একটি ফ্লেক্সিবল কন্টেইনারের কন্টেন্ট গুলো wrap হবে কিনা তা নির্দেশ করতে পারেন।
flex-wrap এর সম্ভাব্য ভ্যালু গুলো নিচে দেওয়া হলোঃ
nowrap - ডিফল্টভাবে ফ্লেক্স কন্টেন্ট গুলো wrap করা থাকে না।wrap - যখন প্রয়োজন তখন ফ্লেক্স কন্টেন্ট গুলো wrap করে।wrap-reverse - যখন প্রয়োজন তখন ফ্লেক্স কন্টেন্ট গুলোকে বিপরিত দিক থেকে wrap করে।নিম্নের উদাহরণে আমরা nowrap এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1854
নিম্নের উদাহরণে আমরা wrap এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1855
নিম্নের উদাহরণে আমরা wrap-reverse এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1856
আপনি align-content প্রোপার্টি ব্যবহার করে flex-wrap প্রোপার্টিকে মোডিফাই করতে পারেন। align-content প্রোপার্টি অনেকটা align-items প্রোপার্টির মত কাজ করে। তবে এক্ষেত্রে এটি ফ্লেক্স কন্টেন্টের পরিবর্তে ফ্লেক্স লাইনকে সাজায়।
align-content এর সম্ভাব্য ভ্যালু গুলো নিচে দেওয়া হলোঃ
stretch - ডিফল্টভাবে লাইন গুলো কন্টেইনারের খালি অংশ জুড়ে থাকে।flex-start - লাইন গুলো কন্টেইনারের শুরুতে থাকে।flex-end - লাইন গুলো কন্টেইনারের শেষে থাকে।center - লাইন গুলো কন্টেইনারের কেন্দ্রে থাকে।space-between - কন্টেইনারের লাইন গুলো জোড়া জোড়া করে থাকে।নিম্নের উদাহরণে আমরা center এর ব্যবহার দেখবোঃ
kt_satt_skill_example_id=1857
আপনি order প্রোপার্টি ব্যবহার করে কন্টেইনারের ভিতর ফ্লেক্স কন্টেন্ট গুলোর অবস্থান পরিবর্তন করতে পারেনঃ
kt_satt_skill_example_id=1858
আপনি margin: auto; সেট করে অতিরিক্ত জায়গা নেওয়ার মাধ্যমে কন্টেইনারের ভিতর ফ্লেক্স কন্টেন্ট গুলোর অবস্থান পরিবর্তন করতে পারেনঃ
kt_satt_skill_example_id=1859
আপনি margin: auto; ব্যবহার করে কন্টেইনারের ভিতর ফ্লেক্স কন্টেন্টকে যথাযথভাবে কেন্দ্রে অবস্থান করাতে পারেনঃ
kt_satt_skill_example_id=1860
আপনি flex প্রোপার্টি ব্যবহার করে কন্টেইনারের ভিতর ফ্লেক্স কন্টেন্ট গুলোর দৈঘ্য এবং প্রস্থ পরিবর্তন করতে পারেনঃ
kt_satt_skill_example_id=1861
নিম্নের উদাহরণ গুলোতে মিডিয়া কুয়েরি ব্যবহার দেখানো হয়েছে।
নিম্নের উদাহরনে লিস্ট আইটেমের নাম গুলো ই-মেইল লিংক হিসেবে ব্যবহার করা হয়েছেঃ
kt_satt_skill_example_id=1814
যখন ব্রাউজারের স্ক্রিন সাইজ 300px থেকে 500px হবে তখন প্রত্যেকটি ই-মেইলের লিংকের সাথে ই-মেইল আইকন প্রদর্শন করবেঃ
kt_satt_skill_example_id=1815
যখন ব্রাউজারের স্ক্রিন সাইজ 700px থেকে 900px হবে তখন প্রত্যেকটি ই-মেইলের লিংকের সাথে ই-মেইল আইকনের পরিবর্তে টেক্সট প্রদর্শন করবেঃ
kt_satt_skill_example_id=1816
যখন ব্রাউজারের স্ক্রিন সাইজ 900px থেকে বেশী হবে তখন প্রত্যেকটি ই-মেইলের লিংকের সাথে ই-মেইল আইকন এবং টেক্সটের পরিবর্তে ই-মাইলের ঠিকানাটি প্রদর্শন করবে। এইক্ষেত্রে ব্যক্তির নামের সাথে ই-মেইলের ঠিকানা যুক্ত করার জন্য আমরা data- এট্রিবিউটটি ব্যবহার করবোঃ
kt_satt_skill_example_id=1817
আরও দেখুন...
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
