<![CDATA[پارس جوم :: انجمن های تخصصی جوملا - آموزش سی اس اس]]> https://forums.parsjoom.ir/ Wed, 07 Oct 2026 11:56:06 +0000 MyBB <![CDATA[فیلم آموزشی بوت استرپ 4]]> https://forums.parsjoom.ir/thread-21576.html Thu, 12 Sep 2019 05:32:06 +0000 https://forums.parsjoom.ir/thread-21576.html
چند روز پیش یه فیلم آموزشی بوت استرپ 4 رو دانلود کردم برای مبتدی ها . باید بگم که فیلم خیلی خوبی هست و آموزش های جامعی رو شامل میشه به همراه ساخت چند پروژه

این فیلم کامل رو براتون توی یاندکس آپلود کردم.

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


حجم فایل حدود 2 گیگابایت]]>
چند روز پیش یه فیلم آموزشی بوت استرپ 4 رو دانلود کردم برای مبتدی ها . باید بگم که فیلم خیلی خوبی هست و آموزش های جامعی رو شامل میشه به همراه ساخت چند پروژه

این فیلم کامل رو براتون توی یاندکس آپلود کردم.

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


حجم فایل حدود 2 گیگابایت]]> <![CDATA[اصول نوشتن کدهای CSS]]> https://forums.parsjoom.ir/thread-19791.html Sat, 18 Jun 2016 09:02:59 +0000 https://forums.parsjoom.ir/thread-19791.html
در این بخش از آموزش css ، اصول نوشتن کدهای css را شرح میدهیم.

گذاشتن فاصله بین مقدار و واحد اشتباه است

مثال صحیح :

margin-left:20px;

مثال غلط:

margin-left:20 px;

قوانین نام گذاری فایل های css

از کاراکترهای خاص استفاده نکنید.کاراکترهای مجاز عبارتند از :حروف a-z ، اعداد 0-9 ، خط زیر (_) ، خط فاصله (-)
از کاراکتر فضای خالی استفاده نکنید ( ) مثلا : style Master.css ، این نامگذاری میتواند در وب سرور شما مشکل ایجاد کند.
نام فایل بایستی با یک حرف شروع شود.
برای نام گذاری فایل از حروف کوچک استفاده کنید.
نام فایل را تا آنجا که ممکن است کوتاه تعریف نمایید.
فراموش نکنید که حتما فایل را با پسوند css ذخیره کنید.

با رعایت تمامی این نکات شما طراحی سایت بهینه تری را خواهید داشت .]]>
در این بخش از آموزش css ، اصول نوشتن کدهای css را شرح میدهیم.

گذاشتن فاصله بین مقدار و واحد اشتباه است

مثال صحیح :

margin-left:20px;

مثال غلط:

margin-left:20 px;

قوانین نام گذاری فایل های css

از کاراکترهای خاص استفاده نکنید.کاراکترهای مجاز عبارتند از :حروف a-z ، اعداد 0-9 ، خط زیر (_) ، خط فاصله (-)
از کاراکتر فضای خالی استفاده نکنید ( ) مثلا : style Master.css ، این نامگذاری میتواند در وب سرور شما مشکل ایجاد کند.
نام فایل بایستی با یک حرف شروع شود.
برای نام گذاری فایل از حروف کوچک استفاده کنید.
نام فایل را تا آنجا که ممکن است کوتاه تعریف نمایید.
فراموش نکنید که حتما فایل را با پسوند css ذخیره کنید.

با رعایت تمامی این نکات شما طراحی سایت بهینه تری را خواهید داشت .]]> <![CDATA[بازگشت دوباره]]> https://forums.parsjoom.ir/thread-18750.html Tue, 27 Oct 2015 13:35:48 +0000 https://forums.parsjoom.ir/thread-18750.html
با سلام خدمت تمامی کاربران پارس جوم

من بعد از 10 ماه دوباره برگشتم و میخوام آموزش های کامل PHP و جدیدترین ترفندهای برنامه نویسی جوملا را بهتون بگم
joomla 3.0]]>
با سلام خدمت تمامی کاربران پارس جوم

من بعد از 10 ماه دوباره برگشتم و میخوام آموزش های کامل PHP و جدیدترین ترفندهای برنامه نویسی جوملا را بهتون بگم
joomla 3.0]]> <![CDATA[تنظیم پس زمینه Background در CSS]]> https://forums.parsjoom.ir/thread-18358.html Sat, 08 Aug 2015 12:01:49 +0000 https://forums.parsjoom.ir/thread-18358.html
در این بخش از آموزش css به توضیح ویژگی Background میپردازیم. ویژگی Background برای تعریف افکت های پس زمینه برای یک عنصر به کار میرود.این ویژگی در طراحی وب سایت به شکیل تر شدن سایت شما کمک میکند.

انواع مختلفی از این ویژگی وجود دارد که به شرح هر یک از آنها میپردازیم
background-color
background-image
background-repeat
background-attachment
background-position

background-color : این خاصیت رنگ پس زمینه یک عنصر را مشخص میکند، برای مثال برای تنظیم رنگ پس زمینه بدنه سایت از کد زیر استفاده میکنیم :

body {background-color:#b0c4de;}

background-image : با استفاده از این ویژگی تصویر پس زمینه یک عنصر را مشخص میکنیم ،برای مثال برای تنظیم تصویر پس زمینه بدنه سایت از کد زیر استفاده میکنیم :
body {background-image:url('paper.gif');}[/align
]



background-repeat : با استفاده از این ویژگی میتوانیم مشخص کنیم که تصویر چگونه تکرار شود.اگر میخواهیم تصویر ما به صورت افقی تکرار شود زمانی که خود تصویر نیز افقی است (برای جلوگیری از گذاشتن عکس سایز بزرگ که باعش کند شدن بالا آمدن سایت میشود و به هیچ عنوان در طراحی سایت پیشنهاد نمیشود ) :
[align=left]
body

{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
زمانی که بخواهیم تصویر فقط یک بار و بدون تکرار نمایش داده شود از دستور زیر استفاده میکنیم :

b
ody
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

background-attachment : برای اینکه بتوانیم تصویر پس زمینه را ثابت انتخاب کنیم از این ویژگی استفاده میکنیم. مقدار پیش فرض آن scroll میباشد.

b
ody
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
background-position : این خاصیت موقعیت یک عنصر را مشخص میکند، برای مثال برای تنظیم موقعیت تصویر به گوشه سمت راست - بالا از کد زیر استفاده میکنیم :
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:top right;

}

این سه خط را میتوان به صورت خلاصه تر نوشت :

body {background:#ffffff url('img_tree.png') no-repeat right top;}
]]>
در این بخش از آموزش css به توضیح ویژگی Background میپردازیم. ویژگی Background برای تعریف افکت های پس زمینه برای یک عنصر به کار میرود.این ویژگی در طراحی وب سایت به شکیل تر شدن سایت شما کمک میکند.

انواع مختلفی از این ویژگی وجود دارد که به شرح هر یک از آنها میپردازیم
background-color
background-image
background-repeat
background-attachment
background-position

background-color : این خاصیت رنگ پس زمینه یک عنصر را مشخص میکند، برای مثال برای تنظیم رنگ پس زمینه بدنه سایت از کد زیر استفاده میکنیم :

body {background-color:#b0c4de;}

background-image : با استفاده از این ویژگی تصویر پس زمینه یک عنصر را مشخص میکنیم ،برای مثال برای تنظیم تصویر پس زمینه بدنه سایت از کد زیر استفاده میکنیم :
body {background-image:url('paper.gif');}[/align
]



background-repeat : با استفاده از این ویژگی میتوانیم مشخص کنیم که تصویر چگونه تکرار شود.اگر میخواهیم تصویر ما به صورت افقی تکرار شود زمانی که خود تصویر نیز افقی است (برای جلوگیری از گذاشتن عکس سایز بزرگ که باعش کند شدن بالا آمدن سایت میشود و به هیچ عنوان در طراحی سایت پیشنهاد نمیشود ) :
[align=left]
body

{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
زمانی که بخواهیم تصویر فقط یک بار و بدون تکرار نمایش داده شود از دستور زیر استفاده میکنیم :

b
ody
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

background-attachment : برای اینکه بتوانیم تصویر پس زمینه را ثابت انتخاب کنیم از این ویژگی استفاده میکنیم. مقدار پیش فرض آن scroll میباشد.

b
ody
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
background-position : این خاصیت موقعیت یک عنصر را مشخص میکند، برای مثال برای تنظیم موقعیت تصویر به گوشه سمت راست - بالا از کد زیر استفاده میکنیم :
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:top right;

}

این سه خط را میتوان به صورت خلاصه تر نوشت :

body {background:#ffffff url('img_tree.png') no-repeat right top;}
]]> <![CDATA[تنظیم ابعاد در CSS]]> https://forums.parsjoom.ir/thread-18357.html Sat, 08 Aug 2015 11:41:00 +0000 https://forums.parsjoom.ir/thread-18357.html
برای تنظیم ابعاد عناصر در CSS از چند ویژگی میتوان استفاده کرد که مهمترین و اصلی ترین آنها Width و Height میباشد.

در ذیل به توضیح این ویژگی ها با توجه به ورژن تعریف شده در CSS میپردازیم.

height : این ویژگی در تمام مرورگر ها پشتیبانی میشود.

p.ex

{
height:100px;

}

با دو ویژگی max-height و max-width شما میتوانید حداکثر مقدار را برای یک عنصر تنظیم کنید.

max-height : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

p

{
max-height:50px;
}

max-width : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

p

{
max-width:100px;
}

با دو ویژگی min-height و min-width شما میتوانید حداقل مقدار را برای یک عنصر تنظیم کنید.

min-height : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر
p

{
min-height:100px;
}

min-width : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

p

{
min-width:1000px;
}
width : این ویژگی در تمام مرورگر ها پشتیبانی میشود.
p.ex

{
width:100px;
}

عرض استاندارد برای طراحی سایت :

برای تنظیم عرض استاندارد برای طراحی سایت با توجه به رزولیشن استاندارد و یا رزولیشنی که اکثر مخاطبان از آن اسفاده میکنند (768*1024) ، بهتر است عرض 980px را تنظیم کنید. این عرض طبق استاندارد های صفحات وب انتخاب شده است.]]>
برای تنظیم ابعاد عناصر در CSS از چند ویژگی میتوان استفاده کرد که مهمترین و اصلی ترین آنها Width و Height میباشد.

در ذیل به توضیح این ویژگی ها با توجه به ورژن تعریف شده در CSS میپردازیم.

height : این ویژگی در تمام مرورگر ها پشتیبانی میشود.

p.ex

{
height:100px;

}

با دو ویژگی max-height و max-width شما میتوانید حداکثر مقدار را برای یک عنصر تنظیم کنید.

max-height : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

p

{
max-height:50px;
}

max-width : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

p

{
max-width:100px;
}

با دو ویژگی min-height و min-width شما میتوانید حداقل مقدار را برای یک عنصر تنظیم کنید.

min-height : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر
p

{
min-height:100px;
}

min-width : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

p

{
min-width:1000px;
}
width : این ویژگی در تمام مرورگر ها پشتیبانی میشود.
p.ex

{
width:100px;
}

عرض استاندارد برای طراحی سایت :

برای تنظیم عرض استاندارد برای طراحی سایت با توجه به رزولیشن استاندارد و یا رزولیشنی که اکثر مخاطبان از آن اسفاده میکنند (768*1024) ، بهتر است عرض 980px را تنظیم کنید. این عرض طبق استاندارد های صفحات وب انتخاب شده است.]]> <![CDATA[Css چیست ؟ (سی اس اس چیست)]]> https://forums.parsjoom.ir/thread-18134.html Tue, 23 Jun 2015 11:10:19 +0000 https://forums.parsjoom.ir/thread-18134.html
کاربرد اصلی css چیست ؟ بیشترین استفاده‌ای که از این زبان در حال حاضر می‌شود مشخص کردن سبک صفحهٔ وب اچ‌تی‌ام‌ال و اکس‌اچ‌تی‌ام‌ال است ولی آن را می‌توان بر هر نوع مستند اکس‌ام‌ال از جمله اس‌وی‌جی و اکس‌یوال اعمال کرد. نگهداری و تغییر مشخصات سی‌اس‌اس به عهدهٔ کنسرسیوم وب جهانگستر است.

یکی از مهمترین نکته ها برای طراحی سایت ، استفاده بهینه از css میباشد در این بخش از آموزش css به شرح ویژگی های اساسی و مهم در طراحی وب سایت میپردازیم و روشهای اضافه کردن CSS به صفحه را مورد بررسی قرار میدهیم.

سه روش برای اضافه کردن CSS به صفحه وجود دارد :

CSS خارجی
CSS داخلی
سبک درون خطی

برای آسان کردن کار موتور های جستجو سعی کنید از انیمیشن های فلش و یا تگ های span بوسیله css ، کمتر استفاده کنید. با استفاده از css از دوباره نویسی کدهای HTML که باعث کند شدن لود صفحه میشود جلوگیری میکنیم.]]>
کاربرد اصلی css چیست ؟ بیشترین استفاده‌ای که از این زبان در حال حاضر می‌شود مشخص کردن سبک صفحهٔ وب اچ‌تی‌ام‌ال و اکس‌اچ‌تی‌ام‌ال است ولی آن را می‌توان بر هر نوع مستند اکس‌ام‌ال از جمله اس‌وی‌جی و اکس‌یوال اعمال کرد. نگهداری و تغییر مشخصات سی‌اس‌اس به عهدهٔ کنسرسیوم وب جهانگستر است.

یکی از مهمترین نکته ها برای طراحی سایت ، استفاده بهینه از css میباشد در این بخش از آموزش css به شرح ویژگی های اساسی و مهم در طراحی وب سایت میپردازیم و روشهای اضافه کردن CSS به صفحه را مورد بررسی قرار میدهیم.

سه روش برای اضافه کردن CSS به صفحه وجود دارد :

CSS خارجی
CSS داخلی
سبک درون خطی

برای آسان کردن کار موتور های جستجو سعی کنید از انیمیشن های فلش و یا تگ های span بوسیله css ، کمتر استفاده کنید. با استفاده از css از دوباره نویسی کدهای HTML که باعث کند شدن لود صفحه میشود جلوگیری میکنیم.]]> <![CDATA[شیوه صحیح پیوست فونت به صفحه وب در CSS3 به همراه 40 فونت فارسی اصلاح شده]]> https://forums.parsjoom.ir/thread-17279.html Mon, 09 Feb 2015 05:50:21 +0000 https://forums.parsjoom.ir/thread-17279.html
خرید پستی کتاب HTML5 و CSS3


مشترک فید wedesign شوید

میهن وب هاست
خبرنامه WeDesign

اخبار مربوط به سایت، دوره های آموزشی و کتاب های منتشر شده توسط تیم را از طریق این خبرنامه به اطلاع شما می رسانیم
Email: *
Subscribe
Unsubscribe
Previous issues
Syndicate content
Navigation

RSS feeds

Home
شیوه صحیح پیوست فونت به صفحه وب در CSS3 به همراه 40 فونت فارسی اصلاح شده برای فایرفاکس 6
Fri, 09/09/2011 - 21:19 — Amir-abbas Abdolali

یکی از مشکلاتی که در وب فارسی با آن مواجه هستیم، محدودیت فونت است. متاسفانه در وب فارسی ما محدود به سه فونت هستیم که بر روی تمامی سیستم ها نصب شده است. فونت arial, Tahomaو mono-type تنها فونتهایی هستند که می‌توانیم از آنها استفاده کنیم در حالی که برای زبان انگلیسی حداقل نزدیک به 10 فونت در دسترس است.

از مدتها قبل طراحان از شیوه های مختلفی برای استفاده از فونت‌ها در وب استفاده کرده اند. یکی از شیوه های رایج، جایگزینی متن با تصویر بود. طراح متن مورد نظر را با فونت مورد نظرش در نرم افزار گرافیکی می‌نوشت و آن را به طرح خود منتقل می‌کرد. این شیوه محدودیت ‌هایی را به همراه داشت که یکی از آنها بالا رفتن حجم صفحات وب بود. بعد از مدتی طراحان به فکر استفاده از شیوه های دیگری افتادند که یکی از این شیوه‌ها استفاده از تکنیک sIFR بود. در این متد، فونت خود را داخل یک فایل فلش قرار می‌دهید و یک فایل جاوااسکریپت را نیز به صفحه خود اضافه می‌کنید. این فایل جاوااسکریپت در هر جایی که قرار بود فونت مورد نظر نمایش یابد، متن آن بخش را مخفی می‌کرد و به جایش یک فایل فلش را قرار می‌داد که همان متن را با فونت مورد نظر شما نمایش می‌داد. این فایل فلش قابلیت خوبی داشت و با کوچک شدن عرض صفحه قابلیت scaleشدن را دارا بود و به هم ریخته نمایش داده نمیشد ولی این شیوه نیز محدودیت های خود را داشت.
نخست اینکه باعث کندی صفحه می‌شود و کاربر حتماً باید جاوااسکریپت و فلش را بر روی مرورگرش فعال می‌کرد تا بتواند فونتها را ببیند. مورد دوم اینکه پیاده سازی این تکنیک بر روی سایت بسیار زمان بر و پیچیده بود. در نهایت مشکلی که برای استفاده از این تکنیک وجود داشت این بود که با زبان فارسی مشکل داشت. متن فارسی در این تکنیک یا نمایش داده نمیشد و یا به شکل بی هم ریخته نمایش میافت. البته دوستان با کار کردن بر روی فایل های sIFR توانسته بودند که مشکل نمایش حروف فارسی رو حل کنند ولی همچنان کپی کردن متنی که توسط sIFR ایجاد شده بود، امکان پذیر نبود.

پس از این برخی از توسعه دهندگان بر روی تکنیکی دیگر کار کردند که فونت ها را با استفاده از جاوااسکریپت و قابلیتهای مانند SVG در مرورگر، در صفحه، رسم کنند. بر این اساس، cufon شکل گرفت. در این سرویس شما فونت را به سایت مربوطه آپلود می‌کنید و در عوض یک فایل جاوااسکریپت دریافت می‌کنید که می‌توانید آن را در صفحه استفاده کنید و متن شما با فونت مورد نظرتان به نمایش در می‌آمد. کوفون هم مشکلات خودش را داشت. از طرفی باعث کند شدن صفحه می‌شد و دوم اینکه زبان فارسی را پشتیبانی نمی‌کرد (و همچنان پشتیبانی نمی‌کند). البته دوستان بر روی این پروژه کار کرده اند و در حال حاضر کوفون برای زبان فارسی نیز در دسترس است. در پی نوشت همین پست می توانید اطلاعات تکمیلی را بخوانید.

بعد از همه گیر شدن مرورگر فایرفاکس و پس از آن ارائه مرورگرهای اپرا، سافاری برای ویندوز و کروم، پشتیبانی از قابلیت های CSS3 گسترش پیدا کرد در نتیجه پشتیبانی از قابلیت @font-face افزایش یافت. با استفاده از این قابلیت می‌توان فونتی را به صفحه پیوست کرد و در صورتی که این فونت بر روی سیستم کاربر موجود نباشد، از روی server دریافت شده و برروی سیستم کاربر قرار می‌گیرد و شما می‌تواند از هر فونتی که دوست دارید بر روی وب استفاده کنید.

تنها مشکلی که وجود داشت، مرورگر اینترنت اکسپلورر بود که تا قبل از نسخه 9 از این قابلیت پشتیبانی نمی‌کرد. البته مایکروسافت، سالها قبل فرمت EOT را برای پیوست فونت به صفحه ایجاد کرده بود. مایکروسافت امیدوار بود که این استاندارد را ترویج دهد ولی هیچ مرورگری از این فرمت پشتیبانی نکرد.

در حال حاضر می‌توان فونت ها را با فرمت TTF به صفحه پیوست کرد که این فرمت توسط تمامی مرورگرهای جدید، قابل نمایش است. با استفاده از سرویس ‌های آنلاین نیز می‌توان همین فرمت TTF را به فرمت EOT تبدیل کرد تا مرورگرهای اینترنت اکسپلورر نیز بتوانند فونت های شما را به شکل درستی به نمایش بگذارند. علاوه بر این فرمت، کنسرسیوم جهان وب، فرمت WOFF را هم پیشنهاد کرد که حجم کمتری را ارائه می‌دهد و هم می‌توان حق نشر فونت را هم در آن حفظ کرد. خوشبختانه مرورگرهای فایرفاکس و اپرا و آی ای 9 از این فرمت پشتیبانی کره اند و به نظر می‌رسد که در آینده نزدیک این فرمت در تمامی مرورگرها پشتیبانی شود. با استفاده از این سه فرمت می‌توانید هر فونتی را بر روی وب استفاده کنید و مطمئن خواهید بود که فونتتان در مرورگرهای مختلف جدید و قدیمی به درستی نمایش داده می‌شود. تنها سیستم عامل iOS نسخه قدیمی است که تنها از فرمت فونت SVG پشتیبانی می‌کند ولی این مشکل iOS نیز در نسخه 4.2 حل شده است. اکنون مرورگر این سیستم عامل می‌تواند فونت‌های TTF را نیز بخواند.

حال باید ببینیم که دستور @font-face را به چه شکل باید استفاده کرد. برای استفاده از این دستور تنها کافیست این عبارت را در بالای فایل CSSخود قرار دهید:

کد:
@font-face {
    font-family: 'yekan’;
    src: url('fonts/yekan.ttf') format('truetype');
}

در اینجا در خط اول، font-family را تعیین کرده ایم، هر نامی را که دوست داشته باشید، می‌توانید برای فونت انتخاب کنید. در خط دوم در دستور src باید مسیر فونت بر روی serverرا مشخص کنید و در آخر در دستور format، نوع فونت را مشخص می‌کنید. این دستور را در اول فایل CSSقرار می‌دهید و در ادامه در هر جایی که از فونتی با اسم yekan استفاده کنید، فونت مورد نظر شما از سرور دریافت شده و بر روی سیستم کاربر نمایش می‌یاید. اگر این بخش را در اول فایل CSS قرار ندهید و از فونت yekan در دستوری قبل از دستور font-face استفاده کنید، از آنجائیکه هنوز دستور font-face در دسترس مرورگر نبوده است، فونت مورد نظر شما نمایش داده نمی‌شود پس سعی کنید همیشه این بخش را در اول فایل CSS خود قرار دهید.

حال با استفاده از سرویس های آنلاینی چون Kirsle (تنها این سایت توانست فونت‌های فارسی را به درستی تبدیل کند) فونت را به فرمت EOT تبدیل می کنیم و دستورمان را نیز ویرایش می‌کنیم:

کد:
@font-face {
    font-family: 'yekan’;
    src:url('fonts/yekan.eot') format('eot'),    
          url('fonts/yekan.ttf') format('truetype');
}

حال باید اینترنت اکسپلورر نیز بتواند فایل فونت مربوط به خود را دریافت کند. فرمت EOT را در خط اول قرار می‌دهیم و فرمت TTF را در خط بعدی. مرورگرهای جدید خط اول را نادیده می‌گیرند و به سراغ خط دوم می‌روند.
البته اینترنت اکسپلورر باز هم رفتاری عجیب نشان می‌دهد. اگر دستورات خود را به این شکل بنویسید، اینترنت اکسپلورر نخست فایل EOTرا دریافت می‌کند و به سراغ خط بعدی می‌رود و فایل TTF را هم دریافت می‌کند ولی ملاک را فایل دوم قرار می‌دهد و از آنجائیکه نمی‌تواند این فرمت را نمایش دهد، متن شما را با فونت پیش‌فرض نمایش می‌دهد و حتی از فرمت EOT که دریافت کرده بود نیز استفاده نمی‌کند.

حال ما از یک هک استفاده می‌کنیم تا IE را به اشتباه بیاندازیم تا تنها خط اول را ببیند. کد خود را ویرایش می‌کنیم و دو علامت ?#را بعد از آدرس فرمت EOTاضافه می‌کنیم:

کد:
@font-face {
    font-family: 'yekan’;
    src:url('fonts/yekan.eot?#’) format(‘eot’),    
          url(‘fonts/yekan.ttf’) format(‘truetype’);
}

با این ترفند، مرورگر اینترنت اکسپلورر تنها خط اول را می بیند و تنها فایل EOT را دریافت می ‌کند در حالی که مرورگرهای دیگر خط اول را نادیده گرفته و خط دوم رو می‌خوانند و فونت TTF را دریافت می‌کنند. حال برای مرورگرهای جدیدتر از فرمت WOFF هم استفاده می‌کنیم تا کاربرانی که از این مرورگرها استفاده می‌کنند، فایل کم حجم تری را دریافت کنند. در این حالت، صفحه با سرعت بیشتری برای این کاربران باز می‌شود. البته هک‌های دیگری همچون هک smiley که توسط پاول آیریش ایجاد شده. البته همه جا پیشنهاد شده است که از هک اول که ما توضیحش دادیم، استفاده شود.

کد:
@font-face {
    font-family: 'yekan’;
    src:url('fonts/yekan.eot?#’) format(‘eot’),    
          url('fonts/yekan.woff') format('woff'),
          url(‘fonts/yekan.ttf’) format(‘truetype’);
}

حال تمامی مرورگرهای قدیمی و جدید می‌توانند فونت ها را دریافت کرده و سایت شما را با فونت مورد نظرتان نمایش دهند.

با دریافت این فایل به 40 فونت فارسی اصلاح شده با سه فرمت TTF, WOFFو EOT دسترسی خواهید داشت که می‌توانید آنها را در هر صفحه ای که دوست دارید، به کار ببرید. برای سهولت کار یک فایل به نام fonts-demo.html داخل فایل زیپ است. با باز کردن این فایل می‌توانید نمایی از تمامی فونت ها ببینید و نام هر فونت را نیز در کنارش مشاهده کنید. با دیدن source صفحه نیز می‌توانید دستور @font-face را هم مشاهده کنید و در صورت نیاز آن را کپی کرده و در فایل CSSخود قرار دهید. همچنین یک پوشه به نام fonts نیز وجود دارد که هر 40 فونت با سه فرمت مختلف درون آن جای گرفته. فونتهایی را که می‌خواهید به صفحه پیوست کنید را از داخل آن انتخاب کرده (هر سه فرمت را انتخاب کنید) و بر روی سرور خود قرار دهید.

توجه داشته باشید که نمی‌توانید چند فونت را به طور همزمان با یک دستور @font-face به صفحه پیوست کنید و برای پیوست چند فونت مختلف باید برای هر فونت از یک دستور @font-face استفاده کنید.

البته توصیه شده بود که برای استفاده از فونت‌ها در وب باید حتما MIME Type فونت را هم مشخص کنید و به server بگوئیم که فرمت فایل فونت چیست. منتها به خاطر عدم تعیین یک استاندارد جامع، به نظر می‌رسد که تعیین نکردن MIME Type مشکلی ایجاد نکند. به عنوان مثال در مستندات سایت موزیلا آمده است که به خاطر عدم تعیین MIME Type برای فرمت‌های مختلف فونت، این مرورگر دیگر به فرمت‌هایی که بر روی سرور تعیین شده توجهی نمی‌کند.

البته بعد از ارائه فایرفاکس 6 به خاطر مشکل فونت‌های غیر استاندارد فارسی، حروف جدا از هم نمایش داده میشد که با اصلاح فونت ها از طریق سایت Online Font Convertor این مشکل هم برطرف شده است. دقت داشته باشید که فونت‌های فارسی همچنان غیراستاندارداند و احتیاج به ویرایش شدن توسط متخصصین طراحی فونت دارند منتها با همین تغییری که اکنون ایجاد شده است می‌توان این فونت را به کاربرد و در مرورگرهای مختلف نیز فونتها را به شکل درستی به نمایش می‌گذارند.


منبع : دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

webfont-package.zip
نوع فایل .zip
دفعات دانلود 6
اندازه 2.76 مگابایت

]]>
خرید پستی کتاب HTML5 و CSS3


مشترک فید wedesign شوید

میهن وب هاست
خبرنامه WeDesign

اخبار مربوط به سایت، دوره های آموزشی و کتاب های منتشر شده توسط تیم را از طریق این خبرنامه به اطلاع شما می رسانیم
Email: *
Subscribe
Unsubscribe
Previous issues
Syndicate content
Navigation

RSS feeds

Home
شیوه صحیح پیوست فونت به صفحه وب در CSS3 به همراه 40 فونت فارسی اصلاح شده برای فایرفاکس 6
Fri, 09/09/2011 - 21:19 — Amir-abbas Abdolali

یکی از مشکلاتی که در وب فارسی با آن مواجه هستیم، محدودیت فونت است. متاسفانه در وب فارسی ما محدود به سه فونت هستیم که بر روی تمامی سیستم ها نصب شده است. فونت arial, Tahomaو mono-type تنها فونتهایی هستند که می‌توانیم از آنها استفاده کنیم در حالی که برای زبان انگلیسی حداقل نزدیک به 10 فونت در دسترس است.

از مدتها قبل طراحان از شیوه های مختلفی برای استفاده از فونت‌ها در وب استفاده کرده اند. یکی از شیوه های رایج، جایگزینی متن با تصویر بود. طراح متن مورد نظر را با فونت مورد نظرش در نرم افزار گرافیکی می‌نوشت و آن را به طرح خود منتقل می‌کرد. این شیوه محدودیت ‌هایی را به همراه داشت که یکی از آنها بالا رفتن حجم صفحات وب بود. بعد از مدتی طراحان به فکر استفاده از شیوه های دیگری افتادند که یکی از این شیوه‌ها استفاده از تکنیک sIFR بود. در این متد، فونت خود را داخل یک فایل فلش قرار می‌دهید و یک فایل جاوااسکریپت را نیز به صفحه خود اضافه می‌کنید. این فایل جاوااسکریپت در هر جایی که قرار بود فونت مورد نظر نمایش یابد، متن آن بخش را مخفی می‌کرد و به جایش یک فایل فلش را قرار می‌داد که همان متن را با فونت مورد نظر شما نمایش می‌داد. این فایل فلش قابلیت خوبی داشت و با کوچک شدن عرض صفحه قابلیت scaleشدن را دارا بود و به هم ریخته نمایش داده نمیشد ولی این شیوه نیز محدودیت های خود را داشت.
نخست اینکه باعث کندی صفحه می‌شود و کاربر حتماً باید جاوااسکریپت و فلش را بر روی مرورگرش فعال می‌کرد تا بتواند فونتها را ببیند. مورد دوم اینکه پیاده سازی این تکنیک بر روی سایت بسیار زمان بر و پیچیده بود. در نهایت مشکلی که برای استفاده از این تکنیک وجود داشت این بود که با زبان فارسی مشکل داشت. متن فارسی در این تکنیک یا نمایش داده نمیشد و یا به شکل بی هم ریخته نمایش میافت. البته دوستان با کار کردن بر روی فایل های sIFR توانسته بودند که مشکل نمایش حروف فارسی رو حل کنند ولی همچنان کپی کردن متنی که توسط sIFR ایجاد شده بود، امکان پذیر نبود.

پس از این برخی از توسعه دهندگان بر روی تکنیکی دیگر کار کردند که فونت ها را با استفاده از جاوااسکریپت و قابلیتهای مانند SVG در مرورگر، در صفحه، رسم کنند. بر این اساس، cufon شکل گرفت. در این سرویس شما فونت را به سایت مربوطه آپلود می‌کنید و در عوض یک فایل جاوااسکریپت دریافت می‌کنید که می‌توانید آن را در صفحه استفاده کنید و متن شما با فونت مورد نظرتان به نمایش در می‌آمد. کوفون هم مشکلات خودش را داشت. از طرفی باعث کند شدن صفحه می‌شد و دوم اینکه زبان فارسی را پشتیبانی نمی‌کرد (و همچنان پشتیبانی نمی‌کند). البته دوستان بر روی این پروژه کار کرده اند و در حال حاضر کوفون برای زبان فارسی نیز در دسترس است. در پی نوشت همین پست می توانید اطلاعات تکمیلی را بخوانید.

بعد از همه گیر شدن مرورگر فایرفاکس و پس از آن ارائه مرورگرهای اپرا، سافاری برای ویندوز و کروم، پشتیبانی از قابلیت های CSS3 گسترش پیدا کرد در نتیجه پشتیبانی از قابلیت @font-face افزایش یافت. با استفاده از این قابلیت می‌توان فونتی را به صفحه پیوست کرد و در صورتی که این فونت بر روی سیستم کاربر موجود نباشد، از روی server دریافت شده و برروی سیستم کاربر قرار می‌گیرد و شما می‌تواند از هر فونتی که دوست دارید بر روی وب استفاده کنید.

تنها مشکلی که وجود داشت، مرورگر اینترنت اکسپلورر بود که تا قبل از نسخه 9 از این قابلیت پشتیبانی نمی‌کرد. البته مایکروسافت، سالها قبل فرمت EOT را برای پیوست فونت به صفحه ایجاد کرده بود. مایکروسافت امیدوار بود که این استاندارد را ترویج دهد ولی هیچ مرورگری از این فرمت پشتیبانی نکرد.

در حال حاضر می‌توان فونت ها را با فرمت TTF به صفحه پیوست کرد که این فرمت توسط تمامی مرورگرهای جدید، قابل نمایش است. با استفاده از سرویس ‌های آنلاین نیز می‌توان همین فرمت TTF را به فرمت EOT تبدیل کرد تا مرورگرهای اینترنت اکسپلورر نیز بتوانند فونت های شما را به شکل درستی به نمایش بگذارند. علاوه بر این فرمت، کنسرسیوم جهان وب، فرمت WOFF را هم پیشنهاد کرد که حجم کمتری را ارائه می‌دهد و هم می‌توان حق نشر فونت را هم در آن حفظ کرد. خوشبختانه مرورگرهای فایرفاکس و اپرا و آی ای 9 از این فرمت پشتیبانی کره اند و به نظر می‌رسد که در آینده نزدیک این فرمت در تمامی مرورگرها پشتیبانی شود. با استفاده از این سه فرمت می‌توانید هر فونتی را بر روی وب استفاده کنید و مطمئن خواهید بود که فونتتان در مرورگرهای مختلف جدید و قدیمی به درستی نمایش داده می‌شود. تنها سیستم عامل iOS نسخه قدیمی است که تنها از فرمت فونت SVG پشتیبانی می‌کند ولی این مشکل iOS نیز در نسخه 4.2 حل شده است. اکنون مرورگر این سیستم عامل می‌تواند فونت‌های TTF را نیز بخواند.

حال باید ببینیم که دستور @font-face را به چه شکل باید استفاده کرد. برای استفاده از این دستور تنها کافیست این عبارت را در بالای فایل CSSخود قرار دهید:

کد:
@font-face {
    font-family: 'yekan’;
    src: url('fonts/yekan.ttf') format('truetype');
}

در اینجا در خط اول، font-family را تعیین کرده ایم، هر نامی را که دوست داشته باشید، می‌توانید برای فونت انتخاب کنید. در خط دوم در دستور src باید مسیر فونت بر روی serverرا مشخص کنید و در آخر در دستور format، نوع فونت را مشخص می‌کنید. این دستور را در اول فایل CSSقرار می‌دهید و در ادامه در هر جایی که از فونتی با اسم yekan استفاده کنید، فونت مورد نظر شما از سرور دریافت شده و بر روی سیستم کاربر نمایش می‌یاید. اگر این بخش را در اول فایل CSS قرار ندهید و از فونت yekan در دستوری قبل از دستور font-face استفاده کنید، از آنجائیکه هنوز دستور font-face در دسترس مرورگر نبوده است، فونت مورد نظر شما نمایش داده نمی‌شود پس سعی کنید همیشه این بخش را در اول فایل CSS خود قرار دهید.

حال با استفاده از سرویس های آنلاینی چون Kirsle (تنها این سایت توانست فونت‌های فارسی را به درستی تبدیل کند) فونت را به فرمت EOT تبدیل می کنیم و دستورمان را نیز ویرایش می‌کنیم:

کد:
@font-face {
    font-family: 'yekan’;
    src:url('fonts/yekan.eot') format('eot'),    
          url('fonts/yekan.ttf') format('truetype');
}

حال باید اینترنت اکسپلورر نیز بتواند فایل فونت مربوط به خود را دریافت کند. فرمت EOT را در خط اول قرار می‌دهیم و فرمت TTF را در خط بعدی. مرورگرهای جدید خط اول را نادیده می‌گیرند و به سراغ خط دوم می‌روند.
البته اینترنت اکسپلورر باز هم رفتاری عجیب نشان می‌دهد. اگر دستورات خود را به این شکل بنویسید، اینترنت اکسپلورر نخست فایل EOTرا دریافت می‌کند و به سراغ خط بعدی می‌رود و فایل TTF را هم دریافت می‌کند ولی ملاک را فایل دوم قرار می‌دهد و از آنجائیکه نمی‌تواند این فرمت را نمایش دهد، متن شما را با فونت پیش‌فرض نمایش می‌دهد و حتی از فرمت EOT که دریافت کرده بود نیز استفاده نمی‌کند.

حال ما از یک هک استفاده می‌کنیم تا IE را به اشتباه بیاندازیم تا تنها خط اول را ببیند. کد خود را ویرایش می‌کنیم و دو علامت ?#را بعد از آدرس فرمت EOTاضافه می‌کنیم:

کد:
@font-face {
    font-family: 'yekan’;
    src:url('fonts/yekan.eot?#’) format(‘eot’),    
          url(‘fonts/yekan.ttf’) format(‘truetype’);
}

با این ترفند، مرورگر اینترنت اکسپلورر تنها خط اول را می بیند و تنها فایل EOT را دریافت می ‌کند در حالی که مرورگرهای دیگر خط اول را نادیده گرفته و خط دوم رو می‌خوانند و فونت TTF را دریافت می‌کنند. حال برای مرورگرهای جدیدتر از فرمت WOFF هم استفاده می‌کنیم تا کاربرانی که از این مرورگرها استفاده می‌کنند، فایل کم حجم تری را دریافت کنند. در این حالت، صفحه با سرعت بیشتری برای این کاربران باز می‌شود. البته هک‌های دیگری همچون هک smiley که توسط پاول آیریش ایجاد شده. البته همه جا پیشنهاد شده است که از هک اول که ما توضیحش دادیم، استفاده شود.

کد:
@font-face {
    font-family: 'yekan’;
    src:url('fonts/yekan.eot?#’) format(‘eot’),    
          url('fonts/yekan.woff') format('woff'),
          url(‘fonts/yekan.ttf’) format(‘truetype’);
}

حال تمامی مرورگرهای قدیمی و جدید می‌توانند فونت ها را دریافت کرده و سایت شما را با فونت مورد نظرتان نمایش دهند.

با دریافت این فایل به 40 فونت فارسی اصلاح شده با سه فرمت TTF, WOFFو EOT دسترسی خواهید داشت که می‌توانید آنها را در هر صفحه ای که دوست دارید، به کار ببرید. برای سهولت کار یک فایل به نام fonts-demo.html داخل فایل زیپ است. با باز کردن این فایل می‌توانید نمایی از تمامی فونت ها ببینید و نام هر فونت را نیز در کنارش مشاهده کنید. با دیدن source صفحه نیز می‌توانید دستور @font-face را هم مشاهده کنید و در صورت نیاز آن را کپی کرده و در فایل CSSخود قرار دهید. همچنین یک پوشه به نام fonts نیز وجود دارد که هر 40 فونت با سه فرمت مختلف درون آن جای گرفته. فونتهایی را که می‌خواهید به صفحه پیوست کنید را از داخل آن انتخاب کرده (هر سه فرمت را انتخاب کنید) و بر روی سرور خود قرار دهید.

توجه داشته باشید که نمی‌توانید چند فونت را به طور همزمان با یک دستور @font-face به صفحه پیوست کنید و برای پیوست چند فونت مختلف باید برای هر فونت از یک دستور @font-face استفاده کنید.

البته توصیه شده بود که برای استفاده از فونت‌ها در وب باید حتما MIME Type فونت را هم مشخص کنید و به server بگوئیم که فرمت فایل فونت چیست. منتها به خاطر عدم تعیین یک استاندارد جامع، به نظر می‌رسد که تعیین نکردن MIME Type مشکلی ایجاد نکند. به عنوان مثال در مستندات سایت موزیلا آمده است که به خاطر عدم تعیین MIME Type برای فرمت‌های مختلف فونت، این مرورگر دیگر به فرمت‌هایی که بر روی سرور تعیین شده توجهی نمی‌کند.

البته بعد از ارائه فایرفاکس 6 به خاطر مشکل فونت‌های غیر استاندارد فارسی، حروف جدا از هم نمایش داده میشد که با اصلاح فونت ها از طریق سایت Online Font Convertor این مشکل هم برطرف شده است. دقت داشته باشید که فونت‌های فارسی همچنان غیراستاندارداند و احتیاج به ویرایش شدن توسط متخصصین طراحی فونت دارند منتها با همین تغییری که اکنون ایجاد شده است می‌توان این فونت را به کاربرد و در مرورگرهای مختلف نیز فونتها را به شکل درستی به نمایش می‌گذارند.


منبع : دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

webfont-package.zip
نوع فایل .zip
دفعات دانلود 6
اندازه 2.76 مگابایت

]]> <![CDATA[استفاده از فونت به جای آیکن]]> https://forums.parsjoom.ir/thread-17019.html Thu, 01 Jan 2015 09:23:10 +0000 https://forums.parsjoom.ir/thread-17019.html تا بحال به این موضوع فکر کرده اید که چگونه حجم سایت را کاهش و سرعت بارگذاری آن را افزایش دهید؟
زمانیکه ما آیکن های مختلف را به صورت معمولی و یا sprite شده در سایت استفاده می کنیم سبب میشویم تا زمان بارگذاری صفحه بالا رود و همین طور ممکن است که به صورت نخواسته به سایت خودمان آسیب بزنیم .همچنین شاید ما قصد داشته باشیم که سایت خود را به صورت ریسپانسیو کد نویسی کنیم .و در این جا برای نمایش آیکن ها در تبلت ها و موبایل ها مجبوریم از آیکن های کوچکتر بهره بگیریم .راه حلی که کارشناسان طراحی صفحات وب اخیرا به آن دست پیداکرده اند استفاده از فونت به جای آیکن می باشد.
ما به راحتی میتوانیم با لود کردن یک فونت در فایل css خود نه تنها این مشکلات را حل نماییم بلکه با افزایش سرعت بارگزاری وب سایت کمک شایانی در بهبود رنکینگ وب سایت خود داشته باشیم.
نحوه استفاده از این روش:
ما میتوانیم از برخی سایتهایی که در این زمینه امکاتانی را ارئه می دهند بهره گیری نماییم:
برای مثال ما از وب سایت دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
استفاده می نماییم
1: ابتدا فونت awesome را دانلود کنید .
2-فونت ها را در پوشه ای به نام فونت قرار دهید .سپس یک پوشهcss ایجاد و فایل css خود را در آن به وجود آورید و از طریق کد زیر فوتا دانلود شده را در ابتدای فایل css تعریف نمایدد
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
3- در این مرحله هر کجا که نیاز پیدا کردید که از یکی از آیکن ها مورد نیاز خود را استفاده کنید کافیه در فایل css خود در ID # و یا CLASS . و یا هر تگ دیگری که می خواهید ایکن خود را به نمایش در آورید میتوانید با استفاده از دستور

font-family:که باید FontAwesome باشد
content به این صفحه مراجعه کنید و کد مورد نظر خود برای نشان دادن آیکن را انتخاب کنید
font-size اندازه آیکن را مشخص میکند
font-color رنگ آیکن را مشخص میکند
بطور مثال در کد زیر قلب با رنگ فیروزه ای را نشان میدهد


.unlike:before{

display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
content: "\f004";
font-size:8px;
color: rgb(0, 255, 255);

}
]]> تا بحال به این موضوع فکر کرده اید که چگونه حجم سایت را کاهش و سرعت بارگذاری آن را افزایش دهید؟
زمانیکه ما آیکن های مختلف را به صورت معمولی و یا sprite شده در سایت استفاده می کنیم سبب میشویم تا زمان بارگذاری صفحه بالا رود و همین طور ممکن است که به صورت نخواسته به سایت خودمان آسیب بزنیم .همچنین شاید ما قصد داشته باشیم که سایت خود را به صورت ریسپانسیو کد نویسی کنیم .و در این جا برای نمایش آیکن ها در تبلت ها و موبایل ها مجبوریم از آیکن های کوچکتر بهره بگیریم .راه حلی که کارشناسان طراحی صفحات وب اخیرا به آن دست پیداکرده اند استفاده از فونت به جای آیکن می باشد.
ما به راحتی میتوانیم با لود کردن یک فونت در فایل css خود نه تنها این مشکلات را حل نماییم بلکه با افزایش سرعت بارگزاری وب سایت کمک شایانی در بهبود رنکینگ وب سایت خود داشته باشیم.
نحوه استفاده از این روش:
ما میتوانیم از برخی سایتهایی که در این زمینه امکاتانی را ارئه می دهند بهره گیری نماییم:
برای مثال ما از وب سایت دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
استفاده می نماییم
1: ابتدا فونت awesome را دانلود کنید .
2-فونت ها را در پوشه ای به نام فونت قرار دهید .سپس یک پوشهcss ایجاد و فایل css خود را در آن به وجود آورید و از طریق کد زیر فوتا دانلود شده را در ابتدای فایل css تعریف نمایدد
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
3- در این مرحله هر کجا که نیاز پیدا کردید که از یکی از آیکن ها مورد نیاز خود را استفاده کنید کافیه در فایل css خود در ID # و یا CLASS . و یا هر تگ دیگری که می خواهید ایکن خود را به نمایش در آورید میتوانید با استفاده از دستور

font-family:که باید FontAwesome باشد
content به این صفحه مراجعه کنید و کد مورد نظر خود برای نشان دادن آیکن را انتخاب کنید
font-size اندازه آیکن را مشخص میکند
font-color رنگ آیکن را مشخص میکند
بطور مثال در کد زیر قلب با رنگ فیروزه ای را نشان میدهد


.unlike:before{

display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
content: "\f004";
font-size:8px;
color: rgb(0, 255, 255);

}
]]> <![CDATA[آموزش های یاسین دیزاین (نحوه درج فونت دلخواه در قالب سایتتون )]]> https://forums.parsjoom.ir/thread-16633.html Tue, 18 Nov 2014 17:40:50 +0000 https://forums.parsjoom.ir/thread-16633.html آموزش نحوه درج فونت دلخواه در قالب سایتتون

قدم اول : فونت مورد نظر را به 3 فرمت eot . ttf و woff تبدیل کنید . با سایت های آنلاین میشه.

قدم دوم : فونت ها را توی پوشه ای بریزید.

قدم سوم : کد زیر را توی فایل css بزارید و مسیر فونت مورد نظر را بهش بدید.
کد:
@font-face {
    font-family: 'yekan';
    src: url('../fonts/BYekan.eot');
    src: url('../fonts/BYekan.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BYekan.woff') format('woff'),
         url('../fonts/BYekan.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
[/code]
در کد بالا در قسمت font-family: 'yekan'; به جای yekan هر اسمی میخوایید برای فونتتون بزارید.
ولی گزینه های بعدی باید اسم فونت موجود در پوشه باشه

خب قدم آخر هم اینه که در کلاس ها و دایو های خودتون این را بنویسید
کد:
font-family:'yekan';

تموم شد. . تشکر و اعتبار یادتون نره Blush]]> آموزش نحوه درج فونت دلخواه در قالب سایتتون

قدم اول : فونت مورد نظر را به 3 فرمت eot . ttf و woff تبدیل کنید . با سایت های آنلاین میشه.

قدم دوم : فونت ها را توی پوشه ای بریزید.

قدم سوم : کد زیر را توی فایل css بزارید و مسیر فونت مورد نظر را بهش بدید.
کد:
@font-face {
    font-family: 'yekan';
    src: url('../fonts/BYekan.eot');
    src: url('../fonts/BYekan.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BYekan.woff') format('woff'),
         url('../fonts/BYekan.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
[/code]
در کد بالا در قسمت font-family: 'yekan'; به جای yekan هر اسمی میخوایید برای فونتتون بزارید.
ولی گزینه های بعدی باید اسم فونت موجود در پوشه باشه

خب قدم آخر هم اینه که در کلاس ها و دایو های خودتون این را بنویسید
کد:
font-family:'yekan';

تموم شد. . تشکر و اعتبار یادتون نره Blush]]> <![CDATA[قالب موبایل]]> https://forums.parsjoom.ir/thread-14433.html Wed, 26 Feb 2014 10:26:34 +0000 https://forums.parsjoom.ir/thread-14433.html
میخواهم سی اس اس واسه موبایل بنویسم دوستان کسی فایل آموزش داره در این راستا؟

مرسی]]>
میخواهم سی اس اس واسه موبایل بنویسم دوستان کسی فایل آموزش داره در این راستا؟

مرسی]]> <![CDATA[حل مشکل اسکرول افقی سایت parsjoom]]> https://forums.parsjoom.ir/thread-14040.html Sun, 12 Jan 2014 10:04:50 +0000 https://forums.parsjoom.ir/thread-14040.html من که امروز سایت parsjoom دیدم متوجه شدم هنگام نمایش مطالب یه اسکرول افقی رو صفحه مشاهده میشه که خوشایند نیست زیاد,
برای حل این مشکل
کد:
overflow-x: hidden;

به ویژگی های body در فایل css اضافه کنید, با تشکر]]> من که امروز سایت parsjoom دیدم متوجه شدم هنگام نمایش مطالب یه اسکرول افقی رو صفحه مشاهده میشه که خوشایند نیست زیاد,
برای حل این مشکل
کد:
overflow-x: hidden;

به ویژگی های body در فایل css اضافه کنید, با تشکر]]> <![CDATA[سایه انداختن دور باکس ها و نوشته ها توسط Css]]> https://forums.parsjoom.ir/thread-13941.html Mon, 30 Dec 2013 12:19:51 +0000 https://forums.parsjoom.ir/thread-13941.html
برای اینکه در سایت بتونیم باکس های Shadow درست کنیم, که وقتی Hover میکنیم روی باکس, و دور باکس به صورت انیمیشن و سایه های رنگی به وجود بیاریم از کدهای زیر استفاده نمایید :

کد Css :

کد:
*{
padding:0;
margin:0;}
#master {
/* [disabled]background-color: #F00; */
height: 895px;
width: 980px;
position: relative;
margin: 0 auto;
}
#apDiv1 {
position: absolute;
left: -51px;
top: -1px;
width: 981px;
height: 131px;
z-index: 1;
}
#apDiv2 {
position: absolute;
left: 296px;
top: 68px;
width: 612px;
height: 42px;
z-index: 2;
}
#apDiv2 ul li {
list-style-type: none;
float: left;
display: block;
/* [disabled]background-color: #666; */
height: 42px;
width: 102px;
text-align: center;
line-height: 42px;
font-family: verdana;
font-size: 12px;
}
.menu1 {
background-color: #C61211;
}
.menu2 {
background-color: #FC6B00;
}
.menu3 {
background-color: #9BCA00;
}
.menu4 {
background-color: #0BAAD4;
}
.menu5 {
background-color: #CB3187;
}
.menu6 {
background-color: #F79D00;
}
#master #apDiv2 ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
#apDiv3 {
position: absolute;
left: 491px;
top: 18px;
width: 300px;
height: 26px;
z-index: 3;
background-color: #1B1C1E;
transition: all 0.5s;
}
.search:hover{box-shadow:0px 0px 30px #FFFFFF; }
.search{    width: 300px;
height: 24px; background-color: #1B1C1E; border:0px; color:#FFF;}
#apDiv4 {
position: absolute;
left: 809px;
top: 17px;
width: 101px;
height: 25px;
z-index: 4;
font-family: verdana;
font-size: 12px;
line-height: 25px;
font-weight: bold;
color: #FFF;
background-color: #1B1C1E;
text-align: center;
cursor:pointer;
transition: all 0.5s;
}
#apDiv4:hover{
box-shadow:0px 0px 30px #FFFFFF;}
body {
background-color: #000;
}

کد html :

کد:
<div id="master">
<div id="apDiv1"></div>
<div id="apDiv2">
<ul>
<li class="menu1">Item1</li>
<li class="menu2">Item2
<ul>
<li class="menu1">Sub Item 1</li>
<li class="menu2">Sub Item 2</li>
<li class="menu3">Sub Item 3</li>
</ul>
</li>
<li class="menu3">Item3</li>
<li class="menu4">Item4</li>
<li class="menu5">Item5</li>
<li class="menu6">Item6</li>
</ul>
</div>
<div id="apDiv3"><input class="search" value="search..." type="text" /></div>
<div id="apDiv4">Search</div>
</div>

منبع : دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
]]>
برای اینکه در سایت بتونیم باکس های Shadow درست کنیم, که وقتی Hover میکنیم روی باکس, و دور باکس به صورت انیمیشن و سایه های رنگی به وجود بیاریم از کدهای زیر استفاده نمایید :

کد Css :

کد:
*{
padding:0;
margin:0;}
#master {
/* [disabled]background-color: #F00; */
height: 895px;
width: 980px;
position: relative;
margin: 0 auto;
}
#apDiv1 {
position: absolute;
left: -51px;
top: -1px;
width: 981px;
height: 131px;
z-index: 1;
}
#apDiv2 {
position: absolute;
left: 296px;
top: 68px;
width: 612px;
height: 42px;
z-index: 2;
}
#apDiv2 ul li {
list-style-type: none;
float: left;
display: block;
/* [disabled]background-color: #666; */
height: 42px;
width: 102px;
text-align: center;
line-height: 42px;
font-family: verdana;
font-size: 12px;
}
.menu1 {
background-color: #C61211;
}
.menu2 {
background-color: #FC6B00;
}
.menu3 {
background-color: #9BCA00;
}
.menu4 {
background-color: #0BAAD4;
}
.menu5 {
background-color: #CB3187;
}
.menu6 {
background-color: #F79D00;
}
#master #apDiv2 ul ul {
display: none;
}
ul li:hover > ul {
display: block;
}
#apDiv3 {
position: absolute;
left: 491px;
top: 18px;
width: 300px;
height: 26px;
z-index: 3;
background-color: #1B1C1E;
transition: all 0.5s;
}
.search:hover{box-shadow:0px 0px 30px #FFFFFF; }
.search{    width: 300px;
height: 24px; background-color: #1B1C1E; border:0px; color:#FFF;}
#apDiv4 {
position: absolute;
left: 809px;
top: 17px;
width: 101px;
height: 25px;
z-index: 4;
font-family: verdana;
font-size: 12px;
line-height: 25px;
font-weight: bold;
color: #FFF;
background-color: #1B1C1E;
text-align: center;
cursor:pointer;
transition: all 0.5s;
}
#apDiv4:hover{
box-shadow:0px 0px 30px #FFFFFF;}
body {
background-color: #000;
}

کد html :

کد:
<div id="master">
<div id="apDiv1"></div>
<div id="apDiv2">
<ul>
<li class="menu1">Item1</li>
<li class="menu2">Item2
<ul>
<li class="menu1">Sub Item 1</li>
<li class="menu2">Sub Item 2</li>
<li class="menu3">Sub Item 3</li>
</ul>
</li>
<li class="menu3">Item3</li>
<li class="menu4">Item4</li>
<li class="menu5">Item5</li>
<li class="menu6">Item6</li>
</ul>
</div>
<div id="apDiv3"><input class="search" value="search..." type="text" /></div>
<div id="apDiv4">Search</div>
</div>

منبع : دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
]]> <![CDATA[CSS3 Progress Bars]]> https://forums.parsjoom.ir/thread-9854.html Fri, 18 Jan 2013 19:03:00 +0000 https://forums.parsjoom.ir/thread-9854.html دوستان عزیز میتونید اموزش کامل استفاده از دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
بدید
برای جوملا
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

البته من کد ها رو در سی اس اس قالب قرار دادم
در نحوی فراخوانی مشکل دارم تو جوملا
تشکر راهنمایی کنید]]> دوستان عزیز میتونید اموزش کامل استفاده از دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
بدید
برای جوملا
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

البته من کد ها رو در سی اس اس قالب قرار دادم
در نحوی فراخوانی مشکل دارم تو جوملا
تشکر راهنمایی کنید]]> <![CDATA[CSS های اختصاصی برای مرورگرهای اینترنت اکسپلورر – IE ]]> https://forums.parsjoom.ir/thread-7850.html Sat, 18 Aug 2012 19:08:19 +0000 https://forums.parsjoom.ir/thread-7850.html راه هایی برای نوشتن سی اس اس های اختصای برای مرورگر اینترنت اکسپلورر به وسیله کامنت های شرطی
[تصویر: 1345316668_499_eab6e66cea.jpg]

طراحان وب سایت در تلاشند تا بتوانند وب سایتهایی طراحی کنند تا در تمامی مرورگرها و رزولوشن های مختلف صفحات نمایش به درستی دیده شود ، این موضوع یکی از اصول طراحی صفحات وب است و هر طراح وب سایت به صورت ایده آل باید این موضوع را مد نظر خود قرار دهد .
چگونه برای مرورگرهای اینترنت اکسپلورر سی اس اس اختصاصی بنویسیم ؟
یکی از چالشهای هر طراح وب سایت باگ هایی است که به واسطه استفاده از مرورگر اینترنت اکسپلورر به وجود می آید . از آنجایی که معمولا مشتریان و بازدید کنندگان وب سایت هنوز از IE استفاده می کنند ( و خوشبختانه با حضور مرورگرهای قدرتمندی چون کروم و فایرفاکس این روند رو به کاهش است ) باید به رفع باگ ها و ایرادات نمایش صفحات در این مرورگر بپردازیم . قبلا در مرود استفاده از سی اس اس ریست – CSS Reset برای یکسان سازی و یکپارچه سازی کدهای سی اس اس در مرورگرهای متفاوت نیز مطالبی ارائه شده است که خواندن آن توصیه میشود . یکی از بهترین شیوه ها برای خلاص شدن از دست این نا هماهنگی ها استفاده از کامنت های شرطی conditional comments است . البته راه های زیادی هم علاوه بر دستورات شرطی وجود دارد .
کامنت های شرطی IE conditional comments
کامنت گذاری به صورت HTML برای طراحان وب سایت شناخته شده است . کامنت ها به طراحان کمک میکند تا کدهای تمیز تری داشته باشند و کدها از خوانایی بیشتری برخوردار شوند .
به صورت معمول برای گذاشت کامنت در سورس کدهای HTML از کد زیر استفاده میشود

توجه داشته باشید در اینجا از کامنت گذاری در کدهای اچ تی ام ال صحبت میشود و این کامنت ها در کدهای سی اس اس و … به صورت های دیگری مورد استفاده قرار میگیرند .
مرورگر اینترنت اکسپلورر دارای خصوصیت دستورهای شرطی است که در مرورگرهای دیگر پشتیبانی نمیشود و این مورد به طراحان وب سایت کمک خواهد کرد تا دستورات و کدهای HTML اختصاصی برای مرورگرهای IE را در کدهای اچ تی ام ال قرار دهند .
در این نوع از کامنت گذاری در صورت صحیح بودن شرط کدهای داخل کامنت که به صورت HTML نوشته شده اند خوانده و اجرا میشوند . این محتوا میتواند لینک یک Style خارجی و یا یک تگ باشد و یا دستورات سی اس اس داخلی و …
این کامنت ها در مرورگرهای دیگر به عنوان کامنت محسوب میشوند و دستورات شرطی نادیده گرفته خواهند شد .کامنت های شرطی برای مرور گر IE از متداول ترین راه های رفع باگ های نسخه های (IE6,IE7,IE8) می باشد. کامنت های شرطی به ما کمک خواهند کرد که نسخه مرورگر IE کاربر را مورد هدف قرار دهیم و برای رفع نا هماهنگی ها در آن نسخه ، دستورات سی اس اس به خصوصی بنویسیم . در زیر نمونه کد هایی ارائه شده است و میبینید که هدف آنها نسخه های مختلف IE می باشد :
کد:
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->

در دستورات شرطی میتوانید از gt و lte برای هدف قرار دادن یک بازه از نسخه های مرورگر اینترنت اکسپلورر استفاده نمائید
• gt: نسخه بالاتر از
• gte: نسخه بالاتر از یا برابر
• lt: نسخه پایین تر
• lte: نسخه پایین تر یا برابر
برای هدف قراردادن مرورگرهای به غیر از اینترنت اکسپلورر میتوانید از دستور شرطی زیر استفاده نمائید
1 <!--[if !IE]> -->
قوانین مخصوص CSS برای اکسپلورر
موارد دیگری در قوانین CSS بیان شده است که فقط در اینترنت اکسپلور اجرا می شود. برای مثال افزودن علامت ستاره (*) قبل از خصوصیت ((property ، CSS برای IE7 یا افزودن علامت آندر اسکور (_) قبل از خصوصیات ((property، CSS برای IE6 . این روش ها معمولا پیشنهاد نمی شود زیرا به اندازه کافی معتبر نیستند.
• IE8 یا نسخه پائین تر : برای نوشتن قوانین CSS مخصوصا برای IE8 یا پائین تر یک بک اسلش backslash (/9)در آخر قبل از (;) اضافه کنید
• IE7 یا پائین تر : افزودن ستاره (*) قبل از خصوصیات ((property CSS
• IE6 : افزودن آندر اسکور (_) قبل از خصوصیات ((property
کد:
.box {

  background: gray; /* standard */

  background: pink\9; /* IE 8 and below */

  *background: green; /* IE 7 and below */

  _background: blue; /* IE 6 */

}

استفاده از کلاس های شرطی در تگ HTML برای اینترنت اکسپلورر
سومین راه حل افزودن کلاس های CSS برای نسخه های IE به تگ های HTML بوسیله کامنت های شرطی IE می باشد . این روش اساسا بررسی می کند در صورتی که مرور گر ما IE بود، به تگ HTML یک کلاس اضافه میکند و از کلاس IE به عنوان گزینشگر parent میتوان برای هدف قرار دادن کلاسها در مرورگرهای اینترنت اکسپلورر با نسخه های مختلف استفاده کرد . ( برای مثال ie6.box ).
کد:
<!--[if lt IE 7 ]> html class="ie6" <![endif]-->
<!--[if IE 7 ]> html class="ie7" <![endif]-->
<!--[if IE 8 ]> html class="ie8" <![endif]-->
<!--[if IE 9 ]> html class="ie9" <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> html <!--<![endif]-->
دستورات شرطی راه مطمئنی برای صحیح انجام شدن دستورات سی اس اس شما در مرورگ اینترنت اکسپلورر کاربر شماست اما به طور کلی استفاده از روشهای استاندارد کد نویسی میتواند نیاز شما به استفاده از هک برای مرورگرهای اینترنت اکسپلورر را بر طرف کند .( البته این فقط یک شوخی بود نظر شما در مورد مرورگر اینترنت اکسپلورر چیست ؟
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
]]> راه هایی برای نوشتن سی اس اس های اختصای برای مرورگر اینترنت اکسپلورر به وسیله کامنت های شرطی
[تصویر: 1345316668_499_eab6e66cea.jpg]

طراحان وب سایت در تلاشند تا بتوانند وب سایتهایی طراحی کنند تا در تمامی مرورگرها و رزولوشن های مختلف صفحات نمایش به درستی دیده شود ، این موضوع یکی از اصول طراحی صفحات وب است و هر طراح وب سایت به صورت ایده آل باید این موضوع را مد نظر خود قرار دهد .
چگونه برای مرورگرهای اینترنت اکسپلورر سی اس اس اختصاصی بنویسیم ؟
یکی از چالشهای هر طراح وب سایت باگ هایی است که به واسطه استفاده از مرورگر اینترنت اکسپلورر به وجود می آید . از آنجایی که معمولا مشتریان و بازدید کنندگان وب سایت هنوز از IE استفاده می کنند ( و خوشبختانه با حضور مرورگرهای قدرتمندی چون کروم و فایرفاکس این روند رو به کاهش است ) باید به رفع باگ ها و ایرادات نمایش صفحات در این مرورگر بپردازیم . قبلا در مرود استفاده از سی اس اس ریست – CSS Reset برای یکسان سازی و یکپارچه سازی کدهای سی اس اس در مرورگرهای متفاوت نیز مطالبی ارائه شده است که خواندن آن توصیه میشود . یکی از بهترین شیوه ها برای خلاص شدن از دست این نا هماهنگی ها استفاده از کامنت های شرطی conditional comments است . البته راه های زیادی هم علاوه بر دستورات شرطی وجود دارد .
کامنت های شرطی IE conditional comments
کامنت گذاری به صورت HTML برای طراحان وب سایت شناخته شده است . کامنت ها به طراحان کمک میکند تا کدهای تمیز تری داشته باشند و کدها از خوانایی بیشتری برخوردار شوند .
به صورت معمول برای گذاشت کامنت در سورس کدهای HTML از کد زیر استفاده میشود

توجه داشته باشید در اینجا از کامنت گذاری در کدهای اچ تی ام ال صحبت میشود و این کامنت ها در کدهای سی اس اس و … به صورت های دیگری مورد استفاده قرار میگیرند .
مرورگر اینترنت اکسپلورر دارای خصوصیت دستورهای شرطی است که در مرورگرهای دیگر پشتیبانی نمیشود و این مورد به طراحان وب سایت کمک خواهد کرد تا دستورات و کدهای HTML اختصاصی برای مرورگرهای IE را در کدهای اچ تی ام ال قرار دهند .
در این نوع از کامنت گذاری در صورت صحیح بودن شرط کدهای داخل کامنت که به صورت HTML نوشته شده اند خوانده و اجرا میشوند . این محتوا میتواند لینک یک Style خارجی و یا یک تگ باشد و یا دستورات سی اس اس داخلی و …
این کامنت ها در مرورگرهای دیگر به عنوان کامنت محسوب میشوند و دستورات شرطی نادیده گرفته خواهند شد .کامنت های شرطی برای مرور گر IE از متداول ترین راه های رفع باگ های نسخه های (IE6,IE7,IE8) می باشد. کامنت های شرطی به ما کمک خواهند کرد که نسخه مرورگر IE کاربر را مورد هدف قرار دهیم و برای رفع نا هماهنگی ها در آن نسخه ، دستورات سی اس اس به خصوصی بنویسیم . در زیر نمونه کد هایی ارائه شده است و میبینید که هدف آنها نسخه های مختلف IE می باشد :
کد:
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->

در دستورات شرطی میتوانید از gt و lte برای هدف قرار دادن یک بازه از نسخه های مرورگر اینترنت اکسپلورر استفاده نمائید
• gt: نسخه بالاتر از
• gte: نسخه بالاتر از یا برابر
• lt: نسخه پایین تر
• lte: نسخه پایین تر یا برابر
برای هدف قراردادن مرورگرهای به غیر از اینترنت اکسپلورر میتوانید از دستور شرطی زیر استفاده نمائید
1 <!--[if !IE]> -->
قوانین مخصوص CSS برای اکسپلورر
موارد دیگری در قوانین CSS بیان شده است که فقط در اینترنت اکسپلور اجرا می شود. برای مثال افزودن علامت ستاره (*) قبل از خصوصیت ((property ، CSS برای IE7 یا افزودن علامت آندر اسکور (_) قبل از خصوصیات ((property، CSS برای IE6 . این روش ها معمولا پیشنهاد نمی شود زیرا به اندازه کافی معتبر نیستند.
• IE8 یا نسخه پائین تر : برای نوشتن قوانین CSS مخصوصا برای IE8 یا پائین تر یک بک اسلش backslash (/9)در آخر قبل از (;) اضافه کنید
• IE7 یا پائین تر : افزودن ستاره (*) قبل از خصوصیات ((property CSS
• IE6 : افزودن آندر اسکور (_) قبل از خصوصیات ((property
کد:
.box {

  background: gray; /* standard */

  background: pink\9; /* IE 8 and below */

  *background: green; /* IE 7 and below */

  _background: blue; /* IE 6 */

}

استفاده از کلاس های شرطی در تگ HTML برای اینترنت اکسپلورر
سومین راه حل افزودن کلاس های CSS برای نسخه های IE به تگ های HTML بوسیله کامنت های شرطی IE می باشد . این روش اساسا بررسی می کند در صورتی که مرور گر ما IE بود، به تگ HTML یک کلاس اضافه میکند و از کلاس IE به عنوان گزینشگر parent میتوان برای هدف قرار دادن کلاسها در مرورگرهای اینترنت اکسپلورر با نسخه های مختلف استفاده کرد . ( برای مثال ie6.box ).
کد:
<!--[if lt IE 7 ]> html class="ie6" <![endif]-->
<!--[if IE 7 ]> html class="ie7" <![endif]-->
<!--[if IE 8 ]> html class="ie8" <![endif]-->
<!--[if IE 9 ]> html class="ie9" <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> html <!--<![endif]-->
دستورات شرطی راه مطمئنی برای صحیح انجام شدن دستورات سی اس اس شما در مرورگ اینترنت اکسپلورر کاربر شماست اما به طور کلی استفاده از روشهای استاندارد کد نویسی میتواند نیاز شما به استفاده از هک برای مرورگرهای اینترنت اکسپلورر را بر طرف کند .( البته این فقط یک شوخی بود نظر شما در مورد مرورگر اینترنت اکسپلورر چیست ؟
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
]]> <![CDATA[تغیر رنگ باکس کشویی]]> https://forums.parsjoom.ir/thread-7205.html Wed, 11 Jul 2012 10:05:03 +0000 https://forums.parsjoom.ir/thread-7205.html
دوستان لطفا این عکس را ببنید می خواهم رنگ فلشی که روبه سوی پایین هست را عوض کنم

باید چکار کنم
؟
box.jpg
نوع فایل .jpg
دفعات دانلود 5
اندازه 18.12 کیلوبایت

]]>
دوستان لطفا این عکس را ببنید می خواهم رنگ فلشی که روبه سوی پایین هست را عوض کنم

باید چکار کنم
؟
box.jpg
نوع فایل .jpg
دفعات دانلود 5
اندازه 18.12 کیلوبایت

]]> <![CDATA[آموزش css]]> https://forums.parsjoom.ir/thread-5999.html Wed, 09 May 2012 14:08:31 +0000 https://forums.parsjoom.ir/thread-5999.html
تعداد صفحات: 59
amozesh-css.pdf
نوع فایل .pdf
دفعات دانلود 75
اندازه 1.94 مگابایت

]]>
تعداد صفحات: 59
amozesh-css.pdf
نوع فایل .pdf
دفعات دانلود 75
اندازه 1.94 مگابایت

]]> <![CDATA[بهینه سازی کدهای css]]> https://forums.parsjoom.ir/thread-5091.html Wed, 14 Mar 2012 20:51:36 +0000 https://forums.parsjoom.ir/thread-5091.html مثال ۱- فرص کنید میخواهید برای وب سایتی پس زمینه یا BackGround تعیین کنید و آنرا در سمت راست صفحه و بدون تکرار قرار دهید، شاید در وحله اول شما کدی مانند این بنویسید :
کد:
background-image: url(images/example-background.png);
    background-repeat:no-repeat;
    background-position:right;
این کد از نظر اجرایی به صورت صحیح کار میکنید اما چون تمام Attribute ها به Property پس زمینه (BackGround) اشاره دارد میتوان کد فوق را بصورت بهینه شده و به اینصورت بنویسیم :
کد:
1٫background: url(images/example-background.png) no-repeat right;
مثال ۲- بهینه سازی Margin , Padding

مسلما از Attribute های فوق به کررات استفاده کرده اید و میدانید که این ۲ بسیار کارا و مفید هستند. فرض کنید میخواهید برای Table که ساخته اید Margin و Padding تعیین کنید، شاید در وحله اول کد را بصورت بهینه نشده و به اینصورت بنویسید :
کد:
margin-top:30px;
    margin-right:15px;
    margin-bottom:30px;
    margin-left:15px;
    padding-top:15px;
    padding-right:10px;
    padding:bottombottom:15px;
    margin-left:10px;
میبینید که خواسته خود را در ۸ خط نوشتید، اما حالا نگاه کنید به فرم بهینه این دستور :
کد:
margin:30px 15px 30px 15px;
    padding:15px 10px 15px 10px;
در رابطه با margin و padding باید بدانید که میتوانید کل ۴ جهت و یا تنها یک جهت را مطابق شکل زیر مقدار دهی کنید :

همچنین قوانین ذکر شده در عکس بالا برای Padding و Border-Width هم کاربرد دارد .

مثال ۳- بهینه سازی Attribute فونت

در این مثال هم مانند مثالهای قبل کدهای بهینه نشده را به کدهای بهینه شده تبدیل میکنیم :
کد:
font-family:Arial, Helvetica, sans-serif;
    font-size:36px;
    font-weight:lighter;
کد بهینه شده :
کد:
font: lighter 36px Arial, Helvetica, sans-serif;
]]> مثال ۱- فرص کنید میخواهید برای وب سایتی پس زمینه یا BackGround تعیین کنید و آنرا در سمت راست صفحه و بدون تکرار قرار دهید، شاید در وحله اول شما کدی مانند این بنویسید :
کد:
background-image: url(images/example-background.png);
    background-repeat:no-repeat;
    background-position:right;
این کد از نظر اجرایی به صورت صحیح کار میکنید اما چون تمام Attribute ها به Property پس زمینه (BackGround) اشاره دارد میتوان کد فوق را بصورت بهینه شده و به اینصورت بنویسیم :
کد:
1٫background: url(images/example-background.png) no-repeat right;
مثال ۲- بهینه سازی Margin , Padding

مسلما از Attribute های فوق به کررات استفاده کرده اید و میدانید که این ۲ بسیار کارا و مفید هستند. فرض کنید میخواهید برای Table که ساخته اید Margin و Padding تعیین کنید، شاید در وحله اول کد را بصورت بهینه نشده و به اینصورت بنویسید :
کد:
margin-top:30px;
    margin-right:15px;
    margin-bottom:30px;
    margin-left:15px;
    padding-top:15px;
    padding-right:10px;
    padding:bottombottom:15px;
    margin-left:10px;
میبینید که خواسته خود را در ۸ خط نوشتید، اما حالا نگاه کنید به فرم بهینه این دستور :
کد:
margin:30px 15px 30px 15px;
    padding:15px 10px 15px 10px;
در رابطه با margin و padding باید بدانید که میتوانید کل ۴ جهت و یا تنها یک جهت را مطابق شکل زیر مقدار دهی کنید :

همچنین قوانین ذکر شده در عکس بالا برای Padding و Border-Width هم کاربرد دارد .

مثال ۳- بهینه سازی Attribute فونت

در این مثال هم مانند مثالهای قبل کدهای بهینه نشده را به کدهای بهینه شده تبدیل میکنیم :
کد:
font-family:Arial, Helvetica, sans-serif;
    font-size:36px;
    font-weight:lighter;
کد بهینه شده :
کد:
font: lighter 36px Arial, Helvetica, sans-serif;
]]> <![CDATA[آموزش ساختن منوها با استفاهده از css]]> https://forums.parsjoom.ir/thread-4611.html Sun, 19 Feb 2012 11:16:46 +0000 https://forums.parsjoom.ir/thread-4611.html
در این وبسایت که معرفی میکنم

آموزش 108 منو با استفاده از css را به صورت کامل همراه با دمو و سورسهای منو

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

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
]]>
در این وبسایت که معرفی میکنم

آموزش 108 منو با استفاده از css را به صورت کامل همراه با دمو و سورسهای منو

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

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
]]> <![CDATA[ لود کردن CSS های خاص در مرورگرهای خاص]]> https://forums.parsjoom.ir/thread-4099.html Thu, 26 Jan 2012 13:30:49 +0000 https://forums.parsjoom.ir/thread-4099.html از انجایی که بعضی از قالبهای جوملا با هر بروزیری یه جوری دیده میشوند این مقالا را در اینجا قرار میدهم تا از هر قالبی که دوست دارید فارق از این غصه که با چه برزرهایی بهینه است خودتا ان را بهینه کنید خیلی ساده

سی اس اس به طراح وب این امکان را میدهد که نمای صفحه را در حالت های مختلف نمایش ( LCD رایانه ، پرینت، صفحه موبایل) تعیین کند. بطور مثال طراح میتواند فایل های CSS مختلفی را به صفحه لینک کند ، بطوری که اگر صفحه در مرورگر در حال دیده شدن است، صفحه یک جور و با یکسری استایل لود شود و اگر صفحه در حال نمایش در دستگاه های PDA است یکجور دیگر و اگر صفحه در حال print شدن است نیز یکجور دیگر نشان داده شود.

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

<link href="styles.css" rel="stylesheet" type="text/css" media="all" />

همانطور که شما در کد بالا تعیین کرده اید، این فایل CSS به ازای تمامی رسانه هایی که صفحه ی شما را نمایش میدهند ، لود میشود. اما اگر بخواهید به ازای هر رسانه (مانند مرورگر ، دستگاه های PDA و پرینترها) فایل های استایل متفاوتی استفاده شوند باید از کدهای زیر استفاده کنید


برای اعمال توسط کلیه مرورگرها :
<link href="styles1.css" rel="stylesheet" type="text/css" media="screen" />

برای اعمال فقط توسط مرورگر کروم :
<link href="styles1chrome.css" rel="stylesheet" type="text/chrome" />

برای اعمال فقط توسط مرورگر سافاری:
<link href="styles1safari.css" rel="stylesheet" type="text/safari" />

برای اعمال هنگام پرینت کردن صفحه :
<link href="styles2.css" rel="stylesheet" type="text/css" media="print" />

برای اعمال هنگام باز شدن صفحه در انواع PDA :
<link href="styles3.css" rel="stylesheet" type="text/css" media="handheld" />

برای اعمال فقط در مرورگر IE و یا نسخه خاصی از IE
در این پست
اعمال چند استایل از فایل CSS (بدون افزودن فایل CSS دیگر) فقط در مرورگر کروم
در این پست


شما میتوانید هر 5 خط فوق را زیر هم در بالای هرصفحه ی اچتمل خود بنویسید . مرورگر برای نمایش صفحه از styles1.css استفاده میکند. هنگام چاپ صفحه ، فایل styles2.css روی صفحه اعمال میشود. و هنگام بازکردن صفحه در کامپیوترهای جیبی ، فایل styles3.css صفحه را فرمت میکند. همچنین مرورگر اگر کروم باشد از فایل styles1chrome و اگر مرورگر سافاری باشد از فایل styles1safari برای رندرکردن صفحه استفاده خواهد کرد.

یکی از کاربردهای کوچک دیگه این اموزش : مثلا شما میتوانید class مربوط به ستون تبلیغات را در فایلهای css پرینت و css کامپیوترهای جیبی ، بصورت Display:none تعریف کنید تا در هنگام پرینت از روی مقالات سایت شما ، تبلیغات دیگه پرینت نشه. ]]> از انجایی که بعضی از قالبهای جوملا با هر بروزیری یه جوری دیده میشوند این مقالا را در اینجا قرار میدهم تا از هر قالبی که دوست دارید فارق از این غصه که با چه برزرهایی بهینه است خودتا ان را بهینه کنید خیلی ساده

سی اس اس به طراح وب این امکان را میدهد که نمای صفحه را در حالت های مختلف نمایش ( LCD رایانه ، پرینت، صفحه موبایل) تعیین کند. بطور مثال طراح میتواند فایل های CSS مختلفی را به صفحه لینک کند ، بطوری که اگر صفحه در مرورگر در حال دیده شدن است، صفحه یک جور و با یکسری استایل لود شود و اگر صفحه در حال نمایش در دستگاه های PDA است یکجور دیگر و اگر صفحه در حال print شدن است نیز یکجور دیگر نشان داده شود.

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

<link href="styles.css" rel="stylesheet" type="text/css" media="all" />

همانطور که شما در کد بالا تعیین کرده اید، این فایل CSS به ازای تمامی رسانه هایی که صفحه ی شما را نمایش میدهند ، لود میشود. اما اگر بخواهید به ازای هر رسانه (مانند مرورگر ، دستگاه های PDA و پرینترها) فایل های استایل متفاوتی استفاده شوند باید از کدهای زیر استفاده کنید


برای اعمال توسط کلیه مرورگرها :
<link href="styles1.css" rel="stylesheet" type="text/css" media="screen" />

برای اعمال فقط توسط مرورگر کروم :
<link href="styles1chrome.css" rel="stylesheet" type="text/chrome" />

برای اعمال فقط توسط مرورگر سافاری:
<link href="styles1safari.css" rel="stylesheet" type="text/safari" />

برای اعمال هنگام پرینت کردن صفحه :
<link href="styles2.css" rel="stylesheet" type="text/css" media="print" />

برای اعمال هنگام باز شدن صفحه در انواع PDA :
<link href="styles3.css" rel="stylesheet" type="text/css" media="handheld" />

برای اعمال فقط در مرورگر IE و یا نسخه خاصی از IE
در این پست
اعمال چند استایل از فایل CSS (بدون افزودن فایل CSS دیگر) فقط در مرورگر کروم
در این پست


شما میتوانید هر 5 خط فوق را زیر هم در بالای هرصفحه ی اچتمل خود بنویسید . مرورگر برای نمایش صفحه از styles1.css استفاده میکند. هنگام چاپ صفحه ، فایل styles2.css روی صفحه اعمال میشود. و هنگام بازکردن صفحه در کامپیوترهای جیبی ، فایل styles3.css صفحه را فرمت میکند. همچنین مرورگر اگر کروم باشد از فایل styles1chrome و اگر مرورگر سافاری باشد از فایل styles1safari برای رندرکردن صفحه استفاده خواهد کرد.

یکی از کاربردهای کوچک دیگه این اموزش : مثلا شما میتوانید class مربوط به ستون تبلیغات را در فایلهای css پرینت و css کامپیوترهای جیبی ، بصورت Display:none تعریف کنید تا در هنگام پرینت از روی مقالات سایت شما ، تبلیغات دیگه پرینت نشه. ]]> <![CDATA[فیلم آموزشی طراحی سایت با CSS]]> https://forums.parsjoom.ir/thread-3762.html Thu, 12 Jan 2012 15:37:16 +0000 https://forums.parsjoom.ir/thread-3762.html
[تصویر: css-code-learning.jpg]

در این فیلم آموزشی چه چیزی یاد میگیریم :

1. معرفی این فیلم آموزشی:
معرفی دوره

2. شروع به کار با CSS :
- ادیتورهای مورد نیاز
- CSS چیست؟
- کار با افزونه های موزیلا فایرفاکس

3. مقدمات :
- آشنایی با کدهای CSS
- ساختار CSS
- استایلها و شیت ها

4. Css در نوشته ها (متن ها – فونت) :
- کار با فونت ها
- خانواده فونت ها

5. عناصر CSS در استایل ها :
– عناصر جعبه ها
– فاصله ها (Margin and Padding)
– حاشیه ها (Border)
– جداول (Table)

6. آی دی ها و کلاس ها (IDs and Class) :
- چگونگی کار با آی دی ها و کلاسها
- تنظیمات پیشرفته

7. رنگ و عکس پس زمینه :
- معرفی
- تکرار عکس ها (X and Y)
- ابعاد و موقعیت

8. موقعیت عناصر در CSS :
- مقدمه ای بر شناوری ها (Floats)
- رفع مسائل مربوط به شناور (Fixing Floated Issues)
- تعیین موقعیت نسبی و مطلق (Relative and Absolute Positioning)

9. نکات مهم و سریع :
- بازنگری موقعیت های افقی
- طرح بندی ستون
- مهمترین سبک ها
- کدهای نظرات (comment)
- کدهای CSS در جوملا به صورت سریع و خلاصه


حجم 740 مگابایت (در 15 قطعه 50 مگابایتی)
دانلود فیلم آموزشی طراحی سایت CSS از سرور قدرتمند پی سی ول


دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


رمز فایلهای فشرده : www.p30vel.ir
منبع : دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
]]>
[تصویر: css-code-learning.jpg]

در این فیلم آموزشی چه چیزی یاد میگیریم :

1. معرفی این فیلم آموزشی:
معرفی دوره

2. شروع به کار با CSS :
- ادیتورهای مورد نیاز
- CSS چیست؟
- کار با افزونه های موزیلا فایرفاکس

3. مقدمات :
- آشنایی با کدهای CSS
- ساختار CSS
- استایلها و شیت ها

4. Css در نوشته ها (متن ها – فونت) :
- کار با فونت ها
- خانواده فونت ها

5. عناصر CSS در استایل ها :
– عناصر جعبه ها
– فاصله ها (Margin and Padding)
– حاشیه ها (Border)
– جداول (Table)

6. آی دی ها و کلاس ها (IDs and Class) :
- چگونگی کار با آی دی ها و کلاسها
- تنظیمات پیشرفته

7. رنگ و عکس پس زمینه :
- معرفی
- تکرار عکس ها (X and Y)
- ابعاد و موقعیت

8. موقعیت عناصر در CSS :
- مقدمه ای بر شناوری ها (Floats)
- رفع مسائل مربوط به شناور (Fixing Floated Issues)
- تعیین موقعیت نسبی و مطلق (Relative and Absolute Positioning)

9. نکات مهم و سریع :
- بازنگری موقعیت های افقی
- طرح بندی ستون
- مهمترین سبک ها
- کدهای نظرات (comment)
- کدهای CSS در جوملا به صورت سریع و خلاصه


حجم 740 مگابایت (در 15 قطعه 50 مگابایتی)
دانلود فیلم آموزشی طراحی سایت CSS از سرور قدرتمند پی سی ول


دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


رمز فایلهای فشرده : www.p30vel.ir
منبع : دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
]]>