10 ایده الهام بخش برای پروژه های فرانت-اند

آنلاین
user-avatar
عرفان حشمتی
20 مرداد 1400, خواندن در 5 دقیقه

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

من 10 مثال عالی را انتخاب کرده‌ام که در CodePen.io منتشر شده و در دسترس عموم است. CodePen یک پلتفرم شناخته شده است که توسط کریس کویر (بنیانگذار css-tricks.com) ایجاد شده است.

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

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

1. Click the button

اولین ویترین انتخابی من "Click the button" می‌باشد که توسط Bård N Hovde خلاق و بسیار با استعداد نروژی ساخته شده است.

این نمونه مورد علاقه من در CodePen است، زیرا ساده و در عین حال چشمگیر است و هر زمان که با آن بازی می‌کنم روحیه‌ام تازه می‌شود. من تضمین می‌کنم پشیمان نخواهید شد که آن را امتحان کنید.

https://codepen.io/bnhovde/pen/OJLYGKx

2. Credit Card Form

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

اما وقتی "Credit Card Form" ساخته شده توسط محمد اردم (اخیرا نفر اول محبوب‌ترین سازنده CodePen اعلام شد) را کشف کردم، متعجب شدم که چرا سازندگان وب سایتها هنوز از چنین فرم زیبایی استفاده نکرده‌اند.

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

https://codepen.io/JavaScriptJunkie/pen/YzzNGeR

3. Pure CSS Still Life

این انتخاب از سوی Ben Evans نمونه کاملی از توانایی CSS است. هنوز هم بعضا نمی‌توانم باور کنم که از هیچ تصویری برای ایجاد این مناظر زیبا استفاده نشده است.

و این یادآوری خوبی است که ما می‌توانیم با CSS به دست آوریم. Ben چندین مثال دیگر از جادوی CSS خود دارد، بنابراین باید مشخصات آن را در CodePen بررسی کنید.

https://codepen.io/ivorjetski/pen/xMJoYO 

4. Color This Sofa

Kyle Wetton یک نمونه تعاملی و چشمگیر ایجاد کرده که به شما امکان می‌دهد یک مبل و پس زمینه آن را رنگ آمیزی کنید. این نوعی استایل است و می‌تواند در سایت‌های تجارت الکترونیکی که مبلمان می‌فروشند استفاده شود.

به علاوه این یک مثال خوب است که شما می‌توانید با SVGها و Blend Mode انجام دهید.

https://codepen.io/kylewetton/pen/OJLmJoV

5. The Cube

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

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

https://codepen.io/bsehovac/pen/EMyWVv

6. Face Button

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

مشاهده می‌کنید که تعداد خطوط کمی کد برای تولید این نمایش تعاملی و سرگرم کننده مورد نیاز است. این واقعیت را به من یادآوری می‌کند که اغلب اوقات کیفیت از کمیت برتر است.

https://codepen.io/kathykato/pen/EzXZvN

7. Mini Music Player

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

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

به همه سرویس‌های پخش موسیقی توصیه می‌کنم این را بررسی کنید، شاید بتوانید چیزی از آن یاد بگیرید.

https://codepen.io/JavaScriptJunkie/pen/qBWrRyg

8. Simple CSS Waves

Daniel Östermann از فنلاند یک نمونه عالی دیگر از آنچه می‌توان فقط با CSS انجام داد برای ما آورده است.

این را در وب سایت شخصی یا صفحه اصلی خود تصور کنید: کوتاه اما عالی، سبک اما قدرتمند. من شخصا این ترکیب را خیلی دوست دارم.

https://codepen.io/goodkatz/pen/LYPGxQz

9. CSS Card Hover Effects

مثال خوب دیگری که نشان می‌دهد اغلب اوقات برای تعامل در وب سایت‌های خود به جاوااسکریپت نیازی نداریم. من می‌توانم تمام روز آن کارت‌ها را معلق نگه دارم زیرا این نمونه بسیار جذاب است. با تشکر از طراح زبردست آن Jhonier Riascos Zapata.

https://codepen.io/Jhonierpc/pen/MWgBJpy

10. Clip Clop Clippity Clop

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

بله درست است، فقط با CSS. به نظرتان عالی نیست؟

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

https://codepen.io/ste-vg/pen/oKYjKV

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

منبع

چه امتیازی به این مقاله می دید؟
خیلی بد
بد
متوسط
خوب
عالی

دیدگاه‌ها و پرسش‌ها

برای ارسال دیدگاه لازم است، ابتدا وارد سایت شوید.

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

آنلاین
user-avatar
عرفان حشمتی @heshmati74
مهندس معماری سیستم های کامپیوتری، طراح و توسعه دهنده وب سایت
دنبال کردن

گفتگو‌ برنامه نویسان

بخشی برای حل مشکلات برنامه‌نویسی و مباحث پیرامون آن وارد شو