ساخت افکت شکستن متن یا Fractured text با استفاده از CSS - قسمت 1



visibility  
mode_comment   ۰

در این مطلب میخوام افکت شکستن متن با استفاده از CSS و کلاسهای کاذب رو به شما آموزش بدیم.

ساخت افکت شکستن متن یا Fractured text با استفاده از CSS

همونطور که میدونین با استفاده از قدرت کلاسهای کاذب یا Pseudo در CSS میتونین افکتهای جالب و بسیار زیبایی رو به وجود بیارید و کارهایی که قبلا به سختی انجام میشدن رو به راحتی انجام بدین. کلاسهای کاذب تقریبا در همه مرورگرها پشتیبانی میشن و میتونین با خیال راحت از اونا استفاده کنید.

بیشتر افکتهای متنی و ... که تا حالا دیدید با استفاده از کلاسهای کاذب انجام شده اند.

خب با کدهای HTML شروع میکنیم. در ابتدا یک تگ h1 قرار میدیم و متن مورد نظرمون رو درونش قرار میدیم:

همونطور که میبینید ویژگی data-heading رو هم به این h1 اضافه کردیم و متن 7Learn رو هم برای این ویژگی و هم درون تگ h1 قرار دادیم. ویژگی هایی که با data شروع میشن، ویژگی های سفارشی هستند که اطلاعات رو بین HTML و DOM تبادل میکنند و میتونیم با استفاده از اونا کارهای مختلفی رو انجام بدیم. در اینجا میتونیم از مقدار این ویژگی سفارشی در کدهای CSS بهره ببریم و این افکت زیبا رو به وجود بیاریم.

برای اینکه این افکت ساخته بشه، باید متن h1 با متنی که درون ویژگی سفارشی heading قرار میگیره با هم یکی باشند. بجای اینکه بیایم و از 2 المنت برای اینکار استفاده کنیم، با استفاده از ویژگی های سفارشی کارمون رو با یک المنت انجام خواهیم داد. با اینکار هم کدهای کمتری خواهیم داشت و هم اینکه مدیریت اون راحت تر میشه.

مرحله بعد اینه که کدهای CSS رو برای این افکت محیا کنیم. کدهای پایه ای زیر رو قرار میدیم:

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

در ابتدا باید المنت کاذب مورد نظر رو به وجود بیاریم و در اون به محتویات ویژگی سفارشی heading دسترسی پیدا کنیم و لایه متنی دوم برای به وجود آوردن این افکت رو ایجاد کنیم.

ما برای هر المنت HTML به دو المنت کاذب ::before و ::after دسترسی داریم. با ترکیب کردن این دو المنت کاذب و تگ h1، ما حالا سه لایه داریم که میتونیم با استفاده از اونا کارهای مختلفی رو انجام بدیم. شاید برای انجام همه افکتها به سه لایه بصورت همزمان نیاز نشه ولی بهتره که این مورد رو بدونین و در خاطر داشته باشید.

مهمترین قدم در این مرحله اینه که المنتهای کاذب باید به محتوای ویژگی سفارشی heading دسترسی پیدا بکنند. برای انجام اینکار در ویژگی content مربوط به المنتهای کاذب میتونیم، میتونیم مقدار ویژگی سفارشی data-heading رو قرار بدیم. برای اینکار مقدار ویژگی content رو برابر با content: attr(data-heading) قرار میدیم. با اینکار یک لایه جدید با متن مشابه با تگ h1 به وجود میاد.

برای اینکه مطمئن بشیم که لایه ها بر روی یکدیگر قرار میگیرن، مقدار position رو برابر با absolute قرار میدیم. کدهای زیر رو برای هر دو المنت کاذب after و before در نظر میگیریم:

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

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.