Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

آموزش های قدیمی

حتما دیدین که وقتی داخل یه سایت می رین دیدین که وقتی روی لینک ها میرین حالتشون تغییر می کنه.

این کد ، کد css هست که به راحتی می تونین اون رو بنویسین.

برای این کار باید کد در تگ style قرار بگیره. به مثال زیر که یک مثال کامل هست  توجه کنید:

<style type="text/css">

	a{

	-ms-transition:all 0.2s ease-in;

	-webkit-transition:all 0.2s ease-in;

	-moz-transition:all 0.2s ease-in;

	-o-transition:all 0.2s ease-in;

	transition:all 0.2s ease-in;

	}

a:hover { color: #009FFF;text-shadow: 0px 2px 3px; -moz-text-shadow: 0px 2px 3px; -o-text-shadow: 0px 2px 3px; -ms-text-shadow: 0px 2px 3px; -webkit-text-shadow: 0px 2px 3px; -ms-transition:all 0.2s ease-in; -webkit-transition:all 0.2s ease-in; -moz-transition:all 0.2s ease-in; -o-transition:all 0.2s ease-in; transition:all 0.2s ease-in; } </style>

 

در قسمت a شما مشخصات اصلی لینک ها رو مشخص می کنید که زمانیه که شما هنوز ماوس رو روی لینک ها نبرده اید.

در قسمت a :hover شما مشخصاتی زمانی که ماوس روی لینک قرار داره رو مشخص می کنید.

HTML5 تحولی در وب

HTML همواره زبان اصلی نشانه گذاری در وب بوده است . این زبان هرچند در ابتدا بعنوان زبانی برای شرح معنایی اسناد علمی طراحی شده بود ، اما با گذشت زمان، طراحی آن بگونه ای پیش رفت که آنرا قادر ساخت تا انواع دیگر اسناد را نیز پوشش دهد. HTML5 استاندارد فن‌آوری جدیدی است که کاهش نیاز برای افزونه‌های ویژه مانند ادوب فلش و سیلورلایت که برای مشاهده ویدیوهای قرار گرفته در بسیاری از صفحات وب و همچنین برخی وب سایت‌های انیماتوری مورد استفاده قرار می‌گیرند را مدنظر دارد . همچنین HTML5 امکان می‌دهد اینگونه محتواها مستقیما در مرورگر مشاهده شوند. در این میان محدوده ای که همچنان بطور مناسب مورد توجه قرار نگرفته است محدوده سربسته برنامه های کاربردی تحت وب (web applications) می باشد که Html 5 علاوه بر اینکه بعنوان نسخه بعدی Html 4.0.1 و همچنین XHTML 1.0 پیشنهاد شده است، تلاشی است برای تصحیح این موضوع با توجه به فعالیت ها و موضوعاتی که در چند سال اخیر مطرح شده اند .HTML 5 پنجمین بازبینی مهم زبان بنیادی وب جهانی یعنی HTML را تعیین می نماید .

سرفصل ها:

  • مقدمه
  • Html5 چیست ؟
  • چه چیزهایی را میتوان از Html5 انتظار داشت؟
  • پنج نکته‌ای که باید درباره‌ی HTML5 بدانید
  • HTML5 و طوفانی مجازی که در راه است
  • معرفی سایت های برتر نسل آتی وب ( HTML5 )
  • Anigma یک بازی آنلاین فقط با استفاده از CSS3 و HTML5
  • آیا با وجود JavaScript و Flash نیازی به استفاده از HTML5 هست؟
  • میزان پشتیبانی مرورگر ها از استاندارد های HTML 5
  • چه زمان HTML 5 به اتمام می رسد

 

سی اس اس فقط برای اینترنت اکسپلورر

برای طراحان وب یکی از معظلاتی که همیشه بوده و امیدواریم به زودی بر طرف بشه internet explorer بوده و هست. این مرورگر(!) تقریبن هیچ وقت استاندارد نبوده و گویا علاقه ای هم به استاندارد شدن نداره (البته بعد از IE8 اوضاع یه کم داره بهتر می شه و IE9 تقریبن کمی از نگرانی ها رو برطرف کرده) اما به جرات می شه عنوان کرد که غول مرحله ی آخر طراحان وب IE6 می باشد. :D در همین راستا یک سری تکنیک ها هست که مشکل رو حل می کنه

در HTML ما می تونیم برای استفاده از CSS هامون شرط تعیین کنیم. یعنی برای نمونه بگیم که اگر مرورگر کاربر IE بود ie.css رو لود کن و اگر مرورگرهای دیگه بودن style.css. این کار چه مزایایی داره؟

  • استایل شیت اصلی ترو تمی باقی می مونه
  • استفاده از تکنیک های قابل قبولی که توسط مایکروسافت تصویب شده
  • داشتن کدهایی استاندارد بدون استفاده از هک ها

به یاد داشته باشید که این شرطی نویسی فقط برای کدهای سی اس اس نیست. شما می تونید از کدهای جاوااسکریپت و تگ هایی که فقط نیاز دارید در IE نمایش داده بشن استفاده کنید.

حالا شروع می کنیم:

تمامی نسخه های IE:

<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

مرورگرهای دیگر(به غیر از IE)

<!--[if !IE]>
        <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

فقط IE7

<!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

فقط IE6

<!--[if IE 6]>
        <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

فقط IE5

<!--[if IE 5]>
        <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

فقط IE5.5

<!--[if IE 5.5000]>
        <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

فقط IE6 و نسخه های قدیمی تر

<!--[if lt IE 7]>
        <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
        <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

فقط IE7 و نسخه های قدیمی تر

<!--[if lt IE 8]>
        <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 7]>
        <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

فقط IE8 و نسخه های قدیمی تر

<!--[if lt IE 9]>
        <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
        <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

فقط IE6 و نسخه های تازه تر

<!--[if lt IE 7]>
        <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 6]>
        <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

فقط IE7 و نسخه های تازه تر

<!--[if lt IE 8]>
        <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
<!--[if lte IE 7]>
        <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

هک ها
هک ها روش های غیر استانداردی هستن که می شه مشکلات رو باهاشون حل کرد ولیدیتور w3c از ای هک ها خطا می گیره.

برای اینکه یک خصوصیت مثلن margin در IE6 کار بکنه و در سایر مرورگرها ندیده گرفته بشه من از این روش استفاده می کنم:

_margin: 10px;

* از – هم می تونید به جای ـ استفاده کنید

برای IE7 هم می تونید از علامت * ستاره استفاده کنید:

*margin: 10px;

یه سری هک دیگه هم وجود داره که می تونید برای اطلاعات بیشتر به این پیوند مراجعه کنید.
امیدوارم مفید بوده باشه

منبع : css-tricks

 

در این آموزش ما می خواهیم کار با سرویس نسبتا جدید گوگل به نام Google font API   را  تجربه کنیم .

اگر طراح وب باشید حتما از محدودیت استفاده از فونت ( مخصوصا فارسی ) خسته شده اید . می خواهیم با هم تایپوگرافی آنلاین را کمی پر و بال دهیم .این سرویس را در یک جمله می توان آسان کننده استفاده از فونت دلخواه در وب دانست . :

ادامه مطلب

در نوشته قبلی درباره سرویس فونت گوگل بحث کردیم . اما در این پست می خواهیم به این نتیجه برسیم که نیاز چندانی هم به این سرویس نداریم.
در این نوشته خواهید آموخت :
- چگونه از فونت های فارسی در وب استفاده کنیم .
- آماده سازی فونت برای وب .
- نوشتن دستورات برای تمام مروگرها ( حتی IE6 ) .

چرا می خواهیم از این دستور و یا  اصولا از این روش استفاده کنیم ؟

همان طور که می دانید فونت های فارسی ایمن ( موجود در تمام کامپیوتر ها ) محدود به دو فونت arial و Tahoma است. و اگر بخواهید از یک متن را با فونتی خواص نشان دهید   مجبور هستید یا از عکس استفاده کنید یا اینکه از جاوا اسکریپت و یا فلش کمک بگیرید که مطمئنا حجم بالایی از داده را به سایت تحمیل می کنند و در ضمن مسئله پشتیبانی از تمام مرورگرها ( cross browser ) هم وجود دارد .
اما ما امروز با css  به راحتی این کار را بهتر و سریع تر انجام می دهیم همچنین حجم داده کمتری بر سایت اضافه می شود .
خوب حالا که به فواید این کار پی بردید به سراغ مرحله اول می رویم . ساختار کلی دستور :

@font-face {
    font-family: Graublauweb;
    src: url('Graublauweb.eot'); /* IE9 Compatibility Modes */
    src: url('Graublauweb.eot?') format('eot'),  /* IE6-IE8 */
    url('Graublauweb.woff') format('woff'), /* Modern Browsers */
    url('Graublauweb.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('Graublauweb.svg#svgGraublauweb') format('svg'); /* Legacy iOS */
}

همان طور که در کد هم مشخص است دلیل چند دستور شدن این مشخصه وجود مرورگر های مختلف با سینتکس های متفاوت است .
حالا به سراغ بررسی کد می رویم :
خط اول کد شروع دستور است و خط دوم ما نام صورت فونتی که می خواهیم ایجاد کنیم می نویسیم . ( اسم دلخواه ) و پنچ خط بعدی کار یکسانی انجام می دهند البته در موررگر های متفاوت تاثیر دارند.

خب با دیدن این همه فایل این سوال پیش ما آید که چگونه این ها را بدست آوریم  ؟

مثل همیشه یک راه میان بر وجود دارد ! و آن هم سایت @font-face Kit Generator است

ابتدا باید دکمه add Fonts  را زده تا فونت ها آپلود شوند . سپس شما فونت ها در کادر زیر دکمه مشاهده می کنید .  در اینجا من فونت هما را انتخاب کرده ام . در مرحله بعد می توانید کد خروجی را به میل خود تغییر دهید . من مدل بهینه (optimal ) را انتخاب کرده ام . در نهایت با زدن تیک Agreement  دکمه دانلود فعال می شود . بعد از زدن دکمه download your kit  سایت به شما یک فایل فشرده (zip ) می دهد .  اما محتویات این فایل چیست :

فونت مورد نظر شما در تمامی فرمت های لازم ( eot  , ttf  , woff  svg  )
یک فایل css و html  که حاوی نمونه استفاده از فونت شماست .

کد css  مورد نیاز ما در stylesheet.css  است . محتویات این فایل را در فایل css  خود کپی کنید .البته بدیهی است که فونت ها را نیز باید به محل سایت خود منتقل کنید .

@font-face {
 font-family: 'BHomaRegular';
 src: url('bhoma-webfont.eot');
 src: url('bhoma-webfont.eot?#iefix') format('eot'),
 url('bhoma-webfont.woff') format('woff'),
 url('bhoma-webfont.ttf') format('truetype'),
 url('bhoma-webfont.svg#webfontI05wzgXm') format('svg');
 font-weight: normal;
 font-style: normal;
 
}

خب قدم بعدی چیست ؟!  لذت بردن از استفاده از این کد ! .

برای استفاده فقط کافی است به تکی که می خواهید متن آن با این فونت نمایش داده شود این کد css  را اضافه کنید   :

font-family: 'BHomaRegular';

امیدوارم پست مفیدی بوده باشد . منتظر نظرات شما برای بهبود نوشته های آینده هستم .

    کلاس های آنلاین فعال

    برای افزایش دانش عمومی کاربران سعی بر این داریم که کلاس های آنلاینی برگزار کنیم. لیست این کلاس (ها) را می توانید در زیر ببینید. این قسمت را هر روز چک کنید تا از کلاس ها و اخبار جدید با خبر شوید. کلاس ها توسط همین کاربران و دوستان شما برگزار میشود. اگر مایل به برپایی کلاس آموزشی ای در هر زمینه ای هستید با مدیر تماس بگیرید.

    مدرس: محمد و اقبال
    آموزش PHP - جلسه اول
    پنجشنبه 04 تیر 1394 - 17:00
    هیچ کلاس فعالی موجود نیست.
    کاربران آنلاین
    آمار
    مطالب : 792
    نظرات : 4371
    تعداد اعضا : 36632
    افراد آنلاین : 3
    بازدید امروز : 363
    بازدید دیروز : 2,234
    گوگل امروز : 22
    گوگل دیروز : 161
    بازدید هفته : 4,735
    بازدید ماه : 25,970
    بازدید سال : 411,593
    بازدید کلی : 10,806,069