سرخط خبرها

آموزش text-shadow در css3

آموزش text-shadow در css3

یکی از مواردی که در CSS کمبود اون احساس می شد و  در CSS3 اضافه شده ، قابلیت سایه گذاری برای متن هاست . در مطلب امروز در مورد خصوصیت text-shadow صحبت می کنیم .

از خاصیت text-shadow در CSS 3 ، برای سایه دار کردن متن و نوشته در صفحات وب استفاده می شود .  با استفاده از text-shadow میتوانید به نوشته های خود افکت دهید .  شما میتوانید سایه عمودی ، سایه افقی ، میزان محو بودن و رنگ سایه را تعیین کنید . روش انجام اینکار در ادامه توضیح داده می شود  .

به وسیله خاصیت text-shadow به راحتی فقط با نوشتن یک کد ساده می توانید ، افکت تصویری بسیار زیبایی سایه را ، به متون خود اضافه نمایید . کاری که پیش از به هیچ عنوان در طراحی صفحات وب ممکن نبود .

ویژگی Text Shadow و Word wrap زیر مجموعه Text Effect می باشد .

سایه متن text-shadow میتواند بر روی تمام متن ها در صفحه اعمال شود .

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

خصوصیت text-shadow چهار مقدار پشت سر هم رو می گیره

text-shadow : h-shadow   v-shadow   blur   color;

مثال : text-shadow : 10px 10px 5px blue ;

 

خاصیت text-shadow به ما امکان تعیین دقیق مشخصات سایه را با پارامترهای خود می دهد . در جدول زیر به تعریف و نحوه استفاده از پارامترهای این خاصیت می پردازیم :

 

h-shadow : 

این پارامتر میزان فاصله سایه از لبه بالایی متن را بر حسب مقداری مثل px یا pt تعیین می کند . که سایه در مختصات X ( به صورت افقی) چه مقدار با خود متن فاصله داشته باشد. هر چه این مقدار بیشتر باشد ، فاصله محل قرار گیری سایه از لبه بالایی متن ( به سمت پایین ) بیشتر می شود . تعیین این پارامتر اجباری است .
نکته : امکان مقدار دهی منفی برای این خاصیت نیز وجود دارد . چنانچه مقدار این خاصیت منفی در نظر گرفته شود ، سایه بالاتر از لبه بالایی متن قرار می گیرد .

 

v-shadow : 

این پارامتر میزان فاصله سایه از لبه سمت چپ متن را بر حسب مقداری مثل px یا pt تعیین می کند .که ساید در مختصات Y ( به صورت عمودی) چه مقدار با خود متن فاصله داشته باشد. هر چه این مقدار بیشتر باشد ، فاصله محل قرار گیری سایه از لبه سمت چپ متن ( به سمت چپ ) بیشتر می شود .تعیین این پارامتر اجباری است .

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

blur: 

این پارامتر یک افکت تصویری به سایه داده و باعث می شود اطراف سایه ایجاد شده به صورت مه آلود و تیره در بیاید .که میزان تار بودن Blur سایه را مشخص می کند. مقدار این پارامتر بر حسب واحد px تعیین می شود مثل ۱۰px . هر چه مقدار آن بیشتر باشد ، میزان مه آلودگی اطراف سایه نیز بیشتر خواهد شد .تعیین این پارامتر اختیاری است .

امکان مقدار دهی منفی برای این پارامتر وجود ندارد .

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

color : 

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

 

چند سایه همزمان :

با استفاده از کاما میتوانیم چند سایه را همزمان بر روی یک متن اعمال کنیم . در مثال زیر ما ابتدا یک سایه یک پیکسلی با رنگ سفید ایجاد کردیم و سپس سایه ای دیگر به رنگ متن که یک حالت سه بعدی برای ما ایجاد میکند.

شما می تونید چندین سایه رو برای یک متن قرار بدید . کافیه این مقادیر ۴ تایی رو با کاما جدا کنید . مثل زیر که دو تا سایه گذاشتیم :

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

 

p.myText { textshadow:1px 1px 0 #fff, 2px 2px 0 #000; }

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

این خاصیت در تمام مرورگر های مطرح ، به جز اینترنت اکسپلورر IE پشتیبانی می شود . قرار است در نسخه ۱۰ IE ، نواقص پشتیانی از CSS 3 و HTML 5 بر طرف شود .

متاسفانه مرورگر اینترنت اکسپلوررIE این استایل text-shadow را تا ورژن ۱۰ ساپورت نمیکند. در مرورگرهایی که text-shadow را ساپورت نمیکنند متن به صورت عادی نمایش داده خواهد شد .

مثال :

برای مثال اگر بخواید برای همه ی پاراگراف های موجود در صفحه ی وب سایه قرار بدید کافیه چنین سلکتور CSS رو داشته باشید .

QR Code For: آموزش text-shadow در css3

درباره ی jizjiz

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.