آموزش سایه دادن به نوشته با CSS

wpmen.ir-shadow-text

سلام دوستان امروز میخوام نحوه سایه دادن به متن رو با استفاده از CSS  بهتون آموزش بدم پس با ما همراه باشید.

برای اینکه به یک نوشته سایه داده بشه کافی از خاصیت text-shdow استفاده بشه همونطور که در کد زیر میبینید به سادکی میشه با دادن این خاصیت به  هر متنی که دلتون میخواد سایه بدید و اگر یکم ذکات به خرج بدید میتونید ی حالت سه بعدی نیز ایجاد کنید. به کد زیر دقت کنید

<!DOCTYPE html>
<html>
<head>
	<title>Shadow</title>
	<meta charset="utf-8">
	<style type="text/css">

		.box-text {
			font-size: 62px;
			text-align: center;
			width: 100%;
			padding-top: 10%;
			text-shadow: 25px 25px 17px;
			font-weight: bold;
			font-family: cursive;
			color: rgba(0, 0, 0, 0.65);
		}
		
	</style>
</head>
<body>
	
	<div  class="box-text">
		wpmen.ir <br>
		مردان وردپرس
	</div>

</body>
</html>

ما در این کد اومدیم از یک div استفاده کردیم و یک سری خاصیت با استفاده از css  به اون دادیم که یکی از اون ها همون text-shadow هستش که سایه رو ایجاد کرد.

اما خاصیت text-shadow چه تنظیماتی داره و اینکه چه مرورگر هایی این خاصیت رو پشتیبانی می کنن:

یک نمونه ساده :

p {
    text-shadow: 2px 2px 8px #FF0000;
}

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

مرورگر Chrome EDGE IE Firefox Safari Opera
نسخه ۴.۰+ ۱۲.۰+ ۱۰.۰+ ۳.۵+ ۴.۰+ ۹.۶+

منبع :‌ مردان وردپرس

تاریخ آخرین بروزرسانی : ۵ بهمن ۱۳۹۴
صادق مهدی لو

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

ارسال نظر

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.