تبلیغات متنی و بنر

افکت های متن در CSS 3 - خاصیت text-shadow

خاصیت text-shadow :

از خاصیت text-shadow در CSS 3 ، برای سایه دار کردن متن و نوشته در صفحات وب استفاده می شود .
به وسیله این خاصیت و به راحتی فقط با نوشتن یک کد ساده می توانید ، افکت تصویری بسیار زیبایی سایه را ، به متون خود اضافه نمایید . کاری که پیش از به هیچ عنوان در طراحی صفحات وب ممکن نبود .
شکل کلی استفاده از این خاصیت به صورت زیر است :

Syntax text-shadow : h-shadow   v-shadow   blur   color;
مثال : text-shadow : 10px 10px 5px blue ;

خاصیت text-shadow به ما امکان تعیین دقیق مشخصات سایه را با پارامترهای خود می دهد . در جدول زیر به تعریف و نحوه استفاده از پارامترهای این خاصیت می پردازیم :

syntax توضیح هر یک از موارد
توضیح پارامتر
این پارامتر میزان فاصله سایه از لبه بالایی متن را بر حسب مقداری مثل px یا pt تعیین می کند . هر چه این مقدار بیشتر باشد ، فاصله محل قرار گیری سایه از لبه بالایی متن ( به سمت پایین ) بیشتر می شود .
تعیین این پارامتر اجباری است .
نکته : امکان مقدار دهی منفی برای این خاصیت نیز وجود دارد . چنانچه مقدار این خاصیت منفی در نظر گرفته شود ، سایه بالاتر از لبه بالایی متن قرار می گیرد . 		h-shadow
این پارامتر میزان فاصله سایه از لبه سمت چپ متن را بر حسب مقداری مثل px یا pt تعیین می کند . هر چه این مقدار بیشتر باشد ، فاصله محل قرار گیری سایه از لبه سمت چپ متن ( به سمت چپ ) بیشتر می شود .
تعیین این پارامتر اجباری است .
نکته : امکان مقدار دهی منفی برای این خاصیت نیز وجود دارد . چنانچه مقدار این خاصیت منفی در نظر گرفته شود ، سایه در سمت چپ لبه چپ متن قرار می گیرد . 		h-shadow
این پارامتر یک افکت تصویری به سایه داده و باعث می شود اطراف سایه ایجاد شده به صورت مه آلود و تیره در بیاید . مقدار این پارامتر بر حسب واحد px تعیین می شود مثل 10px . هر چه مقدار آن بیشتر باشد ، میزان مه آلودگی اطراف سایه نیز بیشتر خواهد شد .
تعیین این پارامتر اختیاری است .
امکان مقدار دهی منفی برای این پارامتر وجود ندارد . 		blur
این پارامتر رنگ سایه را تعیین می کند .
تعیین این پارامتر اختیاری است . ولی چنانچه رنگ خاصی تعیین نشود ، رنگ سایه مشکی خواهد بود . 		color

پشتیانی در مرورگر های مختلف :

این خاصیت در تمام مرورگر های مطرح ، به جز اینترنت اکسپلورر IE پشتیبانی می شود . قرار است در نسخه 10 IE ، نواقص پشتیانی از CSS 3 و HTML 5 بر طرف شود .


مثال های عملی :

در مثال های عملی زیر سعی می کنیم تا مطالب ارائه شده را در عمل به شما نمایش دهیم .

مثال 1 : در مثال اول یک تگ < h2 > داریم که برای آن یک سایه ایجاد کرده ایم . برای سایه این عنصر ، فقط سه پارامتر های v-shadow , h-shadow و color که تعیین کننده فاصله سایه از عنصر و رنگ آن است را تعیین کرده ایم . در حالت اول مقادیر فاصله مثبت و در حالت دوم منفی در نظر گرفته شده است . به تفاوت ها و پشتیانی مرورگر خود دقت کنید .

Example
حالت 1 حالت 2  
< html >
  < head >
    < style >
      h2
        {
           text-shadow: 10px 10px blue ;
        }
    < /style >
  </head>
<body>
    < h2 >   text-shadow 1 example   < /h2 >
</body>
</html> 		< html >
  < head >
    < style >
      h2
        {
           text-shadow: -10px -10px blue ;
        }
    < /style >
  </head>
<body>
    < h2 >   text-shadow 2 example   < /h2 >
</body>
</html> 		کد

      

   box-shadow 1 example




   box-shadow 2 example



خروجی

مثال 2: در مثال دوم ، مثال اول را بازنویسی کرده ایم با این تفاوت که در حالت 2 برای پارامتر blur نیز مقدار تعیین کرده ایم . مقدار دهی پارامتر blur باعث مه آلوده شدن سایه شده است .

Example
حالت 1 حالت 2  
< html >
  < head >
    < style >
      h2
        {
           text-shadow: 10px 10px blue ;
        }
    < /style >
  </head>
<body>
    < h2 >   text-shadow 1 example   < /h2 >
</body>
</html> 		< html >
  < head >
    < style >
      h2
        {
           text-shadow: 10px 10px 3px blue ;
        }
    < /style >
  </head>
<body>
    < h2 >   text-shadow 2 example   < /h2 >
</body>
</html> 		کد

      

   text-shadow 1 example




   text-shadow 2 example



خروجی

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی

نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :               
آدرس Email :  

نظر شما :  

سوال امنیتی : پایتخت ایران ؟