اخبار سایت
تمام محبت خود را به یكباره برای دوستت ظاهر مكن؛ زیرا هر وقت اندك تغییری مشاهده كرد تو را دشمن می پندارد - سقراط
مجموعه آموزش های ویدیویی به زبان فارسی
خانه / آموزش CSS / آموزش ساخت افکت رنگین کمانی متن با css و svg
عكس افكت رنگين كماني css

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

  • زبان برنامه نویسی: سی اس اس،اس وی جی
  • سطح آموزش: معمولی
  • تعداد گام ها: 3

در این آموزش به شما نشان میدهیم که چطور میتوان بر روی نوشته خود به وسیله 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" />

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

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

دانلود

درباره محمدرضا مقدم

خوشحالم که از وب سایت آموزش دیجیتال آرت دیدن میکنید

۱ دیدگاه

  1. به نظر من به جای این که از این همه کد استفاده کنیم بهتره نیست از یه عکس آماده استفاده کنیم؟
    البته من خودم برنامه نویسم و نظرم اینه که میگم هنر اینه که یه چیز قشنگ رو با کد درست کنید تا اینکه بیام با فلش چندتا آبچکت رو بچینیم

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شدبخش های مورد نیاز علامت گذاری شده است *

*