উদাহরণ সহ সিএসএসে কীভাবে হওয়ার প্রয়োগ করবেন



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

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

সিএসএসে হোভার কী?

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





সিএসএসে ঘুরে দেখুন

হ্যাডোপ এ ফ্লুম কি?

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



হোভার কোথায় ব্যবহৃত হয়?

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

হোভার কী করে?

হোভার হ'ল একটি বহু-কার্যকরী প্রোগ্রামিং সরঞ্জাম যার মাধ্যমে ব্যবহারকারী লক্ষ্য বিন্যাসকে বিন্যাসের বিন্যাসের সীমাহীন সংখ্যার সাথে কাস্টমাইজ করতে পারে। হোভার বৈশিষ্ট্যটির অপারেশনাল জ্ঞানের কিছু উদাহরণের মধ্যে রয়েছে:

  • পটভূমি / ফন্টের রঙ পরিবর্তন করা
  • হোভারে প্রদর্শিত হিডেন টেক্সট এম্বেড করা
  • চিত্রগুলিতে রোলওভার ইফেক্ট তৈরি করুন
  • পাঠ্য / চিত্রগুলিতে স্বয়ংক্রিয় জুম
  • চিত্রের অস্বচ্ছতা সংশোধন করুন
  • পাঠ্য এম্বেডিং
  • চিত্র অদলবদল
  • ডিভ ঘোরা
  • একাধিক অন্যান্য সিএসএস হভার ফর্ম্যাটিং অপারেশন।

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



সিএসএসে হোভারের সামঞ্জস্যতা

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

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

সিএসএসে হোভার কীভাবে কাজ করে?

সক্রিয় সিউডো-ক্লাস শৈলীটি সিএসএস হোভার ফর্ম্যাটিংয়ে প্রাধান্য পেয়েছে এবং এটি এই সিউডো-শ্রেণীর পরে যে কোনও / সমস্ত পরবর্তী লিঙ্ককে ওভাররাইড করে। উদাহরণস্বরূপ সিউডো-ক্লাসে ': লিঙ্ক: পরিদর্শন করা হয়েছে: বা: সক্রিয়: হোভার নিয়মটি পরে স্থাপন করা দরকার: লিঙ্ক এবং: পরিদর্শন করা হয়েছে তবে আগে: উপযুক্ত জন্য সক্রিয়: হোভার স্টাইলিং। LVHA- ক্রম:: লিঙ্ক,: হোভার,: পরিদর্শন করা হয়েছে: এবং সক্রিয়: যথাযথ: হোভার বিন্যাস শৈলীর জন্য একটি রেফারেন্স হিসাবে ব্যবহৃত হয়।

বিভাগ {পটভূমির রঙ: সবুজ প্যাডিং: 18px প্রদর্শন: কিছুই নয় none স্প্যান: হোভার + ডিভি {প্রদর্শন: ব্লক}হোভার টেস্ট!হোভারে লুকানো কোড শো

উপরের কোডে স্প্যান উপাদানটি হোভার এবং ডিভ উপাদানটি স্প্যান: হোভার + ডিভ উপাদান ব্যবহার করে মার্জ করার জন্য পরিবর্তিত হয়েছে। প্রাথমিক অবতরণ ওয়েব পৃষ্ঠায় যে স্প্যান উপাদানটি প্রদর্শিত হবে তা 'হোভার পরীক্ষা!' স্প্যান উপাদানের উপর আরও ঘোরার ফলে ডিভ উপাদানটি 'হোভারে লুকানো কোড শো' প্রকাশিত হয়। এই এম্বেডিং ফর্ম্যাটটি চিত্রের পাশাপাশি পাঠ্যেও কার্যকর।

জাভা স্ট্রিং থেকে তারিখ রূপান্তর

পটভূমির রঙ পরিবর্তন করে 'লাল' করুন

পি: হোভার, এইচ 1: হোভার, এ: হোভার {পটভূমি-রঙ: লাল

হোভার রেড

হোভার রেড

লিঙ্কগুলি:

হোভার টেস্ট রেড:

গুগল কম

বিঃদ্রঃ: হ্যালো

উপরের কোডটি কাস্টমাইজ করে

,

এবং উপাদান এবং এগুলি একটি সাধারণ হোভার ফাংশনে সংহত করে। এই কোডটি যখন মাউস পয়েন্টার তাদের উপরে চলে যায় তখন পাঠ্যের রঙকে লাল রঙে পরিবর্তন করতে ডিজাইন করা হয়। এইচ 1 এবং এইচ 2 উপাদান যথাক্রমে 'সিএসএস: হোভার টেস্ট কোড' এবং 'হোভার রেড' প্রদর্শন করে। অনুচ্ছেদের উপাদান: হোভার টেস্ট রেড এবং অ্যাঙ্কার ট্যাগ: মাউস পয়েন্টার যখন তাদের উপরে চলে যায় তখন google.com লাল রঙে হাইলাইট হয়।

চিত্রগুলিতে হোভার অপ্পেসিটি তৈরি করা হচ্ছে

.pic {প্রস্থ: 1900px উচ্চতা: 1900px অস্বচ্ছতা: 1 ফিল্টার: আলফা (ধাপে ধাপ 100) ব্যাকগ্রাউন্ড: url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280। পিএনজি) নো-রিপিটেট ic .পিক: হোভার {অস্বচ্ছতা: 0.2 ফিল্টার: আলফা (অস্বচ্ছতা = 30)}

উপরের সিএসএস প্রোগ্রামটি হোভার করার সময় একটি চিত্রের অস্বচ্ছতাটির পরিবর্তনটি প্রদর্শন করে। চিত্রটির মূল অস্বচ্ছতা এক তবে অপসারণের হোভার ফিল্টারটি একই ব্যবহার করে 0.2 এ পরিবর্তন করা হয়েছে। এই কোডটি প্রদর্শন করে যে হোভার উপাদানটি ব্যবহার করে কেউ একটি চিত্র এবং / অথবা পাঠ্যের অস্বচ্ছতা পরিবর্তন করতে পারে।

চিত্রগুলিতে পাঠ্য ওভারলে তৈরি করা হচ্ছে

.pic {প্রস্থ: 4000px উচ্চতা: 2170px পটভূমি: ইউআরএল (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) নন-পুনরাবৃত্তি te .xtxt {প্রস্থ: 3400px উচ্চতা: 2170px ব্যাকগ্রাউন্ড: #FFF অস্বচ্ছতা: 0} .pic: টানুন সমৃদ্ধ ফল। কমলাতে উপস্থিত অ্যান্টি-অক্সিড্যান্টগুলি হজমে সহায়তা করতে পারে, ত্বককে গ্লো তৈরি করতে পারে এবং অ্যান্টি-এজিং উপাদান হিসাবে কাজ করতে পারে।

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



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

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

আমাদের জন্য একটি প্রশ্ন আছে? দয়া করে 'সিএসএসে হোভার' ব্লগের মন্তব্য বিভাগে এটি উল্লেখ করুন এবং আমরা আপনার কাছে ফিরে আসব।