منبع مطلب : وب سایت خیلی معرکه http://www.entheosweb.com
دستور text-shadow
مرورگر ie  از این ویژگی پشتیبانی نمی کند
روش استفاده از این دستور :
 text-shadow:(x-offset) (y-offset) (blur-radius) (color)

 پارامتر X-OFFSET :

محل قرار گیری گوشه بالا سمت چپ سایه نسبت به خود متن در راستای محور X است می تواند مقادیر مثبت و منفی باشد

 پارامتر (y-offset) :

محل قرار گیری گوشه بالا سمت چپ سایه نسبت به خود متن در راستای محو Y است می تواند مقادیر مثبت و منفی باشد

 پارامتر (blur-radius) :

میزان پراکندگی یا محو شدگی سایه در اطراف متن است

 پارامتر COLOR :

رنگ سایه است

 

 مثال 1 :

p{

text-shadow:-3px -5px 4px #fe2192;

}

this is a test

 مثال 2 :

متن دلخواهی را با چندین سایه نمایش دهید .

برای این کار بعد از هر سایه علامت ویرگول گذاشته و سایه بعدی را بنویسید

 

p{

text-shadow: 0 6px 4px #85c226,

                   -3px -5px 4px #fe2192,

                    3px -5px 4px #f7c200;

}

 
CSS Text Effects
 

 مثال 3 :

ایجاد متن دوتایی . برای انجام این کار کافی است سایه را بدون محو شدگی نمایش دهید یعی میزان محو شدگی صفر باشد

 p{

text-shadow:0px -15px 0 #fe2192;

}

 this is a test

 

 مثال 4 :

ایجاد متن با جلوه نئون

کافی است رنگ متن و سایه و میزان محو شدگی را به درستی تنظیم کنیم

 p{
text-shadow: 0 0 7px #1E90FF;
background:#000000;
color: #1E90FF;
}

 

 this is a test

 

 

 مثال 5 :

ایجاد متن با جلوه فرورفتگی خاکستری

رنگ زمینه و رنگ متن را مثل هم و خاکستری می کنیم به رنگ

#CCCCCC

و برای سایه از دو رنگ خاکستری تیره به شماره 666666 و سفید به شماره FFFFFF استفاده می کنیم

p{

background: #CCCCCC;

color: #CCCCCC;

text-shadow: -1px -1px 3px #666666,

                     1px 1px 3px #FFFFFF;

}

 

 this is a test

 

 

 مثال 6 :

مثال قبل را به روشی دیگر انجام می دهیم

p{

background: #CCCCCC;

color: #CCCCCC;

text-shadow: 1px 1px 3px #666666,

-1px -1px 3px #FFFFFF;

}

 

 this is a test

 

 

 مثال 7 :

قرار دادن یک عکس درون متن

می خواهیم تصویر زیر را دورن متن قرار دهیم

 

 برای این کار ابتدا درون تگ div متن مورد نظر را می نویسیم به رنگ قرمز و ضخیم و به حالت ثابت در محلش

 

 div{

position:relative;

font-weight: bold;

color:red;

background: #000;

font-size: xx-large;

text-align:center;

width:250px;

height:40px;

{


width و height برای مشخص نمودن عرض و ارتفاع تگ div است 

 

this is a test

 
سپس بعد از تگ دایو بسته ، تگ مربوط به تصویر روی متن را می نویسیم مثلا تگ p
 p{
    position:absolute;
    display:block;
    top:0;
    left:0;
    height:250px;
    width:40px;
   
    background:url('images/glossy.png');
}

 عرض و ارتفاع تگ p باید به اندازه تگ دایو باشد

با top , left می گیم که تگ p درست در گوشه بالا سمت چپ دایو قرار بگیره

با

    position:absolute;

می گیم که بشه جای تگ p رو عوض کرد و اونو رو یه تگ دیگه انداخت

تصویر زمینه تگ p رو هم که مشخص کردیم

حالا تصویر زمینه تگ p روی متن تگ دایو دیده میشه

 
this is a test