CSS3 দিয়ে ওয়েব পৃষ্ঠা উপাদানগুলি ফেইড ইন এবং আউট করুন

CSS3 পারফরম্যান্স চমৎকার ফেইড প্রভাব তৈরি করুন

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

আপনি CSS3 ব্যবহার করে আপনার ওয়েবসাইটের উপাদান যোগ করতে পারেন এক খুব সুন্দর চাক্ষুষ প্রভাব অপাসিটি এবং স্থানান্তর জন্য সম্পত্তি একটি সমন্বয় ব্যবহার করে এবং আউট বিবর্ণ করতে হয়। এটি এমন একটি সহজ এবং ভাল সমর্থিত উপায় যা আপনার পৃষ্ঠাগুলিকে ফাঁকা এলাকাসমূহ তৈরি করে আরও ইন্টারেক্টিভ করে তোলে যখন একটি সাইট পরিদর্শক কিছু করেন, যেমনটি উপাদানটির উপর ঝুলছে

আসুন এটি আপনার ওয়েব পেজের বিভিন্ন উপাদানের সাথে এই ইন্টারঅ্যাক্টিং ভিজ্যুয়াল ইফেক্টটি যোগ করা কতটা সহজ তা দেখুন।

হভারের উপর অপাসিটি পরিবর্তন করুন

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

এটি greyed করা, আমরা নিম্নলিখিত শৈলী নিয়ম আমাদের CSS স্টাইলশীট যোগ করুন:

.greydout {
-বিবেক-অপাসিটি: 0.25;
-মোজ-অপাসিটি: 0.25;
অস্বচ্ছতা: 0.25;
}

এই অপাসিটি সেটিংস অনুবাদ 25% এর মানে হল যে ছবিটির স্বাভাবিক স্বচ্ছতা 1/4 হিসাবে প্রদর্শিত হবে। কোন স্বচ্ছতার সঙ্গে সম্পূর্ণ অস্বচ্ছ 100% হতে হবে এবং 0% সম্পূর্ণ স্বচ্ছ হবে।

পরবর্তীতে, ছবিটি স্পষ্ট (অথবা আরও সঠিকভাবে সম্পূর্ণভাবে অপ্রচলিত হয়ে) করার জন্য, যখন মাউসটি তার উপর ঝাঁপিয়ে পড়ে, আপনি এতে যোগ করবেন: ছদ্ম-ক্লাসে হভার করবেন:

.greydout: হভার {
-ওয়েবকিট-অপাসিটি: 1;
-মোজ-অপাসিটি: 1;
অপাসিটি: 1;
}

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

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

একটি সত্যিই চমৎকার প্রভাব যোগ করুন এবং এই ধীরে ধীরে ফেইড করতে, আপনি ট্র্যাফিকেশন সম্পত্তি যুক্ত করতে চান। গ্রেডড ক্লাস:

.greydout {
-বিবেক-অপাসিটি: 0.25;
-মোজ-অপাসিটি: 0.25;
অস্বচ্ছতা: 0.25;
-ওয়েবকিট-সংক্রমণ: সমস্ত 3s আরাম;
-মজ-সংক্রমণ: সব 3s আরাম;
-এমস-সংক্রমণ: সব 3s আরাম;
-অ-সংক্রমণ: সব 3s আরাম;
পরিবর্তন: সব 3s আরাম;
}

এই কোডের সাথে, পরিবর্তনটি কেবল আচমকা স্যুইচ করার পরিবর্তে পরিবর্তিত হবে

আবার, আমরা এখানে কয়েকটি বিক্রেতার প্রিফিক্সড নিয়ম ব্যবহার করছি। ট্রানজিশন অপাসিটিটি হিসাবেও সমর্থিত নয়, তাই এই উপসর্গগুলি বোধগম্য করে তোলে।

আপনি এই মিথস্ক্রিয়া পরিকল্পনা হিসাবে মনে রাখা এক জিনিস যে স্পর্শ পর্দায় ডিভাইস "হভার" রাষ্ট্র নেই, তাই এই প্রভাব প্রায়ই মোবাইল ফোন মত একটি স্পর্শ পর্দা ডিভাইস ব্যবহার করে যে কেউ হারিয়ে হয়। পরিবর্তন প্রায়ই ঘটবে, কিন্তু এটা এত দ্রুত ঘটে যে তারা সত্যিই দেখা যায় না। এটা যদি আপনি একটি চমৎকার বোনাস প্রভাব হিসাবে এটি যোগ করা ভাল, কিন্তু বোঝা কন্টেন্ট বোঝার প্রয়োজন যে কোনো পরিবর্তন এড়াতে।

লঘুপাত আউট সম্ভব সম্ভব

আপনি একটি বিবৃত ইমেজ দিয়ে শুরু করতে হবে না, আপনি একটি সম্পূর্ণ অস্বচ্ছ ইমেজ থেকে বিবর্ণ রূপান্তর এবং অপাসিটি ব্যবহার করতে পারেন। একই ইমেজ ব্যবহার করে, শুধুমাত্র একটি ফাংশন এর সাথে ক্লাস করুন:

বর্গ = "withfadeout">

ঠিক আগের মত, আপনি অপার্সিটি ব্যবহার করে পরিবর্তন করুন: হভার নির্বাচক:

.withfadeout {
-ওয়েবকিট-সংক্রমণ: সমস্ত 2s আরাম-ইন-আউট;
-মজ-সংক্রমণ: সব 2s আরাম মধ্যে ইন;
-এমএস-সংক্রমণ: সব 2s আরাম মধ্যে ইন;
-অ-রূপান্তর: সব 2s আরাম মধ্যে ইন;
রূপান্তর: সব 2s আরাম মধ্যে ইন;
}
.withfadeout: হভার {
-বিবেক-অপাসিটি: 0.25;
-মোজ-অপাসিটি: 0.25;
অস্বচ্ছতা: 0.25;
}

এই উদাহরণে, ছবিটি সম্পূর্ণভাবে অস্বচ্ছ থেকে কিছুটা স্বচ্ছ হবে - আমাদের প্রথম উদাহরণের বিপরীত।

চিত্রগুলি বহন করছে

এটি চমৎকার যে আপনি এই চাক্ষুষ রূপান্তর এবং ইমেজ থেকে fades আবেদন করতে পারেন, কিন্তু আপনি শুধু এই সিএসএস প্রভাব সঙ্গে ইমেজ ব্যবহার করে সীমাবদ্ধ নয়। আপনি সহজেই CSS- স্টাইল্ড বোতামগুলি তৈরি করতে পারেন যা ক্লিক করে এবং অনুষ্ঠিত হওয়ার সময় বিবর্ণ হয়ে যায়। আপনি শুধু সক্রিয় সিডো-ক্লাস ব্যবহার করে অপাসিটিটি সেট করবেন এবং বর্গটি সংশোধন করে সেই বোতামটি সংশোধন করুন। কি ঘটেছে তা দেখতে এই বোতামটি ক্লিক করুন এবং ধরে রাখুন।

এটির উপর ভিত্তি করে কোনও দৃশ্যমান উপাদানকে বিবর্ণ করা বা ক্লিক করা সম্ভব হয়। এই উদাহরণে যখন আমি মাউসটির উপরে থাকে তখন div এর অপাসিটি এবং পাঠের রং পরিবর্তন করি। এখানে CSS:

# মাই ডিভি {
প্রস্থ: 280px;
পটভূমি-রঙ: # 557A47;
রঙ: # ডিএফডিএফডিএফ;
প্যাডিং: 10 পিএক্স;
-ওয়েবকিট-ট্রানজিশন: সব 4 সেকেন্ডের আউট-আউট 0 সেকেন্ড;
-মোজ-ট্রান্সিশন: সব 4 সেকেন্ড-আউট 0 সেকেন্ড;
-এমস-ট্রানজিশন: সব 4 সেকেন্ড-আউট 0 সেকেন্ড;
-অ-সংক্রমণ: সমস্ত 4s আরামদায়ক 0s;
পরিবর্তন: সব 4s আরাম আউট 0s;
}
# মাই ডিভি: হভার {
-বিবেক-অপাসিটি: 0.25;
-মোজ-অপাসিটি: 0.25;
অস্বচ্ছতা: 0.25;
রঙ: # 000;
}

ন্যাভিগেশন মেনু ফিডিং প্যাটার্ন কালার থেকে উপকৃত হতে পারে

এই সহজ নেভিগেশন মেনুতে পটভূমি রং fades ধীরে ধীরে এবং আউট হিসাবে আমি মেনু আইটেম উপর মাউস। এখানে এইচটিএমএল:

এবং এখানে CSS হয়:

উল # sampleNav {list-style: none; }
উল # sampleNav li {
প্রদর্শন: ইনলাইন;
ভাসা: বাম;
প্যাডিং: 5 পিএক্স 15 পিএক্স;
মার্জিন: 0 5 পিএক্স;
-ওয়েবকিট-সংক্রমণ: সব 2s রৈখিক;
-মজ-সংক্রমণ: সব 2s রৈখিক;
-এমস-সংক্রমণ: সব 2s রৈখিক;
-O- সংক্রমণ: সব 2s রৈখিক;
রূপান্তর: সব 2s রৈখিক;
}
উল # sampleNav লি একটি {টেক্সট-সজ্জা: কেউ; }
উল # sampleNav li: হভার {
পটভূমি-রঙ: # DAF197;
}

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

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

অতিরিক্ত মজা;

এখানে কীভাবে একটি ছবি অন্য আকারে বিবর্ণ করা যায় তার উদাহরণ। এইচটিএমএল ব্যবহার করুন:

এবং সিএসএস যা সম্পূর্ণরূপে স্বচ্ছ করে তোলে এবং অন্যটি সম্পূর্ণভাবে অস্বচ্ছ এবং তারপর সংক্রমণ দুটি বিনিময় করে:

.swapMe img {-webkit-transition: সমস্ত 1s আরাম-ইন-আউট; -মজ-সংক্রমণ: সমস্ত 1s আরাম মধ্যে ইন; -এমস-সংক্রমণ: সব 1s আরাম মধ্যে ইন; -O- সংক্রমণ: সব 1s আরাম মধ্যে ইন; পরিবর্তন: সব 1s আরাম মধ্যে ইন; } .swap1, .swapMe: হভার। swap2 {-webkit-opacity: 1; -মোজ-অপাসিটি: 1; অপাসিটি: 1; } .swapMe: হভার .swap1, .swap2 {-webkit-opacity: 0; -মোজ-অপাসিটি: 0; অপাসিটি: 0; }