parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت border-image-source

مثال

از یک عکس به عنوان حاشیه در اطراف یک عنصر div استفاده کنید:

		div

		{

		border-image-source: url(border.png);

		}

پشتیبانی مرورگرها

هیچ کدام از مرورگرهای اصلی، خصوصیت border-image-source را پشتیبانی نمی کنند.

می توانید به بیاموز border-image مراجعه نمایید.

تعریف و کاربرد

با استفاده از خصوصیت border-image-source می توانید از یک عکس به جای استایل های border که توسط خصوصیات border-style داده می شود استفاده کنید.

توجه: اگر مقدار "none" باشد، یا اگر عکس نمایش داده نشود، استایل های border استفاده خواهند شد.

مقدار پیشفرض	none
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.borderImageSource="url(border.png)"

نحوه استفاده

		border-image-source: none|image;

مقدار	توضیحات
none	هیچ عکسی استفاده نخواهد شد.
image	مسیر عکسی که به عنوان حاشیه استفاده می شود.

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 12:18 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت border-image-width

مثال

تعیین پهنای image-border (عکس حاشیه):

		div

		{

		border-image-source: url(border.png);

		border-image-width: 30 30;

		}

پشتیبانی مرورگرها

هیچ کدام از مرورگرهای اصلی، خصوصیت border-image-width را پشتیبانی نمی کنند.

می توانید به بیاموز border-image مراجعه نمایید.

تعریف و کاربرد

با استفاده از خصوصیت border-image-width می توانید اندازه ی پهنای (عرض) حاشیه ی عکس را تعیین کنید.

در واقع می توانید offset را برای 9 بخش زیر تعیین نمایید:

گوشه بالا - چپ
لبه بالا
گوشه بالا - راست
لبه راست
گوشه پایین - راست
لبه پایین
گوشه پایین - چپ
لبه چپ
ناحیه وسط عکس

بعبارتی border-image-width، فاصله داخلی 9 ناحیه ذکر شده از لبه بالا، راست، پایین و چپ است.

مقدار پیشفرض	1
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.borderImageWidth="30 30"

نحوه استفاده

		border-image-width: number|%|auto;

توجه: این خصوصیت فاصله حاشیه داخلی (offset) از بالا، راست، پایین و چپ عکس اصلی را مشخص می کند و همانطور که در مثال زیر مشاهده می کنید عکس اصلی را به 9 ناحیه تقسیم می کند (4 تا گوشه، 4 تا لبه و 1 فضای وسط عکس). فضای وسط عکس حذف خواهد شد مگر اینکه از کلمه کلیدی "fill" استفاده نمایید.

این خصوصیت می تواند از یک تا چهار مقدار داشته باشد (مانند خصوصیت border-image-slice) و ترتیب مقادیر بصورت top و right و bottom و left است. شما می توانید از واحدهای درصد یا پیکسل استفاده کنید.

اگر مقدار چهارم قلم گرفته شود، با مقدار دوم تنظیم خواهد شد، اگر مقدار سوم قلم گرفته شود با مقدار اول تنظیم می شود و اگر مقدار دوم قلم گرفته شود با مقدار اول تنظیم می شود. مقادیر منفی قابل قبول نیست.

اگر عرض برای border تنظیم نشده باشد خصوصیت border-image اثری نخواهد داشت. برای مرورگرهایی که border-image را پشتیبانی می کنند، تکه های تصویرتان در عرض مشخص شده مقیاس می گیرند.

مثال:

		border-image-width: 0.5em 1.0em;

		border-image-source: url(/pix/css/css3/properties/border-image-1.png); 

		border-image-slice: 28; 

		border-image-width: 0.5em 1.0em; 

		border-image-outset: 0; 

		border-image-repeat: round;

در مثال بالا،

گوشه بالا - چپ
لبه بالا
گوشه بالا - راست
لبه راست
گوشه پایین - راست
لبه پایین
گوشه پایین - چپ
لبه چپ
ناحیه وسط عکس

مقدار	توضیحات
number	تعداد تکرار border-width مربوطه را نشان می دهد.
%	به سایز تصویر حاشیه اشاره دارد.
auto

border-image-source: url(/pix/css/css3/properties/border-image-1.png);
border-image-slice: 28;
border-image-width: 0.5em 1.0em;
border-image-outset: 0;
border-image-repeat: round;

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 12:19 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت border-radius

مثال

گرد کردن گوشه های عنصر <div>:

		div

		{

		border:2px solid;

		border-radius:25px;

		}

خودتان امتحان کنید »

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت border-radius را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، این خصوصیت را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خصوصیت مختصر border-radius، می توانید چهار خصوصیت زیر را در یک مرحله تنظیم نمایید:

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

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

مقدار پیشفرض	0
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.borderRadius="5px"

نحوه استفاده

		border-radius: 1-4 length|% / 1-4 length|%;

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

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

بالا - چپ
بالا - راست
پایین - راست
پایین چپ

مقادیر دوم شعاع عمودی است و ترتیب آنها مانند بالاست. اگر مقدار دوم قلم گرفته شود، از مقدار اول برای آن استفاده می شود. اگر خصوصیت را با صفر تنظیم نمایید، گوشه ها مربعی می شود. اگر مقدار اول را با درصد تنظیم نمایید، این مقدار نسبت به width عنصر سنجیده می شود و همچنین برای مقدار دومی نیز نسبت به height عنصر محاسبه می شود.

مقدار	توضیحات	نمایش دادن
length	شکل گوشه ها را تعیین می کند.	نمایش دادن »
%	شکل گوشه ها را به درصد تعیین می کند.	نمایش دادن »

مثال 1

		border-radius:2em;

		برابر است با:

		border-top-left-radius:2em;

		border-top-right-radius:2em;

		border-bottom-right-radius:2em;

		border-bottom-left-radius:2em;

مثال 2

		border-radius: 2em 1em 4em / 0.5em 3em;

		برابر است با:

		border-top-left-radius: 2em 0.5em;

		border-top-right-radius: 1em 3em;

		border-bottom-right-radius: 4em 0.5em;

		border-bottom-left-radius: 1em 3em;

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 12:20 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت border-top-left-radius

مثال

گرد کردن گوشه بالا سمت چپ یک عنصر <div>:

		div

		{

		border:2px solid;

		border-top-left-radius:2em;

		}

خودتان امتحان کنید »

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت border-top-left-radius را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، خصوصیت border-top-left-radius را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خصوصیت border-top-left-radius، می توانید شکل لبه در گوشه بالا سمت چپ را تعیین نمایید.

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

مقدار پیشفرض	0
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.borderTopLeftRadius="5px"

نحوه استفاده

		border-top-left-radius: length|% [length|%];

توجه: دو مقدار lenght یا درصد در خصوصیت border-top-left-radius در واقع مشخص کننده شعاع یکی از چهار سمت بیضی است که شکل گوشه های بیرونی لبه را تعریف می کند.

مقدار اول شعاع افقی و مقدار دوم شعاع عمودی است. اگر مقدار دوم قلم گرفته شود، از مقدار اول برای آن استفاده می شود. اگر خصوصیت را با صفر تنظیم نمایید، گوشه ها مربعی می شود. اگر مقدار اول را با درصد تنظیم نمایید، این مقدار نسبت به width عنصر سنجیده می شود و همچنین برای مقدار دومی نیز نسبت به height عنصر محاسبه می شود.

مقدار	توضیحات	نمایش دادن
length	شکل گوشه ی بالا سمت چپ را تعیین می کند.	نمایش دادن »
%	شکل گوشه ی بالا سمت چپ را به درصد تعیین می کند.	نمایش دادن »

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 12:21 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت border-top-right-radius

مثال

گرد کردن گوشه بالا سمت راست عنصر <div>:

		div

		{

		border:2px solid;

		border-top-right-radius:2em;

		}

خودتان امتحان کنید »

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت border-top-right-radius را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، خصوصیت border-top-right-radius را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خصوصیت border-top-right-radius، می توانید شکل لبه در گوشه بالا سمت راست را تعیین نمایید.

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

مقدار پیشفرض	0
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.borderTopRightRadius="5px"

نحوه استفاده

		border-top-right-radius: length|% [length|%];

توجه: دو مقدار lenght یا درصد در خصوصیت border-top-right-radius در واقع مشخص کننده شعاع یکی از چهار سمت بیضی است که شکل گوشه های بیرونی لبه را تعریف می کند.

مقدار	توضیحات	نمایش دادن
length	شکل گوشه ی بالا سمت راست را تعیین می کند.	نمایش دادن »
%	شکل گوشه ی بالا سمت راست را به درصد تعیین می کند.	نمایش دادن »

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 12:21 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت box-shadow

مثال

این مثال برای عنصر div سایه قرار داده است:

		div

		{

		box-shadow: 10px 10px 5px #888888;

		}

خودتان امتحان کنید »

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

پشتیبانی مرورگرها

خاصیت box-shadow توسط مرورگرهای IE9+ ، Opera، Firefix، ChromeT Safari 5.1.1 پشتیبانی می شود.

تعریف و کاربرد

با استفاده از خاصیت box-shadow می تواین یک یا چند سایه به box داد.

مقدار پیشفرض	none
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.boxShadow="10px 10px 5px #888888"

نحوه استفاده

		box-shadow: h-shadow v-shadow blur spread color inset;

توجه: با استفاده از این خاصیت می توان یک یا چند سایه را به box داد. خاصیت یک لیستی از سایه هاست که با کاما از همدیگر جدا شده اند، و هر کدام با مقادیری با طول 2-4 مشخص شده اند، یک رنگ اختیاری دارند، و یک کلید واژه inset اختیاری نیز می گیرند.

مقدار	توضیحات	نمایش دادن
h-shadow	الزامی است. مکان سایه افقی را مشخص می کند. اعداد منفی نیز مجاز است.	نمایش دادن »
v-shadow	الزامی است. مکان سایه عمودی را مشخص می کند. اعداد منفی نیز مجاز است.	نمایش دادن »
blur	اختیاری است. میزان blur را مشخص می کند.	نمایش دادن »
spread	اختیاری. سایز سایه را مشخص می کند.	نمایش دادن »
color	اختیاری است. رنگ سایه را مشخص می کند. رنگ پیش فرض مشکی است. نکته: در مرورگر Safari پارامتر رنگ الزامی است. اگر رنگ را مشخص نکنید، سایه به هیچ وجه نمایش داده نمی شود.	نمایش دادن »
inset	اختیاری است. سایه را از سایه خارجی به سایه داخلی تغییر می دهد.	نمایش دادن »

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 12:24 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت overflow-x

مثال

برش دادن لبه های سمت چپ و راست محتوای داخل div، اگر محتوا سرریز کند:

		div

		{

		overflow-x:hidden;

		}

خودتان امتحان کنید »

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت overflow-x را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، تنظیم overflow-x برای یک عنصر را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خصوصیت overflow-x می توان مشخص کرد هنگامی که محتوا از لبه سمت چپ یا راست سرریز می شود، چه اتفاقی رخ دهد.

برای تشخیص برش دادن لبه های بالا و پایین از خصوصیت overflow-y استفاده کنید.

مقدار پیشفرض	visible
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.overflowX="scroll"

نحوه استفاده

		overflow-x: visible|hidden|scroll|auto|no-display|no-content;

مقدار	توضیحات	نمایش دادن
visible	محتوا برش داده نمی شود، و ممکن است از داخل کادر بیرون بزند.	نمایش دادن »
hidden	محتوا برش داده می شود - ولی هیچ مکانیسمی برای scroll شدن فراهم نمی شود.	نمایش دادن »
scroll	محتوا برش داده می شود و scroll می شود.	نمایش دادن »
auto	در صورتی که سرریز رخ دهد، مکانیزم scroll به کار گرفته می شود.	نمایش دادن »
no-display	اگر محتوا داخل کادر جا نشود و سرریز رخ دهد، کل کادر نمایش داده نمی شود.	نمایش دادن »
no-content	اگر محتوا داخل کادر جا نشود و سرریز رخ دهد، کل محتوا مخفی می شود.	نمایش دادن »

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 12:25 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت overflow-y

مثال

برش دادن لبه های بالا و پایین محتوای داخل div، در صورتی که محتوا سرریز کند:

		div

		{

		overflow-y:hidden;

		}

خودتان امتحان کنید »

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت overflow-y را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، تنظیم overflow-y برای یک عنصر را پشتیبانی نمی کند.

تعریف و کاربرد

با استفاده از خصوصیت overflow-y می توان مشخص کرد هنگامی که محتوا از لبه بالایی یا پایینی سرریز می شود، چه اتفاقی رخ دهد.

برای تشخیص برش دادن لبه سمت راست یا لبه سمت چپ از خصوصیت overflow-x استفاده کنید.

مقدار پیشفرض	visible
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.overflowY="scroll"

نحوه استفاده

		overflow-y: visible|hidden|scroll|auto|no-display|no-content;

مقدار	توضیحات	نمایش دادن
visible	محتوا برش داده نمی شود، و ممکن است از داخل کادر بیرون بزند.	نمایش دادن »
hidden	محتوا برش داده می شود - ولی هیچ مکانیسمی برای scroll شدن فراهم نمی شود.	نمایش دادن »
scroll	محتوا برش داده می شود و scroll می شود.	نمایش دادن »
auto	در صورتی که سرریز رخ دهد، مکانیزم scroll به کار گرفته می شود.	نمایش دادن »
no-display	اگر محتوا داخل کادر جا نشود و سرریز رخ دهد، کل کادر نمایش داده نمی شود.	نمایش دادن »
no-content	اگر محتوا داخل کادر جا نشود و سرریز رخ دهد، کل محتوا مخفی می شود.	نمایش دادن »

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 12:25 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت overflow-style

مثال

تنظیم کردن روش scroll شدن هنگامی که یک عنصر سرریز می کند:

		div

		{

		overflow:auto;

		overflow-style:marquee,panner;

		}

خودتان امتحان کنید »

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت overflow-style را پشتیبانی می کنند.

تعریف و کاربرد

با استفاده از خصوصیت می توان روش scroll شدن یک عنصر را هنگامی که سرریز می کند، مشخص کرد.

مقدار پیشفرض	auto
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.overflowStyle="scrollbar"

نحوه استفاده

		overflow-style: auto|scrollbar|panner|move|marquee;

توجه: مقدار overflow-style یا auto است، یا لیستی از متدها با ترتیب دلخواهتان است. مرورگر باید اولین متدی که در لیست ذکر شده است و پشتیبانی می کند را استفاده کند.

مقدار	توضیحات
auto
scrollbar	یک scollbar به عناصری که سرریز می کنند اضافه می کند.
panner
move	کاربر می تواند محتوای یک عنصر را حرکت دهد. به نوعی، کاربر می تواند محتوا را به اطراف با استفاده از موس drag کند.
marquee	محتوا به صورت خود کار بدون هیچ رویدادی از سمت کاربرحرکت می کند.

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 12:26 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت rotation

مثال

چرخش 180 درجه ای عنصر h1:

		h1

		{

		rotation-point:50% 50%;

		rotation:180deg;

		}

خودتان امتحان کنید »

پشتیبانی مرورگرها

هیچ یک از مرورگرهای اصلی، خصوصیت rotation را پشتیبانی می کنند.

تعریف و کاربرد

خصوصیت rotation یک عنصر block را حول نقطه ای که توسط خصوصیت rotation-point مشخص می شود، در جهت خلاف عقربه های ساعت می چرخاند.

نکته: padding، content، border و background نیز چرخانده می شوند!

مقدار پیشفرض	0
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.rotation="180deg"

نحوه استفاده

		rotation: angle;

مقدار	توضیحات
angle	میزان چرخش عنصر را مشخص می کند. مقادیر ممکن 0deg تا 360deg

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 12:26 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت rotation-point

مثال

چرخش 180 درجه ای عنصر h1 حول نقطه مشخص:

		h1

		{

		rotation-point:50% 50%;

		rotation:180deg;

		}

خودتان امتحان کنید »

پشتیبانی مرورگرها

هیچ یک از مرورگرهای اصلی، خصوصیت rotation-point را پشتیبانی می کنند.

تعریف و کاربرد

خصوصیت rotation-point یک زوج عدد است که یک نقطه را به عنوان افست از لبه بالایی گوشه چپ مشخص می کند. در حقیقت چرخش حول این نقطه صورت می گیرد.

نکته: خصوصیت rotation-point در کنار خصوصیت rotation به کار می رود.

مقدار پیشفرض	50% 50%
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.rotationPoint="25% 25%"

نحوه استفاده

		rotation-point: value;

مقدار	توضیحات
left top left center left bottom right top right center right bottom center top center center center bottom	در صورتی که یک کلید واژه مشخص کردید، مقدار دوم "center" خواهد بود.
x% y%	درصدها اشاره به عرض و ارتفاع کادر حاشیه دارد.

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 12:27 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت opacity

مثال

تنظیم میزان شفافیت یک عنصر div:

		div

		{

		opacity:0.5;

		}

خودتان امتحان کنید »

در انتهای این آموزش، مثال های بیشتری را خواهید دید.

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت opacityرا پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 8 و نسخه های قبلی آن، از خاصیت جایگزین filter برای تنظیم شفافیت استفاده می کند. مانند: (filter:Alpha(opacity=50.

تعریف و کاربرد

با استفاده از خصوصیت opacity می توان میزان شفافیت یک عنصر را مشخص کرد.

مقدار پیشفرض	1
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.opacity=0.5

نحوه استفاده

		opacity: value|inherit;

مقدار	توضیحات	نمایش دادن
value	میزان شفافیت عنصر از 0.0 ( کاملا شفاف) تا 1.0 (کاملا مات) مشخص می کند.	نمایش دادن »
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 12:28 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت opacity

مثال

تنظیم میزان شفافیت یک عنصر div:

		div

		{

		opacity:0.5;

		}

خودتان امتحان کنید »

در انتهای این آموزش، مثال های بیشتری را خواهید دید.

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت opacityرا پشتیبانی می کنند.

تعریف و کاربرد

با استفاده از خصوصیت opacity می توان میزان شفافیت یک عنصر را مشخص کرد.

مقدار پیشفرض	1
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.opacity=0.5

نحوه استفاده

		opacity: value|inherit;

مقدار	توضیحات	نمایش دادن
value	میزان شفافیت عنصر از 0.0 ( کاملا شفاف) تا 1.0 (کاملا مات) مشخص می کند.	نمایش دادن »
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 12:28 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت opacity

مثال

تنظیم میزان شفافیت یک عنصر div:

		div

		{

		opacity:0.5;

		}

خودتان امتحان کنید »

در انتهای این آموزش، مثال های بیشتری را خواهید دید.

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت opacityرا پشتیبانی می کنند.

تعریف و کاربرد

با استفاده از خصوصیت opacity می توان میزان شفافیت یک عنصر را مشخص کرد.

مقدار پیشفرض	1
ارث بری	خیر
نسخه	CSS3
JavaScript ساختار	object.style.opacity=0.5

نحوه استفاده

		opacity: value|inherit;

مقدار	توضیحات	نمایش دادن
value	میزان شفافیت عنصر از 0.0 ( کاملا شفاف) تا 1.0 (کاملا مات) مشخص می کند.	نمایش دادن »
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 12:29 AM

parisaexp

کاربر نقره ای

تاریخ عضویت : مهر 1392

تعداد پست ها : 888

محل سکونت : اصفهان

پاسخ به:مرجع CSS

خصوصیت height

مثال

تنظیم کردن ارتفاع و عرض پاراگراف:

		p.ex

		{

		height:100px;

		width:100px;

		}

خودتان امتحان کنید »

در انتهای این آموزش، مثال های بیشتری را خواهید دید.

تعریف و کاربرد

با استفاده از خصوصیت height می توان ارتفاع عناصر را تنظیم کرد.

توجه: خصوصیت height شامل padding، border و margin نمی شود؛ در واقع این خصوصیت ارتفاع محوطه داخل padding، border و margin را تنظیم می کند.

توجه: خصوصیت های max-height و min-height بر خصوصیت height غلبه می کنند.

مقدار پیشفرض	auto
ارث بری	خیر
نسخه	CSS1
JavaScript ساختار	object.style.height="50px"

پشتیبانی مرورگرها

تمام مرورگرهای اصلی، خصوصیت hieght را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.

مقدارهای خصوصیت

مقدار	توضیحات	نمایش دادن
auto	مرورگر ارتفاع را محاسبه می کند. این مقدار پیش فرض است.	نمایش دادن »
length	ارتفاع را در واحدهای پیکس و سانتی متر و غیره مشخص می کند.	نمایش دادن »
%	ارتفاع یک عنصر را نسبت به عنصر والدش به درصد مشخص می کند.
inherit	تعيين مي کند که بايد از والدش، ارث بري داشته باشد.

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

سه شنبه 11 آذر 1393 12:31 AM