اینکه افراد با ترکیب فناوری وب و خلاقیت چه چیزهایی را می‌توانند بسازند، بسیار شگفت آور است. هر آنچه در این مقاله مشاهده خواهید کرد فقط با استفاده از 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
بسیار خوب، این پایان یک نمایش پرشور و حماسی از خلاقیت بی نظیر مهندسان و توسعه دهندگان فرانت-اند است. من با کاوش در این نمونه‌ها بسیار الهام گرفتم و امیدوارم که شما نیز این کار را انجام دهید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید