CSS initial-letter বৈশিষ্ট্য জিনিসগুলিকে অনেক সহজ করে তুলবে।
ব্রাউজার সমর্থন
আপনি কোথায় initial-letter চেষ্টা করতে পারেন? এটি Safari-এ এবং Chrome 110 থেকে পাওয়া যায়। Safari-এ, প্রপার্টির -webkit- উপসর্গ প্রয়োজন। ফায়ারফক্সে এটি প্রয়োগ করার জন্য একটি উন্মুক্ত সমস্যা রয়েছে।
এর সাথে initial-letter সমর্থনের জন্য পরীক্ষা করুন:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
বর্তমান সমাধান
কিভাবে আপনি আজ CSS এ ড্রপ ক্যাপ স্টাইল করতে পারেন?
::first-letter ছদ্ম-উপাদান আমাদের পথের অংশ পায়।
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
কিন্তু তারপরে প্রথম অক্ষরের জন্য একটি আকার গণনা করার সময় আপনাকে সম্ভবত "ফ্লোট" এর মতো বৈশিষ্ট্যগুলিতে পৌঁছাতে হবে।
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
float: left;
line-height: 1;
margin-right: 0.25rem;
}
lh মতো নতুন CSS ইউনিটের প্রবর্তন এই ব্যথা কিছুটা কমিয়ে দিতে পারে। কিন্তু, এগুলোরও সীমিত সমর্থন রয়েছে ( lh বর্তমানে শুধুমাত্র Chrome এ সমর্থিত)।
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 3lh;
float: left;
line-height: 1;
margin-right: 0.1lh;
}
প্রারম্ভিক-অক্ষর প্রবর্তন
initial-letter সম্পত্তি আপনাকে এই ড্রপ ক্যাপ স্টাইলিং এর উপর সূক্ষ্ম নিয়ন্ত্রণ দেয়। এটি দুটি স্থান পৃথক মান লাগে:
p::first-letter {
initial-letter: 3.5 3;
}
- প্রথম যুক্তিটি অক্ষরের আকার এবং এটি কতগুলি লাইন দখল করবে তা নির্ধারণ করে। আকৃতির অনুপাত বজায় রাখার সময় চিঠিটি স্কেল করা হবে। আপনি একটি নেতিবাচক মান ব্যবহার করতে পারবেন না কিন্তু আপনি দশমিক মান ব্যবহার করতে পারেন।
- দ্বিতীয় যুক্তিটি লেটার সিঙ্ককে সংজ্ঞায়িত করে। চিঠিটি কোথায় বসবে তার অফসেট হিসাবে এটি ভাবা যেতে পারে। দ্বিতীয় মান ঐচ্ছিক এবং ঋণাত্মক হতে পারে না। যদি এটি উপস্থিত না থাকে, তাহলে এটি নিকটতম পূর্ণসংখ্যাতে তল করা অক্ষর আকারের মান ধরে নেয়। এটি "ড্রপ" কীওয়ার্ড ব্যবহার করার সমতুল্য। সিঙ্কটি আরেকটি কীওয়ার্ড মানও গ্রহণ করে, "রেইস" যা 1 এর সিঙ্কের সমতুল্য।
ড্রপ ক্যাপ স্টাইলিংকে কীভাবে প্রভাবিত করে তা দেখতে এই ডেমোটি দেখুন যেখানে আপনি মান পরিবর্তন করতে পারেন।
এটিকে ::first-line সাথে একত্রিত করুন এবং আপনার কাছে এরকম কিছু থাকতে পারে
p::first-line {
font-variant: small-caps;
font-weight: bold;
font-size: 1.25rem;
}
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
text-shadow: 0.25rem 0.25rem #be4bdb;
}
অথবা সম্ভবত, এটি একটি border দিন। লক্ষ্য করুন কিভাবে নিম্নলিখিত উদাহরণটি "ড্রপ" কীওয়ার্ড ব্যবহার করে যা বাদ দিলে ডিফল্ট হবে এবং 3 এর সমান হবে: css p::first-letter { font-family: "Merriweather", serif; initial-letter: 3.5 drop; font-weight: bold; line-height: 1; margin-right: 1rem; color: #3b5bdb; border: 0.25rem dashed #be4bdb; padding: 0.5rem; border-radius: 5px; }
হতে পারে একটি background বা কিছু box-shadow যোগ করুন:
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: var(--surface-1);
background: #be4bdb;
padding: 0.5rem;
border-radius: 5px;
box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}
অথবা পাঠ্যের পটভূমি ক্লিপ করুন:
p::first-letter {
background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: transparent;
-webkit-background-clip: text;
padding: 0.5rem;
}
আপনার অনেক সম্ভাবনা আছে!
এবং সেখানে আপনার আছে, initial-letter সহ আপনার ড্রপ ক্যাপ স্টাইলিং এর উপর সূক্ষ্ম নিয়ন্ত্রণ! আপনি কি আপনার টাইপোগ্রাফিতে ড্রপ ক্যাপ যোগ করবেন? আপনি তাদের শৈলী কিভাবে পারে? আমাদের জানতে দিন!