افکت دادن به متن با css

افکت دادن به متن با css

CSS3 امکانات زیادی را برای طراحان وب سایت ها به ارمغان آورد . از آن جمله انداختن سایه برای متن در صفحات وب می باشد که طراحان را از بسیاری کارهای اضافی در نرم افزارهای طراحی مانند فتوشاپ بی نیاز می کند . به کمک دستورات سایه در CSS3 شما می توانید به سادگی به متن خود عمق و ابعاد دهید و یا آنها را به شکل برجسته و یا خارج از صفحه نشان دهید . توسط پارامترهایی که دستور سایه در CSS3 در اختیار شما قرار میدهد ، میتوانید متون بسیاری را با جلوه های بصری زیبا ایجاد کنید . فقط کافیست پارامترهای Color ، Offset و Blur را تغییر دهید تا به نتایج جدید دست یابید .

افکت دادن به متن با css افکت دادن به متن با css افکت دادن به متن با css Effects on the text css 3

افکت دادن به متن با css

css3 چند ویژگی جدید برای نوشته ھای زیبای شما دارد که اصطلاحا به آن Text Effect در CSS3 می گویند.

Text Effect در CSS3 شامل دو ویژگی می باشد که در این مطلب به آنها می پردازیم :

  • text-shadow
  • word-wrap

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

  • اینترنت اکسپلورر ھنوز از text-shadow پشتیبانی نمی کند.
  • فایرفاکس ، کروم ، سافاری و اپرا از این ویژگی پشتیبانی میکنند .
  • تمامی مرورگر ھای شناخته شده از word-wrap پشتیبانی می کنند.

دادن افکت به متن با شی canvas :

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

  • خاصیت font : این خاصیت ویژگی های مختلف متن مثل اندازه ، نوع قلم و … را مشخص می کند ،
  • ( fillText ( text ,  x , y : این متد متن نوشته مورد نظر برای قرار دادن در شکل و مختصات محل قرار گیری آن را بر روی شکل تعیین می کند .
    x : این پارامتر ، فاصله متن از لبه سمت چپی شکل را تعیین می کند .
    y : این پارامتر ، فاصله متن از لبه سمت بالایی شکل را تعیین می کند .

مثال : در مثال زیر به وسیله خاصیت فونت و متد ( ) fillText ، متن مورد نظرمان را در یک شکل مستطیل قرار داده ایم :

متد دیگری که می توان از آن برای قرار دادن یک متن در اشکال گرافیکی استفاده نمود ، متد ( ) strokeText است . در این بخش قصد داریم تا نحوه کار با این متد را نمایش دهیم :

  • خاصیت font : این خاصیت ویژگی های مختلف متن مثل اندازه ، نوع قلم و … را مشخص می کند ،
  • ( strokeText ( text ,  x , y : این متد متن نوشته مورد نظر برای قرار دادن در شکل و مختصات محل قرار گیری آن را بر روی شکل تعیین می کند . همچنین می توان یک جلوه تصویری را به متن داد .
    x : این پارامتر ، فاصله متن از لبه سمت چپی شکل را تعیین می کند .
    y : این پارامتر ، فاصله متن از لبه سمت بالایی شکل را تعیین می کند .

مثال : در مثال زیر به وسیله خاصیت فونت و متد ( ) strokeText ، متن مورد نظرمان را در یک شکل مستطیل قرار داده ایم :

 

شرح دستور Text-Shadow و پارامترهای آن

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

افکت دادن به متن با css افکت دادن به متن با css افکت دادن به متن با css image

افکت دادن به متن با css

X-Offest و Y-Offset برای تعیین موقعیت سایه نسبت به متن در محور افقی و عمودی به کار گرفته می شود . از Blur برای محوکردن سایه استفاده می شود و رنگ سایه توسط Color مشخص می شود. شما میتوانید چندین سایه برای یک متن ایجاد کنید .

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

 توضیح هر یک از موارد
توضیح پارامتر
این پارامتر میزان فاصله سایه از لبه بالایی متن را بر حسب مقداری مثل px یا pt تعیین می کند . هر چه این مقدار بیشتر باشد ، فاصله محل قرار گیری سایه از لبه بالایی متن ( به سمت پایین ) بیشتر می شود .
تعیین این پارامتر اجباری است .
نکته : امکان مقدار دهی منفی برای این خاصیت نیز وجود دارد . چنانچه مقدار این خاصیت منفی در نظر گرفته شود ، سایه بالاتر از لبه بالایی متن قرار می گیرد .
h-shadow
این پارامتر میزان فاصله سایه از لبه سمت چپ متن را بر حسب مقداری مثل px یا pt تعیین می کند . هر چه این مقدار بیشتر باشد ، فاصله محل قرار گیری سایه از لبه سمت چپ متن ( به سمت چپ ) بیشتر می شود .
تعیین این پارامتر اجباری است .
نکته : امکان مقدار دهی منفی برای این خاصیت نیز وجود دارد . چنانچه مقدار این خاصیت منفی در نظر گرفته شود ، سایه در سمت چپ لبه چپ متن قرار می گیرد .
h-shadow
این پارامتر یک افکت تصویری به سایه داده و باعث می شود اطراف سایه ایجاد شده به صورت مه آلود و تیره در بیاید . مقدار این پارامتر بر حسب واحد px تعیین می شود مثل ۱۰px . هر چه مقدار آن بیشتر باشد ، میزان مه آلودگی اطراف سایه نیز بیشتر خواهد شد .
تعیین این پارامتر اختیاری است .
امکان مقدار دهی منفی برای این پارامتر وجود ندارد .
blur
این پارامتر رنگ سایه را تعیین می کند .
تعیین این پارامتر اختیاری است . ولی چنانچه رنگ خاصی تعیین نشود ، رنگ سایه مشکی خواهد بود .

 

ویژگی word-wrapping در css3

وقتی یک نوشته از میزان تعیین شده عرض آن بیشتر باشد از آن بیرون می زند :

افکت دادن به متن با css افکت دادن به متن با css افکت دادن به متن با css word wrapping

افکت دادن به متن با css

با استفاده از سی اس اس ۳ و ویژگی word-wrapping میتوانید لغت بسیار بلند را مجبور کنید که کوتاه شود و به خط بعدی برود :

word-wrapping1 افکت دادن به متن با css افکت دادن به متن با css word wrapping1

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

 

آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید