কিভাবে সিএসএস স্টাইল আইফ্রেম

কিভাবে আইফ্রেম ওয়েবসাইট ডিজাইন কাজ বুঝতে

যখন আপনি আপনার এইচটিএমএল- এ একটি উপাদান এম্বেড করেন, তখন আপনার এটিকে সিএসএস স্টাইল যুক্ত করার দুটি সুযোগ রয়েছে:

CSS ব্যবহার করে IFRAME এলিমেন্ট শৈলী

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

এখানে কিছু সিএসএস স্টাইল আছে যা আমি সবসময় আমার iframes এ অন্তর্ভুক্ত করি।

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

HTML5 আপনাকে স্ক্রল বারগুলি সরাতে ওভারফ্লো প্রোপার্টি ব্যবহার করার সুপারিশ করে, কিন্তু এটি নির্ভরযোগ্য নয়। তাই যদি আপনি স্ক্রল বারগুলি সরাতে বা পরিবর্তন করতে চান, তবে আপনার আইফ্রেমে স্ক্রলিং অ্যাট্রিবিউটটিও ব্যবহার করা উচিত। স্ক্রোলিং অ্যাট্রিবিউটটি ব্যবহার করতে, অন্য যেকোনো বৈশিষ্ট্যের মত এটি জুড়ুন এবং তারপরে তিনটি মান এক নির্বাচন করুন: হ্যাঁ, না বা স্বয়ংক্রিয়। হ্যাঁ ব্রাউজারকে স্ক্রল বারগুলি সর্বদা অন্তর্ভুক্ত করার কথা বললেও তা প্রয়োজন হয় না। কোন প্রয়োজন না হয় না সব স্ক্রল বার সরান বলে।

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

স্ক্রোলিং অ্যাট্রিবিউটের সাথে স্ক্রলিং বন্ধ করার উপায় এখানে রয়েছে:

স্ক্রোলিং = "না" >
এটি একটি আইফ্রেম।

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

এখানে আপনি ওভারফ্লো সম্পত্তি সঙ্গে সব সময় স্ক্রোলিং চালু হবে কিভাবে:

শৈলী = "ওভারফ্লো: স্ক্রল;" >
এটি একটি আইফ্রেম।

ওভারফ্লো সম্পত্তি সঙ্গে স্ক্রোলিং সম্পূর্ণ বন্ধ করার কোন উপায় নেই

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

iframe {
সীমান্তে শীর্ষ: # c00 1px বিন্দু;
সীমান্ত-ডান: # c00 2px বিন্দু;
সীমান্ত-বাম: # c00 2px বিন্দু;
সীমান্তের নীচে: # c00 4px বিন্দু;
}

কিন্তু আপনার শৈলী জন্য স্ক্রোলিং এবং সীমানা সঙ্গে বন্ধ করা উচিত নয়। আপনি আপনার আইফ্রেমে অনেক অন্যান্য CSS স্টাইল প্রয়োগ করতে পারেন। আইফ্রেম একটি ছায়া, বৃত্তাকার কোণগুলি দেওয়ার জন্য এই উদাহরণ CSS3 শৈলী ব্যবহার করে এবং এটি 20 ডিগ্রি ঘূর্ণায়মান করে।

iframe {
মার্জিন শীর্ষ: 20px;
মার্জিন-নীচে: 30px;

-মোজ-সীমানা-ব্যাসার্ধ: 1২px;
-ওয়েবকিট-সীমানা-ব্যাসার্ধ: 1২px;
সীমান্ত-ব্যাসার্ধ: 1২px;

-মোজ-বক্স-ছায়া: 4 পিক্স 4 পিক্স 14 পিক্সে # 000;
-বিবিকিট-বক্স-ছায়া: 4 পিক্স 4 পিক্স 14 পিক্সে # 000;
বাক্স-ছায়া: 4px 4px 14px # 000;

-moz-রুপান্তর: ঘোরান (20deg);
-webkit-রুপান্তর: ঘোরান (20deg);
-o-রুপান্তর: ঘোরান (20deg);
-ms-রুপান্তর: ঘোরান (20deg);
ফিল্টার: progID: DXImageTransform.Microsoft.BasicImage (ঘূর্ণন = .2);
}

Iframe বিষয়বস্তু স্টাইলিং

একটি আইফ্রেম বিষয়বস্তু স্টাইলিং হয় অন্য কোন ওয়েব পৃষ্ঠা স্টাইলিং মত। কিন্তু, আপনার পৃষ্ঠার সম্পাদনার অ্যাক্সেস থাকতে হবে । আপনি যদি পৃষ্ঠাটি সম্পাদনা করতে না পারেন (উদাহরণস্বরূপ, এটি অন্য একটি সাইটে)।

যদি আপনি পৃষ্ঠাটি সম্পাদনা করতে পারেন, তাহলে আপনি আপনার সাইটের অন্য কোনও ওয়েব পৃষ্ঠাটি স্টাইল করতে চাইলে ডকুমেন্টে একটি বাহ্যিক স্টাইল শীট বা শৈলী যুক্ত করতে পারেন।