افکت سایه متن در css

افکت سایه متن در css

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

افکت سایه متن در css افکت سایه متن در css افکت سایه متن در css Text shadow effect in css

افکت سایه متن در css

برای دستیابی به نمونه های ایجاد شده در این آموزش ، کافیست دستور نوشته شده را در دستورات CSS خود کپی کنید . به یاد داشته باشید مرورگرهای Chrome ، Safari ، Firefox و IE9 از دستورات سایه پشتیبانی میکنند .

 

افکت سایه متن در css افکت سایه متن در css افکت سایه متن در css image

افکت سایه متن در css

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

افکت سایه متن در css افکت سایه متن در css افکت سایه متن در css Text shadow effect in css 1 themeina

افکت سایه متن در css

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

خصوصیت box-shadow به متن سایه می دهد.در حالت ساده، شما تنها سایه افقی (۲ پیکسل) و سایه عمودی (۲ پیکسل) را مشخص می کنید:

افکت سایه متن در css افکت سایه متن در css افکت سایه متن در css 1

افکت سایه متن در css

سپس، یک رنگ به سایه اضافه کنید

افکت سایه متن در css افکت سایه متن در css افکت سایه متن در css 2

افکت سایه متن در css

 

سپس، یک افکت تاری  به سایه اضافه کنید

افکت سایه متن در css افکت سایه متن در css افکت سایه متن در css 3

افکت سایه متن در css

مثال زیر یک متن سفید با سایه تیره را نشان میدهد:

افکت سایه متن در css افکت سایه متن در css افکت سایه متن در css 4

افکت سایه متن در css

خصوصیت box-shadow css3

خصوصیت box-shadow روی عناصر عمل می کند. در حالت ساده، شما تنها سایه افقی و سایه عمودی را مشخصمی کنید:

افکت سایه متن در css افکت سایه متن در css افکت سایه متن در css 7

افکت سایه متن در css

 سپس یک رنگ به سایه اضافه کنید:

 

افکت سایه متن در css افکت سایه متن در css افکت سایه متن در css 10

افکت سایه متن در css

همچنین شما برای ایجاد یک افکت جالب می توانید سایه ها را به شبه کلاس های before:: و  after:: اضافه کنید:
 
آموزش CSS آموزش طراحی وب

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