افکت انعکاس متن با CSS

امروز می خواهیم یک افکت جذاب روی متن های شما در سایت پیاده سازی کنیم. در این آموزش از زبان نشانه گذاری HTML و زبان CSS استفاده می کنیم. ویدئوی زیر نحوه ایجاد افکت انعکاس متن با CSS را به شما خواهد آموخت :

اگر فرصت مشاهده ی ویدئوی بالا رو ندارید به ادامه ی مطلب مراجعه کنید!

آموزش ایجاد انعکاس روی متن با CSS

ابتدا یک فایل CSS و HTML در یک پوشه ی دلخواه بسازید. از آنجایی که این پروژه دارای دو بخش است کد های مربوط به زبان html را در فایلی با این پسوند و کد های استایل را در فایلی با پسوند css قرار می دهیم.

برای مثال ما در این آموزش فایلی به نام index.html و style.css را ساخته ایم.
اولین کار این است که فایل css را به فایل html پیوند دهیم. همانطور که می دانید این کار به وسیله ی تگ لینک انجام می شود :

<link rel="stylesheet" type="text/css" href="style.css">

بعد از اتصال صحیح، نوبت به ایجاد عناصر مورد نیاز ما می رسد:

<link rel="stylesheet" type="text/css" href="style.css">
<div class="main">
    <p class="para text">Tutsxen</p>
    <p class="para reflection">nexstuT</p>
</div>

همانطور که در کد فوق می بینید دو تگ پاراگراف ایجاد کردیم، تگ پاراگراف اولی برای خود عنصر و تگ دومی انعکاس اولی است!

* توجه کنید برای زیبایی کار باید محتوای تگ ها از نظر الفبایی برعکس هم باشد! مثلا اگر می خواهید انعکاس کلمه KHODA رو بوجود بیاوررید باید محتوای تگ پاراگراف دوم : ADOHK باشد!

خب حال نوبت به استایل دهی می رسد:

*{
    padding: 0; 
    margin:0;
}
.main{
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100vh;
}
.para{
    font-size: 200px;
}
.text{
    color: #fff;
}
.reflection{
    background: linear-gradient(#111 , rgba(255,255,255,0.25));
    -webkit-text-fill-color:transparent;
    -o-text-fill-color:transparent;
    -moz-text-fill-color:transparent;
    -webkit-background-clip:text;
    -o--background-clip:text;
    -moz--background-clip:text;
    transform: rotate(180deg);
    position: relative;
    bottom: 70px;
}

نکات :

• ابتدا با دادن مقادیر پدینگ و مارجین به * ( آل سلکتور) اصطلاحا مرورگر را ریست کردیم تا فاصله های داخلی و خارجی اضافی را پاک کنیم.
• خاصیت فلکس باکس را برای عنصر با کلاس main ست نمودیم تا بصورت ستونی فرزند ها در زیر هم قرار گیرد و رنگ مشکی را برای جلوه ی بهتر برای پس زمینه ی کار قرار دادیم.
• کلاس reflection برای اینکه انعکاس تصویر ما از روشن تا تیرره باشد از گرادیانت استفاده کردیم و خاصیت background-clip را بدین منظور روی text ست نمودیم.

به پایان آموزش “افکت انعکاس متن با CSS” رسیدیم. امیدوارم این آموزش مورد توجهتان قرار گرفته باشد. شما می توانید سوالات و ابهامات خود را در بخش کامنت ها با ما در میان بگذارید.