.

.

آموزش سایه‌دار کردن متن در CSS3

حتما تا به حال در دنیای وب نوشته هایی را دیده اید که سایه دار هستند و زیبایی خاصی به بعضی کلمات میدهند.(ازجمله همین وبلاگ) ما در این آموزش میخواهیم به شما نشان دهیم که چگونه میتوان این جلوه را با استفاده از سی اس اس آنرا ایجاد کنید و آن را در سایت یا وبلاگ خوداستفاده کنید. برای این کار باید از تکنیک text shadow در css3 استفاده کرد.

بعنوان مثال فرمت کلی دستور بشکل زیر است.


text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);    <=format dastor

   نایت اسکین

 ۱-عدد اول این کد یعنیh-shadow)4px): مربوط به درجه قرار گیری سایه در جهت افقی می باشد. اگر عدد – (منفی) در کنار این عدد قرار دهید سایه مورد نظر به سمت چپ نوشته هدایت میشود وهر چه عدد بزرگتر باشد سایه از متن اصلی در جهت افقی دورتر میشود.

عدد دوم v-shadow) 4px): مربوط به درجه قرار گیری سایه در جهت عمودی میباشد. اگر عدد – ( منفی) در کنار این اعداد قرار دهید سایه مورد نظر به بالای متن هدایت میشود. هر چه عدد بزرگتر باشد سایه از متن اصلی در جهت عمودی دورتر میشود.

۲-عدد سوم یعنی ۲px میزان تار بودن و پخش شدن (blur) سایه را مشخص میکند هر چه عدد بزرگتر باشد، سایه تار تر و پخش تر میشود و هرچه عدد کوچکتری انتخاب کنید(مثلا ۰) سایه پر رنگ و واضع تر نمایش داده میشود

۳- (rgba(150, 150, 150, 1 مربوط به رنگ سایه مورد نظر میباشد

برای بدست آوردن رنگ مورد نظر شما باید آشنایی با کد های rgb داشته باشید، این کد ها را میتوان در بخش رنگ نرم افزار فتوشاپ نیز به دست آورد و در اینجا به کار برد. با این حال من در اینجا تعدادی از رنگ های پر کاربرد همراه با کد رنگ rgb آن ها را نوشته ام:

رنگ قرمز:۲۵۵,۴۵,۳۸

رنگ آبی:۰,۷۵,۲۵۵

رنگ سایه:۰,۰,۰

رنگ سفید:۲۵۵,۲۵۵,۲۵۵

شما میتوانید عدد های بالا را به جای اعداد (rgba(150, 150, 150, 1 که مربوط به رنگ سایه هستند استفاده کنید

همچنین اگر میخواهید ساده تر رنگ مورد نظر را تغییر دهید کافیست به جای کد (rgba(150, 150, 150, 1 اسم رنگ مورد نظر خود را بنویسید

به طور مثال:red (قرمز)،blue (آبی)،black (سیاه)، white (سفید) و…

البته با استفاده از دستور  color: name Rang ya code Rang; می توان بجای تابع فوق استفاده کرد

۳-مقدار ۱ انتهایی کد: این مقدار برای میزان پدیدار بودن سایه به کار میرود (opacity) و عدد آن باید از ۱ تا ۰ تنظیم شود.عدد ۱ به معنای دیداری کامل سایه و کوچکتر از ۱ مثلا ۰ یا ۰.۲ برای کم رنگ شدن سایه به کار میرود.

چگونه میتوان از این کد در وبسایت یا وبلاگ استفاده کرد؟


برای نوشتن دستورات CSS در یک وب سایت سه روش وجود دارد:

  1. External Style Sheet : شیوه نامه خارجی
  2. Internal Style Sheet : شیوه نامه داخلی
  3. Inline Style : شیوه درون خطی


External Style Sheet

در این روش تمامی دستورات CSS در یک فایل مجزا از دیگر فایل ها و صفحات وب سایت نوشته میشود و با فرمت .css در کنار دیگر فایل های وب سایت در فولدر پروژه ذخیره میشود. سپس در هر صفحه ای که می خواهیم این دستورات بر عناصر آن اعمال شوند، به بخش <head> رفته و توسط تگ <link> فایل css خود را به صفحه متصل میکنیم:

این روش بهترین روش برای وب سایت های چند صفحه ای و بزرگ امروزی است چراکه می توان یکبار نوشت و به هر تعداد صفحه که نیاز است اعمال کرد. همچنین در صورت نیاز به تغییر در ظاهر سایت کافیست به یک فایل مراجعه کرده و تغییرات را به کل سایت اعمال کرد. این فایل های CSS را می توان توسط هر برنامه ویرایش متنی نوشت و در پایان آن را با فرمت .css ذخیره کرد. برنامه هایی مثل notepad، DreamWeaver، Visual Studio و هر برنامه ای که با آن احساس راحتی بیشتری دارید برای این منظور قابل استفاده هستند. فراموش نکنید فایل های CSS فقط حاوی دستورات CSS هتند و هیچ کد و تگی از HTML در آنها نباید نوشته شود. در زیر یک نمونه از فایل CSS را مشاهده میکنید که کافیست ان را در یک فایل notepad نوشته و با فرمت .css ذخیره کنید:





hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}


Internal Style Sheet

این روش نوشتن دستورات باید زمانی استفاده شود که قصد دارید یک سری استایل ها را فقط بر روی یک صفحه خاص اعمال کنید و عناصر صفحه مورد نظر با عناصر سایر صفحات وب سایت ظاهر متفاوتی دارد. برای استفاده از این روش به صفحه مورد نظر رفته و دستورات مورد نظر را در بین تگ <style> می نویسیم:








<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Inline Style

با استفاده از این روش بسیاری از مزیت ها و ویژگی هایی که CSS بخاطر آنها به وجود آمد را از دست میدهید. چراکه برای هر عنصر باید دستورات مختص آن را بنویسید و بدیهی است که برای تغییر باید به تک تک عناصر مراجعه کرده و آنها را تغییر دهید که بسیار زمانبر و گاهی همراه با خطا خواهد بود. همچنین باعث افزایش حجم صفحات و در نتیجه کاهش سرعت بارگزاری خواهد شد. در ضمن کدها پیچیده، شلوغ و ناخوانا خواهد شد. پس باید در استفاده از آنها صرفه جویی کنید!

برای استفاده از این روش باید به عنصر مورد نظر صفت Style را افزوده و سپس خاصیت ها و مقدارها را به این صفت اضافه کنید. در مثال زیر از همین روش برای تغییر رنگ متن پاراگراف استفاده میکنیم:



<p style="color:yellow;">This is a paragraph.</p>

یک نمونه دیگر:


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

 <h3> <span  style=" color: blue; text-shadow: 0px 0px 8px;"><strong><font size="2">matne morede nazar </font></span></h3>

سایه‌دار کردن متن در CSS3 آموزش css3 سایت های خبری سایت های دینی مذهبی سایت های سلامت تغذیه و پزشکی سایت های نرم افزاری آموزش رایانه arj44
Arj44 جمعه 22 اسفند 1393 ساعت 19:03
نظرات 0 + ارسال نظر
امکان ثبت نظر جدید برای این مطلب وجود ندارد.