Skill Development
On This Page

সিএসএস৩ & এডভান্স সিএসএস (CSS3 & Advance CSS)


 

Content added By

সিএসএস৩ পরিচিতি (CSS3 Intro)


সিএসএস একটি প্রোগ্রামিং ভাষা যা এইচটিএমএল ডকুমেন্টকে সুদর্শনীয় করে তোলার জন্য ব্যবহৃত হয়।

আর সিএসএস(৩) হলো এই ক্যাসকেডিং স্টাইল শীট(CSS) ভাষার সর্বশেষ ভার্সন। সিএসএস(২) কে সম্প্ররসারিত করার লক্ষ্যেই মূলত সিএসএস(৩) এর আবির্ভাব।

সুতরাং দীর্ঘ-প্রতীক্ষার পর সিএসএস(৩) ডেভেলপারদের কাছে অনেক নতুনত্ব নিয়ে হাজির হয়। যেমন- সিএসএস(৩) তে rounded corners, shadows, gradients, transitions, animations, multi-columns, flexible box এবং media query ইত্যাদি নতুন নতুন বৈশিষ্ট্য যুক্ত হয়েছে। এছাড়া সিএসএস(৩) পূর্ববর্তী ভার্সনগুলোর সাথেও সম্পূর্ণ সামঞ্জস্যপূর্ণ।

আমাদের টিউটিরিয়ালের সিএসএস(৩) অংশে উপরোক্ত উপাদানগুলো নিয়ে আমরা বিস্তারিত আলোচনা করবো।


সিএসএস(৩) মডিউল-সমূহ

সিএসএস(৩) কে বিভিন্ন মডিউলে বিভক্ত করা হয়েছে। সিএসএস(২) এর বৈশিষ্ট্যসহ আরো কিছু নতুন বৈশিষ্ট্যের সমন্বয়ে সিএসএস(৩) মডিউলগুলো তৈরি করা হয়েছে।

নিম্নে সিএসএস(৩) এর কিছু গুরুত্বপূর্ণ মডিউল তুলে ধরা হলোঃ

সিলেক্টরবক্স মডেলব্যাকগ্রাউন্ড
বর্ডারইমেজ ভ্যালুটেক্সট ইফেক্ট
2D/3D ট্রান্সফর্মেশনএনিমেশনমাল্টি কলাম লে- আউট

সিএসএস(৩) এর নতুন প্রোপার্টিসমূহের অধিকাংশই সকল মডার্ন ওয়েব ব্রাউজারে সাপোর্ট করে।

Content added By

সিএসএস৩ রাউন্ডেড কর্ণার (CSS3 Rounded Corner)


বৃত্তাকার ইবৃত্তাকার ইমেজ!মেজ!বৃত্তাকার ইমেজ!

সিএসএস(৩) বৃত্তাকার কর্ণার

আপনি কোনো ইমেজ বা একাধিক

ব্যবহার করা ছাড়াই যেকোনো এলিমেন্ট অথবা টেক্সটে বৃত্তাকার বর্ডার বা কর্ণার দিতে পারবেন। সিএসএস(৩) border-radius প্রোপার্টির মাধ্যমে আপনি এই কাজটি খুব সহজেই করতে পারেন।


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

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=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

 

Content added || updated By

সিএসএস৩ বর্ডার ইমেজ (CSS3 Border Image)


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

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

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


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


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

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

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

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

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

Border

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

নোটঃ কোনো এলিমেন্টে 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

Content added || updated By

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



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


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

সিএসএস(৩) 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


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

Content added || updated By

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


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

সিএসএস(৩) আসার পূর্বে সিএসএসে শুধুমাত্র কালারের নাম, হেক্সাডেসিমাল এবং 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


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


 

Content added || updated By

সিএসএস৩ কালার কিওয়ার্ড (CSS3 Color Keyword)

Please, contribute to add content into সিএসএস৩ কালার কিওয়ার্ড (CSS3 Color Keyword).
Content

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


সিএসএস(৩) গ্রেডিয়েন্ট দুই বা ততোধিক কালারের মধ্যে প্রগতিশীল পরিবর্তন(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


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


 

Content added || updated By

সিএসএস৩ স্যাডো (CSS3 Shadow)

সিএসএস(৩) 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


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

Content added || updated By

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


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


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


সিএসএস(৩) 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 প্রোপার্টি অপেরা ১২ এবং পূর্ববর্তী ভার্সনে সাপোর্ট করে না।


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

 

Content added || updated By

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


@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

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

Content added By

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


এই অধ্যায়ে আপনি 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

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


সিএসএস(৩) 3D ট্রান্সফর্মেশন এর মাধ্যমে একটি এলিমেন্টেকে ত্রিমাত্রিকভাবে পরিবর্তন করা যায়।


এক নজরে সিএসএস 3D ট্রান্সফর্ম প্রোপার্টিসমূহ


সিএসএস(৩) 3D ট্রান্সফর্ম

এই অধ্যায়ে আপনি নিম্নলিখিত 3D ট্রান্সফর্ম মেথড সম্পর্কে জানতে পারবেনঃ


rotateX(), rotateY() এবং rotateZ() মেথড

rotateX() মেথড একট এলিমেন্টকে প্রদত্ত ডিগ্রী অনুসারে তার X-অক্ষের চারপাশে ঘুরাবেঃ

rotateY() মেথড একট এলিমেন্টকে প্রদত্ত ডিগ্রী অনুসারে তার Y-অক্ষের চারপাশে ঘুরাবেঃ

rotateZ() মেথড একট এলিমেন্টকে প্রদত্ত ডিগ্রী অনুসারে তার Z-অক্ষের চারপাশে ঘুরাবেঃ

kt_satt_skill_example_id=1617

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

Content added By

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


সিএসএস(৩) ট্রানজিশন প্রোপার্টি গুলোকে একটা প্রদত্ত সময় কাল ধরে (অন্য এক মান থেকে) মসৃণভাবে পরিবর্তন করে।

উদাহরণ: সিএসএস(৩) ট্রানজিশন ইফেক্ট দেখার জন্য নিচের এলিমেন্টের উপর মাউস হোভার করুন

ট্রাঞ্জিশন

 


সিএসএস(৩) ট্রানজিশন প্রোপার্টি

নিচের টেবিলে সকল ট্রানজিশন প্রোপার্টি দেখানো হল :


সিএসএস(৩) ট্রানজিশন কিভাবে ব্যবহার করা হয় ?

একটি ট্রানজিশন ইফেক্ট তৈরি করতে আপনাকে অবশ্যই দু'টি বিষয় নির্দিষ্ট করতে হবে

  • একটি সিএসএস প্রোপার্টি যেটাতে আপনি ইফেক্ট যুক্ত করতে চান
  • ইফেক্টের সময়কাল।

নোট : যদি সময়ব্যাপ্তি নির্ধারণ করা না হয় তবে ইফেক্টের কোন ট্রানজিশন হবে না কারণ এটির ডিফল্ট মান 0 থাকে।

নিচের উদাহরণে দেখানো হয়েছে একটি 120px * 120px সবুজ

এলিমেন্ট। এই
এলিমেন্ট এ width প্রোপার্টির ট্রানজিশন ইফেক্ট যুক্ত করা হয়েছে যার সময়ব্যাপ্তি ৩ সেকেন্ড অর্থাৎ ইফেক্টটি ৩ সেকেন্ড ধরে কাজ করবে :

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


বিলম্ব (Delay) ট্রানজিশন ইফেক্ট

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


নোটঃ উপরের উদাহরণগুলো ইন্টারন্টে এক্সপ্লোরার ৯ এবং আগের ভার্সনে কাজ করবে না।


ট্রানজিশনের জন্য ব্রাউজার সাপোর্ট

টেবিলের নাম্বার গুলো নির্দেশ করে ব্রাউজারের প্রথম ভার্সন, যেটি প্রোপার্টিকে সম্পুর্নভাবে সাপোর্ট করে।

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


 

Content added || updated By

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


সিএসএস(৩) এনিমেশন

আপনি জাভাস্ক্রিপ্ট ব্যবহার করা ছাড়া অধিকাংশ এইচটিএমএল এলিমেন্টকে সিএসএস(৩) এনিমেশন দ্বারা প্রাণবন্ত করে তুলতে পারেন।

এনিমেশন
Animation


সিএসএস(৩) এনিমেশন প্রোপার্টি

নিচের টেবিলে @keyframes এবং সকল এনিমেশন প্রোপার্টি গুলো দেওয়া হলোঃ


এনিমেশন কি?

এনিমেশন দ্বারা একটি এলিমেন্টকে এক স্টাইল থেকে অন্য স্টাইলে পরিবর্তন করা যায়। আপনি আপনার ইচ্ছে মত প্রোপার্টিকে যতবার চাইবেন ততবার পরিবর্তন করতে পারবেন।

সিএসএস(৩) এনিমেশন ব্যবহার করতে হলে এনিমেশনের জন্য প্রথমে আপনাকে কিছু প্রোপার্টি নির্দিষ্ট করে দিতে হবে। আর এই প্রোপার্টি গুলো 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


বিলম্ব(Delay) এনিমেশন

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

বিশেষ দ্রষ্টব্যঃ উপরের উদাহরণগুলো ইন্টারনেট এক্সপ্লোরার ৯ এবং তার পূর্বের ভার্সনে কাজ করে না


Content added || updated By

সিএসএস৩ স্টাইল ইমেজ (CSS3 Style Image)

Please, contribute to add content into সিএসএস৩ স্টাইল ইমেজ (CSS3 Style Image).
Content

সিএসএস৩ ইমেজ রিফ্লেকশন (CSS3 Image Reflection)

Please, contribute to add content into সিএসএস৩ ইমেজ রিফ্লেকশন (CSS3 Image Reflection).
Content

সিএসএস৩ অবজেক্ট-ফিট (CSS3 object-fit)

Please, contribute to add content into সিএসএস৩ অবজেক্ট-ফিট (CSS3 object-fit).
Content

সিএসএস৩ অবজেক্ট-পজিশন (CSS3 object-position)

Please, contribute to add content into সিএসএস৩ অবজেক্ট-পজিশন (CSS3 object-position).
Content

সিএসএস৩ মাস্কিং (CSS3 Masking)

Please, contribute to add content into সিএসএস৩ মাস্কিং (CSS3 Masking).
Content

সিএসএস৩ বাটন (CSS3 Button)


সিএসএস(৩) দ্বারা আপনি একটি বাটনে আপনার পছন্দমত স্টাইল করতে পারেন। আমরা এই অধ্যায়ে দেখবো কিভাবে সিএসএস ব্যবহার করে বাটনের স্টাইল করা যায়।


বেসিক বাটন স্টাইল

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


ডিজেবল(Disable) বাটন

একটি বাটনকে ডিজেবল এর মত দেখানোর জন্য বাটনে 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

 

Content added || updated By

সিএসএস৩ পেজিনেশন (CSS3 Pagination)


সিএসএস(৩) ব্যবহার করে আপনি বিভিন্ন স্টাইলের পেজিনেশন তৈরি করতে পারেন। তবে এর মধ্যে সব চেয়ে কার্যকরী হচ্ছে রেস্পন্সিভ পেজিনেশন তৈরি করা। আমরা এই অধ্যায়ে শিখবো কিভাবে একটি রেস্পন্সিভ পেজিনেশন তৈরি করা যায়।


সাধারণ পেজিনেশন

যদি আপনার অসংখ্য পেইজের একটি ওয়েবসাইট থাকে তাহলে আপনি প্রত্যেকটি পেইজে পেজিনেশন যুক্ত করতে চাইবেনঃ

চলুন পেজিনেশন তৈরি করার জন্য একটি এইচটিএমএল লিস্টকে স্টাইল করিঃ

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


ব্রেডকার্ম্ব(Breadcrumbs)

পেজিনেশনের আরেকটি ধরণকে বলে "ব্রেডকার্ম্ব"। নিম্নে আমরা দেখবো কিভাবে একটি ব্রেডকার্ম্ব তৈরি করবেনঃ

kt_satt_skill_example_id=1768

 

Content added || updated By

সিএসএস৩ মাল্টি-কলাম (CSS3 Mult-column)


সিএসএস(৩) মাল্টিপল কলাম লেআউট

আপনি সিএসএস(৩) মাল্টিপল কলাম লেআউট ব্যবহার করে আপনার ওয়েব পেজে সহজে খবরের কাগজের মত একাধিক কলাম লিখতে পারবেনঃ



সিএসএস(৩) মাল্টিপল কলাম প্রোপার্টি

নিম্নের টেবিলে সকল মাল্টিপল কলাম প্রোপার্টিগুলো দেখানো হলঃ

সিএসএস(৩) মাল্টিপল কলাম তৈরি

একটি এলিমেন্টকে কয়টি কলামে বিভক্ত করবে তা 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


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

Content added || updated By

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


সিএসএস(৩) ইউজার ইন্টারফেস ব্যবহৃত যেকোনো এলিমেন্টকে একজন ইউজার তার নিজের ইচ্ছামত পরিবর্তন করতে পারবে। সিএসএস(৩) তে অনেক ধরণের ইউজার ইন্টারফেস প্রোপার্টি রয়েছে। যেমন- resize, appearance, box-sizing, icon, outline-offset, nav-up, nav-down, nav-left, nav-right ইত্যাদি।

এই অধ্যায়ে আমরা ইউজার ইন্টারফেসের resize এবং outline-offset প্রোপার্টিগুলো নিয়ে আলোচনা করবোঃ


এক নজরে ইউজার ইন্টারফেস প্রোপার্টি


সিএসএস(৩) resize প্রোপার্টি

আপনার পেজের কোনো এলিমেন্টের আকার ব্যবহারকারী পরিবর্তন করতে পারবে কিনা তা নির্ধারণ করতে resize প্রোপার্টি ব্যবহার করুন।

নিম্নের উদাহরণে একজন ব্যবহারকারী < div> এলিমেন্টটির শুধুমাত্র প্রস্থ পরিবর্তন করতে পারবেঃ

kt_satt_skill_example_id=1769

নিম্নের উদাহরণে একজন ব্যবহারকারী < div> এলিমেন্টটির শুধুমাত্র উচ্চতা পরিবর্তন করতে পারবেঃ

kt_satt_skill_example_id=1770

নিম্নের উদাহরণে একজন ব্যবহারকারী

এলিমেন্টটির উচ্চতা এবং প্রস্থ উভয়ই পরিবর্তন করতে পারবেঃ

kt_satt_skill_example_id=1771


সিএসএস(৩) আউটলাইন অফসেট

একটি এলিমেন্টের বর্ডার এবং আউটলাইনের মধ্যে দূরত্ব নির্ধারণ করতে outline-offset প্রোপার্টি ব্যবহার করা হয়।

আউটলাইন বর্ডার থেকে তিনটি কারণে ভিন্ন হয়ঃ

  • আউটলাইন হচ্ছে এলিমেন্টের চারপাশে একটি লাইন যা বর্ডারের বাইরে অবস্থান করে।
  • আউটলাইন জায়গা দখল করে না।
  • আউটলাইন সর্বদা চতুর্ভুজ আকৃতির হয় না।

নিম্নের উদাহরণে বর্ডার এবং আউটলাইনের মাঝে ২০ পিক্সেল দূরত্ব তৈরি করার জন্য outline-offset প্রোপার্টি ব্যবহার করা হয়েছেঃ

kt_satt_skill_example_id=1772


Content added By

সিএসএস৩ বক্স সাইজিং (CSS3 Box Sizing)


একটি এলিমেন্টের মোট উচ্চতা এবং প্রস্থের সাথে প্যাডিং এবং বর্ডার যুক্ত করে এলিমেন্টের সাইজ নির্ধারণ করতে সিএসএস(৩) box-sizing প্রোপার্টি ব্যবহার করা হয়।


এক নজরে বক্স সাইজিং প্রোপার্টি


সিএসএস(৩) বক্স সাইজিং প্রোপার্টি ব্যবহার না করলে কি ঘটে?

এলিমেন্ট এর প্রস্থ এবং উচ্চতা নিম্নের ন্যায় গননা করেঃ

  • প্রস্থ + প্যাডিং + বর্ডার = একটি এলিমেন্টের সম্পূর্ণ প্রস্থ
  • উচ্চতা + প্যাডিং + বর্ডার = একটি এলিমেন্টের সম্পূর্ণ উচ্চতা

অর্থাৎ আপনি যদি box-sizing প্রোপার্টি না ব্যবহার করেন তাহলে একটি এলিমেন্টের সাথে ডিফল্টভাবে বর্ডার ও প্যাডিং যুক্ত হবে এবং আপনার কাংখিত প্রস্থ ও উচ্চতা থেকে ফলাফল ভিন্ন হবে।

নিম্নের উদাহরণে একই উচ্চতা এবং প্রস্থের সাথে প্যাডিং যুক্ত এবং প্যাডিং ব্যতীত দুটি

এলিমেন্ট দেখানো হলোঃ

kt_satt_skill_example_id=1780

তাই দীর্ঘ সময় ধরে ওয়েব-ডেভেলপারদেরকে প্রয়োজনের তুলনায় কম প্রস্থ এবং উচ্চতা নির্ধারণ করতে হত। কারণ তাদেরকে প্যাডিং এবং বর্ডারের মান বাদ দিয়ে হিসাব করতে হত। এই সমস্যার সমাধান হিসেবে সিএসএস(৩) box-sizing প্রোপার্টির উৎপত্তি হয়


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

একটি এলিমেন্টের মোট প্রস্থ এবং উচ্চতার মধ্যে প্যাডিং এবং বর্ডার যুক্ত করে এলিমেন্টের সাইজ নির্ধারণ করতে সিএসএস(৩) box-sizing প্রোপার্টি ব্যবহার করা হয়।

আপনি যদি একটি এলিমেন্টে box-sizing: border-box; সেট করেন তাহলে ঐ এলিমেন্টে সেটকৃত সাইজ(width এবং height) এর সাথে প্যাডিং এবং বর্ডারও যুক্ত হবেঃ

kt_satt_skill_example_id=1781

box-sizing: border-box; এর ব্যবহার অনেক বেশি সুবিধাজনক হওয়া অধিকাংশ ডেভেলপার তাদের ওয়েব-পেইজের সকল এলিমেন্টেই এটি ব্যবহার করে থাকে।

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

Content added By

সিএসএস৩ ফ্লেক্সবক্স (CSS3 Flexbox)


ফ্লেক্সবক্স হচ্ছে সিএসএস(৩) এর নতুন লেআউট। পেজ লেআউট যখন বিভিন্ন সাইজের স্ক্রিন এবং বিভিন্ন ডিভাইসে প্রদর্শিত হবে তখন এলিমেন্ট গুলোকে পূর্ব নির্ধারিত নকশা অনুযায়ী প্রদর্শন করানোর জন্য সিএসএস(৩) ফ্লেক্সবক্স ব্যবহার করা হয়।

ফ্লেক্স কন্টেইনার এবং ফ্লেক্স কন্টেন্ট নিয়ে গঠিত হয় ফ্লেক্সবক্স। একটি কন্টেইনারকে ফ্লেক্সে রূপান্তর করতে উক্ত এলিমেন্টের 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 প্রোপার্টি ব্যবহার করে একটি ফ্লেক্সিবল কন্টেইনারের সকল কন্টেন্ট গুলোকে অনুভূমিক ভাবে সাজাতে পারবেন।

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 প্রোপার্টি ব্যবহার করে একটি ফ্লেক্সিবল কন্টেইনারের সকল কন্টেন্ট গুলোকে উলম্ব ভাবে সাজাতে পারবেন।

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 প্রোপার্টি

আপনি 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 প্রোপার্টি

আপনি 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

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

Content added || updated By

সিএসএস৩ মিডিয়া কুয়েরি (CSS3 Media Query)


নিম্নের উদাহরণ গুলোতে মিডিয়া কুয়েরি ব্যবহার দেখানো হয়েছে।

নিম্নের উদাহরনে লিস্ট আইটেমের নাম গুলো ই-মেইল লিংক হিসেবে ব্যবহার করা হয়েছেঃ

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


 

Content added By

সিএসএস৩ মিডিয়া কুয়েরি উদাহরণ (CSS3 Media Query Example)

Please, contribute to add content into সিএসএস৩ মিডিয়া কুয়েরি উদাহরণ (CSS3 Media Query Example).
Content

আরও দেখুন...

Promotion