نتیجه نهایی که بدست می آورید:
BARANG
DIGITAL MARKETING
BARANG
DIGITAL MARKETING
معرفی این فونت استایل جذاب
این فونت استایل جذاب باعث می شود توجه کامل مخاطب هدف خودتون رو بدست بیارید.
ویژگیها:
قابل استفاده در المنتور
رنگ متن را به راحتی میتوانید از تنظیمات خوده المنتور تغییر دهید.
بسیار راحت و آسان قابل استفاده است
بدون نیاز به افزونه
کاملاً سبک و بهینه برای سرعت سایت
این کد را میتوانید در هر صفحه سایت در بخش css باکسی که تیترهایتان در آن قرا دارد بگذارید:
css
.container {
position: relative;
}
.container .text {
position: absolute;
top: 50;
left: 0;
width: 100%;
}
قرار دادن عناصر روی هم در المنتور + ساخت متن استروک با CSS (آموزش کامل)
اگر در المنتور کار طراحی انجام میدهید، احتمالاً نیاز داشتید که دو یا چند المان را روی هم قرار دهید؛ مثلاً یک متن روی تصویر، یا دو تیتر روی هم برای ساخت افکتهای گرافیکی. المنتور بهصورت پیشفرض اجازه این کار را نمیدهد، اما با کمی CSS بهراحتی میتوانیم این محدودیت را برطرف کنیم.
در این مطلب هم نحوه رو هم قرار دادن عناصر را یاد میگیرید، هم تکنیک حرفهای ساخت متن استروک (Outline) بدون اینکه داخل متن خط بیفتد؛ چیزی که المنتور بهصورت عادی درست انجام نمیدهد.
چرا باید عناصر را روی هم قرار دهیم؟
برای ساخت جلوههای گرافیکی مدرن، طراحان معمولاً لازم دارند المانها را روی هم قرار دهند؛ مثلاً:
متن روی تصویر
دو متن روی هم (برای ساخت استروک)
تصویر روی تصویر
افکتهای شناور یا نورانی
ساخت هدرهای جذاب
ساخت عنوانهای گرافیکی برای صفحه لندینگ
با CSS خیلی ساده میتوانیم این کار را انجام دهیم.
روش قرار دادن عناصر روی هم در المنتور
برای اینکه عناصر درون یک کانتینر روی هم بیفتند، کافی است:
۱. به کانتینر کلاس بدهید
مثلاً:
container
۲. به تیترها یا عناصری که میخواهید روی هم باشند کلاس مشترک بدهید:
text
۳. این کد CSS را در قسمت Custom CSS کانتینر قرار دهید:
/* کانتینر اصلی */
.container {
position: relative;
}
/* المانهایی که باید روی هم قرار بگیرند */
.container .text {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
با این کار عناصر دقیقاً روی هم مینشینند.
ساخت متن استروک (Outline) در المنتور بدون خراب شدن داخل متن
مشکل استروک المنتور این است که وقتی متن خم یا پیچ میخورد، داخل حروف هم خط میافتد.
راهحل حرفهای این است که یک نسخه دوم از تیتر را روی نسخه اول قرار دهیم:
مراحل ساخت استروک حرفهای در المنتور
۱. از تیتر اول یک تکثیر بگیرید
تیتر اول = متن اصلی
تیتر دوم = فقط برای ساخت استروک
2. به تیتر دوم z-index بدهید تا روی بقیه قرار بگیرد
3. opacity تیتر دوم را صفر کنید
چه کاربردهایی دارد؟
ساخت تیترهای سهبعدی و برجسته
ایجاد افکت Glow یا Neon
ساخت لوگوتایپ در المنتور
طراحی عنوانهای هدر با افکت
جذاب کردن صفحات فرود
جمعبندی
با استفاده از چند خط CSS میتوانید در المنتور قابلیتهایی ایجاد کنید که حتی نسخه پرو هم بهصورت کامل ارائه نمیدهد. رو هم قرار دادن عناصر و ساخت متن استروک حرفهای یکی از همین تکنیکهاست که ظاهر سایت را چند برابر جذابتر میکند.
