16 پن برتر از سایت Codepen

16 پن برتر از سایت Codepen
هفته پیش به نقاط قوت Codepen و دلیل برتری این سایت نسبت به بقیه اشاره کردیم. در این سری از برترین های Codepen میخوایم چندین نمونه بهتون معرفی کنیم که مطمئنا تو طراحی هر سایتی خیلی به کارتون میاد و واستون مفید واقع میشه. با مجیدآنلاین همراه باشید.
خرید شارژ ایرانسل
خرید شارژ ایرانسل، همراه اول، رایتل | خرید بسته های اینترنت ایرانسل | etore.ir
دانلود بازی اندروید
اندروید سیتی | بررسی و دانلود آخرین های اندروید
دوره های آموزشی روز دنیا
دیگر نیازی به دانلود نیست، آنلاین ببینید ...
خودتان را اینجا معرفی کنید

1-Webkit Scrollbars

2-scrollNav.js

3-ScrollTo

4-Animate on scroll with wow.js

5-Sliding Radio Button Menu

6-Narrow Vertical Timeline

7-Page Turner

8-Random Quote Box

9-Flat Weather Notice Cards

10-Text Editor Concept

11-Stairway Hover Nav

12-Nav in Top

13-Aquatilis Scroll Nav

14-CSS Only iPhone 6

15-Colorful Nav

16-Simple Chat Styling With Jade & SCSS



این هم از 16 نمونه برتر از سایت Codepen که امیدوارم به کارتون بیاد. یعنی میدونم که به کارتون میاد laughwink

رضا مدیر وبسایت مجید آنلاین و عضو تیم طراحی در آرتیمان استودیو می باشد. از سال 87 برنامه نویسی را با زبان های خانواده C شروع کرد و بعد از 4 سال به سمت طراحی و برنامه نویسی تحت وب رفت. وی همزمان با تحصیل در مقطع کارشناسی رشته مهندسی کامپیوتر به امر ترجمه کتاب در حوزه برنامه نویسی مشغول بود که کتاب او در مرحله ویراستاری قرار دارد. به روز بودن و افزایش مستمر اطلاعات شخصی در زمینه وب دغدغه ی اصلی و همیشگی رضاست.

نظرات و سوالات کاربران

ارسال پاسخ محمد مهدی رفیعی
محمد مهدی رفیعی
دوشنبه ۰۹ فروردین ۱۳۹۵ ۰۱:۳۶
سلام
خیلی جالب بودن ...
حتما از اینا استفاده میکنم !

- ممنون.
ارسال پاسخ رضا مجیدی
رضا مجیدی
دوشنبه ۱۹ مرداد ۱۳۹۴ ۱۷:۵۴
در پاسخ به دیدگاه marasiali ارسال شده در دوشنبه ۱۹ مرداد ۱۳۹۴ ۱۴:۵۹

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

در مورد 12 درسته. میشه در کد تغییراتی اعمال کنید تا ارتفاعش رو خیلی کم کنید و یا هر تغییر دیگه ای که صلاح میدونی ;-)

ارسال پاسخ marasiali
marasiali
دوشنبه ۱۹ مرداد ۱۳۹۴ ۱۴:۵۹
در پاسخ به دیدگاه رضا مجیدی ارسال شده در یکشنبه ۱۸ مرداد ۱۳۹۴ ۰۲:۰۸

ممنونم.
در مورد 1 بگم که چندین اسکرول بار معرفی کرده که بنا به موقعیتتون ازشون استفاده کنید.
و در مورد 12 هم نظر شخصیم اینه که تو بعضی از صفحات شاید نخوایم منو رو به کاربر نشون بدیم تا ارتفاع زیادی اشغال نشه. بالاخره این هم یک طرحیه که شاید بشه در بعضی جاها ازشون استفاده کرد :-)

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

ارسال پاسخ رضا مجیدی
رضا مجیدی
یکشنبه ۱۸ مرداد ۱۳۹۴ ۰۲:۱۰
در پاسخ به دیدگاه مجید ارسال شده در جمعه ۱۶ مرداد ۱۳۹۴ ۱۸:۲۹

خیلی زیبا بود جناب مجیدی.. یعنی بعضی هاشون عالی بودن.. امیوارم بتونم ازشون استفاده کنم

ممنونم دوست عزیز... :-)
خیلی هم خوب که نظر مثبتی داشتی...
حتما از حداقل یکی از این Pen ها استفاده خواهی کرد ;-)

ارسال پاسخ رضا مجیدی
رضا مجیدی
یکشنبه ۱۸ مرداد ۱۳۹۴ ۰۲:۱۰
در پاسخ به دیدگاه marasiali ارسال شده در شنبه ۱۷ مرداد ۱۳۹۴ ۲۳:۲۳

بعضی هاش واقعا عالی بود ولی دقیقا میخوام بدونم 1 و 12 چه چیز خاصی داشتن؟یک که هیچی.دوازده هم یه نوار دوبرابر Nav bar گذاشته واسه باز و بستنش اینجوری که بیشتر جامیگیره اصلا چه فایده داره نوار بالا صفحه بسته بشه؟اونم بایه نوار دیگه!!!!به نظرتون اینا بهتر نیس؟:
http://codepen.io/Marasiali/pe...
http://codepen.io/Marasiali/pe...
البته دومی به درد الهام نمیخوره ولی کاربردیه

دکمه پخش موسیقی , پن جالبی بود. دومی هم که خب خیلی کاربردی... موفق باشی ;-)

ارسال پاسخ رضا مجیدی
رضا مجیدی
یکشنبه ۱۸ مرداد ۱۳۹۴ ۰۲:۰۸
در پاسخ به دیدگاه marasiali ارسال شده در شنبه ۱۷ مرداد ۱۳۹۴ ۲۳:۲۳

بعضی هاش واقعا عالی بود ولی دقیقا میخوام بدونم 1 و 12 چه چیز خاصی داشتن؟یک که هیچی.دوازده هم یه نوار دوبرابر Nav bar گذاشته واسه باز و بستنش اینجوری که بیشتر جامیگیره اصلا چه فایده داره نوار بالا صفحه بسته بشه؟اونم بایه نوار دیگه!!!!به نظرتون اینا بهتر نیس؟:
http://codepen.io/Marasiali/pe...
http://codepen.io/Marasiali/pe...
البته دومی به درد الهام نمیخوره ولی کاربردیه

ممنونم.
در مورد 1 بگم که چندین اسکرول بار معرفی کرده که بنا به موقعیتتون ازشون استفاده کنید.
و در مورد 12 هم نظر شخصیم اینه که تو بعضی از صفحات شاید نخوایم منو رو به کاربر نشون بدیم تا ارتفاع زیادی اشغال نشه. بالاخره این هم یک طرحیه که شاید بشه در بعضی جاها ازشون استفاده کرد :-)

ارسال پاسخ marasiali
marasiali
شنبه ۱۷ مرداد ۱۳۹۴ ۲۳:۲۳

بعضی هاش واقعا عالی بود ولی دقیقا میخوام بدونم 1 و 12 چه چیز خاصی داشتن؟یک که هیچی.دوازده هم یه نوار دوبرابر Nav bar گذاشته واسه باز و بستنش اینجوری که بیشتر جامیگیره اصلا چه فایده داره نوار بالا صفحه بسته بشه؟اونم بایه نوار دیگه!!!!به نظرتون اینا بهتر نیس؟:
codepen.io/Marasiali/pen/vOvxOZ" rel="nofollow">http://codepen.io/Marasiali/pe...
codepen.io/Marasiali/pen/zGyZeN" rel="nofollow">http://codepen.io/Marasiali/pe...
البته دومی به درد الهام نمیخوره ولی کاربردیه

ارسال پاسخ مجید
مجید
جمعه ۱۶ مرداد ۱۳۹۴ ۱۸:۲۹

خیلی زیبا بود جناب مجیدی.. یعنی بعضی هاشون عالی بودن.. امیوارم بتونم ازشون استفاده کنم