PlaceHolder یک خاصیت Html می باشد که می تواند متنی را به صورت پیشفرض در input ها قرار دهید تا به محض کلیک کردن بر روی input ها این متن پیشفرض پاک شده و آماده ی تایپ کردن توسط کاربر شود .

کافیست کد زیر را در Css خود قرار دهید .

::-webkit-input-placeholder {
  color: #666666 !important;
}
::-moz-placeholder { 
  color: #666666 !important;
}
:-ms-input-placeholder {
  color: #666666 !important;
}
:-moz-placeholder {
  color: #666666 !important;
}

نکته : در کد بالا به جای 666666# میتوانید رنگ دلخواه خود را بنویسید ( هر 4 تا کد )

پخش اختصاصی

آموزش و گرداوری : وحید مجیدی

پستی که قصد دارم در آن از افکت های فوق حرفه ای وب در حالت Hover را معرفی کنم .

حالت Hover چیست : این حالت به قدری روتین هست که دیگر نیازی به توضیح ندارم اما برای آن دسته از عزیزانی که نمیدونن توضیج میدم . این حالت را به زمانی میگویند که نشانه گر ماوس را بر روی یک قسمت برده اید و اتفاقی خاص رخ میدهد . مثلا وقتی ما ماوس را بر روی یک لینک میبریم , نشانه گر ماوس شبیه دست انسان میشود یا مثلا هنگامی که ماوس را بر روی یک باکس میبرید , رنگ آن عوض میشود .

و اما میرسیم به معرفی این افکت ها …

به صورت پیش فرض ما با استفاده از css و css3 میتوانیم افکت های زیبایی را در این حالت اعمال نماییم اما با استفاده از آموزش بیان شده در این پست , شما میتوانید از افکت های آماده فوق حرفه ای و جذاب استفاده نمایید .

برای این کار در ابتدا کافیست فایل css آماده مربوط به افکت ها را از اینجا دانلود نمایید .

سپس در پوشه ی سایت خود آپلود کرده و سپس آن را توسط تگ زیر به سایت خود لینک نمایید .

<link href="آدرس فایل hover.css" rel="stylesheet">

حال میتوانید به هر تگی از html که دوست دارید دارای حالت hover با افکت های زیبا شود , اتربیوت class داده و از میان لیست بلند بالایی که در اختیار شما قرار میگیرد , یک افکت را انتخاب نمایید .

نکته 1 : برای اینکه لیست به شما نمایش داده شود , باید از نرم افزار های طراحی وب سایت ( ترجیحا Adobe Dreamveawer ) استفاده کنید .

نکته 2 : تمامی کلاس های این لیست که مربوط به افکت ها می باشد , با کلمه -hvr شروع میشود .

نکته 3 : فایل hover.css دارای کدهای باز می باشد و شما میتوانید در صورت تمایل برای تغییر در افکت ها , سورس این فایل را باز نموده و شروع به تغییر نمایید . ( ترجیحا باید به css3 مسلط باشید )

دموی تمامی افکت ها

پخش اختصاصی

گرداوری و آموزش : وحید مجیدی

عنوان کتاب: آموزش کاربردی HTML 5.0 &CSS 3.0

ترجمه و تالیف :محمد مرادی

ناشر: انتشارات پندار پارس

توضیح کلی درباره کتاب:

*طراحی با استانداردهای جدید وب

*ایجاد افکت های تصویری و انیمیشن بدون استفاده از فلش

*ایجاد صفحات وب معنایی و ساختمندتر

*ذخیره اطلاعات در صفخات وب

*افزایش کارایی طراحی

سرفصل ها :

فصل 1: معرفی CSS  و HTMLS

فصل 2: آشنایی اولیه با HTML 5 و CSS3

فصل 3:ترسیم بوسیله عنصر <CANVAS>

فصل 4: ایجاد افکت کشیدن و رها کردن (DRAG & DROP)

فصل 5:کنترل فرم

فصل 6:ویرایش درجا (INLINE EDITING)

فصل 7:استفاده از فایل های صوتی و تصویری (VIDEO AND AUDIO)

فصل 8: ذخیره اطلاعات (WEBSTORAGE)

فصل 9: معرفی CSS

فصل 10: ایجاد افکت GRADIENT و پس زمینه چندگانه در CSS3

فصل 11:ویژگی TRANSITIONS و TRANSFORMS در CSS

فصل 12: کار بافونت ها و طراحی های چند ستونی

فصل 13:تمرین پایانی

پخش اختصاصی: اسکریپت دات کام

گردآوری: نیلوفر معماریان محمدی 

عنوان کتاب: آموزش گام به گام HTML 2012 –مرجع رسمی مایکروسافت 5

نویسنده:فیث ومپن

ترجمه:امیراحسان رضائی

ناشر: انتشارات مهرگان قلم

توضیح کلی درباره کتاب:

این کتاب مشتمل بر 366 صفحه می باشد.آموزش ها تصویری و به همراه یک حلقه DVD آموزشی ارائه میشود.این کتاب شخصا توسط خودم استفاده شده .در کل کتاب خوبیه .

سرفصل ها :

فصل 1: شروع به کار با HTML

فصل 2:آماده سازی ساختار سند

فصل 3:اعمال فرمت روی متن با استفاده از تگ ها

فصل 4: استفاده از لیست ها و پس زمینه ها

فصل 5:ایجاد هایپرلینک ها و انکرها

فصل 6:آشنایی با برگه های شیوه

فصل 7:استفاده از CSS برای فرمت دادن به متن

فصل 8: تغییر فرمت پاراگراف ها با برگه های شیوه

فصل 9: نمایش گرافیک ها روی صفحه وب

فصل 10: ایجاد کمک برای حرکت دربین صفحات

فصل 11:استفاده از بخش ها

فصل 12:ایجاد جدول ها

فصل 13:اعمال فرمت روی جدول های

فصل 14:ایجاد فرم های کاربری

فصل 15:استفاده از صدا و ویدئو

فصل 16:استفاده از جاوا اسکریپت و محتویات خارجی

فصل 17: HTML و مایکروسافت اکسپرشن وب

پخش اختصاصی: اسکریپت دات کام

گردآوری: نیلوفر معماریان محمدی

این کتاب همراه با CD  آموزشی ارائه میشود.

محتویات CD شامل: تمامی کدهای مربوط به پروژه های داخل کتاب ،تمامی تصاویر داخل کتاب بصورت رنگی، تعدادی از نرم افزارهای مناسب برای کار با CSS، بیش از 40طرح حرفه ای از سایت

عنوان کتاب: 101نکته و ترفند برای استفاده از CSS در طراحی وب

نویسنده:راشل اندرو

مترجم:امیرعباس عبدالعلی

ناشر: کتاب مرو – شرکت ناقوس اندیشه

توضیح کلی درباره کتاب:  

*آموزش اصول ومبانی CSS به زبانی ساده

*ذکر مثالهای متعدد برای آموزش هریک از دستورات CSS

*بررسی تمامی دستورات بر استفاده CSS درقالب 101 سوال وجواب

*سبک دهی متون و اجزای مختلف صفحه تنها با استفاده از CSS

*آموزش جلوه های بصری بسیار زیبا با استفاده از CSS و تصاویر

*رفع عیب طراحی و سازگارکردن آن با تمامی مرورگرهای معروف وب

سرفصل ها :

فصل 1: شروع کار با CSS

فصل 2:سبک دهی به متن و سایر مسائل مقدماتی

فصل 3: CSS وتصاویر

فصل 4:ایجادبخش ناوبری سایت با استفاده از CSS

فصل 5:داده های جدولی

فصل 6:فرم ها و واسط های کاربری

فصل 7: پشتیبانی از مرورگرها و ابزارهای مختلف

فصل 8:طراحی و موقعیت دهی عناصر با استفاده از CSS

فصل 9:خصوصیات ویژه CSS برای مرورگرهای خاص و تکنیک های قابل استفاده در آینده

پخش اختصاصی: اسکریپت دات کام

گردآوری: نیلوفر معماریان محمدی 

مشتمل بر 544 صفحه

عنوان کتاب:ترفندهای HTML و طراحی وب

نویسنده:کریس جمسا – کنرادکینگ -اندی اندرسن

مترجم:محمد حسن مهدوی

ناشر:خانه نشر هزاره

توضیح کلی درباره کتاب:  

*استفاده از فرم ها وجداول                                     *بهینه سازی صفحات وب

*برنامه های کاربردی وب                                         *مدیریت ذخیره سازی بر خط(Online)

*مدیریت اطلاعات و بانکهای اطلاعاتی                        *تراکنش های امن تجارت الکترونیکی

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

*صدا،ویدئو و چند رسانه ای                                     *استفاده از (Cascading style sheet(CSS

*انیمیشن با Flash  و GIF                                        *ایجاد صفحات وب با PHP

*شی های  ActiveX و JavaScript                            *اپلتهای Java

*( Active Server Pages(ASPs                                 *امنیت در وب

سرفصل ها :

فصل 1: مفاهیم HTML

فصل 2:جداولHTML

فصل 3:فرمهای HTML

فصل 4: (Cascading style sheet(CSS

فصل 5: XHTML و روندهای توسعه

فصل 6:گرافیک

فصل 7: انیمیشن،صدا و ویدئو

فصل 8:JavaScript

فصل 9:اپلتهایJava و شی هایActiveX

فصل 10: PHP4

فصل 11:( Active Server Pages(ASPs

فصل 12:امنیت و اجرا

پخش اختصاصی: اسکریپت دات کام 

گردآوری: نیلوفر معماریان محمدی

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

و اما آموزش :

برای این کار کافیست قطعه کد زیر را در قسمت css سایت خود کپی کنید …

body:before{
    content: "";
	position: fixed;
	top: -10px;
	left: 0;
	width: 100%;
	height: 10px;
	-webkit-box-shadow: 0px 0px 10px #000;
	-moz-box-shadow: 0px 0px 10px #000;
	box-shadow: 0px 0px 10px #000;
	z-index:100;
}

 نکات مهم :

* بهتر است کد بالا را در قسمت های بالایی فایل css خود قرار دهید .

* برای زیاد کردن مقدار سایه میتوانید سومین مقدار از خاصیت box-shadow را بیشتر کنید ( هر 3 box-shadow با پیشوند های مختلف را باید تغییر دهید )

* برای تغییر رنگ سایه میتوانید چهارمین مقدار از خاصیت box-shadow را بیشتر کنید ( هر 3 box-shadow با پیشوند های مختلف را باید تغییر دهید )

مثلا اگر میخواهید سایه ی  25 پیکسلی و رنگ قرمز داشته باشید :

	-webkit-box-shadow: 0px 0px 25px #f00;
	-moz-box-shadow: 0px 0px 25px #f00;
	box-shadow: 0px 0px 25px #f00;

 گرداوری : وحید مجیدی

پخش اختصاصی

شما میتوانید به راحتی این خاصیت پیشفرض رو تغییر دهید و دیزاین خود را جایگزین کنید .

برای این کار به شیوه نامه (style.css) وبلاگ , وبسایت , قالب وردپرس و … خود رفته و در این فایل ( معمولا در همان خطهای اول ) این دو شیوه نامه را اضافه کنید .

توجه : برای اینکه تمامی مرورگر ها  از این خاصیت بهره مند شوند , باید هر دو شیوه نامه ی زیر را در فایل css قرار دهید . طبیعتا مقادیر قرار گرفته در هر دو شیوه نامه باید با هم مساوی باشند .

::selection {
 background-color:#eee;
 color: #222;
}
::-moz-selection {
 background-color:#eee;
 color: #222;
}

 نکته : خاصیت background برای رنگ زمینه ( آبی پیشفرض ) و خاصیت color برای تغییر رنگ نوشته درون آن میباشد . 

گردآوری : وحید مجیدی

پخش اختصاصی

بارها عرض کردم که به شخصه خودم اعتقاد به استاندارد نویسی برای مرورگرهای قدیمی ندارم , چون کاربری هم که به دنیای اینترنت وارد میشود , باید حداقل قانون استاندارد که همان استفاده از مرورگرهای به روز میباشد را رعایت نماید.

به هر حال این پست را جهت استاندارد نویسی کد های Css برای مرورگرهای قدیمی IE ( به عبارت دیگر , هک Css برای IE ) به شما عزیزان تقدیم خواهم کرد .

همان طور که میدانیم , مرورگرهای قدیمی اینترنت اکسپلورر از بسیاری از مشخصه های Css و حتا Html پشتیبانی نمیکند و در نتیجه کدنویسان عزیز را برای ارائه یک دیزاین حرفه ای و جدید دچار مشکل می سازد .

اما با کمی تغییر در کدهای Css و همچنین کدنویسی مجزا برای این ورژنها میتوان به نتیجه مطلوبی دست پیدا کرد.

و اما آموزش :

اولین روش , استفاده از گزینه های شرطی در قسمت Head فایل اچ تی ام ال می باشد .

همان طور که میدانید ما برای شناسایی فایل Css , با استفاده از تگ link , آن را به فایل Html و در بین دو تگ <head> و <head/> قرار میدهیم .

به عنوان نمونه :

<link rel="stylesheet" type="text/css" href="style.css" />

حال کافیست بعد از این خط که برای Css اصلی و کلی سایت می باشد , از گزینه های شرطی برای IE استفاده کنیم و طبیعتا باید برای این ورژنها Css مجزای دیگری نوشت تا به محص استفاده کاربر از IE قدیمی , Css مخصوص به همان IE اجرا شود .

اگر میخواهید تمامی ورژنهای IE را در بر بگیرد , از کد زیر استفاده نمایید .

<!--[if IE]> <link rel="stylesheet" type="text/css" href="مخصوص آن Css آدرس فایل" /> <![endif]-->

 اگر میخواهید فقط IE9 را در بر بگیرد , از کد زیر استفاده نمایید .

<!--[if IE 9]> <link rel="stylesheet" type="text/css" href="مخصوص آن Css آدرس فایل"> <![endif]-->

  اگر میخواهید فقط IE8 را در بر بگیرد , از کد زیر استفاده نمایید .

<!--[if IE 8]> <link rel="stylesheet" type="text/css" href="مخصوص آن Css آدرس فایل" /> <![endif]-->

   اگر میخواهید فقط IE7 را در بر بگیرد , از کد زیر استفاده نمایید .

<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="مخصوص آن Css آدرس فایل" /> <![endif]-->

  اگر میخواهید فقط IE6 را در بر بگیرد , از کد زیر استفاده نمایید .

<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="مخصوص آن Css آدرس فایل" /> <![endif]-->

 اگر میخواهید IE های 6 به پایین , 7 به پایین , 8 به پایین را در بر بگیرد از کدهای زیر استفاده نمایید .

توجه : 3 کد زیر به ترتیب بالا میباشد .

<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="مخصوص آن Css آدرس فایل" /> <![endif]-->
<!--[if lt IE 8]> <link rel="stylesheet" type="text/css" href="مخصوص آن Css آدرس فایل" /> <![endif]-->
<!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="مخصوص آن Css آدرس فایل" /> <![endif]-->

 اگر میخواهید IE های 6 به بالا , 7 به بالا , 8 به بالا را در بر بگیرد از کدهای زیر استفاده نمایید .

توجه : 3 کد زیر به ترتیب بالا میباشد .

<!--[if gt IE 5.5]> <link rel="stylesheet" type="text/css" href="مخصوص آن Css آدرس فایل" /> <![endif]-->
<!--[if gt IE 6]> <link rel="stylesheet" type="text/css" href="مخصوص آن Css آدرس فایل" /> <![endif]-->
<!--[if gt IE 7]> <link rel="stylesheet" type="text/css" href="مخصوص آن Css آدرس فایل" /> <![endif]-->

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

مثلا میتوانید فقط از کد مربوط به تمامی مرورگر ها یا مثلا فقط میتوانید از 3 کد مخصوص ورژنهای 8 , 7 و 6 به پایین استفاده نمایید .

نکته : با توجه به نیاز خود میتوانید از 4 گزینه زیر در کدهای بالا استفاده نمایید و کدهای جدید به دلخواه خود بسازید :

1. gt : نسخه بالاتر از
2. gte : نسخه بالاتر از یا برابر
3. lt : نسخه پایین تر
4. lte : نسخه پایین تر یا برابر

اما آموزش دوم :

استفاده از هک در کدهای Css میباشد که میتوانید از آن استفاده نمایید .

• IE8 : یک (9\ ) در آخر و قبل از ( ; ) اضافه کنید
• IE7 : افزودن ستاره ( * ) قبل از خصوصیت کد Css
• IE6 : افزودن آندر اسکور ( _ ) قبل از خصوصیت کد Css

به عنوان نمونه :

  background: #fff;       استاندارد
  background: #fff\9;    IE8 برای 
  *background: #fff;     IE7 برای 
  _background: #fff;     IE6 برای 

گرداوری و آموزش : وحید مجیدی 

پخش اختصاصی

متاسفانه بسیاری از کدنویسان ایرانی , بسیاری از نکات مهم در مورد کدنویسی رو رعایت نمیکنن و به هیچ عنوان به صورت استاندارد کدنویسی نمیکنند . 

در این پست قصد دارم نکاتی برای استاندارد سازی کدها به عنوان یک برنامه نویس کوچک از میان بقیه دوستان برنامه نویس , به این مطالب بپردازم .

طبیعتا استاندارد نوشتن , نه تنها به زیبایی کار , بلکه به بهینه سازی سرعت بارگذاری وب سایت و البته بهینه سازی برای موتورهای جستجو کمک میکند .

1 – اگر دارای چندین فایل Css هستید , حتما تمامی فایل هارو در یک فایل مجزا بنویسید . یک فایل Css حجیم , بسیار بهتر از چند فایل Css کوچک تر هست . چون تعداد درخواست Http کمتر و در نتیجه سرعت بارگذاری بالاتر میرود . یکی از روشهای اضافه کردن Css به Css اصلی سایت , استفاده از کلمه کلیدی @import میباشد . به هیچ عنوان از این روش استفاده نکنید . این کار باعث کاهش سرعت بارگذاری و البته مشکلاتی در IE های قدیمی میشود .

2 – از سه روش بارگذاری Css ( خارجی , داخلی , درون خطی ) , از روش خارجی استفاده شود . به این دلیل که در حافظه کش مرورگر ذخیره و دسترسی به آن در صفحات دیگر به سرعت انجام میپذیرد . 

3 – حتما فایل Css را به روش صحیح و حتما در بالای صفحات بارگذاری کنید .

به عنوان نمونه :

<link type="text/css" rel="stylesheet" href="style.css">

4 – کدهای Css رو به همون ترتیبی که در Html کدنویسی کرده اید بنویسید . یعنی از Header تا Footer به ترتیب کدنویسی کنید و مثلا خاصیت های تگ فوتر که در آخر Html هست , در اول Css ننویسید و به همین ترتیب …

5 – کلاس ها یا آی دی هایی که دارای خاصیت های مشترک هستند , تا حد امکان در گروه بندی های یکسان قرار دهید .

نمونه غلط :

div1{
	width:200px;
	height:200px;
	background-color:#096;
}
div2{
	width:200px;
	height:200px;
	background-color:#096;
}

نمونه صحیح :

div1, div2{
	width:200px;
	height:200px;
	background-color:#096;
}

 6 – از گذاشتن ; در آخرین خصوصیت هر کلاس یا آی دی خودداری کنید .

نمونه غلط :

vahid-majidi{
	width:100px;
	height:100px;
	background-color:#309;	
}

نمونه صحیح : 

vahid-majidi{
	width:100px;
	height:100px;
	background-color:#309	
}

 7 – از توضیحات و کامنت های اضافی پرهیز کنید .

نمونه غلط :

/*************************
* Code By Vahid Majidi *
**************************/

نمونه صحیح :

/* Code By Vahid Majidi */

 8 – در درج رنگهایی که دو به دو شبیه هم هستند , از کد دهی هگزا استفاده کنید .

نمونه غلط :

.vahid-majidi{
     background-color:#116699	
}

نمونه صحیح : 

.vahid-majidi{
     background-color:#169	
}

 9 – در کدنویسی خصوصیاتی از جمله Padding , Margin و … خلاصه نویسی کنید .

نمونه غلط :

.vahid-majidi{
	padding-top:50px;
	padding-bottom:10px;
	padding-left:0px;
	padding-right:25px;
}

نمونه صحیح : ( توجه : برای خلاصه نویسی به سمت عقربه های ساعت حرکت کنید , یعنی بالا – راست – پایین – چپ )

.vahid-majidi{
	padding:50px 25px 10px 0;
}

 10 – خیلی از دیزاینر ها از Css های ریست برای همگام سازی تمامی مرورگرها برای نمایش یکسان استفاده میکنند . کار خوبی هست اما میتونید با چند خاصیت ساده , این کار رو نه به صورت کامل بودن Css ریست , اما تا حد قابل توجهی انجام دهید .

با استفاده از خصوصیات زیر ,  در داخل سلکتور *  که در برگیرنده ی تمامی تگ ها می باشد , خصوصیات زیر را وارد نمایید .

*{
	margin:0px;
	padding:0px;
	border:none;
	outline:none;
}

پخش اختصاصی 

توجه : بخش عدیده ای از این مطالب به صورت علمی و بخشی به صورت تجربی خود بنده ( وحید مجیدی ) بدست آمده …