افکت زیبا بروی بردر
سلام
امروز آموزش بکار بردن یک افکت زیبا بروی بردر ، فقط و فقط با CSS را برایتون آماده کرده ام. شما از این افکت زیبا می تونید برای دکمه ها و باکس ها و یا هر جای دیگه ای که دوست دارید استفاده کنید.
در این آموزش هم شما فقط با کپی پیست کردن کد ها می تونید از آن استفاده کنید تنظیمات لازم را هم در آموزش خواهیم آورد ولی برای بهتر درک کردن کد ها مسلا دانش بوجود آوردن اشکال SVG و CSS3 لازم است. در این آموزش ها هدف ما آموزش CSS3 و … نیست و صرفا معرفی و آموزش استفاده از این نوع کد ها است.
نمایش دموی افکت
خوب در ابتدا کد html که در آن کد SVG بوجود آوردن شکل مستطیل است را وارد کنید
<div class="svg-tarahsite">
<svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
<rect class="shape" height="60" width="320" />
<div class="text"><a href="http://tarahsite.net/">طراح سایت</a></div>
</svg>
</div>
خوب حال کد های استایل را واردکنید :
html, body {
background: rgb(20,20,20);
text-align: center;
height: 100%;
overflow: hidden;
}
a {
color:#20F87C;
}
.svg-tarahsite {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
width: 320px;
}
.shape {
stroke-dasharray: 140 540;
stroke-dashoffset: -474;
stroke-width: 8px;
fill: transparent;
stroke: #19f6e8;
border-bottom: 5px solid black;
transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
.text {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-size: 22px;
line-height: 32px;
color: #fff;
top: -48px;
position: relative;
}
.svg-tarahsite:hover .shape {
stroke-width: 2px;
stroke-dashoffset: 0;
stroke-dasharray: 760;
}
برای تغییر اندازه مستطیل در کد html در width و height را می تونید تغییر بده و به اندازه دلخواهتون در آورید.فایل
دانلود سورس آموزش
امید وارم خوشتون آمده باشه .
یا علی