Skip to main content

মার্কেই এইচটিএমএল এবং CSS3 এর বয়স

একটি DIV onclick বিশুদ্ধ সিএসএস 3 মসৃণ স্ক্রোলিং - কোনো জাভাস্ক্রিপ্ট - বিশুদ্ধ HTML5 এর সিএসএস 3 টিউটোরিয়াল (জুন 2026)

একটি DIV onclick বিশুদ্ধ সিএসএস 3 মসৃণ স্ক্রোলিং - কোনো জাভাস্ক্রিপ্ট - বিশুদ্ধ HTML5 এর সিএসএস 3 টিউটোরিয়াল (জুন 2026)
Anonim

আপনারা যারা দীর্ঘ সময় ধরে এইচটিএমএল লেখেন তারা উপাদানটি মনে রাখতে পারেন। এটি একটি ব্রাউজার-নির্দিষ্ট উপাদান যা পর্দা জুড়ে স্ক্রোলিং পাঠ্যের একটি ব্যানার তৈরি করেছিল। এই উপাদান এইচটিএমএল স্পেসিফিকেশন যোগ করা হয় না এবং এটি জন্য সমর্থন ব্রাউজার জুড়ে ব্যাপকভাবে বিভিন্ন। এই উপাদানের ব্যবহার সম্পর্কে জনগণের বেশ শক্তিশালী মতামত ছিল - উভয় ইতিবাচক এবং নেতিবাচক। কিন্তু আপনি যদি এটি পছন্দ করেন বা ঘৃণা করেন তবে এটি এমন সামগ্রী তৈরির উদ্দেশ্যে পরিবেশন করেছে যা বাক্সের সীমানাগুলিকে দৃশ্যমান করে তুলেছে।

শক্তিশালী ব্যক্তিগত মতামত ব্যতীত ব্রাউজার দ্বারা এটি পুরোপুরি প্রয়োগ করা হয়নি এমন একটি কারণ এটি একটি চাক্ষুষ প্রভাব বলে মনে করা হয় এবং এভাবে এটি HTML দ্বারা সংজ্ঞায়িত করা উচিত নয় যা গঠনকে সংজ্ঞায়িত করে। পরিবর্তে, চাক্ষুষ বা উপস্থাপনা প্রভাবগুলি সিএসএস দ্বারা পরিচালিত হওয়া উচিত। এবং CSS3 কীভাবে ব্রাউজারগুলি উপাদানগুলির মার্কে প্রভাবকে যুক্ত করে তা নিয়ন্ত্রণ করতে মার্কি মডিউল যোগ করে।

নতুন CSS3 বৈশিষ্ট্য

মার্জিতে আপনার সামগ্রী কীভাবে প্রদর্শন করে তা নিয়ন্ত্রণ করতে সহায়তার জন্য CSS3 নতুন পাঁচটি বৈশিষ্ট্য যোগ করে: ওভারফ্লো-শৈলী, তাবু-শৈলী, তাবু প্লে গোনা, তাবু-দিক এবং তাবু গতির.

ওভারফ্লো-শৈলীদ্য ওভারফ্লো-শৈলী সম্পত্তি (যা আমি নিবন্ধ সিএসএস ওভারফ্লোতেও আলোচনা করেছি) সামগ্রী বাক্সে ওভারফ্লো বিষয়বস্তুগুলির জন্য পছন্দসই শৈলী সংজ্ঞায়িত করে। আপনি মান সেট করা হলে তাবু-লাইন অথবা তাবু-ব্লক আপনার কন্টেন্ট বাম / ডান স্লাইড এবং আউট স্লাইড করা হবে (তাবু-লাইন) বা আপ / ডাউন (তাবু-ব্লক).

তাবু-শৈলীএই সম্পত্তিটি কীভাবে দৃশ্যটি (এবং বাইরে) সরানো হবে তা সংজ্ঞায়িত করে।

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

অবশেষে, বিকল্প পিছনে স্লাইড, পাশ থেকে পাশ থেকে কন্টেন্ট bounces।

তাবু প্লে গোনাব্যবহার করার অপূর্ণতা এক বৃহৎ শিবির উপাদান marquee স্টপ যে হয়। কিন্তু শৈলী সম্পত্তি সঙ্গে তাবু প্লে গোনা আপনি একটি নির্দিষ্ট সংখ্যার জন্য কন্টেন্ট চালু এবং বন্ধ করতে মার্কে সেট করতে পারেন।

তাবু-দিকআপনি পর্দা স্ক্রোল স্ক্রোল করা উচিত যে দিক নির্বাচন করতে পারেন। মান অগ্রবর্তী এবং বিপরীত যখন টেক্সট নির্দেশিকা উপর ভিত্তি করে হয় ওভারফ্লো-শৈলী হয় তাবু-লাইন এবং আপ বা ডাউন যখন ওভারফ্লো-শৈলী হয় তাবু-ব্লক.

মার্কে-দিকনির্দেশ বিবরণ

ওভারফ্লো-শৈলীভাষা নির্দেশিকাঅগ্রবর্তীবিপরীত
তাবু-লাইনLTRবামঅধিকার
RTLঅধিকারবাম
তাবু-ব্লক আপনিচে

তাবু গতিরএই সম্পত্তি পর্দায় স্ক্রোলটি কত দ্রুত স্ক্রোল করে তা নির্ধারণ করে। মান হয় ধীর, সাধারণ, এবং দ্রুত। প্রকৃত গতি বিষয়বস্তু এবং ব্রাউজারটি এটি প্রদর্শনের উপর নির্ভর করে, তবে মান অবশ্যই হতে হবে ধীর তুলনায় ধীর সাধারণ যা তুলনায় ধীর দ্রুত.

মার্কি প্রোপার্টি ব্রাউজার সাপোর্ট

CSS মার্কে উপাদানগুলি কাজ করার জন্য আপনাকে বিক্রেতা উপসর্গগুলি ব্যবহার করতে হতে পারে। অনুসরণ হিসাবে তারা:

সিএসএস 3বিক্রেতা প্রিফিক্স
ওভারফ্লো-এক্স: মার্কে-লাইন;overflow-x: -webkit-marquee;
তাবু-শৈলী-webkit-তাবু-শৈলী
তাবু প্লে গোনা-webkit-তাবু-পুনরাবৃত্তি
মার্কে-দিক: এগিয়ে | বিপরীত;-webkit-marquee- দিক: পিছনে | পিছন দিকে;
তাবু গতির-webkit-তাবু গতির
কোন সমতুল্য-webkit-তাবু-বৃদ্ধি

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

আপনার marquee কাজ করার জন্য, আপনি বিক্রেতা প্রথম মানের মান স্থাপন করা উচিত এবং তারপর CSS3 স্পেসিফিকেশন মান সঙ্গে তাদের অনুসরণ করা উচিত। উদাহরণস্বরূপ, এখানে একটি মার্কে জন্য সিএসএস রয়েছে যা ২00x50 বাক্সে বাম থেকে ডানদিকে পাঠ্যটিকে পাঁচবার স্ক্রোল করে।

{ প্রস্থ: 200px; উচ্চতা: 50px; সাদা স্থান: আড়াল; যথোপযুক্ত সৃষ্টিকর্তাযথোপযুক্ত সৃষ্টিকর্তা; ওভারফ্লো-X: -webkit-তাবু; -webkit-marquee- দিক: এগিয়ে; -webkit-marquee- শৈলী: স্ক্রোল; -webkit-marquee গতি: স্বাভাবিক; -webkit-marquee- বৃদ্ধি: ছোট; -ওয়েবকিট-মার্কি-পুনরাবৃত্তি: 5; ওভারফ্লো-এক্স: মার্কে-লাইন; মার্কি-দিক: এগিয়ে; মার্কি-শৈলী: স্ক্রোল; Marquee গতি: স্বাভাবিক; Marquee খেলা গণনা: 5;}