সিএসএস এবং ছবি ব্যবহার করে ফ্যানিশি প্রাথমিক ক্যাপ কিভাবে তৈরি করবেন তা শিখুন
আপনার অনুচ্ছেদের জন্য অভিনব প্রাথমিক ক্যাপ তৈরি করতে সিএসএস ব্যবহার করা শিখুন। আপনার প্রাথমিক টুপি জন্য একটি গ্রাফিকাল ইমেজ ব্যবহার করার জন্য এমনকি একটি সাধারণ ইমেজ প্রতিস্থাপন কৌশল আছে।
প্রাথমিক ক্যাপ বেসিক শৈলী
নথিগুলির প্রাথমিক ক্যাপগুলির তিনটি মৌলিক শৈলী রয়েছে:
- উত্থাপিত - সবচেয়ে সাধারণ, যেখানে প্রথম অক্ষর বড় এবং বর্তমান পাঠ্য হিসাবে একই লাইনে।
- বাদ পড়েছে - মোটামুটি সাধারণ, যেখানে প্রথম অক্ষরটি বড় এবং পাঠের প্রথম লাইনের নিচে নিচের দিকে পড়ে। নীচের লেখাটি তখন চারপাশে ভাসছে।
- সংলগ্ন - যেখানে প্রথম অক্ষরটি পাঠের অবশিষ্ট অংশের পাশে এক কলামে রয়েছে। ওয়েব ডিজাইনের তুলনায় এটি মুদ্রণে বেশি সাধারণ।
প্রাথমিক ক্যাপ বা ড্রপ ক্যাপ খুব পরিচিত। তারা টেক্সট অন্যথায় দীর্ঘ এবং বিরক্তিকর স্প্যান্স আপ পোষাক একটি দুর্দান্ত উপায়। এবং CSS সম্পত্তি দিয়ে: প্রথম অক্ষর, আপনি সহজেই আপনার প্রথম অক্ষর fancier করতে কিভাবে সংজ্ঞায়িত করতে পারেন।
একটি সহজ প্রাথমিক ক্যাপ তৈরি করুন
একটি সহজ উত্থাপিত প্রাথমিক টুপি তৈরি করতে আপনার সব করতে হবে প্রথম অক্ষর ছদ্ম-উপাদান দিয়ে আকারে বড় আপনার অনুচ্ছেদের প্রথম অক্ষর করতে হয়:
p: প্রথম অক্ষর {font-size: 3em; }কিন্তু অনেক ব্রাউজার দেখতে পায় যে প্রথম অক্ষর লাইনের অন্যান্য অংশের তুলনায় বড়, তাই তারা নেতৃস্থানীয় সমতুল্য যা প্রথম অক্ষরের জন্য অনুমান করবে, বাকি লাইনে না। সৌভাগ্যক্রমে, এই প্রথম লাইন ছদ্ম-উপাদান এবং লাইন-উচ্চতা সম্পত্তি সঙ্গে সংশোধন করা সহজ:
p: প্রথম অক্ষর {font-size: 3em; } পি: প্রথম লাইন {লাইন-উচ্চতা: 1em; }আপনার পাঠ্যের সঠিক আকার না পাওয়া পর্যন্ত আপনার নথির মধ্যে লাইনের উচ্চতা দিয়ে খেলুন।
আপনার প্রাথমিক ক্যাপ সঙ্গে খেলা
একবার আপনি একটি প্রাথমিক টুপি তৈরি কিভাবে বুঝতে, আপনি এটি স্ট্যান্ড আউট করতে অভিনব কাপড় মধ্যে এটি আপ পোষাক করতে পারেন। রঙ, পটভূমি রং, সীমানা, বা যাই হোক না কেন আপনার অভিনব উপর আঘাত সঙ্গে খেলুন। একটি মোটামুটি সহজ শৈলী হল প্রথম অক্ষরের জন্য আপনার ফন্ট এবং পটভূমির রঙ উল্টোটা হল:
p: প্রথম অক্ষর {ফন্ট সাইজ: 300%; পটভূমি-রঙ: # 000; রঙ: #fff; } পি: প্রথম লাইন {লাইন-উচ্চতা: 100%; }আরেকটি কৌতুক প্রথম লাইন কেন্দ্রে হয়। এটি CSS দিয়ে জটিল হতে পারে, কারণ আপনার লেআউটটি নমনীয় হলে টেক্সট লাইনের মাঝের ভিন্ন হতে পারে। তবে কিছু কিছু মূল্যবোধের সাথে চারপাশে খেলা করার সাথে সাথে আপনি আপনার প্রথম লাইন ইন্ডেন্ট করতে পারেন যাতে প্রথম অক্ষরটি মধ্যম আকারে প্রদর্শিত হয়। অনুচ্ছেদের পাঠ্য-ইন্ডেন্টের শতাংশের সাথে খেলা না হওয়া পর্যন্ত এটি ঠিক দেখাচ্ছে:
p: প্রথম অক্ষর {ফন্ট সাইজ: 300%; পটভূমি-রঙ: # 000; রঙ: #fff; } পি: প্রথম লাইন {লাইন-উচ্চতা: 100%; } পি {টেক্সট ইন্ডেন্ট: 45% ; }সংগত প্রাথমিক ক্যাপ CSS সঙ্গে কঠিন
বিজোড় প্রাথমিক ক্যাপ CSS এর সাথে কঠিন হতে পারে কারণ বিভিন্ন ব্রাউজার ফন্টগুলিকে ভিন্নভাবে প্রদর্শন করে। সিএসএস-এ একটি সন্নিহিত টুপি তৈরির পিছনে ধারণা প্রথম লাইনের টেক্সট ইন্ডেন্টের সম্পত্তিটি ব্যবহার করে (বাম দিকে) একটি নেতিবাচক মানটি ধাপে ধাপে ব্যবহার করা। আপনি কিছু অনুপাত দ্বারা যে অনুচ্ছেদ বাম মার্জিন পরিবর্তন করতে হবে। অনুচ্ছেদটি ভালো না হওয়া পর্যন্ত এই সংখ্যাগুলি খেলুন।
পি {টেক্সট ইন্ডেন্ট: -2.5em; মার্জিন বাম: 3 এম; } p: প্রথম অক্ষর {font-size: 3em; } পি: প্রথম লাইন {লাইন-উচ্চতা: 100%; }সত্যিই কল্পনাপ্রসূত প্রাথমিক ক্যাপ প্রাপ্ত
একটি অভিনব প্রাথমিক টুপি তৈরি করার সবচেয়ে ভাল উপায় ফন্টটি আরও সজ্জিত ফন্ট পরিবারে পরিবর্তন করা। আপনি যদি একটি জেনেরিক ফন্ট দ্বারা অনুসরণ ফন্ট একটি সিরিজ ব্যবহার করে, এটি আপনার প্রাথমিক ক্যাপ দেখায় যাতে গ্যারান্টি সাহায্য করবে যাতে আপনার গ্রাহকদের অ্যাক্সেসযোগ্যতা এবং ব্যবহারযোগ্যতা বিষয় না পেয়ে, এটি দেখতে পারেন।
p: প্রথম অক্ষর {font-size: 3em; ফন্ট-পরিবার: "এডওয়ার্ডীয় স্ক্রিপ্ট আইটিসি", "ব্র্যাশ লিমিট এমটি", কার্স্টিভ; } পি: প্রথম লাইন {লাইন-উচ্চতা: 100%; }এবং, স্বাভাবিক হিসাবে, আপনি আপনার অনুচ্ছেদের বিজ্ঞাপন শৈলী একটি প্রাথমিক ক্যাপ তৈরি করতে একসাথে এই সব পরামর্শ একসাথে করতে পারেন।
একটি গ্রাফিকাল প্রাথমিক ক্যাপ ব্যবহার
যদি, সব পরে, আপনি এখনও আপনার প্রাথমিক ক্যাপ পৃষ্ঠার উপর কিভাবে দেখতে না চান, আপনি আপনি খুঁজছেন ঠিক প্রভাব পেতে গ্রাফিক্স অবলম্বন করতে পারেন। কিন্তু আপনি সরাসরি গ্রাফিক্স সরানোর সিদ্ধান্ত নিতে আগে, আপনি এই পদ্ধতির দুর্বলতা সচেতন হতে হবে:
- ইমেজ ছাড়া গ্রাহকরা প্রাথমিক টুপি দেখতে পাবেন না, এবং ছবিটি প্রতিস্থাপিত হওয়া লুকানো পাঠ্য দেখতে পাবে না। এই অনুচ্ছেদ অযোগ্য করতে পারেন, অথবা পড়তে ভাল কঠিন।
- চিত্র সর্বদা একটি পৃষ্ঠা ডাউনলোড সময় যোগ করুন যদি আপনার অনেকগুলি প্রাথমিক ক্যাপ থাকে, তবে আপনি অনেক সময় অনুভব করতে পারেন এমন কিছু সময়ের জন্য আপনি ডাউনলোডের সময়টি উল্লেখযোগ্যভাবে বৃদ্ধি করতে পারেন।
- কিছু ব্রাউজার লুকানো প্রথম অক্ষর এবং চিত্র উভয় প্রদর্শন করা হবে - যা অনুচ্ছেদ টেক্সট চেহারা অদ্ভুত করতে পারেন।
- এই বিকল্পটি স্বয়ংক্রিয় করার জন্য এটি খুব কঠিন, আপনি সঠিক গ্রাফিক ব্যবহার করেন যাতে আপনি প্রথম অক্ষরটি ঠিক কি তা জানতে হবে। সুতরাং, প্রতিটি সময় অনুচ্ছেদ সম্পাদনা করা হয়, আপনাকে একটি নতুন গ্রাফিক তৈরি করতে হতে পারে।
প্রথমত, আপনাকে প্রথম অক্ষরের গ্রাফিক তৈরি করতে হবে। আমি ফটোশপ ব্যবহার করেছি ফন্ট "Edwardian Script ITC" এর সাথে অক্ষর L তৈরি করতে। আমি এটি বিশাল তৈরি - আকার 300pt। আমি তারপর ইমেজ নীচের চারপাশে সর্বনিম্ন ন্যূনতম আটকানো এবং চিত্র প্রস্থ এবং উচ্চতা উল্লিখিত
তারপর আমি আমার অনুচ্ছেদ জন্য একটি ক্লাস "capL" তৈরি। এই যেখানে আমি নির্ধারণ করা কি ইমেজ ব্যবহার করা হয়, নেতৃস্থানীয় (লাইন উচ্চতা), এবং তাই।
অনুচ্ছেদের পাঠ্য-ইন্ডেন্ট এবং প্যাডিং-শীর্ষ সেট করতে আপনাকে চিত্রের প্রস্থ ও উচ্চতা ব্যবহার করতে হবে। আমার এল ইমেজ জন্য, আমি 95 প্যাক্স ইন্ডেন্ট এবং 72 পিন প্যাডিং প্রয়োজন।
p.capL {লাইন-উচ্চতা: 1 ম; ব্যাকগ্রাউন্ড-ইমেজ: ইউআরএল (capL.gif); পটভূমি-পুনরাবৃত্তি: কোন-পুনরাবৃত্তি; পাঠ্য ইন্ডেন্ট: 95 পিএক্স; প্যাডিং শীর্ষ: 72px; }কিন্তু এখানেই শেষ নয়. যদি আপনি এটি ত্যাগ করেন, তবে প্রথম অক্ষরটি অনুচ্ছেদে অনুলিপি করা হবে - প্রথমটি গ্রাফিকের সাথে, তারপর পাঠ্যে। সুতরাং, আমি "প্রাথমিক" ক্লাসের সাথে প্রথম উপাদানটির কাছাকাছি একটি স্প্যান যুক্ত করেছি - এবং সেই চিঠিটি প্রদর্শন না করার জন্য ব্রাউজারকে জানান:
span.initial {প্রদর্শন: কেউ না; }এবং গ্রাফিক তারপর সঠিকভাবে প্রদর্শন আপনি অক্ষর থেকে টেক্সট আপ snugged পেতে অনুচ্ছেদে টেক্সট ইন্ডেন্ট সঙ্গে খেলতে পারেন, তবে আপনি এটি প্রদর্শন করতে চাই।