رسم تیک با سی اس اس

ایجاد دکمه تیک با استفاده از سی اس اس

ایجاد دکمه تیک با استفاده از سی اس اس
همانطور که می دانید کم کم دوره استفاده از عکس در وب در حال به اتمام رسیدن است و امروزه بیشتر وب سایت های تاپ ای که می بینیم در اکثر موارد سعی کرده اند که از تصاویر استفاده نکنند و بیشتر به استفاده از سی اس اس برای ایجاد تصاویر استفاده نمایند! شاید بپرسید استفاده از عکس خیلی راه کم دردسرتری است و چرا باید اصلا برای ساخت تصاویر از سی اس اس استفاده کنیم؟
در جواب باید متذکر شوم که وقتی کاربر در حال لود کردن وب سایت شماست هر تصویری که شما در وب سایت خود استفاده کرده اید به صورت مجزا تحت یک درخواست از سرور لود می شود یعنی اگر شما در وب سایت خود ۵۰ عدد عکس داشته باشید مرورگر کاربر باید ۵۰ بار به سرور درخواست ارسال کند تا تصاویر شما به صورت کامل بارگزاری شود که این مسئله به شدت باعث افت سرعت وب سایت شما خواهد شد. در این درس ما سعی خواهیم کرد با استفاده از کدهای سی اس اس یک علامت تیک زیبا را پیاده سازی کنیم.

ابتدا کدهای html خودمات را در جایی که می خواهیم علامت تیک در آن ظاهر شود قرار می دهیم.

div اول دارای کلاس اصلی است که سایز و مکان کلاس های دیگر را کنترل خواهد کرد.

div دوم برای کشیدن دایره استفاده شده است div سوم برای خط بلند تیک و div آخر نیز برای خط کوتاه تیک استفاده شده است!

[php]

<div class="checkmark">

<div class="checkmark_circle"></div>

<div class="checkmark_stem"></div>

<div class="checkmark_kick"></div>

<div>

[/php]

توجه داشته باشید که کل شکل به صورت ۴۵ درجه پیاده سازی شده است یعنی در حالت کلی ما با یک دایره سروکار داریم که دو خط درون آن قرار دارد حالا با چرخش ۴۵ درجه ای که به این دایره می دهیم اجزای درونی دایره که در اینجا دو عدد خط هستند به صورت کج در صفحه قرار می گیرند که ما به راحتی می توانیم با کمی تغییر مکان حالت تیک را به بهترین شکل پیاده سازی کنیم! امیدوارم از این آموزش بهره لازم رو برده باشید!

[php]

.checkmark {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}

.checkmark_circle {
position: absolute;
width:22px;
height:22px;
background-color: green;
border-radius:11px;
left:0;
top:0;
}

.checkmark_stem {
position: absolute;
width:3px;
height:9px;
background-color:#fff;
left:11px;
top:6px;
}

.checkmark_kick {
position: absolute;
width:3px;
height:3px;
background-color:#fff;
left:8px;
top:12px;
}

[/php]

فایل خروجی این کدها:
css tick

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد.