Archive For The: 'সিএসএস' Category

সাইট রেস্পনসিভ নিয়ে কিছু কথা

সম্প্রতি গুগল তার সার্চ ইঞ্জিন র‍্যাকিং-এ মোবাইল ফ্রেন্ডলী সাইটের অগ্রাধিকার দিয়েছে। অর্থাৎ যেসব সাইট রেস্পনসিভ বা মোবাইল ফ্রেন্ডলী সেগুলো র‍্যাঙ্কিং এ প্রাধান্য পাবে। এতে অনেক পুরনো সাইট এর র‍্যাঙ্ক কমে যাবে যদিও তার কন্টেন্ট অনেক ভাল। এ কারনে সাইটের owner রা তাদের সাইটকে মোবাইল ফ্রেন্ডলী করার জন্য কার্যক্রম শুরু করে দিয়েছেন। যার কারনে মার্কেটপ্লেসগুলোতে রেস্পনসিভ বিস্তারিত পড়ুন →

LESS এবং SASS স্টাইলশীট কি?

LESS এবং SASS/SCSS হচ্ছে ডাইন্যামিক স্টাইলশীট। আর CSS হচ্ছে স্ট্যাটিক বা ম্যানুয়াল স্টাইলশীট, মানে সকল কোড ব্লক, সিনট্যাক্স আপনাকেই লিখতে হবে। অনেক আগে থেকে CSS এর ব্যবহার হচ্ছে কিন্তু বর্তমানে ওয়েব এর ইন্টেরেক্টিভিটি বাড়াতে এবং অল্প এবং রি-ইউজ্যাবল (পূনরায় ব্যবহার করা যায় এমন) ভ্যারিয়্যাবল এবং মিক্সিন ক্লাস তৈরির মাধ্যমে কোডিং করে অনেক কাজ সম্পন্ন করতে ডাইন্যামিক বিস্তারিত পড়ুন →

যারা ওয়েব ডিজাইন করে থাকেন তারা ফন্ট নিয়ে সমস্যায় পড়েন। কোন ফন্ট দিয়ে কোনটি ডিজাইন করলে সুন্দর দেখাবে তা নিয়ে চিন্তিত হয়ে পড়েন। তাদের জন্য এখানে কিছু টিপস দিলাম। আশা করি কাজে লাগবে। প্রথমে লেটারের স্ট্রাকচার নিয়ে বলি। 1 হল ASCENDER বা CAP HEIGHT. ক্যাপ হাইট হল আপারকেস লেটারের হাইট আর এসেন্ডার হল লোয়ারকেস লেটারের বিস্তারিত পড়ুন →

সিএসএস টিউটোরিয়ালঃ ১৫তম পর্ব(Custom List)

কাস্টম ইমেজ লিস্ট স্টাইল পেতে চান তবে সিএসএস প্রোপার্টি list-style-image:url() ব্যবহার করতে হবে। url এর পর রাউন্ড ব্রাকেট এর ভিতরে কাঙ্ক্ষিত ইমেজ এর রিসোর্স লিঙ্কটি দিতে হবে। আমি এখানে কয়েক ধরণের ইমেজ দিয়ে কাস্টম লিস্ট স্টাইল অ্যাপ্লাই করছি নিচের মতঃ [crayon-5a12a0468fa0d340260897/] Note: উপরের কোড টুকুর আউটপুট ব্রাউজার এ ঠিকমতো দেখায় কিনা সেটা প্রদর্শনের জন্য উইন্ডোজের বিস্তারিত পড়ুন →

সিএসএস টিউটোরিয়ালঃ ১৪তম পর্ব(Unordered List)

সিএসএস ধারাবাহিক টিউটোরিয়ালের এই পর্বে আলোচনা করবো Unordered List নিয়ে। সিএসএস দিয়ে Unordered লিস্ট স্টাইল পেলে হলে আপনাকে সিএসএস লিস্ট স্টাইল প্রোপার্টি list-style-type: value ব্যবহার করতে হবে। value তে Unordered list স্টাইল ভ্যালু circle, disc, square ব্যবহার করতে হবে। এবার একে একে লিস্ট আইটেম স্টাইল গুলো অ্যাপ্লাই করি নিচের মতঃ [crayon-5a12a0468ff26678068502/] Note: উপরের কোড টুকুর আউটপুট ব্রাউজার বিস্তারিত পড়ুন →

সিএসএস টিউটোরিয়ালঃ ১৩তম পর্ব(Ordered List)

সিএসএস ধারাবাহিক টিউটোরিয়ালের এই পর্বে আলোচনা করবো List নিয়ে। লিস্ট অর্থ তালিকা। এইচটিএমএল এ ৩ ধরনের লিস্ট রয়েছে। যেমনঃ ১. Ordered list, ২. Unordered list এবং ৩. Definition list. Ordered list গুলোর ক্রম হচ্ছে সংখ্যাবাচক যেমনঃ 1, 2, 3 বা এ্যালফাবেটিক যেমনঃ A, B, C বা a, b, c বা রোমান স্টাইল যেমনঃ i, ii, iii বিস্তারিত পড়ুন →

সিএসএস ধারাবাহিক টিউটোরিয়ালের এই পর্বে আলোচনা করবো টেক্সট এ্যালাইনমেন্ট নিয়ে। তো চলুন… Horizontal Text Alignment: কোন প্যারাগ্রাফ বা লাইনে ডান থেকে বায়ে লিখাকে পদবিন্যাস বা এ্যালাইন করাই হছে হরিজন্টাল এ্যালাইনমেন্ট। পদবিন্যাস করতে text-align প্রোপার্টি এবং ভ্যালু হিসেবে left/right/center/justify ব্যবহার করতে হবে। কোন ইলিমেন্টে এর ফন্ট স্টাইল দিতে নিচের স্টাইলটি অ্যাপ্লাই করতে হবেঃ [crayon-5a12a04690e94415050640/] Note: উপরের কোড বিস্তারিত পড়ুন →

সিএসএস ধারাবাহিক টিউটোরিয়ালের এই পর্বে আলোচনা করবো লাইন হাইট এবং টেক্সট ইনডেন্ট নিয়ে। তো চলুন… Line Height: একটি প্যারাগ্রাফ বা একাধিক লাইনের মধ্যে (টপ টু বোটম) স্পাসিং/ফাঁকা রাখার জন্য line-height প্রোপার্টি ইউজ করা হয় এবং ভ্যালু হিসেবে length measurement (px/in etc)/percentage (10% etc) অ্যাপ্লাই করতে হবে। মনে রাখতে হবে, কোন ইলিমেন্টের লাইন হাইট উক্ত ইলিমেন্টের ফন্ট বিস্তারিত পড়ুন →

সিএসএস ফন্ট এর এই পর্বে আলোচনা করবো ফন্ট ভেরিয়েন্ট এবং ফন্ট কালার নিয়ে। তো চলুন এই পর্ব শুরু করা যাক… Font Variant: কোন ইলিমেন্টে ফন্ট স্টাইলের ভেরিয়েশন দিতে font-variant প্রোপার্টি এবং ভ্যালুই হিসেবে normal/ small-caps অ্যাপ্লাই করতে হবে। এইচটিএমএল ইলিমেন্টে ফন্ট স্টাইলের ভেরিয়েশন অ্যাপ্লাই করতে নিচের মত কোড লিখুন। [crayon-5a12a04691a59525054324/] Note: উপরের কোড টুকুর আউটপুট ব্রাউজার বিস্তারিত পড়ুন →

সিএসএস টিউটোরিয়ালঃ ৯ম পর্ব(ফন্ট ওয়েট এবং ফন্ট স্টাইল)

সিএসএস ফন্ট এর এই পর্বে আলোচনা করবো ফন্ট ওয়েট এবং ফন্ট স্টাইল নিয়ে। তো চলুন… Font weight: কোন ইলিমেন্টে এর ফন্টের ব্যাসার্ধ/প্রস্থ দিতে font-weight প্রোপার্টি এবং ভ্যালুই হিসেবে normal/bold/bolder/lighter/100-900 অ্যাপ্লাই করতে হবে। এইচটিএমএল ইলিমেন্টে ফন্ট ওয়েট অ্যাপ্লাই করতে নিচের মত কোড লিখুনঃ [crayon-5a12a0469201f470682208/] Note: উপরের কোড টুকুর আউটপুট ব্রাউজার এ ঠিকমতো দেখায় কিনা সেটা প্রদর্শনের বিস্তারিত পড়ুন →