تمام این موارد روی CodePen بارگذاری شده‌اند و استفاده کردن از سورس این برنامه‌ها آزاد است. شرکت آی بولود که یک شرکت طراحی سایت در ارومیه است . شما را در راه اندازی و ساخت یک وبسایت زیبا و ریپسانسیو راهنمایی میکند . برایتان نمونه هایی از پروژه های سایت CodePen آماده کرده ایم ، امیدواریم از آنها نهایت استفاده را ببرید.
۱. انیمیشن بارگزاری(لودر) طراحی شده با sass
در این طرح از Sass استفاده شده است، در حالی که بیشتر طراحان از انیمیشن های gif استفاده میکنند.
این لودر CSS۳ نشان می‌دهد که با داشتن فکری خلاق می‌توانید تقریبا هر استایلی که دوست دارید را ایجاد کنید.
۲. انیمیشن منظومه شمسی طراحی شده با css3
این طراحی پویا از منظومه شمسی توسط Malik Dellidj ایجاد شده و در طراحی آن از هیچگونه تصویری استفاده نشده است. این طرح به صورت کامل روی CSS اجرا می‌شود.
هر کدام از سیارات در این طرح از یک سرعت چرخش بهره می‌گیرند. این طرح یک مدل واقعی از منظومه شمسی است و می‌تواند به عنوان یک پس‌زمینه بسیار زیبا استفاده شود.
۳. بازی مین جمع کن طراحی شده با css3
البته کارایی این بازی هنوز به اندازه حالت قبلی خود درست طراحی نشده است و نمی‌تواند به صورت درست امتیاز‌ها را نگه دارد. اما در هر صورت این پروژه تحسین برانگیزی است و مهمتر از همه چیز در این طراحی از جاوااسکریپت استفاده نشده است.
با این حال طراحی این بازی کاملا شبیه به حالت اصلی آن است. با وجود آنکه به صورت کامل به اندازه حالت اصلی آن کامل نیست اما مرا ایجاب به بازی کردن کرد.
۴. چک باکس روز و شن طراحی شده با css
این مورد از یک ورودی چک باکس استفاده میکند. این ابزار سوئیچ کردن ویژگی‌های بسیار منحصر به فردی دارد که می‌تواند آن را تبدیل به یکی از بهترین‌ها بکند:
- آیکون مربوط به سوئیچ کردن از خورشید به ماه تغییر میکند.
- ستاره‌ها و ابرها با انیمیشن تغییر میکنند.
- این طراحی ۱۰۰٪ براساس CSS ساخته شده است.
این طراحی به نحوی است که کاربر را برای کلیک کردن جذب خود میکند و انیمیشن زیبایی را به ناحیه نمایش می‌آورد. طراحی آیکون‌های خورشید و ماه نیز بسیار منحصر به فرد است، بهتر از آن اینکه این موارد نیز کاملا براساس CSS ساخته شده است.
۵. ردیاب موس در صفحه نمایش طراحی شده با css
در حالت سنتی ردیابی کردن ماوس کار جاوااسکریپت بود، بدین صورت که مختصات مکانی ماوس را روی صفحه دریافت می‌کرد و براساس آن نقطه‌ای را نمایش می‌داد.
این تکنیک هنوز هم بر اساس جاوااسکریپت اجرا می‌شود، اما در این قطعه کد می‌توانید چنین ویژگی را به صورت کامل براساس CSS مشاهده کنید.
نمی‌توانم کارکرد منحصر به فرد و خاصی را برای این طرح در نظر بگیرم اما واقعا می‌تواند جذاب باشد.
۶. طراحی فلت پارک با استفاده از SVG
تصویرسازی‌های وکتور تمام صفحه که با استفاده از CSS و SVG ساخته شده اند چه؟
در این پروژه می‌توانید یک پارک را مشاهده کنید که کاملا براساس SVG طراحی شده و توسط مرورگرها نیز به خوبی پشتیبانی می‌شود. در این طرح مرورگرهای مدرن بدون هیچ مشکلی آن را به خوبی رندر میکنند و هر المانی را به درستی روی صفحه نمایش می‌دهند.
انیمیشن استفاده شده در این طرح نیز بسیار زیبا است و موضوع جالب توجه این است که قسمت انیمیشن نیز با استفاده از SVG طراحی شده است. در چند سال آینده ممکن است ما چنین طراحی‌هایی را روز به روز بیشتر ببنیم. تصاویری که با کد نوشته شده اند.
۷. Möbius in ۳D
طراحی کردن چنین انیمیشن CSS تکرار شدنی کاملا سخت است. اما المان‌های سه بعدی و گرادینت‌های متفاوت چه؟ حال ما واقعا با یک چالش روبرو هستیم.
این قطعه کد با در نظر گرفتن نرمی و استفاده بهینه از تعداد خط کدها واقعا شگفت انگیز است. با استفاده از Haml شما تنها به ۶ خط کد برای ایجاد مفهوم کلی نیاز دارید.
من به این موضوع که چنین طراحی نمی‌تواند مفید باشد اقرار می‌کنم، اما مشاهده کردن چنین طراحی واقعا نیازمند تامل زیادی است.
۸. پروژه مکعب های سه بعدی طراحی شده با css
بعد از کمی استفاده و بازی کردن با این طرح به این نتیجه می‌رسید که چنین طرحی ۱۰۰٪ براساس جاوااسکریپت درست شده است. برای مثال رفتارهای پویا مانند چرخیدن سه بعدی و قرار گرفتن رنگ‌ها با استفاده از جاوااسکریپت انجام می‌شود.
اما اشتباه می‌کنید، این طرح توسط Vincent Durand ایجاد شده و کاملا براساس CSS اجرا می‌شود. تمام ویژگی های داخل این طرح مانند چرخیدن زمین، افکت‌های موجود و… براساس CSS اجرا می‌شوند.
همچنین بسیار زیبا است که نگاهی نیز به مکعب‌های سه بعدی داخل این نمونه بیاندازیم. بلوک‌های این طرح نیز المان‌های سه بعدی هستند که با رویداد hover تعامل نشان می‌دهند.
بدون شک این مورد یکی از دیوانه کننده‌ترین حالاتی است که با استفاده از CSS پیاده‌سازی می‌شود.
۹. طراحی ایکونهای ios7 با css
توسعه دهنده این کار Peter Schmiz با استفاده از HTML و CSS تمام آیکون‌های اصلی موجود در IOS۷ را بازسازی کرده است.
هیچکدام از این آیکون‌ها از SVG یا فایل تصویری استفاده نمی‌کنند. هر المان در این آیکون به سختی با استفاده از المان‌های Div و Span طراحی و با استفاده از CSS استایل دهی شده است. دیوانه‌کننده‌ترین قسمت این طراحی نمایش درست و صحیح آنها در کنار همدیگر است.
این مجموعه حاوی ۲۲ آیکون است و من از این موضوع که چقدر دقیق به جزئیات نگاه داشته واقعا تعجب کرده‌ام. این طرح نیز این موضوع که با صبر و زمان کافی می‌توان چکارهایی را با استفاده از CSS می‌توان انجام داد، تایید میکند.
۱۰. Single-Element Slack Loader
بازسازی کردن انیمیشن بارگذاری Slack مطمئنا شگفت انگیز است. اما این قطعه کد تنها با استفاده کردن از یک المنت این انیمیشن بارگذاری را بازسازی میکند. المنتی که من آن را dedication می‌نامم.
تعداد خط کدهای این طرح به صورت کامل ۱۰۰ خط CSS است، که برای ایجاد لوگو و انیمیشن صرف شده است.
نمی‌توانم به این موضوع که از این ایده می‌توان برای بارگذاری یک وبسایت تجاری استفاده کرد اعتراف کنم، اما می‌توانم بگویم که ایده فوق العاده‌ای است!
۱۱. چارت های سه بعدی طراحی شده با css
شما در این طرح می‌توانید چندین نوار سفارشی سه بعدی را مشاهده کنید. همچنین این موارد به صورت انیمیشنی ساخته شده اند. هر کدام از این طرح‌ها براساس فلکس‌باکس اجرا می‌شوند. این نوارها براساس تعداد نوارهایی که در Container وجود دارد نمایش داده می‌شود بزرگی آنها بر همین اساس است. تمام این موارد براساس CSS خالص اجرا می‌شود.
از آنجایی که هر کدام از این نوارها براساس em کار میکند می‌تواند اندازه فونت‌ها را بر اساس اندازه مرورگر تعیین کنید. این مورد یکی از طرح‌های CSS با انعطاف‌پذیری بسیار بالا است.
دیدگاه خود را بنویسید