কোনও ওয়েবসাইটের পৃষ্ঠার উপাদানগুলি ঘোরানোর একটি খুব সহজ উপায় - কয়েকটি সিএসএস শৈলী প্রয়োগ করুন। এই পাঠের সাথে পরিচিতি আপনাকে পৃষ্ঠায় একটি অ্যালবামে একটি ফোল্ডফুল্ড কার্ড ফ্যান, ছড়িয়ে ছিটিয়ে থাকা পাতা বা আড়ম্বরপূর্ণ ফটো রাখার অনুমতি দেবে। পাঠটিতে একটি ফটো অ্যালবাম প্রয়োগের উদাহরণ রয়েছে এবং সমস্ত আধুনিক ব্রাউজারগুলির সমাধান বিবেচনায় নেওয়া হয়।
এটা জরুরি
450px প্রশস্ত চারটি ফটো
নির্দেশনা
ধাপ 1
এই উদাহরণটি ঘোরানো ফটো সহ একটি আড়ম্বরপূর্ণ অ্যালবাম পৃষ্ঠা তৈরিতে ফোকাস করবে।
আমি ঠিকানাগুলি সহ অগ্রিম চিত্রগুলি (প্রস্থ 400px) প্রস্তুত করেছি:
ভবিষ্যতে, আমরা তাদের নাম অনুসারে চিত্রগুলিতে আইডি নিয়োগ করব।
ধাপ ২
প্রথমত, আমরা ডিভি ট্যাগ ব্যবহার করে আমাদের ফটো অ্যালবামের জন্য একটি ব্লক প্রস্তুত করব এবং img ট্যাগ ব্যবহার করে এটিতে ফটোগুলি যুক্ত করব (প্রতিটি চিত্র অবশ্যই তার নিজস্ব ডিভ ট্যাগে আবদ্ধ থাকতে হবে):
দয়া করে মনে রাখবেন যে আমরা ব্লকে একটি সনাক্তকারী নির্ধারিত করেছি -। সনাক্তকারী দ্বারা, আমরা CSS ব্যবহার করে ব্লকটি উল্লেখ করতে পারি।
ধাপ 3
এর পরে, আপনাকে ব্লকে সিএসএস শৈলীগুলি সেট করতে হবে। শৈলীর তালিকা: "অবস্থান: আপেক্ষিক;" - আমাদের ব্লকের উপরের বাম কোণ থেকে উত্স সেট করবে; "মার্জিন: 50px অটো;" - বাকী পৃষ্ঠা সামগ্রীর উপরে এবং নীচে আমাদের ব্লক "50px" এর ইন্ডেন্টেশন সেট করবে, পাশাপাশি ডান এবং বামে স্বয়ংক্রিয় ইনডেন্টেশন সেট করবে, এইভাবে আমাদের ব্লকটিকে কেন্দ্রের মধ্যে সারিবদ্ধ করে; "প্রস্থ: 900px; উচ্চতা: 650px;" - যথাক্রমে প্রস্থটি 900px এবং উচ্চতা 650px এ সেট করবে।
শৈলীর নির্দিষ্ট তালিকা অবশ্যই এইভাবে স্থাপন করা উচিত:
# ফটো_পেজ {
অবস্থান: আপেক্ষিক;
মার্জিন: 0 অটো;
প্রস্থ: 900px;
উচ্চতা: 650px;
পাঠ্য-সারিবদ্ধ: কেন্দ্র;
}
"# ফটো_পেজ" এর ব্যবহারটি নোট করুন - এভাবেই আমরা ব্লক আইডি উল্লেখ করি।
পদক্ষেপ 4
এখন আমরা ফটো_পৃষ্ঠা ব্লকের অভ্যন্তরে প্রতিটি চিত্রের জন্য সাধারণ শৈলী নিযুক্ত করব। এগুলি হল গোলাকার কোণ, ধূসর সীমানা, সাদা পটভূমি, প্যাডিং এবং ড্রপ ছায়া।
এটি একটি ফোটোগ্রাফিক প্রভাব তৈরি করবে:
# ফটো_পৃষ্ঠা img {
সীমানা ব্যাসার্ধ: 7px;
সীমানা: 1px কঠিন ধূসর;
পটভূমি: # fffff;
প্যাডিং: 10 পিএক্স;
বাক্স-ছায়া: 2px 2px 10px # 697898;
}
"# ফটো_পৃষ্ঠা img" এর ব্যবহারটি নোট করুন - এটি ফটো_পৃষ্ঠা ব্লকের ভিতরে থাকা সমস্ত চিত্রকে বোঝায়
পদক্ষেপ 5
এটির মতো একটি ছোট শৈলী যুক্ত করাও গুরুত্বপূর্ণ:
# ফটো_পৃষ্ঠা ডিভ {
ভাসা: বাম;
}
এটি ফটো_পৃষ্ঠা ব্লকের সমস্ত ব্লককে বামে সঙ্কুচিত করে।
পদক্ষেপ 6
পাঠের মধ্যবর্তী স্তরটি এখন শেষ হয়েছে। আপনার কাজটি যদি স্ক্রিনশটের চিত্রের মতো হয় তবে আপনি কোনও ভুল করেন নি এবং পরবর্তী পদক্ষেপে যেতে পারেন।
পদক্ষেপ 7
এখন আমরা পোস্ট ফটোগুলি ঘোরানোর জন্য চালু। এর জন্য আমাদের ট্রান্সফর্ম স্টাইলটি দরকার। এই মুহুর্তে, তার খাঁটি আকারে এটি ব্যবহার করা হয় না, তবে কেবল প্রতিটি ব্রাউজারের শুরুতে এটির মতো একটি উপসর্গ সহ:
-webkit- রূপান্তর: ঘোরান (মান);
-মোজ-ট্রান্সফর্ম: ঘোরান (মান);
-ও-রূপান্তর: ঘোরানো (মান);
এটি ব্রাউজারগুলির জন্য ঘূর্ণন শৈলী: গুগল ক্রোম, মজিলা, অপেরা (যথাক্রমে)। "মান" শব্দের পরিবর্তে, আমরা শেষের দিকে ডিগ্রি সহ একটি সংখ্যা সন্নিবেশ করবো:
90deg - 90 ডিগ্রি ঘড়ির কাঁটার দিকে ঘোরান।
-5deg - ঘড়ির কাঁটা -5 ডিগ্রি দিকের দিকে।
ইত্যাদি
পদক্ষেপ 8
ফটো ছবির জন্য স্টাইল_1:
# ফটো_1
-webkit- রূপান্তর: ঘোরান (5deg);
-মোজ-ট্রান্সফর্ম: ঘোরান (5deg);
-ও-রূপান্তর: ঘোরান (5deg);
}
প্রথম চিত্রটি 5 ডিগ্রি ঘোরানো হয়।
পদক্ষেপ 9
ছবির ফটো 3 এর জন্য স্টাইল:
# ফটো_2 {
-webkit- রূপান্তর: ঘোরান (-3deg);
-মোজ-ট্রান্সফর্ম: ঘোরান (-3deg);
-ও-রূপান্তর: ঘোরান (-3deg);
}
দ্বিতীয় চিত্রটি -3 ডিগ্রি ঘোরানো হয়।
পদক্ষেপ 10
ফটো ছবির জন্য স্টাইল 14:
# ফটো_3 {
-webkit- রূপান্তর: ঘোরান (-2deg);
-মোজ-ট্রান্সফর্ম: ঘোরান (-2deg);
-ও-রূপান্তর: ঘোরান (-2deg);
}
তৃতীয় চিত্রটি -2 ডিগ্রি ঘোরানো হয়।
পদক্ষেপ 11
ছবির ছবির জন্য স্টাইল
# ফটো_4 {
-webkit- রূপান্তর: ঘোরান (8deg);
-মোজ-ট্রান্সফর্ম: ঘোরান (8deg);
-ও-রূপান্তর: ঘোরান (8deg);
}
চতুর্থ চিত্রটি 8 ডিগ্রি ঘোরানো হয়।
পদক্ষেপ 12
আসুন দেখুন আপনি কীভাবে চিত্রগুলির অবস্থান সংশোধন করতে পারেন। উদাহরণস্বরূপ, আপনি প্রথম চিত্রটি উপরের থেকে 20px এবং বাম থেকে 10px অফসেট করতে চান। এই ক্ষেত্রে, আপনার মার্জিন স্টাইলটি ব্যবহার করা দরকার। আমাদের ক্ষেত্রে এটি ব্যবহারের সঠিক উপায় এখানে:
# ফটো_1
মার্জিন: 20px -10px -20px 10px;
-webkit- রূপান্তর: ঘোরান (5deg);
-মোজ-ট্রান্সফর্ম: ঘোরান (5deg);
-ও-রূপান্তর: ঘোরান (5deg);
}
দয়া করে নোট করুন যে শৈলীর প্রথম মানটি শীর্ষ মার্জিন; দ্বিতীয়টি হ'ল ডান দিকে যুক্ত; তৃতীয়টি নীচ থেকে একটি ইনডেন্ট; চতুর্থ - বাম ইন্ডেন্ট
গুরুত্বপূর্ণ: আমাদের ক্ষেত্রে, নীচের মার্জিনটি শীর্ষ মার্জিনের নেতিবাচক মানের সমান।আপনি যদি আপনার পৃষ্ঠায় চিত্রের নীচে সাদা স্থান দেখতে পান তবে চিত্রটির নীচে আরও নেতিবাচকভাবে প্রবেশ করার চেষ্টা করুন।
পদক্ষেপ 13
কাজটি সম্পূর্ণ, আমি একটি স্ক্রিনশট সরবরাহ করি (ধাপ 12-এ বর্ণিত প্রথম চিত্রের ইন্ডেন্টেশনের পরিবর্তনটি বিবেচনায় নিয়ে)।
আপনার উপযুক্ত অনুসারে যে চিত্রগুলিতে নেই সেগুলিতে ইনডেন্টেশন শৈলী যুক্ত করুন।
