CSS Icon: یک گالری تمام عیار از آیکان­‌های CSS برای دولوپرهای فرانت­‌اند

CSS Icon: یک گالری تمام عیار از آیکان­‌های CSS برای دولوپرهای فرانت­‌اند

شرکت Adobe به واسطهٔ نرم‌افزارهایی نظیر فتوشاپ، ایلاستریتور، پریمیر، افترافکت و البته ادوبی آکروبات‌ریدر برای اجرای فایل‌های پی‌دی‌اف، در بین کاربران کامپیوتر نامی آشنا و محبوب می‌باشد. Wenting Zhang یکی از طراحان این شرکت، اخیراً وب‌اپلیکیشن بسیار جذابی را معرفی نموده است که بااستفاده از آن می‌توان آیکان‌هایی ساخت که تنها بااستفاده از کدهای CSS ایجاد شده‌اند! این سرویس CSS Icon نام دارد و می‌تواند ابزاری بسیار مفید به‌خصوص برای دولوپرهای فرانت‌اند باشد.

CSS Icon کاملاً رایگان و اپن‌سورس بوده و تمامی فایل‌های آن از ریپازیتوری CSS Icon در گیت‌هاب قابل دانلود می‌باشند؛ آیکان‌های ایجاد شده توسط این اپلیکیشن هیچ وابستگی به سایر لایبرری‌های CSS ندارند و برای نمایش آن‌‌ها در مرورگر نیازی به ویژگی و امکانات خاصی نیست.

شاید در نگاه اول به‌نظر برسد که این آیکان‌ها از SVG (تصاویری از که خطوط و منحنی‌ها تشکیل شده‌اند و درصورت تغییر ابعاد، کیفیت آن‌ها افت نمی‌کند) ساخته شده‌اند، اما اینچنین نیست، و تنها از یک div و چند خط کد CSS در ساخت آن‌ها استفاده شده است.

بااستفاده از CSS می‌توان آیکان‌های کاملاً سفارشی و اختصاصی نظیر همبرگر منو (آیکن ۳ خط افقی قرارگرفته روی یکدیگر که در اکثر موارد برای نمایش منوی یک سایت در حالت موبایل استفاده می‌شود) و آیکان‌های مربوط به دکمهٔ پرینت و غیره ساخت و از آن‌ها در صفحات سایت استفاده نمود.

در وب اپلیکیشن CSS Icon، به‌طور‌کلی می‌توان ۲ نوع آیکان تحت عناوین Thin-Line Icon (دارای خطوط باریک) و Dark-Filled Icon (برای آیکان های توپر) استفاده نمود؛ ساختار کدهای CSS برای هر دو حالت یکسان است و با کلیک بر روی هر آیکان موجود در لیست CSS Icon، می‌توان کدهای نوشته شده برای آن را در قسمت اسلاید سمت راست صفحه مشاهده نمود.

در قسمت بالا و سمت راست این اسلایدر، یک آیکان کپی وجود دارد که با کلیک بر روی آن کدهای قسمت پایین به صورت کامل در حافظهٔ موقت سیستم‌عامل کپی می‌شوند و می‌توان آن‌ها را در قسمت موردنیاز پیست کرد (همچنین یک لینک به وب‌سایت codepen.io نیز در‌نظر گرفته شده است تا کاربران بتوانند به تغییر کدها به‌صورت آنلاین بپردازند).

شاید مهمترین ویژگی این مجموعه در کنار سادگی و رایگان بودنش، امکان ساخت آیکان‌هایی است که مشابه با فایل‌های پسوند gif. هستند (انیمیشن‌های کوتاه که در طی مدت زمان تعیین شده تغییر می‌کنند). برای استفاده از این ویژگی، بر روی عبارت animate در قسمت بالا و سمت چپ صفحهٔ هوم پیج CSS Icon کلیک نمایید؛ سپس در ادامه می‌توان ۲ آیتم را به‌عنوان نمای آغازین و پایانی انتخاب نمود و درنهایت در کدهای نوشته‌شده گزنیهٔ transition برای تنظیم مدت‌‌زمان تغییرات برحسب ثانیه و همچنین یک تابع جاوااسکریپت به‌صورت خودکار اضافه می‌شود.

برای تغییر رنگ همه آیکان‌ها به‌صورت هم‌زمان هم تنها کافی است مقدار ویژگی Color را در کلاس اصلی آن‌ها تغییر دهید و برای تغییر رنگ تنها یکی از آن‌ها را می‌توان از کلاس و یا آی‌دی منحصربه‌فردی استفاده نمود.

اگرچه تعداد آیتم‌های این مجموعه زیاد نیست و موارد ساده‌ای را شامل می‌شود، اما استفاده از این سرویس رایگان می‌تواند موجب افزایش سرعت و کیفیت طراحی شده و جایگزین مناسبی برای استفاده از تصاویر به‌جای آیکان و حتی Icon Font‌هایی همچون Font Awesome باشد؛ البته فراموش نکنیم که تمامی این امکانات به‌صورت کاملاً رایگان در اختیار کاربران قرار می‌گیرد.

منبع


علی فلاحی