کلاه های اولیه CSS

یاد بگیرید چگونگی ایجاد کلاه های اولیه فانتزی با استفاده از CSS و تصاویر

یاد بگیرید چگونه از CSS استفاده کنید تا کلاههای ابتدایی فانتزی برای پاراگرافهایتان ایجاد کنید. حتی یک تکنیک جایگزینی ساده برای استفاده از یک تصویر گرافیکی برای کلاه اولیه شما وجود دارد.

سبک های اولیه کلاه های اولیه

سه نوع اساسی کلاه اولیه در اسناد وجود دارد:

• مطرح شده است - شایع ترین، که در آن اولین حرف بزرگتر است و همان خط متن فعلی است.
• کاهش یافته است - همچنین نسبتا رایج است، که اولین حرف بزرگتر است و در زیر خط اول متن قرار دارد. متن زیر پس از آن شناور در اطراف آن.
• مجاور - که در آن اولین حرف در یک ستون در کنار بقیه متن است. این در چاپ بیشتر از طراحی وب رایج است.

کلاه های اولیه یا کلاه های ریز بسیار آشنا هستند. آنها یک راه عالی برای پوشیدن متن های طولانی و خسته کننده هستند. و با ویژگی CSS: نامه اول، شما به راحتی می توانید تعریف کنید که چطور اولین نامه های خود را به کار ببرید.

یک کلاه اولیه را ایجاد کنید

همه چیزهایی که باید انجام دهید برای ایجاد یک کلاه اولیه ساده ساده است که اولین علامت پاراگراف خود را با عنصر شبه عنصر حرف اول بزرگتر کنید:

p: first-letter {font-size: 3em؛ }

اما بسیاری از مرورگر ها می بینند که اولین حرف بزرگتر از بقیه متن در خط است، بنابراین آنها منجر به مساوی بودن با آنچه که برای اولین حرف است، و نه بقیه خط است. خوشبختانه این آسان است که با عنصر خطی اول خط و ارتفاع ویژگی خط:

p: first-letter {font-size: 3em؛ } p: first-line {line-height: 1em؛ }

تا زمانی که اندازه مناسب متن خود را پیدا نکنید، با ارتفاع خط سند خود بازی کنید.

بازی با کلاه اولیه شما

هنگامی که شما متوجه شدید که چگونه یک کلاه اولیه ایجاد کنید، می توانید آن را در لباس های فانتزی لباس کنید تا آن را بیابید. بازی با رنگ ها، رنگ های پس زمینه، مرزها، و یا هر چیز دیگری به تصور شما علاقه مند است. یک سبک نسبتا ساده این است که رنگ فونت و رنگ پس زمینه را فقط برای حرف اول تغییر دهید:

p: first-letter {font-size: 300٪؛ رنگ پس زمینه: # 000؛ رنگ: #fff؛ } p: first-line {line-height: 100٪؛ }

ترفند دیگر این است که خط اول را تمرین کنید. این می تواند با CSS روی حیله و تزویر، به عنوان وسط خط متن می تواند متفاوت باشد اگر طرح شما انعطاف پذیر است. اما با بازی کردن با مقادیر، شما می توانید خط اول خود را به اندازه کافی برای اولین نامه ظاهر می شود در وسط قرار دارد. فقط با درصد در نوشتار متن پاراگراف بازی تا زمانی که به نظر می رسد درست است:

p: first-letter {font-size: 300٪؛ رنگ پس زمینه: # 000؛ رنگ: #fff؛ } p: first-line {line-height: 100٪؛ } p {text-indent: 45٪ ؛ }

کلاه های اولیه مجاور سخت با CSS هستند

کلاه اولیه اولیه مجاور می تواند با CSS دشوار باشد زیرا مرورگرهای مختلف فونت های مختلف را نمایش می دهند. ایده ایجاد یک چارچوب مجاور در CSS این است که از یک ویژگی نوشتار نوشتاری در خط اول برای فشار دادن آن (به سمت چپ) یک مقدار منفی استفاده شود. شما همچنین باید مقدار حاشیه چپ آن پاراگراف را تغییر دهید. با این عدد بازی کنید تا پاراگراف خوب به نظر برسد.

p {text-indent: -2.5em؛ margin-left: 3em؛ } p: first-letter {font-size: 3em؛ } p: first-line {line-height: 100٪؛ }

گرفتن کلاه های اولیه واقعا فانتزی

بهترین راه برای ایجاد یک کلاه اولیه فانتزی این است که فونت را به یک خانواده فونت تزئینی تغییر دهید. اگر از مجموعه ای از فونت ها به دنبال یک فونت عمومی استفاده می کنید ، به شما کمک می کند که کلاه اولیه خود را به خوبی نشان دهد، به طوری که مشتریان شما می توانند آن را مشاهده کنند، بدون دسترسی به مسائل دسترسی و قابلیت استفاده.

p: first-letter {font-size: 3em؛ فونت خانواده: "ادواردین اسکریپت ITC"، "براش اسکریپت MT"، cursive؛ } p: first-line {line-height: 100٪؛ }

و، طبق معمول، شما می توانید تمام این پیشنهادات را با هم ترکیب کنید تا یک دامنه اولیه ایجاد کنید که تبلیغات به پاراگراف شما سبک است.

با استفاده از کلاه اولیه اولیه گرافیکی

اگر پس از همه اینها، هنوز هم دوست ندارید که چطور کلاه اولیه خود را روی صفحه ببینید، می توانید به گرافیک بپردازید تا اثر دقیقی را که می خواهید جستجو کنید. اما قبل از اینکه تصمیم به حرکت مستقیم به گرافیک دارید، باید از اشکالات این روش مطلع شوید:

• مشتریان بدون تصاویر کلاه اولیه را نمی بینند و ممکن است متن پنهانی که تصویر جایگزین می کند را مشاهده نکنید. این می تواند پاراگراف غیر قابل دسترس باشد، یا در بهترین حالت برای خواندن دشوار باشد.
• تصاویر همیشه به زمان دانلود یک صفحه اضافه می شوند. اگر شما مقدار زیادی کلاه اولیه داشته باشید، می توانید زمان دانلود را برای چیزی که بسیاری از مردم احساس می کنند ناچیز است، به طور قابل توجهی افزایش می دهد.
• بعضی از مرورگرها هر دو حرف اول پنهان و تصویر را نمایش می دهند که می تواند متن پاراگراف را به صورت عجیب و غریب ایجاد کند.
• این گزینه بسیار آسان است زیرا شما باید دقیقا بدانید چه نامه ای اول است تا از گرافیک صحیح استفاده کنید. بنابراین، هر بار که پاراگراف ویرایش می شود، ممکن است لازم باشد یک گرافیک جدید ایجاد کنید.

ابتدا باید گرافیک اول نامه را ایجاد کنید. من از فتوشاپ برای ایجاد حرف L با قلم "Edwardian Script ITC" استفاده کردم. من آن را بزرگ - 300pt در اندازه ساخته شده است. من پس از آن تصویر را به حداقل برهنه در اطراف نامه برش و اشاره تصویر و عرض.

سپس یک کلاس "capL" برای پاراگراف من ایجاد کردم. این جایی است که من تعریف می کنم که چه تصویر برای استفاده، پیشرو (خط ارتفاع) و غیره.

شما نیاز به استفاده از عرض تصویر و ارتفاع برای تنظیم پارامتر text-indent و padding-top. برای تصویر L من، من نیاز به کمربندی 95px و 72px داشتم.

p.capL {line-height: 1em؛ تصویر پس زمینه: url (capL.gif)؛ پس زمینه تکرار: بدون تکرار؛ نوشتار متن: 95px؛ padding-top: 72px؛ }

اما این همه نیست اگر آن را در آنجا قرار دهید، اولین حرف در پاراگراف تکرار خواهد شد - ابتدا با گرافیک و سپس در متن. بنابراین، یک محدوده اطراف این عنصر را با کلاس "اولیه" اضافه کردم - و به مرورگر گفت که این حرف را نمایش نمی دهد:

span.initial {نمایش: هیچ؛ }

گرافیک سپس به درستی نمایش داده می شود. شما می توانید با نوشتار متن در پاراگراف بازی کنید تا متن را تا حدی درست کنید، با این حال شما می خواهم آن را نمایش دهد.