۱۱ پروژه آزمایشی CSS که مغزتان را منفجر می‌کند

کارهای بسیار زیادی را می‌توانید با استفاده از CSS و مرورگرهای وب انجام دهید. توسعه‌دهندگان خوب همواره دوست دارند کارهای‌شان را به نمایش بگذارند و نشان دهند که انجام چه کارهایی امکان پذیر است. 

در حالیکه پروژه‌های آزمایشی همواره نمی‌توانند در تولید یک وبسایت مفید باشند اما می‌توانند واقعا الهام بخش و آموزش دهنده باشند. 

ما در این مطلب پروژه‌های CSS را آماده کرده‌ایم تا قدرت CSS را به شما نشان دهیم. تمام این موارد روی CodePen بارگذاری شده‌اند و استفاده کردن از سورس این‌ برنامه‌ها آزاد است. همچنین برای هر کدام از این موارد پیشنمایش نیز ارائه شده است. 

۱. Gradient Loading Bars

 این برگه بارگذاری از گرادینت‌های متحرک با قابلیت تغییر اندازه برای نمایش جلوه بارگذاری تکرار شدنی استفاده می‌کند. 

مطمئنا بیشتر مردم می‌تواند این انیمیشن بارگذاری را از روی چیزی که در فیسبوک نیز به صورت کوچکتری عرضه شده مشاهده کنند. در این طرح از Sass استفاده شده است، اما در حال حاضر بیشتر نوارهای بارگذاری موجود و انیمیشنی از فرمت‌های تصویری Gif استفاده می‌کنند. 

این نوار بارگذاری CSS۳ نشان می‌دهد که با داشتن فکری خلاق می‌توانید تقریبا هر استایلی که دوست دارید را ایجاد کنید. 

۲. Solar System Animation

این مورد یکی از پیچیده‌ترین پروژه‌های CSS بوده که من توانستم پیدا کنم. این طراحی پویا از منظومه شمسی توسط Malik Dellidj ایجاد شده و در طراحی آن از هیچگونه تصویری استفاده نشده است. این طرح به صورت کامل روی CSS اجرا می‌شود.

هر کدام از سیارات در این طرح از یک سرعت چرخش بهره می‌گیرند. این طرح یک مدل واقعی از منظومه شمسی است و می‌تواند به عنوان یک پس‌زمینه بسیار زیبا استفاده شود. 

۳. Pure CSS Minesweeper

من هیچ گاه به روزی که با استفاده از CSS بتوان بازی« مین جمع کن» را طراحی کرد فکر نمی‌کردم. با تشکر از Bali Balo این کار محقق شده است. 

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

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

۴. Day and Night Toggles

 از یک طرف قضیه ممکن است که این طراحی بسیار ساده به نظر برسد. این مورد از یک ورودی چک باکس استفاده می‌کند. این ابزار سوئیچ کردن ویژگی‌های بسیار منحصر به فردی دارد که می‌تواند آن را تبدیل به یکی از بهترین‌ها بکند:

• آیکون مربوط به سوئیچ کردن از خورشید به ماه تغییر می‌کند.
• ستاره‌ها و ابرها با انیمیشن تغییر می‌کنند. 
• این طراحی ۱۰۰٪ براساس CSS ساخته شده است.

این طراحی به نحوی است که کاربر را برای کلیک کردن جذب خود می‌کند و انیمیشن زیبایی را به ناحیه نمایش می‌آورد. طراحی آیکون‌های خورشید و ماه نیز بسیار منحصر به فرد است، بهتر از آن اینکه این موارد نیز کاملا براساس CSS ساخته شده است. 

۵. CSS Mouse Tracking

در حالت سنتی ردیابی کردن ماوس کار جاوااسکریپت بود، بدین صورت که مختصات مکانی ماوس را روی صفحه دریافت می‌کرد و براساس آن نقطه‌ای را نمایش می‌داد. 

این تکنیک هنوز هم بر اساس جاوااسکریپت اجرا می‌شود، اما در این قطعه کد می‌توانید چنین ویژگی را به صورت کامل براساس CSS مشاهده کنید. 

نمی‌توانم کارکرد منحصر به فرد و خاصی را برای این طرح در نظر بگیرم اما واقعا می‌تواند جذاب باشد.

۶. Flat Amusement Park

همه ما آیکون‌ها و تصویرسازی‌های وکتوری که برای وب طراحی شده‌اند را مشاهده کرده‌ایم. اما در رابطه با تصویرسازی‌های وکتور تمام صفحه که با استفاده از CSS و SVG ساخته شده اند چه؟

در این پروژه می‌توانید یک پارک را مشاهده کنید که کاملا براساس SVG طراحی شده و توسط مرورگرها نیز به خوبی پشتیبانی می‌شود. در این طرح مرورگرهای مدرن بدون هیچ مشکلی آن را به خوبی رندر می‌کنند و هر المانی را به درستی روی صفحه نمایش می‌دهند. 

انیمیشن استفاده شده در این طرح نیز بسیار زیبا است و موضوع جالب توجه این است که قسمت انیمیشن نیز با استفاده از SVG طراحی شده است.  در چند سال آینده ممکن است ما چنین طراحی‌هایی را روز به روز بیشتر ببنیم. تصاویری که با کد نوشته شده اند. 

۷. Möbius in ۳D

طراحی کردن چنین انیمیشن CSS تکرار شدنی کاملا سخت است. اما المان‌های سه بعدی و گرادینت‌های متفاوت چه؟ حال ما واقعا با یک چالش روبرو هستیم.

این قطعه کد با در نظر گرفتن نرمی و استفاده بهینه از تعداد خط کدها واقعا شگفت انگیز است. با استفاده از Haml شما تنها به ۶ خط کد برای ایجاد مفهوم کلی نیاز دارید. 

من به این موضوع که چنین طراحی نمی‌تواند مفید باشد اقرار می‌کنم، اما مشاهده کردن چنین طراحی واقعا نیازمند تامل زیادی است. 

۸. Custom Map Creator

بعد از کمی استفاده و بازی کردن با این طرح به این نتیجه می‌رسید که چنین طرحی ۱۰۰٪ براساس جاوااسکریپت درست شده است. برای مثال رفتارهای پویا مانند چرخیدن سه بعدی و قرار گرفتن رنگ‌ها با استفاده از جاوااسکریپت انجام می‌شود.

اما اشتباه می‌کنید، این طرح توسط Vincent Durand ایجاد شده و کاملا براساس CSS اجرا می‌شود. تمام ویژگی های داخل این طرح مانند چرخیدن زمین، افکت‌های موجود و… براساس CSS اجرا می‌شوند. 

همچنین بسیار زیبا است که نگاهی نیز به مکعب‌های سه بعدی داخل این نمونه بیاندازیم. بلوک‌های این طرح نیز المان‌های سه بعدی هستند که با رویداد hover تعامل نشان می‌دهند.

بدون شک این مورد یکی از دیوانه کننده‌ترین حالاتی است که با استفاده از CSS پیاده‌سازی می‌شود.

۹. Pure CSS iOS ۷ Icons

این طرح قابلیت تعاملی نسبتا کمتری به موارد دیگر را داراست. اما در هر حال یکی از موارد زیبا است. توسعه دهنده این کار Peter Schmiz با استفاده از HTML و CSS تمام آیکون‌های اصلی موجود در IOS۷ را بازسازی کرده است. 

هیچکدام از این آیکون‌ها از SVG یا فایل تصویری استفاده نمی‌کنند. هر المان در این آیکون به سختی با استفاده از المان‌های Div و Span طراحی و با استفاده از CSS استایل دهی شده است. دیوانه‌کننده‌ترین قسمت این طراحی نمایش درست و صحیح آن‌ها در کنار همدیگر است. 

این مجموعه حاوی ۲۲ آیکون است و من از این موضوع که چقدر دقیق به جزئیات نگاه داشته واقعا تعجب کرده‌ام. این طرح نیز این موضوع که با صبر و زمان کافی می‌توان چکارهایی را با استفاده از CSS می‌توان انجام داد، تایید می‌کند. 

۱۰. Single-Element Slack Loader

بازسازی کردن انیمیشن بارگذاری Slack مطمئنا شگفت انگیز است. اما این قطعه کد تنها با استفاده کردن از یک المنت این انیمیشن بارگذاری را بازسازی می‌کند. المنتی که من آن را dedication می‌نامم.

تعداد خط کدهای این طرح به صورت کامل ۱۰۰ خط CSS است، که برای ایجاد لوگو و انیمیشن صرف شده است. 

نمی‌توانم به این موضوع که از این ایده می‌توان برای بارگذاری یک وبسایت تجاری استفاده کرد اعتراف کنم، اما می‌توانم بگویم که ایده فوق العاده‌ای است!

۱۱. Animated ۳D Bar Charts

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

از آنجایی که هر کدام از این نوارها براساس em کار می‌کند می‌تواند اندازه فونت‌ها را بر اساس اندازه مرورگر تعیین کنید. این مورد یکی از طرح‌های CSS با انعطاف‌پذیری بسیار بالا است. 

منبع