ویژگی text-shadow در css
ویژگی text-shadow در css سایه دار کردن متن در تگ html
در این مقاله از سایت آموزی به بررسی و تحلیل ویژگی text-shadow در زبان CSS می پردازیم. ویژگی کاربردی text-shadow در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.
معرفی و کاربرد ویژگی text-shadow در زبان طراحی سی اس اس
از خاصیت text-shadow در CSS3 ، برای سایه دار کردن متن و نوشته در صفحات وب استفاده می شود.
به وسیله این خاصیت و به راحتی فقط با نوشتن یک کد ساده می توانید ، افکت تصویری بسیار زیبایی سایه را ، به متون خود اضافه نمایید. کاری که پیش از این به هیچ عنوان در طراحی صفحات وب ممکن نبود.
خاصیت text-shadow به ما امکان تعیین دقیق مشخصات سایه را با پارامترهای خود می دهد.
مقادیر صفت کاربردی text-shadow در زبان طراحی سی اس اس
صفت text-shadow که در زبان طراحی CSS3 معرفی شده است، 7 مقدار می پذیرد که عبارتند از:
- مقدار h-shadow
- مقدار v-shadow
- مقدار blur-radius
- مقدار color
- مقدار none
- مقدار initial
- مقدار inherit
مقدار h-shadow درون خاصیت text-shadow در زبان سی اس اس
اگر خاصیت text-shadow را برای یک عنصر html برابر با مقدار h-shadow قرار دهیم، در حقیقت می خواهیم میزان فاصله سایه از لبه بالایی متن را برحسب واحدهایی مثل px یا pt و… تعیین نماییم.
در واقع مقدار h-shadow که اولین مقدار اجباری در خاصیت text-shadow می باشد، مکان سایه افقی را مشخص می کند.
هر چه این مقدار بزرگتر باشد ، فاصله محل قرار گیری سایه از لبه بالایی متن ( به سمت پایین ) بیشتر می شود.
نکات مهم
- تعیین مقدار h-shadow در خصوصیت text-shadow ، اجباری است.
- امکان مقدار دهی منفی برای مقدار h-shadow نیز وجود دارد.
- چنانچه مقدار h-shadow منفی در نظر گرفته شود ، سایه بالاتر از لبه بالایی متن قرار می گیرد.
ویژگی text-shadow در css سایه دار کردن متن در تگ html
مقدار v-shadow درون خاصیت text-shadow در زبان سی اس اس
اگر خاصیت text-shadow را برای یک عنصر html برابر با مقدار v-shadow قرار دهیم، در حقیقت می خواهیم میزان فاصله سایه از لبه سمت چپ متن را برحسب واحدهایی مثل px یا pt و… تعیین نماییم.
در واقع مقدار v-shadow که دومین مقدار اجباری در خاصیت text-shadow می باشد، مکان سایه عمودی را مشخص می کند.
هر چه این مقدار بزرگتر باشد ، فاصله محل قرار گیری سایه از لبه چپ متن ( به سمت چپ ) بیشتر می شود.
نکات مهم
- تعیین مقدار h-shadow در خصوصیت text-shadow ، اجباری است.
- امکان مقدار دهی منفی برای مقدار h-shadow نیز وجود دارد.
- چنانچه مقدار h-shadow منفی در نظر گرفته شود ، سایه بالاتر از لبه بالایی متن قرار می گیرد.
مقدار blur درون خاصیت text-shadow در زبان سی اس اس
اگر خاصیت text-shadow را برای یک عنصر html برابر با مقدار v-shadow قرار دهیم، در حقیقت می خواهیم اطراف سایه ایجاد شده به صورت مه آلود و تیره در بیاید و به اصطلاح بلور شود.
واحد مقدار blur معمولا برحسب واحد px تعیین می شود ( مثلا 10px )
در واقع مقدار blur که سومین مقدار و مقداری اختیاری در خاصیت text-shadow می باشد، میزان بلور یا کدری سایه را در تگ html مربوطه مشخص می کند.
هر چه این مقدار آن بیشتر باشد ، میزان مه آلودگی و بلور اطراف سایه نیز بیشتر خواهد شد.
نکات مهم
- تعیین مقدار blur در خصوصیت text-shadow ، اختیاری است.
- امکان مقدار دهی منفی برای مقدار blur وجود ندارد.
مقدار color درون خاصیت text-shadow در زبان سی اس اس
اگر خاصیت text-shadow را برای یک عنصر html برابر با مقدار color قرار دهیم، در حقیقت می خواهیم رنگ سایه را در تگ html مورد نظر تعیین نماییم.
نکات مهم
- تعیین مقدار color در خصوصیت text-shadow ، اختیاری است.
- چنانچه رنگ خاصی برای سایه ایجاد شده در تگ html تعیین نکنید، رنگ مشکی به صورت پیش فرض برای سایه تگ html مورد نظر اعمال خواهد شد.
ویژگی text-shadow در css سایه دار کردن متن در تگ html
مقدار initial درون خاصیت text-shadow در زبان css
اگر خاصیت text-shadow را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.
مقدار inherit درون خاصیت text-shadow در زبان سی اس اس
اگر خاصیت text-shadow را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.
بررسی خاصیت text-shadow از نظر نسخه زبان طراحی سی اس اس
ویژگی کاربردی text-shadow در سومین نسخه این زبان طراحی یعنی css3 معرفی شده است.
بررسی ساختاری خصوصیت text-shadow در زبان طراحی سی اس اس
عناوین ساختاری خاصیت text-shadow | وضعیت ساختاری خاصیت text-shadow |
مقدار پیش فرض | auto |
قابلیت توارث | دارد |
قابلیت تحرک | دارد |
ورژن css صفت | CSS3 |
سینتکس صفت در جاوا اسکریپت | "object.style.textJustify="2px 5px 5px red |
پشتیبانی مرورگرهای اینترنتی از خاصیت text-shadow در زبان طراحی سی اس اس
خاصیت css | ![]() | ![]() | ![]() | ![]() | ![]() |
text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.6 |
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
ویژگی text-shadow در css سایه دار کردن متن در تگ html – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید