Sokan Academy

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

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

شرکت ادوبی به واسطهٔ نرم‌افزارهایی نظیر فتوشاپ، ایلاستریتور، پریمیر، اَفترافکت و البته ادوبی آکروبات‌ریدر در بین کاربران کامپیوتر نامی آشنا و محبوب می‌باشد. Wenting Zhang، یکی از طراحان این شرکت، سرویسی کاربردی را به بازار عرضه نموده که با استفاده از آن می‌توان آیکان‌هایی ساخت که تنها با استفاده از کدهای CSS ایجاد شده‌اند.

CSS Icon کاملاً رایگان و اپن‌سورس بوده و تمامی فایل‌های آن از ریپازیتوری CSS Icon در گیت‌هاب قابل‌دانلود می‌باشند. آیکان‌های ایجاد شده توسط این اپلیکیشن هیچ وابستگی به سایر لایبرری‌های سی‌اس‌اس ندارند و برای نمایش آن‌‌ها در مرورگر نیازی به ویژگی و امکانات خاصی نیست. شاید در نگاه اول به‌ نظر برسد که این آیکان‌ها از SVG ساخته شده‌اند، اما این‌چنین نیست و تنها از یک div و چند خط کد در ساخت آن‌ها استفاده شده است به طوری که با استفاده از سی‌اس‌اس می‌توان آیکان‌های کاملاً سفارشی و اختصاصی، نظیر منوی همبرگری و آیکان‌های مربوط به دکمهٔ پرینت و غیره، ساخت و از آن‌ها در طراحی صفحات سایت استفاده نمود.

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

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

برای تغییر رنگ همه آیکان‌ها به‌ صورت هم‌زمان هم تنها کافی است مقدار پراپرتی color را در کلاس اصلی آن‌ها تغییر دهید و یا به منظور تغییر رنگ تنها یکی از آن‌ها، می‌توان از یک آی‌دی اختصاصی استفاده نمود.

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

این محتوا آموزنده بود؟
فرانت اندسی اس اس

sokan-academy-footer-logo
کلیه حقوق مادی و معنوی این وب‌سایت متعلق به سکان آکادمی می باشد.