در این آموزش به شما نشان میدهیم که چطور میتوان بر روی نوشته خود به وسیله css  افکت جالب رنگین کمانی درست کرد.طی ۳ گام سعی شده تمام مراحل به صورت واضع و مبتدیانه توضیح داده شود.همچنین در این آموزش به غیر از زبان برنامه نویسی 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 websitetext>mask>defs>rect width="100%" height="100%" mask="url(#theMask)" fill="#fff" />svg>div>div>
در کد بالا،به جای نوشته Welcome to my website متن مورد نظر خود را قرار دهید

فراخوانی فایل css
خب تا اینجای کار ما فایلهای css و html را آماده کردیم،حالا باید فایل css را در html فراخوانی کنیم تا بین این ۲ فایل ارتباط و افکت متن ما آماده شود.نکته مهم:اگر از این افکت برای سایتتان میخواهید استفاده کنید،کافیست کدهای فایل css را در قسمتی از فایل css قالب وبسایتتان درج کنید و کدهای html آن را هم در قسمت مناسبی از سایتتان قرار دهید.
برای ایجاد فراخوانی کافیست کد زیر را در بالای کدهای فایل css درج کنید.link rel="stylesheet" href="example.css" type="text/css" />
اگر هر گونه سوالی راجع به این آموزش داشتید، لطفا از طریق قسمت نظرات آن را مطرح نمایید