ایجاد سایه توسط Css برای متن نوشته و Div

دسته بندی:

در گذشته برای سایه دار کردن جعبه و div های html تصویر مربوط به سایه را با استفاده از دستورات css مربوط به تصویر زمینه برای بخش مورد نظر ایجاد می کردند و اصلا چیزی به عنوان سایه متن وجود نداشت اما با آمدن نسخه جدید css قابلیت و خاصیتی به آن افزوده شد تا ایجاد سایه توسط Css برای متن نوشته و Div ها براحتی امکان پذیر شود این خاصیتها box-shadow و text-shadow نام دارند در این مطلب از روناک وب نحوه سایه دار کردن متن و div با استفاده از این خاصیتها را آموزش می دهیم پس تا پایان همراه ما باشید.

ایجاد سایه توسط Css برای متن نوشته و Div

ایجاد سایه توسط Css برای متن نوشته و Div

// سایه دار کردن div با کلاس ronakweb
.ronakweb{box-shadow: 10px 10px 5px #888888;}

// فرمت کلی سایه div
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

// سایه دار کردن متن هدینگ ۱

h1{text-shadow: 2px 2px #ff0000;}

// فرمت کلی سایت متن
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

به توضیح هر یک از مقادیر اختصاص داده شده به خاصیت های سایه نوشته و سایه جعبه یا div می پردازیم:

h-shadow : با تنظیم این گزینه سایه افقی تنظیم می شود مقدار برحسب پیکسل می باشد.
v-shadow : با تنظیم این گزینه سایه عمودی تنظیم می شود مقدار برحسب پیکسل می باشد.
blur : این گزینه برای میزان بلور و شفایفت سایه به کار می رود هرچقدر مقدار آن بیشتر باشد بلور سایه نیز بیشتر می شود.
spread : این پارامتر اندازه سایه را مشخص می کند.
color : برای انتخاب رنگ سایه کاربرد دارد و رنگ سایه را تعیین می کند.
inset : این گزینه سایه را به جای اینکه به بیرون جعبه ، بخش یا div منتشر کند و نمایش دهد به درون div انتقال می دهد.

اکثر خاصیتهای جدید ازجمله text-shadow و box-shadow در نسخه های قدیمی مرورگرها مخصوصا مرورگر ie از نسخه ۹ به پایین کار نمی کنند.

سایتهای آنلاین ایجاد سایه توسط Css برای متن نوشته و Div

یکی از راحت ترین روش های ایجاد سایه برای متن و جعبه div استفاده از سایتهای آنلاین می باشد عموما این سایتها با دریافت مقادیر مورد نیاز سایه تولید شده را نمایش می دهند و در نهایت کدهای مورد نیاز را در اختیار کاربر قرار می دهند، لیست برخی از سایتها در زیر آورده شده اند.

http://css3gen.com/text-shadow

http://www.cssmatic.com/box-shadow

426 بازدید 2 نظر
خیلی خوشم اومد.
به نظر من !!!
  1. کسرا می گه:
    ۱۸:۲۵ مورخه ۰۲ دی ۹۵

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

    • روناک وب می گه:
      ۱۳:۱۷ مورخه ۱۴ دی ۹۵

      سلام دوست عزیز،
      شما میتونید با استایل پیشفرض همه ی متن های پاراگراف سایتتون رو تراز کنید، یا با اختصاصی کردن selector استایل، اون رو به یک قسمت خاص نسبت بدید:

      p { text-align: justify; } 

      کد بالا تمامی پاراگراف های سایت شما رو تراز میکنه.

      موفق باشید.

کد امنیتی: *

با عضوت در خبرنامه ایمیلی جدیدترین مطالب و فیلم های آموزشی را در ایمیل تان دریافت کنید. اعضاء خبرنامه و صفحات اجتماعی روناک وب از امکانات ویژه ای برخوردار خواهند شد !!!