نمایش قدرت HTML5

  • بوسیله: محسن شفیعی
  • در 1391/10/27 - 23:43
  • یک نظر
نمایش قدرت HTML5

نمایش قدرت HTML5

سایت Form Follows Function مجموعه ای از آزمایش های تعاملی HTML5 است که با استفاده از Canvas و CSS3 مانند انیمیشن های 3بعدی و 2 بعدی ساخته شده است.

در این سایت شما بر روی هر کتابی که کلیک کنید موج جدیدی از قدرت HTML5 را میبینید. اگر صدای کارت گرافیک شما درآمد زیاد تعجب نکنید.

این سایت را به هیچ وجه از دست ندهید.

سایت Form Follows Function

شروعی بر ویدئو در HTML5

  • بوسیله: محسن شفیعی
  • در 1391/10/22 - 23:02
  • نظرات (2)
ویدئو در HTML5

ویدئو در HTML5

در گذشته و حتی امروزه توسعه دهندگان و طراحان وب زمانی که میخواستند یک ویدئو یا صدا را درون سایت خود داشته باشند حتما باید از پلاگین هایی مانند flash یا silverlight استفاده میکردند. اما با وجود HTML5 میتوان به سادگی این عناصر را داخل سایت داشته باشیم.
در این مطلب به چگونگی کار با video در HTML5 میپردازیم.


فرمت های Video
اولین توقف ما در این سفر فرمت های Video است. در پایین سه فرمت اصلی Video در وب را قرار دادیم. همانطور که میبینید هیچ کدام از آنها توسط همه مرورگرها پشتیبانی نمیشوند.
فرمت های ویدئو در وب

فرمت های ویدئو در وب

اگر میخواهید مطمئن باشید که کاربر مورد نظر شما از هر مرورگری که استفاده میکند بتواند ویدئو را ببینید در ادامه با ما همراه باشید.
(بیشتر…)

حل مشکل پشتیبانی نشدن عناصر HTML5 در IE

  • بوسیله: محسن شفیعی
  • در 1391/10/20 - 18:14
  • یک نظر

در مطلب نگاهی به عناصر HTML5 ما بعضی از عناصر header, footer و nav را بررسی کردیم. با این حال وقتی شما به این عناصر در مرورگرهای قدیمی مانند IE8 استایل مورد نظر خود را اعمال میکنید هیچ گونه تغییری در صفحه شما ایجاد نخواهد شد چون مرورگر IE8 برای HTML5 ساخته نشده است.

برای مثال تصویر زیر گویای این حرف است:

حل مشکل پشتیبانی نشدن عناصر HTML5 در IE

حل مشکل پشتیبانی نشدن عناصر HTML5 در IE

تصویر بالا گویای همه چیز است. اما چگونه این مشکل را رفع کنیم.

در ادامه با ما همراه باشید…

(بیشتر…)

ساخت آیکن با استفاده از عناصر HTML

  • بوسیله: محسن شفیعی
  • در 1391/10/18 - 19:59
  • یک نظر
box shadow

box shadow

در CSS3 با استفاده از عناصر کاذب میتوان آیکن مانند آن چیزی که در ادامه خواهیم دید ساخت.
عناصر کاذب در ساختار درختی سند HTML شما وجود ندارند اما توسط CSS میتوان آنها را تولید کرد. اما ما به شما پیشنهاد میکنیم که خودتان آنها را اضافه کنید.
برای مثال مانند زیر عمل کنید:

<div class="”square”"></div>

و CSS را مانند زیر وارد کنید:

.square {
   position: relative;
   background: blue;
   width: 50px;
   height: 50px;
}
.square::before {
   position: absolute;
   left: -50px;
   content: '';
   height: 50px;
   width: 50px;
   display: block;
   background: green;
}
.square::after {
   position: absolute;
   left: 50px;
   content: '';
   height: 50px;
   width: 50px;
   display: block;
   background: red;
}

(بیشتر…)

استایل دادن به عناصر فرم – بخش دوم

  • بوسیله: محسن شفیعی
  • در 1391/10/17 - 11:44
  • یک نظر
استایل دادن به عناصر فرم

استایل دادن به عناصر فرم

در این بخش که ادامه بخش اول استایل دادن به عناصر فرم است به آموزش استایل دادن به عناصر file  میپردازیم.

این عنصر کمی با عناصر چک باکس و ریدیو فرق میکنند. در این نوع ما ابتدا خود عنصر file  را برمیداریم سپس استایل مورد نظر را میسازیم و در مرحله بعد آن را با استفاده از جاوا اسکریپت به عنصر اصلی وصل میکنیم.

 


عنصر file

ابتدا عنصر را در صفحه میگذاریم.

<label>ارسال مدارک:</label>
<div class="refile">انتخاب کنید<div></div></div>
<input class="file" type="file" />

در ادامه با ما همراه باشید…

(بیشتر…)

نگاهی به عناصر HTML5

  • بوسیله: محسن شفیعی
  • در 1391/10/16 - 11:40
  • یک نظر
عناصر HTML5

عناصر HTML5

توسعه HTML5 هنوز به اتمام نرسیده است اما میتوان از بعضی از عناصر آن که آماده هستند استفاده کرد که این عناصر در حال حاظر در مرورگرهای جدید و همچنین قدیمی پشتیبانی میشوند مانند <header> و <footer> و <nav>

 


عنصر <header>

عناصر HTML5 خوشبختانه با نام های منطقی نامگذاری شده اند. این عنصر برای تعریف هدر یک سایت در نظر گرفته شده است. اما میتوان از آن برای معرفی هر یک از بخش های سایت استفاده کرد.

(بیشتر…)

استایل دادن به عناصر فرم – بخش اول

  • بوسیله: محسن شفیعی
  • در 1391/10/16 - 6:58
  • نظرات (5)
استایل دادن به عناصر فرم

استایل دادن به عناصر فرم

استایل دادن به عناصر فرم تقریبا کار ساده ای است البته فقط نوع Text و Submit !!

در این بخش به نحوه استایل دادن CheckBox و Radio میپردازیم و در بخش دوم در آینده به نحوه استایل دادن به List و File خواهیم پرداخت.

طرز کار این تکنیک به این صورت است که ابتدا ما از نمایش دادن عنصر اصلی مورد نظر خودمان در فرم به کاربر جلوگیری میکنیم. در قدم بعد با استفاده از HTML و CSS استایل مورد نظر خودمان را میسازیم و در قدم آخر با Jquery هر بار که مقدار(Value) عنصر مورد نظر توسط کاربر تغییر کرد ما هم مقدار عنصر اصلی را تغییر میدهیم.

در ادامه با ما همراه باشید…

(بیشتر…)