PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : 31 نمونه طراحی جالب و دیدنی صفحات html5


AMIR MOHAMMAD n
07-07-1390, 03:32 بعد از ظهر
این روزها سر و صدایHTML5 رو بین توسعه‌دهنده‌های وب و نرم‌افزار زیاد می‌شنویم،تقریباً هر جا که می‌ریم صحبت‌هایی از HTML5 هستش، از طراحی وب گرفته، تا طراحی و توسعه‌ی نرم‌افزارها و اپلیکیشن‌های مختلف برای موبایل‌ها و کامپیوترها. و البته سر و صداهای زیادی که به واسطه‌ی انتخاب استاندارد HTML از طرف مایکروسافت برای توسعه‌ی پروژه‌ی ژوپیتر به راه افتاده و این که احتمالاً در آینده نرم‌افزارهای دسکتاپ هم با HTML5 طراحی و توسعه داده بشن! پس می‌تونیم این نتیجه رو بگیریم که HTML5 به اندازه‌ی کافی پیشرفته هستش تا بشه همه‌جور کار باهاش انجام داد و انعطاف‌پذیری‌های لازم رو در خودش داره، برای این که بیشتر با این امکانات آشنا بشید در این پست می‌تونید ۳۱نمونه از طراحی‌هایی که در قالب صفحات وب به کمک HTML5 و جاوا اسکریپت طراحی شده رو ببینید و بیشتر با این استاندارد نسبتاً جدید آشنا بشید.
برای باز کردن این صفحات وب روی لینک هر کدام کلیک کنید.

FlowerPower ([Only registered and activated users can see links])




۲. Google gravity ([Only registered and activated users can see links])



۳. HTML5 logo ([Only registered and activated users can see links])



۴. Sketch ([Only registered and activated users can see links])



۵. webGL water ([Only registered and activated users can see links])



۶. fish ([Only registered and activated users can see links])



۷. waterfall ([Only registered and activated users can see links])



۸. Conductor ([Only registered and activated users can see links])



۹. coil ([Only registered and activated users can see links])



۱۰. ۴۰۴ ([Only registered and activated users can see links])



۱۱. ultralight ([Only registered and activated users can see links])



۱۲. ARENA5 ([Only registered and activated users can see links])



۱۳. Canvas ribbon ([Only registered and activated users can see links])



۱۴. Make3D ([Only registered and activated users can see links])



۱۵. Asteroids ([Only registered and activated users can see links])



۱۶. ball pool ([Only registered and activated users can see links])



۱۷. magnetic ([Only registered and activated users can see links])



۱۸. core ([Only registered and activated users can see links])



۱۹. test ([Only registered and activated users can see links])



۲۰. tree ([Only registered and activated users can see links])



۲۱. many lines ([Only registered and activated users can see links])



۲۲. bounce fill ([Only registered and activated users can see links])



۲۳. ztype ([Only registered and activated users can see links])



۲۴. breakdom ([Only registered and activated users can see links])



۲۵. Move. Pick Up. Drop ([Only registered and activated users can see links])



۲۶. voxelrain ([Only registered and activated users can see links])



۲۷. gmail ([Only registered and activated users can see links])



۲۸. trail ([Only registered and activated users can see links])



۲۹. The Cloth Simulation ([Only registered and activated users can see links])



۳۰. clock ([Only registered and activated users can see links])





rain ([Only registered and activated users can see links])
AMIR MOHAMMAD n
07-07-1390, 06:21 بعد از ظهر
کسی نظری نداره؟
بچه ها لطفا نظراتتونو بدید.
Alireza
07-07-1390, 10:31 بعد از ظهر
بسیار عالی
S!L3NT
07-07-1390, 10:52 بعد از ظهر
خیلی حرفه ای بودن ...
ولی 90 درصد فلش بود :دی
s.mm
07-07-1390, 11:55 بعد از ظهر
طرح های خیلی جالبی بودن به خصوص بازی هاش البته من از برنامه نویی و طراحی وب چیزی سر در نمیارم ولی یه رفیق دارم که این کارس فردا نشونش میدم...
AMIR MOHAMMAD n
09-07-1390, 08:30 بعد از ظهر
خیلی جالب بود.من خودم از اون flower power و google gravity خیلی خوشم اومد.
S!L3NT
09-07-1390, 08:51 بعد از ظهر
نتونستم ریپش کنم ! :دی هنوز تو این کار تازه واردیم ...
Amir
09-07-1390, 09:58 بعد از ظهر
درود


خیلی حرفه ای بودن ...
ولی 90 درصد فلش بود :دی

html5 رقیب اصلی فلش هست و این باعث خوشحالیه گسترش دهنده های html5 هست که در ابتدا کار انقدر حرفه ای هست که شما رو به اشتباه انداخته

مزیت های زیادی داره html5 مثل : حجم کمتر , استفاده کمتر از منابع , نبودن نیاز به نصب نرم فازار جانبی و انعطاف پذیری بالا


نتونستم ریپش کنم ! :دی هنوز تو این کار تازه واردیم ...

سورس گوگل گرافیتی


body { background-color: #FFFFFF; font-family: arial,sans-serif; margin: 0; overflow: hidden;}#topbar { border-spacing: 0; color: #CCCCCC; font-size: 13px; white-space: nowrap; width: 100%;}#topbar tr { margin: 0; padding: 0; width: 100%;}#topbar td { background-color: #2D2D2D; border-top: 2px solid transparent; cursor: pointer; height: 26px; margin: 0; white-space: nowrap;}#topbar td:hover { background-color: #4C4C4C;}#topbar td.selected { color: #FFFFFF; font-weight: bold;}#topbar td.empty { cursor: auto;}#topbar td.empty:hover { background-color: #2D2D2D;}#topbar td span { display: block; padding: 4px 5px 6px;}#content { margin-top: 152px; text-align: center; white-space: nowrap; width: 100%;}#content #logo { margin-bottom: 15px;}#content input { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #C0C0C0 #D9D9D9 #D9D9D9; border-right: 1px solid #D9D9D9; border-style: solid; border-width: 1px; color: #000000; font: 17px arial,sans-serif; margin-bottom: 18px; padding: 4px 9px; width: 640px;}#content input:hover { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #A0A0A0 #B9B9B9 #B9B9B9; border-right: 1px solid #B9B9B9; border-style: solid; border-width: 1px;}#content input:focus { border-color: #4D90FE; outline: 0 none;}#content button { background-color: #F4F4F4; border: 1px solid #D9D9D9; border-radius: 2px 2px 2px 2px; color: #666666; cursor: pointer; font-size: 11px; font-weight: bold; height: 29px; padding: 0 8px; text-align: center;}#content button:hover { background-color: #F8F8F8; color: #333333;}#footer { bottom: 10px; font-size: 13px; padding: 0 50px; position: absolute; white-space: nowrap; width: 88%;}#footer * { margin: 0 2px;}#footer a { color: #2200C1; text-decoration: none;}#footer a:hover { text-decoration: underline;}.result { width: 546px;}.result .title { color: #2200C1; font-size: 16px; font-weight: normal;}.result .title a:active { color: #2200C1;}.result .url { color: #0E774A; font-size: 13px;}.result .content { font-size: 13px;}


کلاس های css


body { background-color: #FFFFFF; font-family: arial,sans-serif; margin: 0; overflow: hidden;}#topbar { border-spacing: 0; color: #CCCCCC; font-size: 13px; white-space: nowrap; width: 100%;}#topbar tr { margin: 0; padding: 0; width: 100%;}#topbar td { background-color: #2D2D2D; border-top: 2px solid transparent; cursor: pointer; height: 26px; margin: 0; white-space: nowrap;}#topbar td:hover { background-color: #4C4C4C;}#topbar td.selected { color: #FFFFFF; font-weight: bold;}#topbar td.empty { cursor: auto;}#topbar td.empty:hover { background-color: #2D2D2D;}#topbar td span { display: block; padding: 4px 5px 6px;}#content { margin-top: 152px; text-align: center; white-space: nowrap; width: 100%;}#content #logo { margin-bottom: 15px;}#content input { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #C0C0C0 #D9D9D9 #D9D9D9; border-right: 1px solid #D9D9D9; border-style: solid; border-width: 1px; color: #000000; font: 17px arial,sans-serif; margin-bottom: 18px; padding: 4px 9px; width: 640px;}#content input:hover { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #A0A0A0 #B9B9B9 #B9B9B9; border-right: 1px solid #B9B9B9; border-style: solid; border-width: 1px;}#content input:focus { border-color: #4D90FE; outline: 0 none;}#content button { background-color: #F4F4F4; border: 1px solid #D9D9D9; border-radius: 2px 2px 2px 2px; color: #666666; cursor: pointer; font-size: 11px; font-weight: bold; height: 29px; padding: 0 8px; text-align: center;}#content button:hover { background-color: #F8F8F8; color: #333333;}#footer { bottom: 10px; font-size: 13px; padding: 0 50px; position: absolute; white-space: nowrap; width: 88%;}#footer * { margin: 0 2px;}#footer a { color: #2200C1; text-decoration: none;}#footer a:hover { text-decoration: underline;}.result { width: 546px;}.result .title { color: #2200C1; font-size: 16px; font-weight: normal;}.result .title a:active { color: #2200C1;}.result .url { color: #0E774A; font-size: 13px;}.result .content { font-size: 13px;}


البته همش به این راحتی نیست دوست عزیز

---------- Post added at 09:58 PM ---------- Previous post was at 09:45 PM ----------


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

منتظر طراحی یک سایت html5 از گروه پرشین موتور باشید
AMIR MOHAMMAD n
09-07-1390, 10:02 بعد از ظهر
امیر جون نبودی.دلم هواتو کرده بود داداش.
Amir
09-07-1390, 10:16 بعد از ظهر
امیر جون نبودی.دلم هواتو کرده بود داداش.

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

موفق باشید
S!L3NT
09-07-1390, 10:19 بعد از ظهر
خوب اچ تی ام ال 5 خودش از فلشه دیگه !‌ یعنی این پیج ها هیچکدومشون با فلش درست نشدن ؟!؟!؟ اچ تی ام ال 5 به تنهایی که نمیتونه !‌:دی
بابت اون کد ممنون ولی با سورس کد اینارو در اوردم خیلی گیج شدم :دی
Amir
10-07-1390, 09:45 قبل از ظهر
خوب اچ تی ام ال 5 خودش از فلشه دیگه !‌ یعنی این پیج ها هیچکدومشون با فلش درست نشدن ؟!؟!؟ اچ تی ام ال 5 به تنهایی که نمیتونه !‌:دی
بابت اون کد ممنون ولی با سورس کد اینارو در اوردم خیلی گیج شدم :دی

نه دوست من اشتباه نکنید , اونی که شما باهاش آشنایی دارید و میگید نمیشه html هست اما این چیزی که در این صفحات دیدید html5 بوده و داستان کلا فرق داره

در هیچ کدام از صفحاتی که دیدید از فلش استفاده نشده (کار راحتی که میتونید انجام بدید برای شناخت اینکه آیا تصویر روبروتون فلش هست یا نه این هست که روی تصویر کلیک راست کنید اگه گزینه ها ی همیشگی بودند html هست و اگه نبودند فلش) البته این رو هم بگم فلش براب بنر های تبلیغاتی استفاده میشه و html5 برای ساخت صفحات

از این سایت می تونید امتحان کنید مرورگرتون تا چه حد می تونه html5 رو پشتیبانی کنه

[Only registered and activated users can see links]

فایرفاکس 6.0.2 امتیاز 289 گرفت , قویترین مرورگر تا الان کروم بوده

موفق باشید
S!L3NT
10-07-1390, 01:39 بعد از ظهر
خوب این صفحات رو با چی میشه ساخت ؟
من که با دریم ویور هر کاری کردم این صفحات (که من میگم فلشن شما میگی نیست) رو نمیشه ویرایش کرد !!! یا ساخت !

---------- Post added at 02:39 PM ---------- Previous post was at 02:38 PM ----------

مرورگر فقط فایرفاکس ... جدیدا شاخ شده ورژن هی میده بیرون ...
در حال حاضر کروم سرتره !
Amir
10-07-1390, 01:53 بعد از ظهر
خوب این صفحات رو با چی میشه ساخت ؟
من که با دریم ویور هر کاری کردم این صفحات (که من میگم فلشن شما میگی نیست) رو نمیشه ویرایش کرد !!! یا ساخت !

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

اینا تماما برنامه نویسی هستند

اول به html css jquery ajax مسلط بشید بعد برید سراغ html5

می تونید از وب سایت w3school و یا کتاب هایی که تو انقلاب هستند و کامل تراند استفاده کنید
S!L3NT
10-07-1390, 02:04 بعد از ظهر
چه ربطی داره ؟ مگه دریم ویور برای فلشه ؟ دریم ویور رو یه سرچ بکن ببین برای چی هست !
من تمام صفحات اچ تی ام ال و سی اس اس رو با همین نرم افزار ویرایش میکنم ....
بابت اون سایت ممنون من از همون سایت اینارو یاد گرفتم واقعا سایت باحالیه ...
Amir
10-07-1390, 02:34 بعد از ظهر
حرف شما درسته من با نرم افزار دیگه ای از Adobe اشتباه گرفتم

اگه نمی تونید ویرایش کنید دلیلش اینه که آشنایی کامل با html5 ندارید , همون w3 رو دنبال کنید مطمئنا با متغیر ها آشنا میشید برای ویرایش
S!L3NT
10-07-1390, 03:55 بعد از ظهر
ممنون ...
از رفقا پرسیدم مثل اینکه اصلا دریم ویور من این فرمت رو ساپورت نمیکنه ! :دی ورژن جدید باید بگیرم ...