آموزش CSS3 [بایگانی] - برنامه نویس

raika17metal

جمعه 08 بهمن 1389, 19:04 عصر

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

raika17metal

جمعه 08 بهمن 1389, 19:12 عصر

درس اول :
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

شنبه 09 بهمن 1389, 19:30 عصر

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

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

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

raika17metal

سه شنبه 12 بهمن 1389, 19:12 عصر

درس سوم :
کادرهای گوشه گرد در CSS3
افزودن کادرهای گوشه گرد در CSS2 کار خیلی ساده ای نبود و عموما طراحان با استفاده از نیرنگ هایی این کادرها را پیاده سازی می کردند. یکی از این ترفندها استفاده از تصاویر مختلفی برای گوشه های کادر بود.
اما در CSS3 ایجاد کادرهای گوشه گرد به سادگی انجام می پذیرد.
در CSS3 از خاصیت border-radius برای ایجاد کادرهای گوشه گرد استفاده می شود.
برای مشاهده کادر با گوشه گرد روی لینک زیر کلیک کنید
http://dehkadeh-it.persiangig.com/web_pages/rounded_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

جمعه 22 بهمن 1389, 23:09 عصر

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

مرورگرهایی که از این خواص پشتیبانی می کنند :
http://dehkadeh-it.persiangig.com/Image/Untitled.jpg
این دو خواص در 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 تعیین شود. به تصویر زیر دقت کنید :
http://www.w3schools.com/css3/background-origin.gif

نحوه استفاده از خاصیت 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

دوشنبه 02 اسفند 1389, 21:34 عصر

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

همانطور که مشاهده می‌کنید تنها مروگر Internet Explorer از خاصیت text-shadow پشتیبانی نمی کند.
خاصیت text-shadow :
این خاصیت باعث سایه دار شدن متن می شود.
http://dehkadeh-it.persiangig.com/Image/text-effect.png
نحوه استفاده از این خاصیت بدین شکل است :

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

p {word-wrap:break-word;}

drstrike

سه شنبه 03 اسفند 1389, 01:30 صبح

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

tux-world

سه شنبه 03 اسفند 1389, 02:16 صبح

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

drstrike

سه شنبه 03 اسفند 1389, 09:38 صبح

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

s2/mri

سه شنبه 03 اسفند 1389, 14:19 عصر

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

raika17metal

سه شنبه 03 اسفند 1389, 21:40 عصر

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

raika17metal

یک شنبه 07 فروردین 1390, 18:54 عصر

درس ششم :

فونت ها در 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

جمعه 12 فروردین 1390, 02:10 صبح

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

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

colors

یک شنبه 22 خرداد 1390, 17:56 عصر

درود

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

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

alismith

یک شنبه 22 خرداد 1390, 18:29 عصر

سلام

bmitra.eot?iefix

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

موفق باشید

colors

یک شنبه 22 خرداد 1390, 23:31 عصر

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

alismith

دوشنبه 23 خرداد 1390, 00:47 صبح

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

@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

دوشنبه 23 خرداد 1390, 10:13 صبح

درود

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

alismith

دوشنبه 23 خرداد 1390, 10:21 صبح

سلام

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

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

موفق باشید

colors

دوشنبه 23 خرداد 1390, 13:59 عصر

درود

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

alismith

دوشنبه 23 خرداد 1390, 22:11 عصر

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

فایل ضمیمه :

71126

موفق باشید

colors

سه شنبه 24 خرداد 1390, 00:45 صبح

درود

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

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

با تشکر...