آموزش ساخت افکت رنگین کمانی متن با css و svg

در این آموزش به شما نشان میدهیم که چطور میتوان بر روی نوشته خود به وسیله css  افکت جالب رنگین کمانی درست کرد.طی 3 گام سعی شده تمام مراحل به صورت واضع و مبتدیانه توضیح داده شود.همچنین در این آموزش به غیر از زبان برنامه نویسی css از svg نیز استفاده شده است

ایجاد فایل css

یک فایل css ایجاد کنید و نام آن را example بگذارید، سپس کدهای زیر را در آن قرار دهید

#bkDiv
{
background: -webkit-linear-gradient(90deg, transparent 0%, #31009c 10%,
#000084 25%,#009cff 37%,#00bd00 50%,#fff700 62%,#ff6331 75%,#de0000 90%,
transparent 100%);
background: linear-gradient(0deg, transparent 0%, #31009c 10%,
#000084 25%,#009cff 37%,#00bd00 50%,#fff700 62%,#ff6331 75%,#de0000 90%,
transparent 100%);
background-color: #333;
background-size: 10px 125px;
background-repeat:repeat;
height:100px;
width:650px;

background-position:center -65px;
transition: background-position 1s;
-webkit-transition: background-position 1s;
}
#bkDiv:hover
{
background-position:center 0px;
}
#theText
{
font-family:Impact, Charcoal, sans-serif;
font-size:65px;
stroke:#000;
stroke-width:3px;
fill-opacity:0.5;
}

ایجاد فایل html

یک فایل html ایجاد کنید و کدهای زیر را در آن درج کنید

<div align="center">
<div id="bkDiv">
<svg width="100%" height="100%">
<defs>
<mask id="theMask">
<rect width="100%" height="100%" fill="#fff" />
<text x="5" y="65" id="theText" fill="#000">Welcome to my website</text>
</mask>
</defs>
<rect width="100%" height="100%" mask="url(#theMask)" fill="#fff" />
</svg>
</div>
</div>

در کد بالا،به جای نوشته Welcome to my website متن مورد نظر خود را قرار دهید

فراخوانی فایل css

خب تا اینجای کار ما فایلهای css و html را آماده کردیم،حالا باید فایل css را در html فراخوانی کنیم تا بین این 2 فایل ارتباط و افکت متن ما آماده شود.نکته مهم:اگر از این افکت برای سایتتان میخواهید استفاده کنید،کافیست کدهای فایل css را در قسمتی از فایل css قالب وبسایتتان درج کنید و کدهای html آن را هم در قسمت مناسبی از سایتتان قرار دهید.

برای ایجاد فراخوانی کافیست کد زیر را در بالای کدهای فایل css درج کنید.

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

اگر هر گونه سوالی راجع به این آموزش داشتید، لطفا از طریق قسمت نظرات آن را مطرح نمایید

همچنین میتوانید سورس و فایلهای آماده این آموزش را از اینجا دانلود کنید

دانلود