# مباحث مرتبط با توسعه وب > طراحی وب (Web Design) >  آموزش CSS3

## raika17metal

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

----------


## raika17metal

*درس اول :**CSS چیست؟*
CSS مخفف عبارت Cascading Style Sheets می باشد.
Style ها تعیین کننده نحوه نمایش تگ های HTML در صفحات وب می باشند که برای حل مشکلات HTML 4.0  به آن افزوده شده است.
Style ها معمولا در فایل جداگانه ای ذخیره می شوند و شما به راحتی با تغییر یک فایل می توانید کل ظاهر یک سایت را تغییر دهید شگفت انگیز نیست؟
*تفاوت CSS2 و CSS3*
مهمترین تفاوت بین CSS2 و CSS3 این است که CSS3 به بخش های مختلفی تقسیم می شود که هریک از این بخش ها یک Medule نامیده می شود. هر یک از این Medule ها بصورت جداگانه و مستقل برای پیشبرد اهداف خود به کار می روند. طیف عظیمی از مرورگرها (Opera, Safari, Chrome, Mozila) از Medule های CSS3 پشتیبانی می کنند.
*CSS3 Modules*
در CSS3 مشخصات قدیمی به بخش های کوچکتری تقسیم شده اند و مشخصات جدیدی نیز به آن اضافه شده.
برخی از مهمترین Medule ها در CSS3 عبارتند از :

•	Selectors
•	Box Model
•	Backgrounds and Borders
•	Text Effects
•	2D/3D Transformations
•	Animations
•	Multiple Column Layout
•	User Interface

----------


## raika17metal

*درس دوم :*
*حاشیه ها در CSS3*
در CSS3 تغییرات شگفت انگیزی برای حاشیه ها اتفاق افتاده است. شما به راحتی می توانید کادرهایی با گوشه های گرد، همراه با سایه ایجاد کنید همچنین CSS3 به شما این امکان را می دهد که از یک تصویر به عنوان حاشیه استفاده کنید بدون اینکه نیازی به دانش طراحی توسط نرم افزارهایی همچون فوتوشاپ داشته باشید.
مواردی که در این یاد خواهید گرفت :
•	border-radius
•	box-shadow
•	border-image

*مرورگرهایی که از این خواص پشتیبانی می کنند :*


متاسفانه Internet Explorer فعلا از این خواص پشتیبانی  نمی کند اما بنا به اعلام مایکروسافت نسخه 9 این مرورگر از این خواص پشتیبانی خواهد کرد.
اگر قصد استفاده از این خواص در مرورگر Fire Fox را دارید باید از پیشوند -moz- استفاده نمایید.
مرورگرهای Chrome  و  Safari از خاصیت border-radius پشتیبانی می کنند اما برای استفاده از خاصیت های box-shadow و border-image در این مرورگرها نیاز به استفاده از پیشوند -webkit- می باشد.
مرورگر Opera بدون هیچ تغییری از تمامی خواص گفته شده پشتیبانی می کند. شگفت انگیز نیست؟!!

----------


## raika17metal

*درس سوم :*
*کادرهای گوشه گرد در CSS3*
افزودن کادرهای گوشه گرد در CSS2 کار خیلی ساده ای نبود و عموما طراحان با استفاده از نیرنگ هایی این کادرها را پیاده سازی می کردند. یکی از این ترفندها استفاده از تصاویر مختلفی برای گوشه های کادر بود. 
اما در CSS3 ایجاد کادرهای گوشه گرد به سادگی انجام می پذیرد.
در CSS3 از خاصیت border-radius برای ایجاد کادرهای گوشه گرد استفاده می شود.
برای مشاهده کادر با گوشه گرد روی لینک زیر کلیک کنید
http://dehkadeh-it.persiangig.com/we...d_corners.html
*توجه : برای مشاهده از مرورگری غیر از Internet Explorer استفاده کنید.*
کد لازم برای ایجاد کادر گوشه گرد :

<html>
<head>
<style type="text/css">
                div
                {
                                background:#0099FF;
                                margin:0 auto;
                                width:200px;
                                height:100px;
                                border:2px solid;
                                -moz-border-radius:25px; /* Firefox */
                                border-radius:25px;
                }
</style>
<title>Untitled Document</title>
</head>
<body>
                <div></div>
</body>
</html>

----------


## raika17metal

درس چهارم :
در CSS3 چندین خاصیت جدید برای background ها گنجانده شده است که به شما امکان می‌دهد توسط این خواص کنترل بیشتری بر روی background ها داشته باشید.
در این بخش شما با دو خاصیت زیر آشنا خواهید شد :
•	background-size
•	background-origion
همچنین یاد خواهید گرفت که چگونه از background های چندگانه استفاده کنید.

مرورگرهایی که از این خواص پشتیبانی می کنند :

این دو خواص در Internet Explorer پشتیبانی نمی شوند. برای استفاده از خاصیت background-size در مرورگر Fire Fox باید از پیشوند -moz- استفاده نمایید. اما متاسفانه این مرورگر نیز همچون Internet Explorer  از خاصیت background-origin پشتیبانی نمی کند. مرورگرهای Chrome، Opera و Safari بدون هیچ مشکلی از این خواص پشتیبانی می کنند.
خاصیت background-size در CSS3
این خاصیت اندازه تصویری که به عنوان background تعیین شده است را مشخص می‌کند. قبل از CSS3 تصاویری که به عنوان background تعیین می شدند با اندازه واقعی خود نمایش داده می شدن اما در CSS3 این امکان به وجود آمده است که شما بتوانید تصاویر background را تغییر دهید تا نیاز شما را در بخش های مختلف وب سایت مرتفع سازد.
شما می‌ توانید اندازه را برحسب پیکسل یا درصد تعیین کنید.
نکته : در این خاصیت اندازه تصویر با دو عدد تعیین می شود. اولی برای عرض و دومی برای ارتفاع
نحوه استفاده از خاصیت  background-size :
روش اول تعیین اندازه بر حسب پیکسل :

div
{
	background-image:url(myBackground.jpg);
	-moz-background-size:80px 60px; /* Firefox */
	background-size:20px 20px;
background-repeat:no-repeat;
}


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

div
{

background:url(img_flwr.gif);
-moz-background-size:100% 100%; /*Firefox */
background-size:100% 100%;
background-repeat:no-repeat;

}

خاصیت background-origin در CSS3
توسط این خاصیت می‌توان  محل قرارگیری background را تعیین کرد. برای مثال زمانی که از div استفاده می‌کنید می‌توانید تعیین کنید که background برای content-box، padding-box یا border-box تعیین شود. به تصویر زیر دقت کنید : 


نحوه استفاده از خاصیت background-origin :
div
{

background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}

استفاده از چند تصویر به عنوان background در CSS3
CSS3 به شما این امکان را می‌دهد که برای background خود، چند تصویر مختلف را تعیین کنید.
نکته : به جز مرورگر Internet Explorer سایر مرورگرها از این خاصیت پشتیبانی می‌کنند.
نحوه استفاده از این خاصیت : 
body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}

----------


## raika17metal

درس پنجم:
افکت های متن در CSS3
CSS3 شامل چندین خاصیت و ویژگی جدید برای متن ها (Text) می‌ باشد.
در این قسمت درباره دو خاصیت زیر توضیحاتی را ارائه خواهیم نمود.
•	text-shadow
•	word-wrap
مرورگرهایی که از این خواص پشتیبانی می کنند :


همانطور که مشاهده می‌کنید تنها مروگر Internet Explorer از خاصیت text-shadow پشتیبانی نمی کند.
خاصیت text-shadow :
این خاصیت باعث سایه دار شدن متن می شود.

نحوه استفاده از این خاصیت بدین شکل است :
h1{text-shadow: 5px 5px 5px #FF0000;}
همانطور که مشاهده می‌کنید این خاصیت دارای 4 پارامتر می‌باشد. پارامتر اول فاصله افقی سایه از متن، پارامتر دوم فاصله عمودی سایه از متن، پارامتر سوم میزان محو شدگی و پارامتر چهارم، رنگ سایه را تعیین می کند.
خاصیت word-wrap
در حالت عادی اگر قصد دارید متنی را داخل کادری بنویسید، در صورت طولانی شدن، متن از کادر خارج می‌شود(بدون درج فاصله). در css3 خاصیت word-wrap باعث می شود متن مورد نظر به چند خط شکسته شود.

نحوه استفاده از خاصیت wrap-text :
p {word-wrap:break-word;}

----------


## drstrike

سلام... خسته نباشید.
یه سوال داشتم؟
با توجه به اینکه هنوز html5 و CSS3 کامل روی مرورگرها اعمال نشدن و حالت آزمایشی رو دارن، آیا لازمه اونا رو آلان یاد بگیریم؟
ممنون میشم با دلیل و مدرک پاسخ بدید

----------


## tux-world

تکنولوژی روز دنیا برای طراحی سایت به سرعت در حال پیشرفته تا شما بیایید ببینید چی شده میبینید همونی رو هم که می تونستید از دست دادید. یه خورده مثل اروپایی ها فکر کنید و با علم روز جلو برید به نفعتون هستش ولی خوب مشکلاتی هم هست ولی درگیر شدن لذتش بیشتر از قورت دادنه :)

----------


## drstrike

فرمایش شما صحیح اما ببینید فرضا من یه صفحه با html5 و CSS3 طراحی می کنم. طبیعتا چیزی که اهمیت داره رضایت مشتری/بازدیدکننده هستش. حالا اگه  صفحه ایی که من طراحی کردم با خروجی که مشتری/بازدیدکننده همخوانی نداشته باشه...!
بهتر نیست صبر کنیم تا همه چی به صورت استاندارد release بشه بعد ازشون استفاده کنیم؟

----------


## s2/mri

این درسته که باید به روز باشیم ، یعنی کار با HTML5 و CSS3 بلد باشیم ولی دوستمون (drstrike) کاملا درست میگن
چون وقتی هنوز افرادی پیدا میشن که از IE6 استفاده میکنن،آیا HTML5 مفید خواهد بود؟
ولی خوب ما نباید خودمونو محدود کنیم
یعنی پیش به سوی HTML5 & CSS3

----------


## raika17metal

دوستان مشکل اصلی اینه که ما چند سالی (فقط از نظر ورژن نرم افزارهایی که داریم استفاده می کنیم) از تکنولوژی روز عقب هستیم. بنابراین دو راه وجود داره. یکی اینکه با نیاز بازار ، سایت طراحی کنیم. دومین این که سعی کنیم با تلاش دسته جمعی بازار رو به سمت تکنولوژی روز سوق بدیم. قبول دارم که خیلی سخته اما 100% بهتر از اینه که هنوز وبسایت ها رو طبق IE6 طراحی کنیم.
یادگیری HTML5 و CSS3 حداقل این مزیت رو داره که به مشتری توضیح بدیم که تکنولوژی جدیدتری هم برای ارائه وجود داره که اتفاقا تکنولوژی روز هم هستش و به نظر من مشتری برای بالا بردن کلاس کاری خودش هم که شده ترجیح میده از تکنولوژی روز استفاده کنه. 
اگر این امر فراگیر بشه طبیعتا بازدید کنندگان هم به خودش این زحمت رو میدن یه مروگر گران قیمت!!!!!! روی سیستم خودشون نصب کنن.
به نظر من یکی از دلایلی که ما همیشه عقب هستیم اینه که بازدید کننده میبینه سایت طبق سیستمش طراحی شده پس نیازی به آپدیت نمی بینه. طراح سایت هم که به فکر کاربر تنبل هستش.
این ملاحضه دو طرفه هستش که باعث عدم پیشرفت میشه. بعضی اوقات باید سعی کنیم کاربر رو تقریبا مجبور کنیم تا به سمت تکنولوژی روز حرکت کنه. مثل بعضی رستوران های خارجی که این قانونشون هستش :
No Suit = No Service

----------


## raika17metal

درس ششم :

*فونت ها در CSS3*
پیش از پیدایش CSS3، طراحان سایت مجبور بودند تنها از فونت هایی استفاده کنند که از قبل در کامپیوتر کابران نصب شده بود و اغلب اوقات این فونت ها بسیار محدود بودند، علی الخصوص در زمینه فونت های فارسی. به جرات می توان گفت زیباترین فونت فارسی که طراحان سایت می توانند استفاده کنند، فونت Tahoma می باشد، همین و بس!!
اما با پیدایش CSS3، طراحان سایت به راحتی می‌توانند از هرگونه فونتی استفاده کنند.
زمانی که قصد استفاده از فونت بخصوصی را دارید و این احتمال وجود دارد که فونت مورد نظر در کامپیوتر کاربر وجود نداشته باشد، کافی است فونت مورد نظرتان را در سایت قرار دهید. بدین صورت این فونت، هر زمانی که نیاز باشد، در کامپیوتر کاربر دانلود می شود.
زمانی که قصد دارید فونت دلخواهتان را در سایت استفاده کنید باید به وسیله دستور @font-face آن را تعریف کنید.
در @font-face شما باید نام فونت و مسیر آن را تعیین نمایید.
نحوه استفاده از فونت ها 

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot') format("opentype"); /* IE  مخصوص*/
}




به جای عبارت myFirstFont، نام فونت مورد نظر باید نوشته شود و در قسمت url باید آدرس دقیق فونت را وارد نمایید.
نکته : مرورگر Internet Explorer تنها از فونت هایی با پسوند .eot پشتیبانی می کند.
سایر مرورگرها بدون هیچگونه مشکلی فونت ها پشتیبانی می کنند.
نحوه استفاده از فونت تعریف شده در تگ های HTML

div
{
font-family:myFirstFont;
}

----------


## azaditafakor

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

یک پروژه دیگر هم هست که در مرورگر های قدیمی با استفاده از جاوا اسکریپت ، Css3 رو اعمال و شبیه سازی میکنه . از اینجا میتونید اطلاعات کسب کنید .
http://css3pie.com/about/

----------


## colors

درود

دوستان چرا کد زیر فقط فونت رو تو IE و Mozilla تغییر میده ولی تو کروم یا اپرا کار نمیکنه ؟

@font-face {
    font-family: "bmitra";
    src: url("bmitra.eot?iefix") format("eot"), url("bmitra.ttf") format("truetype");
}

----------


## alismith

سلام




> bmitra.eot?iefix


آدرس رو کامل بدید
شاید مشکل حل شد

موفق باشید

----------


## colors

رو سیستم به صورت آفلاین باز میکنم؟؟

----------


## alismith

سلام
اینگونه عمل کنید ببینید مشکل حل میشه : 


@font-face {  
  font-family: " your FontName ";  
  src: url( /location/FontFileName.eot ); /* IE */  
  src: local(" real FontName "), url( /location/FontFileName.ttf ) format("truetype"); /* non-IE */  
}  
 
/* THEN use like you would any other font */  
.yourFontName { font-family:" your FontName ", verdana, helvetica, sans-serif;  
}  



موفق باشید

----------


## colors

درود

نه متاسفانه بازم جواب نداد

----------


## alismith

سلام

شما در هر حال فرمت رو بذار opentype باید مشکل حل بشه من خودم این کار رو قبلا کرده بودم و مشکل نداشتم

حالا امتحان بکنید!


موفق باشید

----------


## colors

درود

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

----------


## alismith

سلام
این یه مثال هستش

فایل ضمیمه :

font.rar




موفق باشید

----------


## colors

درود

حق با شماست درسته ولی فکر کنم رو سیستم من مشکل داره!! ( طبق عکسی که گذاشتین چون فقط تو موزیلا کار کرد ). شاید ویندوزم مشکل داره؟!

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

با تشکر...

----------

