رتبها

OceanProtocol

@Oceansprotocol

9 تغريدة 19 قراءة Mar 07, 2022

Twitter

في هذا الثريد بنشتغل HTML و CSS
عشان نقص صورة داخل النص بطريقة خفيفة لطيفة

1⃣
نبدا بملف جديد HTML وانا بحط بس Div كبير داخله Div اصغر يحوي النص.
الديف الكبير الكلاس سميته "Section"
الديف الصغير فاضي داخله النص وعطيت النص كلاس awesome-text

2⃣
اربط الصفحة بملف CSS باسم styles
ونبدا نخليه سنتر ونايس بوسط الصفحة, ايضا اضفت نوع خط وخلفية سوداء ولكن كل هذا غير متعلق بالشرح

3⃣
نجي للزبدة , كلاس النص وبشرح كل سطر:
background-image: url("image.jpg");
لإظافة صورة خلفية للنص
background-position: 50% 50%;
توسيط لصورة الخلفية
font-size: 200px;
line-height: 1em;
font-weight: 900;
حجم الخط, والمسافة بين الاسطر
السحر في اخر سطرين التويتة القادمة

4⃣
هذي تستخدم عشان نخلي لون النص شفاف
-webkit-text-fill-color: transparent;
وهذي تستخدم عشان تقص الصورة على النص
-webkit-background-clip: text;
النتيجة