موضوع: 31 نمونه طراحی جالب و دیدنی صفحات html5

درود

نوشته اصلی توسط FARID2XF

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

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

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

نوشته اصلی توسط FARID2XF

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

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

کد PHP:

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

کد PHP:

    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 ----------

نوشته اصلی توسط s.mm

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

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