<!-- HTML-->
<div id="first">
 <h1>Using Layer Fonts In CSS</h1>
</div>
<div id="second">
 <h1>Using Layer Fonts In CSS</h1>
</div>
<div id="third">
 <h1>Using Layer Fonts In CSS</h1>
</div>

/* CSS */
#first, #second, #third{
 display: block;
 position:absolute;
 top:10px;
 left:5px;
}
h1 {
 font:5em 'One';
 color:rgba(200,0,0,.85);
}
#second h1 {
 font-family:'Two';
 color:rgba(0,200,0,.85);
 }
#third h1 {
 font-family:'Three';
 color:rgba(0,0,200,.85);
}

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

لایه بندی فونت ها با عناصر شبه

یک تکنیک نسبتاً ساده دیگر وجود دارد که با نشانه گذاری تداخلی ایجاد نمی کند: با استفاده از ::قبل از و ::بعد از عناصر شبه متن را می توان بدون به هم ریختن html لایه بندی کرد.

در اینجا چیزی است که ما می خواهیم بسازیم:

(اگر می خواهید کد بسیار کوتاه را دنبال کنید، می توانید فایل ها را از اینجا دانلود کنید. متأسفانه فونت هایی که من استفاده می کنم (Homestead که از 6 سبک تشکیل شده است که 3 تای آنها به طور خاص برای استفاده با هم طراحی شده اند) در دانلود گنجانده نشده است، اما می توانید آنها را به عنوان ابزار کمکی دانلود کنید. از اینجا. من هر فایل فونت را با استفاده از قانون @fontface بارگیری کرده ام.)

در نشانه گذاری، یک

حاوی متنی که باید لایه بندی شود ایجاد می کنیم و سپس یک

در اطراف آن قرار می دهیم. ما یک ویژگی text به تگ

اضافه می کنیم و آن را مطابق با متن عنوان خود تنظیم می کنیم (این مورد بعداً توسط CSS برای تنظیم محتوای ::before و ::after استفاده خواهد شد). با تنظیم محتوای شبه عناصر در ویژگی، محتوا را در نشانه گذاری نگه می داریم (فقط در حدود)، این بدان معنی است که ما نیازی به تنظیم محتوای شبه عناصر در CSS نداریم.

(اگر از جاوا اسکریپت یا حتی چیزی مانند PHP استفاده می کنید، بهتر است ویژگی و مقدار را همزمان وارد کنید تا از اشتباهات تایپی و ایجاد متن ناهمخوان جلوگیری کنید.)

<div>
 <h1 text="Using Layer Fonts In CSS">Using Layer Fonts In CSS</h1>
</div>

در CSS، ما با استایل دادن به h1 شروع می کنیم. اگرچه کلاس های ::before و ::after توسط همه مرورگرهای اصلی پشتیبانی می شوند، ایده خوبی است که h1 از سبکی استفاده کند که خوانا باشد. روی برای پوشش مرورگرهای قدیمی.

فونت های لایه ای معمولا حاوی کمی جزئیات هستند، بنابراین بهتر است از آنها در اندازه های بزرگ استفاده کنید. برای این مثال من از Homestead Display در 5em استفاده می کنم.

h1 {
 font: 5em ‘Display’;
 color:rgba(100,60,20,1);
}

::before و ::after برای استفاده از فونت و رنگ متفاوت تنظیم شده اند:

h1::before {
 content: attr(text);
 font-family:'Two';
 color:rgba(150,150,100,.5);
}
h1::after {
 content: attr(text);
 font-family:'Three';
 color: rgba(180,150,50,.5);
}

به منظور اجبار ::قبل و ::پس از بودن روی بالای h1، باید به آنها یک علامت بدهیم موقعیت از مطلق با بالا و ترک کرد موقعیت های 0، و سپس کل چیز را در یک div نسبتاً قرار گرفته بپیچید.

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

div {
 position: relative;
 top:10px;
 left:5px;
 background-color: rgba(200,150,150,0.2);
 border-radius: 10px;
 max-width:1190px;
}

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

(برچسب‌ها برای ترجمه) لایه



منتشر شده در 1403-01-17 06:22:02

منبع نوشتار

امتیاز شما به این مطلب