সিএসএস (CSS)

 

  • CSS টিউটোরিয়াল (প্রাথমিক ধারণা ও সহজ একটি প্রজেক্ট)

ধাপে ধাপে সিএসএস টিউটরিয়াল শেখার প্রথম ক্লাসে সবাইকে স্বাগতম। এইচটিএমএল টিউটরিয়ালের পর এবার সবাইকে নিয়ে বসলাম সিএসএস (CSS) ক্লাসে। কলেজে পড়ার সময় দু’একটা টিউশনি করার মাধ্যমে যে শিক্ষকতা শুরু করেছিলাম তার অভ্যাস না ছাড়তে পারার কারনেই হয়তো টিউটরিয়ালবিডিতে লিখছি। তবে যে কথাটা সবাইকে বলতে চাই তা হলো-HTML এর উপর অসিম যে টিউটরিয়াল লিখেছেন তাতে সবাই অংশগ্রহন ছাড়া (বা HTMLজ্ঞান ছাড়া) এই টিউটরিয়াল বুঝতে পারবেন না। তাই এক পলকে দেখে নেই সেই টিউটরিয়ালগুলো। সম্পূর্ণ প্রতিবেদনটি দেখতে ক্লিক করুন

 

  • সিএসএস সিন্টেক্স (কোড লেখার নিয়ম কানুন)

সিএসএস এর দ্বিতীয় ক্লাসে সবাইকে স্বাগতম। এ পর্বে সিএসএস কোডের id, ও class কিভাবে এইচটিএমএল এর সাথে কাজ করে তা দেখবো। আগের পর্ব যারা দেখেন নি তারা CSS এর প্রথম পর্ব দেখে নিন। তাছাড়া আলাদা CSS ফাইল আকারে কিভাবে প্রকাশ করা হয় এবং তা HTML এ প্রকাশ করার পদ্ধতিও দেখবো। সম্পূর্ণ প্রতিবেদনটি দেখতে ক্লিক করুন
 

  • CSS কোড ব্যবহার করে টেক্সটা স্টাইল

ফটোশপে টেক্সটা স্টাইল তো অনেকে করেন। এইবার একটু শুধু সিএসএস কোড ব্যাবহার করে টেক্সটা স্টাইল করি কি বলেন। এই স্টাইল গুলো মূলত পোষ্ট এর টাইটেল, ওয়েব হেডার, বিভিন্ন প্রকারের লিংক এর ক্ষেত্রে ব্যাবহার করা হয়। সম্পূর্ণ প্রতিবেদনটি দেখতে ক্লিক করুন

 

  • CSS 3 দিয়ে Gradient এর ব্যবহার

ফটোশপে কাজ করেছেন অথচ Gradient এর নাম শোনেন নি। এমন কেউ থাকতে পারে বলে আমি বিশ্বাস করি না। এই সুবিধা এখন শুধু CSS ব্যাবহার করেই পাওয়া যাবে। তাই ভাবলাম এই নিয়ে একটা টিউটোরিয়ল লিখি। সামনের টিউটোরিয়ার গুলোতে এর ব্যাবহার বুঝতে পারবেন। সম্পূর্ণ প্রতিবেদনটি দেখতে ক্লিক করুন

 

  • CSS দিয়ে আরও কয়েকটি টেক্সটা স্টাইল

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

 

  • ফটোশপ এবং CSS দিয়ে হোভার এনিমেশন যুক্ত বাটন তৈরি

বেশ অনেক দিন থেকেই ভাবছি এবং বলছি PSD থেকে CSS কোডিং এর ওপর টিউটোরিয়াল লিখবো। কিন্তু আঁতি-পাতি করতে করতে আর করা হয়ে উঠে না। তো যাইহোক আমি আজ খুব সাধারণ এটা টিউটোরিয়াল লিখবো ফটোশপ থেকে CSS কোডিং এর বেপারে। এই বিষয় গুলো নিয়ে যারা ঘাঁটা ঘাটি করেন। তারা হয়তো এই ধরেনের প্রজেক্ট অন্য কোন ইংরেজি ব্লগ থেকে করে থাকবেন। আজকের প্রজেক্ট হোভার (hover) যুক্ত বাটন তৈরি করা। সম্পূর্ণ প্রতিবেদনটি দেখতে ক্লিক করুন

 

  • তৈরি করুন আপনার নিজের চ্যাট সিস্টেম

ওয়েবসাইটে চ্যাট অনেকেই সংযুক্ত করতে চান। বিভিন্ন চ্যাট সাইট থেকে বিভিন্ন কোড জেনারেট করে ব্যবহার করেন অনেকে। এতে সাইটের স্পীড কমে যায়। আজ আমি আপনাদের এমন একটি চ্যাট সিস্টেম দেখাব যেখানে সাইট বিন্দুমাত্র স্লো হবে না। সম্পূর্ণ প্রতিবেদনটি দেখতে ক্লিক করুন

 

  • ফ্রি ব্লগারের হোমপেজে গ্যালারি স্টাইল পোস্ট দেখানো (শুধুমাত্র CSS দিয়ে)

আমি যখন নতুন ছিলাম তখন টেম্পলেট ডাউনলোড করার সময় লক্ষ্য করতাম গ্যালারি থিম গুলোকে। এগুলোর প্রথম পাতায় পোস্ট দেখানোর ধরণটা খুব ভালো লাগতো।  ভাবতাম এগুলো কেমন করে করে! তবে যখন একটু CSS নিয়ে ঘাটা ঘাটি করলাম তখন বুঝলাম এটা খুব একটা কঠিন কাজ নয়। সম্পূর্ণ প্রতিবেদনটি দেখতে ক্লিক করুন

 

  • ফ্রি ব্লগারের জন্য ৩টি টপ মেনু

ক’দিন আগে আমি একটা টিউটোরিয়াল লিখেছিলাম যে “নিজের ওয়েব সাইটের আকর্ষণীয় ড্রপ ডাউন মেনু তৈরি করি শুধুমাত্র HTML আর CSS দিয়ে ২ “। এখানে আজগর ভাই মন্তব্য করেছিল যে এটা ফ্রি ব্লগারে লাগানো যাবে কিনা। আমি একটা রিপ্লাই দিয়েছিলাম অবশ্য তবে সেটা যথেষ্ট ছিল না। তাই একটা টিউটোরিয়াল নিয়ে বসলাম ফ্রি ব্লগারে টপ মেনু লাগানোর পদ্ধতি। সম্পূর্ণ প্রতিবেদনটি দেখতে ক্লিক করুন

 

  • নিজের ওয়েব সাইটের আকর্ষণীয় ড্রপ ডাউন মেনু তৈরি করি শুধুমাত্র HTML আর CSS দিয়ে

আজ টিউটোরিয়াল বিডিতে CSS বিভাগের পোষ্ট গুলো ঘুরে দেখতে ছিলাম। এখানে অসীম ভাই একটা পোষ্টে আমার চোখ আটকে যায়। পোষ্ট’টা হল, “নিজের ওয়েব সাইটের আকর্ষণীয় ড্রপ ডাউন মেনু তৈরি করি শুধুমাত্র HTML আর CSS দিয়ে” পোষ্টা আমার খুব ভালো লাগে। সম্পূর্ণ প্রতিবেদনটি দেখতে ক্লিক করুন

 

  • সিএসএস৩ এর ছয়টি টুলস

CSS3 ব্যবপক জনপ্রিয়তা অর্জনকরেছে। সিএসএস৩ এর একটা সমস্যা হলো সব ব্রাউজার এখনো সাপোর্ট করে না। কাজের সুবিধার জন্য এখানে সিএসএস তিন এর ছয়টি ওয়েব টুলের বর্ণনা দেওয়া হলো। এ টুলসগুলো ব্যবহারে সহজেই কোডিং করতে সহায়ক হবে বলে আমি মনে করি। সম্পূর্ণ প্রতিবেদনটি দেখতে ক্লিক করুন

 

  • ২০ টি সিএসএস টুলস

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

 

  • সিএসএস-৩ এর জাদুর ছোয়ায়

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

 

  • নিজের ওয়েব সাইটের আকর্ষণীয় ড্রপ ডাউন মেনু তৈরি করি শুধুমাত্র HTML আর CSS দিয়ে

আমি আগের একটি টিউটোরিয়ালে দেখিয়ে ছিলাম কিভাবে একটা আকর্ষনীয় নেভিগেশন বার তৈরি করা যায়। আজ আমরা কিভাবে শুধুমাত্র HTML আর CSS দিয়ে আকর্ষনীয় ড্রপ ডাউন মেনু তৈরি করা যায় দেখব। সম্পূর্ণ প্রতিবেদনটি দেখতে ক্লিক করুন

 

  • সহজেই বানিয়ে ফেলি ছবির গ্যালারী: সিএসএস টিউটোরিয়াল - ৬

আজ আমরা একটি ছবির গ্যালারী তৈরীর কাজে হাত দিব। টিউটরিয়ালের স্বার্থে সহজ সরল একটি প্রজেক্ট বানাবো। অবশ্য এই কাজটি করতে হলে যতটা CSS ও HTML জ্ঞান থাকা দরকার তা আহোরন করে হাত দেয়া উচিত। আমাদের CSS HTML টিউটরিয়ালগুলো অনুসরনের মাধ্যমে কাজটি সহজ হবে। সম্পূর্ণ প্রতিবেদনটি দেখতে ক্লিক করুন

 

  • সিএসএস-৩ দিয়ে গ্রাডিয়েন্ট তৈরী

অনেক আগে থেকেই গ্রাডিয়েন্টের কাজটি ব্যাগ্রাউন্ডের ছবির মাধ্যমে করার প্রচলন চলে আসছি। ছবির মাধ্যমে গ্রাডিয়েন্ট বানানোটা রীতিমতো দিন দিন bad practise এ পরিনত হচ্ছে। টুটপ্লাসের নিচের ভিডিওতে ছোট প্রজেক্টটি দেখুন। সম্পূর্ণ প্রতিবেদনটি দেখতে ক্লিক করুন

 

  • CSS দিয়ে তৈরী করি নিজের ওয়েব সাইটের আকর্ষণীয় নেভিগেশন বার!

আমার একটা সুন্দর এবং জনপ্রিয় ওয়েব সাইট আছে! এই উক্তিটুকু কারো কাছে স্বপ্ন আবার অনেকের কাছেই সত্যি। কিন্তু কেমন ওয়েব সাইটকে আমরা সুন্দর বলব? এ প্রসঙ্গে প্রথমেই বলতে হয় যে ওয়েব সাইটের  সুন্দর, পরিচ্ছন্ন তথ্যসমৃদ্ধ এবং আকর্ষনীয় নেভিগেশন বার রয়েছে । আমার বিশ্বাস এ ব্যপারে অন্য কারা দ্বিমত থাকার কথা নয়। শুধু তাই নয় একটি ভালো নেভিগেশন বার যে কোন ওয়েব সাইটকে সার্চ ইন্জিনে সহজে খুজে পেতেও গুরুত্বপূণর্ণ ভুমিকা পালন করে। সম্পূর্ণ প্রতিবেদনটি দেখতে ক্লিক করুন

 

  • সিএসএস ১০ টি টিপস দেখুন

কারনে অকারনে ছেলেবেলায়, ছাত্র জীবনে আর চাকুরী জীবনে বক্তব্য শুনতে হয়েছে অনেকবার। একটা কথা শুনেছি বেশি-তা হচ্ছে -”বেশি কিছু বলবো না” যারা এই কথা দিয়ে বক্তব্য শুরু করে তাদের বক্তব্যই বিরক্তকর লম্বা হয়। যাই হোক কিছুদিন আগে CSS টিউটরিয়াল (প্রাথমিক ধারণা ও সহজ একটি প্রজেক্ট)এর মাধ্যমে যে টিউটরিয়ালগুলো শুরু করেঝিলাম তা অনেকটা শেষ পর্যায়ে এসে পরেছে। এই সময়ে নতুন কোন আইডিয়ার দিকে হাত না বাড়িয়ে টিপসের দিকেই মনোযোগ দেই। সম্পূর্ণ প্রতিবেদনটি দেখতে ক্লিক করুন

 

  • সুন্দর সুন্দর বক্স মডেল

এ টিউটরিয়ালটি প্রাথমিক পর্যায়ের শিক্ষার্থীদের জন্য যারা সিএসএস এ সুন্দর সুন্দর বক্স মডেল বানাতে চান। আজ কাল প্রায় সব ওয়েব সাইটই সিএসএস বেইজড। এবং সব সিএসএস বেইজড সাইটেই বক্স বানাতে হয়। আর এব্যাপারে পারদর্শিতার মাধ্যমে খুব সুন্দর সুন্দর ডিজাইন বানানো যায়। আর টেবিলকে বিদায় করেছে সিএসএস এর বক্স মডেলই। সম্পূর্ণ প্রতিবেদনটি দেখতে ক্লিক করুন

 

  • ব্যাকগ্রাউন্ড ও টেক্সটের ডিজাইনে আনুন নতুন মাত্রা

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


২৫ বছরে ১৮ সন্তানের জননী!
সর্বপ্রথম পোর্টেবল দ্বীপ
বিদেশিনীর বাংলা প্রেম
জুতার গাছ!
exam
নির্বাচিত প্রতিবেদন
exam
সুমাইয়া শিমু
পিয়া বিপাশা
প্রিয়াংকা অগ্নিলা ইকবাল
রোবেনা রেজা জুঁই
বাংলা ফন্ট না দেখা গেলে মোবাইলে দেখতে চাইলে
how-to-lose-your-belly-fat
guide-to-lose-weight
hair-loss-and-treatment
how-to-flatten-stomach
fat-burning-foods-and-workouts
 
সেলিব্রেটি