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

47

0

Reflection on Text 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” رسیدیم ، امیدوارم این آموزش مورد توجهتان قرار گرفته باشد . شما می توانید سوالات و ابهامات خود را در بخش کامنت ها با ما در میان بگذارید.

مهندس محسن حسن پور

برنامه نویس | طراح سایت | متخصص سئو

1سال در کنار تاتژن

اشتراک
اطلاع از
guest
0 Comments
Inline Feedbacks
View all comments
ارسال تیکت
0
Would love your thoughts, please comment.x
()
x