فقط با CSS و مرورگر وب می توانید کارهای زیادی انجام دهید. توسعه دهندگان بزرگ دوست دارند که پاکت را فشار دهند و نشان دهند که چقدر امکان پذیر است. در حالی که پروژه های آزمایشی همیشه مفید نیستند روی سایت های تولید، آنها فوق العاده الهام بخش و آموزشی هستند. ما تعداد انگشت شماری از پروژه های CSS را سازماندهی کرده ایم که قدرت واقعی CSS را به نمایش می گذارد. اینها همه میزبان هستند روی CodePen تا بتوانید حتی کد منبع را مطالعه و شبیه سازی کنید تا ببینید چگونه کار می کنند.

1. Gradient Loading Bars

این Sass loading page از شیب های متحرک و عناصر قابل تغییر اندازه برای ایجاد یک افکت بارگذاری مکرر استفاده می کند. اکثر مردم باید این انیمیشن بارگیری را از فیس بوک که از نسخه کوچکتری از این بارگذار نوار عمودی استفاده می کند، تشخیص دهند. اما اکثر لودرهای وب از GIF های متحرک استفاده می کنند زیرا تصاویر با همه مرورگرها سازگارتر هستند. این نوار بارگذاری CSS3 ثابت می کند که با کمی تفکر خلاق می توانید تقریباً هر سبک انیمیشنی را که می خواهید بازسازی کنید.

قلم را ببینید بارگیری میله ها توسط MaxStalker (@MaxStalker) روی CodePen.

2. انیمیشن منظومه شمسی

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

قلم را ببینید انیمیشن منظومه شمسی – CSS خالص توسط مالک دلیج (@kowlor) روی CodePen.

3. CSS خالص Minesweeper

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

قلم را ببینید مین روب CSS خالص توسط بالی بالو (@bali_balo) روی CodePen.

4. روز و شب ضامن

روی سطح این سوئیچ ضامن ممکن است بسیار ساده به نظر برسد از طریق یک ورودی چک باکس اجرا می‌شود و داده‌ها را به باطن ارسال می‌کند، اگرچه این بخش واقعاً چشمگیر نیست. این ضامن دارای چند ویژگی است که آن را به یکی از بهترین ها تبدیل می کند onکلیدهای خاموش/خاموش:

• نماد تغییر وضعیت از خورشید به ماه تغییر می کند
• ستارگان و ابرها در حین جابجایی متحرک می شوند
• این با 100٪ CSS خالص طراحی شده است

یه جورایی این onکلید خاموش / خاموش هر کلیک کاربر را می گیرد و از آن رویداد برای متحرک سازی منطقه تغییر روز/شب در نمای استفاده می کند. طرح‌های آیکون خورشید و ماه نیز با توجه به اجرای آنها به زیبایی طراحی شده‌اند روی چیزی جز CSS نیست

قلم را ببینید ضامن CSS خالص “روز و شب”. نوشته بنجامین رتوره (@bnthor) روی CodePen.

5. CSS ردیابی ماوس

ردیابی سنتی ماوس کار جاوا اسکریپت است که مختصات X/Y کاربر را گزارش می کند روی را page. از نظر فنی شما هنوز به جاوا اسکریپت نیاز دارید تا این مختصات را جمع آوری کنید و هر کاری مفید با آنها انجام دهید. ولی این قطعه نشان می دهد که می توانید یک ویژگی ردیابی موس CSS خالص طراحی کنید که هر حرکت کاربر را دنبال می کند. واقعا نمی توانم به یک کاربرد عملی برای این فکر کنم، اما می تواند سرگرم کننده باشد روی یک سایت شوخی

قلم را ببینید ردیابی موس CSS خالص تجربی نوشته مومچیلو پوپوف (@Momciloo) روی CodePen.

6. شهربازی تخت

همه ما آیکون های وکتور و تصاویر طراحی شده برای وب را دیده ایم. اما در مورد کاملpage تصاویر برداری طراحی شده با کد خام CSS و SVG؟ این طراحی شهربازی یک پروژه آزمایشی است که فقط در مرورگرهای پشتیبانی شده از SVG کار می کند. با این حال، در آن مرورگرهای مدرن، بی عیب و نقص ارائه می شود و هر عنصر دارای یک قرارگیری بسیار واقعی است روی را page. انیمیشن ها مطمئناً چشمگیر هستند اما همین است دقت از عناصر SVG که توجه من را نیز جلب می کند. چند سال دیگر ممکن است این نوع تصاویر را پیدا کنیم روی وب فقط به صورت کد بدون هیچ فایل تصویری اجرا می شود.

قلم را ببینید طراحی مسطح شهربازی svg توسط لینا (انیمیشن با پشتیبانی از CSS) توسط ولادیمیر گاشنکو (@gxash) روی CodePen.

7. موبیوس در سه بعدی

طراحی یک انیمیشن تکراری CSS مانند مفهوم نوار موبیوس بسیار سخت است اما برخی از عناصر سه بعدی و شیب های مختلف را اضافه کنید؟ حالا شما یک چالش واقعی دارید. این قطعه با توجه به اینکه چقدر صاف به نظر می رسد و کد کمی استفاده شده است (فقط 90 خط CSS) بسیار چشمگیر است. با Haml شما فقط به 6 خط کد برای ایجاد کل مفهوم نیاز دارید. من اعتراف می کنم که این فوق العاده مفید نخواهد بود روی یک وب‌سایت واقعی، اما گواهی بر این است که چقدر می‌توانید با چند ده خط HTML و CSS انجام دهید.

قلم را ببینید Möbius 6hedrons (CSS خالص) توسط آنا تودور (@thebabydino) روی CodePen.

8. ایجاد کننده نقشه سفارشی

پس از چند ثانیه استفاده از این برنامه وب، ممکن است احساس اطمینان کنید که اجرا می شود روی جاوا اسکریپت. رفتارهای پویا مانند چرخش سه بعدی و قرارگیری زمین همگی نشانه های یک برنامه وب JS شیرین هستند. ولی این رابط کاربری سازنده نقشه توسط Vincent Durand در واقع 100% CSS خالص است. فلش‌های چرخش، خود افکت چرخش و تمام ویژگی‌های کلیک به مکان اجرا می‌شوند روی CSS. شایان ذکر است که چگونه کل این مفهوم با استفاده از مکعب های سه بعدی نیز ارائه می شود. خود بلوک ها به عنوان عناصر سه بعدی عمل می کنند و شما می توانید مکعب ها را فقط با شناور کردن بچرخانید. بدون شک یکی از احمقانه ترین کاربردهای CSS که در مدت زمان طولانی دیده ام.

قلم را ببینید سازنده نقشه کامل CSS اثر وینسنت دوراند (@onediv) روی CodePen.

9. آیکون های CSS خالص iOS 7

این پروژه کمی کمتر تعاملی است اما همچنان به همان اندازه نفس گیر است. توسعه دهنده پیتر اشمیز همه موارد اصلی را بازسازی کرد نمادهای برنامه iOS 7 با استفاده از HTML و CSS خالص هیچ یک از این نمادها از SVG یا فایل های تصویری استفاده نمی کنند. هر عنصر در هر نماد به سختی با یک عنصر span/div به HTML کدگذاری می‌شود، سپس با استفاده از CSS استایل‌گذاری می‌شود. دیوانه کننده ترین قسمت این است که اینها چقدر دقیق هستند! مجموعه کامل شامل 22 آیکون است و همه آنها بسیار زیبا هستند روی. توجه من به جزئیات برای نمادهایی مانند نقشه ها و آب و هوا بیشتر تحت تاثیر قرار گرفتم. فقط یک مدرک بیشتر که با زمان و حوصله کافی می توانید تقریباً هر چیزی را در CSS طراحی کنید.

قلم را ببینید آیکون های iOS 7 با CSS خالص توسط پیتر اشمیز (@peterschmiz) روی CodePen.

10. لودر شلخته تک عنصر

ایجاد مجدد انیمیشن بارگذاری Slack با CSS3 قطعاً چشمگیر است. ولی این قطعه لودر شل و ول را فقط دوباره بازآفرینی می کند یک عنصر واحد روی را page. این همان چیزی است که من آن را فداکاری می نامم. تعداد کل CSS برای این قطعه کمی بیش از 100 خط است که شامل رنگ‌های لوگوی Slack و جلوه‌های انیمیشن می‌شود. نمی‌توانم بگویم که آیا این ایده برای نمادهای بارگذاری مارک‌دار دیگر کار می‌کند یا خیر، اما مطمئناً تحت تأثیر این ایده هستم.

قلم را ببینید لودر شلخته تک عنصر توسط کروکودیلون (@CrocoDillon) روی CodePen.

11. نمودارهای نوار سه بعدی متحرک

ده ها طرح نوار سه بعدی سفارشی را در CodePen خواهید دید که همگی با انیمیشن های خاص خود هستند. ولی این نوارهای سه بعدی توسط Rafael González برای تمام نمودارهای نوار CSS مدرن دیگر متمایز است. هر کدام از این نمودارها اجرا می شوند روی flexbox برای ظروف، بنابراین آنها بسته به اندازه خودکار می شوند روی چه تعداد میله اضافه می کنید و چقدر بزرگ است container است. بعلاوه هر نمودار میله‌ای هنگامی که به نمایش می‌رود متحرک می‌شود، که همه آن‌ها از طریق CSS خالص کنترل می‌شوند. و از آنجایی که اندازه هر نوار در Em’s اجرا می شود، می توانید هر نوار را به مقیاس طبیعی تنظیم کنید روی اندازه فونت مرورگر یک مثال خوب که ثابت می کند CSS مدرن بسیار انعطاف پذیرتر از همیشه است.

قلم را ببینید نوارهای CSS خالص توسط رافائل گونزالس (@rgg) روی CodePen.