آیا تا به حال احساس ناخوشایندی داشته اید که کپشن های شما با رنگ دکمه ها، پانل ها یا متن با پس زمینه صفحه مطابقت نداشته باشد؟ با استفاده از سایه های CSSاین مشکل را می توان به راحتی با استفاده از ویژگی text-shadow برای بهبود خوانایی و کنتراست متن حل کرد.

در مثال های ارائه شده از سایه های متنی در موقعیت های مختلف استفاده می کنیم که زمینه لازم را در اختیار شما قرار می دهد تا بتوانید خودتان این موضوع را بیشتر مطالعه کنید.

1. راه اندازی اولیه

یک مورد جدید ایجاد کنید فایل HTMLو کد زیر را به آن اضافه کنید HTMLو CSS:

دکمه های CSS

در بخش HTML یک تگ اضافه کنید

با کلاس متن:

گیک های کد وب

برای این عنصر ما یک سایه متن CSS اضافه می کنیم. من ویژگی های اولیه را برای این عنصر تنظیم کردم تا روی صفحه نمایش خوب به نظر برسد:

حال بیایید ویژگی text-shadow را برای متن تنظیم کنیم. اما ابتدا بیایید بفهمیم که این ویژگی چه مقادیری را می گیرد:

متن-سایه: 4px 4px 4px #ccc;

4 پیکسل - افست X ( افقی);
3 پیکسل - افست محور Y ( عمودی);
2px - مقدار تاری؛
#ccc - رنگ.

این به صورت زیر تنظیم می شود:

متن سایه: افقی افست عمودی افست تاری رنگ.

رنگ را می توان با کد هگزادسیمال #ccc یا RGBA (0,0,0,0.3) نشان داد. . در CSS، می‌توانیم یک سایه درونی CSS به متن خود اعمال کنیم:

.text(
اندازه فونت: 5em; /* بزرگتر کردن متن */
text-shadow: 4px 3px 2px #ccc;
}

نمایش مرورگر این متن سایه دار به این صورت خواهد بود:

وب سایت EXAMPLE

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

2. اثر چاپ

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

بدن (
پس زمینه: #222;
}
.text(
اندازه فونت: 5em;
رنگ: rgba(0,0,0,0.6); /* رنگ متن */
text-shadow: 2px 2px 3px rgba(255,255,255,0.1); /* افزودن سایه */
}

با استفاده از کد RGBA می توانید کدورت رنگ را تعیین کنید. توجه داشته باشید که رنگ متن دارای کدورت 60٪ (0.6) و سایه های div CSS دارای کدورت 10٪ (0.1) است.

وب سایت EXAMPLE

3. افکت سایه یکپارچهسازی با سیستمعامل

سایه های یکپارچهسازی با سیستمعامل همیشه نیازی به محو شدن ندارند. به عنوان مثال این سایه یکپارچهسازی با سیستمعامل را در نظر بگیرید:

بدن (
}
.text(
اندازه فونت: 5em;
رنگ سفید؛ /* رنگ متن را به سفید تغییر دهید */
text-shadow: 6px 6px 0px rgba(0,0,0,0.2); /* افزودن سایه یکپارچهسازی با سیستمعامل */
}

وب سایت EXAMPLE

4. افکت سایه دوتایی

جالب اینجاست که می توانید بیش از یک سایه فونت CSS اضافه کنید. این را می توان به صورت زیر انجام داد: text-shadow: shadow1, shadow2, shadow3; بیایید دو سایه اضافه کنیم، یکی با رنگ پس زمینه و دومی کمی تیره تر:

متن (
اندازه فونت: 5em;
text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15); /* دو سایه می دهد */
}

پس زمینه ما سفید است، بنابراین نیازی به رنگ دیگری برای آن نداریم. در مرورگر افکت به صورت زیر خواهد بود:

وب سایت EXAMPLE

5. اثر سایه از راه دور

این افکت بر اساس عملکرد تعریف چندین سایه CSS زیبا است. در زیر می توانید افکت را با چهار سایه با درجات مختلف شدت مشاهده کنید:

بدن (
پس زمینه: #fff3cd; /* تغییر رنگ پس زمینه */
}
.text(
اندازه فونت: 5em;
رنگ سفید؛
text-shadow: 0px 3px 0px #b2a98f,
0px 14px 10px rgba(0,0,0,0.15)
0px 24px 2px rgba(0,0,0,0.1)
0px 34px 30px rgba(0,0,0,0.1);
}

وب سایت EXAMPLE

6. افکت سه بعدی مارک دوتو

بدن (
پس زمینه: #3495c0; /* تغییر رنگ پس زمینه */
}
.text(
اندازه فونت: 5em;
رنگ سفید؛
text-shadow: 0 1px 0 #cccc,
0 2px 0 #c9c9c9،
0 3px 0 #bbb,
0 4px 0 #b9b9b9،
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25)
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}

حالا ببینید این سایه های متن داخلی CSS در مرورگر چگونه به نظر می رسند:

وب سایت EXAMPLE

7. اثر متن برش واقعی گوردون هال

گوردون از جادوی پیشرفته CSS استفاده می کند تا نه تنها یک سایه بیرونی، بلکه یک سایه درونی واقعی نیز ایجاد کند:

بدن (
پس زمینه: #cbcbcb; /* تغییر رنگ پس زمینه */
}
.text(
اندازه فونت: 5em;
رنگ: شفاف؛
پس زمینه رنگ: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
پس زمینه-کلیپ: متن;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

و این باعث ایجاد افکت برش متن می شود.

وب سایت EXAMPLE

8. جلوه درخشش متن

بدن (
پس زمینه: #992d23; /* تغییر رنگ پس زمینه */
}
.text(
اندازه فونت: 5em;
رنگ سفید؛
text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
}

این سایه یک جلوه درخشان برای متن ایجاد می کند:

وب سایت EXAMPLE

9. افکت متن مطرح شده

بدن (
پس زمینه: #629552; /* تغییر رنگ پس زمینه */
}
.text(
اندازه فونت: 5em;
رنگ: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2)
0px -5px 35px rgba(255,255,255,0.3);
}

وب سایت EXAMPLE

10. افکت سایه بلند

این اثر را می توان با استفاده از

رنگ زمینه: rgb(147, 201, 67);
text-shadow: 1px 1px rgb(131, 179, 60), 2px 2px rgb (131, 179, 60), 3px 3px rgb(131, 179, 60), 4px 4px rgb1, 7,5x0, 7,5x6 rgb(131، 179، 60)، 6px 6px rgb(131، 179، 60)، 7px 7px rgb(131، 179، 60)، 8px 8px rgb(131، 179، 60، 139، 19، 1x1 60)، 10 پیکسل 10 پیکسل rgb (131، 179، 60)، 11 پیکسل، 11 پیکسل، rgb (131، 179، 60)، 12 پیکسل، 12 پیکسل، 60، 13 پیکسل، 13 پیکسل، 14، 6، 13 پیکسل rgb (131، 179، 60)، 15px 15px rgb(131، 179، 60)، 16px 16px rgb(131، 179، 60)، 17px 17px rgb(131، 179، 8 px 1،8، 131، 179، 60x1. , 19px 19px rgb (131, 179, 60), 20px 20px rgb (131, 179, 60), 21px 21px rgb (131, 179, 60), 22px 22px , 7,7px1, 23px ( 131، 179، 60)، 24 پیکسل 24 پیکسل rgb (131، 179، 60)، 25 پیکسل 25 پیکسل rgb (131، 179، 60)، 26 پیکسل، 26 پیکسل، rgb (131، 179، 79، 60، 1، 7، 7، 7، 7، 7، 7، 7، 5، 1، 1، 1، 1، 1، 1، 2، 1، 2، 1، 1، 1، 1، 1، 1، 1، 1، 1، 1، 1، 1، 1، 1، 1، 1، 1، 1، 1، 1. ;
رنگ: #eaeaea;

وب سایت EXAMPLE

نتیجه

همانطور که می بینید، استفاده از ویژگی text-shadow بسیار آسان است و می توانید از آن برای ایجاد سایه های CSS خلاقانه خود استفاده کنید.

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

نحو اصلی متن-سایه

این ملک CSS3در تمام آخرین مرورگرها، بدون پیشوندهای فروشنده مانند -moz و -webkit کار می کند. حتی می توان به IE آموزش داد که این ویژگی را درک کند.

Text-shadow: x-offset y-offset blur color;

این تمام نحو اولیه است. اولین مقدار افست افست، دومین مقدار افست عمودی، تاری سایه و رنگ سایه است. بیایید به یک مثال نگاه کنیم:

Text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

سایه را حرکت دادیم، آن را 3 پیکسل تار کردیم و رنگ مشکی را با شفافیت 30 درصد اختصاص دادیم. چرا از کانال آلفا یا شفافیت استفاده می کنم؟ این به شما آزادی بیشتری در اعمالتان می دهد. خیلی سریع معلوم می شود، من آن را توصیه می کنم.

نامه های افسرده

بدنه ( پس‌زمینه: #222; ) #text h1 (رنگ: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1)؛ )

اصل کار در اینجا این است: پس زمینه کمی روشن تر از حروف است، یک سایه روشن با شفافیت جزئی. نتیجه در تصویر است، آن را امتحان کنید.

سایه سخت

text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

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

دو سایه

text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

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

پایین و دور

text-shadow: 0px 3px 0px #b2a98f، 0px 14px 10px rgba(0,0,0,0.15)، 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.15) )

متن حجیم است و به نظر می رسد بالای پس زمینه آویزان است، اینطور نیست؟ در اینجا از 4 سایه با سطوح مختلف تاری و مکان استفاده می کنیم. به طور کلی، هر چه سایه های بیشتری استفاده شود، این اثر را در پروژه های خود در نظر بگیرید.

متن سه بعدی کوچک

text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

مشابه مثال قبلی، سه سایه، اما نزدیک‌تر، از این رو تأثیر سه بعدی و وزن متن را نشان می‌دهد.

متن سه بعدی مارک دوتو

text-shadow: 0 1px 0 #cccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1) 0 5px rgba(0,0,0,.1)، 0 1px 3px rgba(0,0,0,.3)، 0 3px 5px rgba(0,0,0,.2)، 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

من به صورت آنلاین با کار این طراح برخورد کردم و نتوانستم آن را از دست بدهم. رئالیسم چشمگیر

متن تورفتگی توسط گوردون هال

پس زمینه رنگ: #666666; -webkit-background-clip: text; -moz-background-clip: text; پس زمینه-کلیپ: متن; رنگ: شفاف؛ text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

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

درخشش متن

text-shadow: 0px 0px 6px rgba(255,255,255,0.7);

در اینجا نیز همه چیز ساده است - ما سایه را حرکت نمی دهیم، آن را به شدت محو می کنیم و سفید می کنیم. این همه درخشش است.

سبک یکپارچهسازی با سیستمعامل

text-shadow: -10px 10px 0px #00e6e6، -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

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

منابع نوری متعدد

text-shadow: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);

در اینجا اثر چندین منبع نور است که در همه جهات سایه ایجاد می کند.

متن برجسته

رنگ: rgba(0,0,0,0.6); text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

متن افسرده قبلاً وجود داشت، اما اکنون مطرح شده است. یک افکت نسبتاً ساده، اما برای مثال در تیترها بسیار زیبا به نظر می رسد. استفاده کن، امتحان کن

در پایان می خواهم بگویم - ویژگی متن سایه CSS3بسیار ساده، همانطور که قبلاً می بینید. اما استفاده درست از آن و با کمی تخیل می تواند معجزه کند.
آزمایش کنید، روز خوبی داشته باشید

این آموزش چندین تکنیک CSS را برای ایجاد افکت های مختلف برای طرح کلی عناصر معرفی می کند.

با استفاده از رنگ خاکستری در سکته مغزی می توان به یک افکت سایه روشن ساده دست یافت. CSS3 توانایی ایجاد سایه واقعی با استفاده از ویژگی را دارد جعبه-سایه، اما راه ساده در همه مرورگرها کار می کند:

سایه ( بالشتک: 20 پیکسل؛ حاشیه: 1 پیکسل توپر #f0f0f0؛ حاشیه-پایین: 2 پیکسل توپر #cccc؛ -webkit-border-radius: 5px؛ -moz-border-radius: 5px؛ حاشیه-شعاع: 5px؛ )

به دست آوردن اثر بلوک فرورفته نیز بسیار آسان است. افزودن گوشه های گرد CSS3 باعث افزایش اثر می شود:

فشرده شده ( رنگ: #fff؛ بالشتک: 20 پیکسل؛ پس‌زمینه: # 111؛ حاشیه: 1 پیکسل توپر # 000؛ حاشیه سمت راست: 1 پیکسل توپر #353535؛ حاشیه پایین: 1 پیکسل توپر #353535؛ کیت وب-شعاع حاشیه: 5 پیکسل. -moz-border-radius: 5px border-radius: 5px )

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

Img.light ( طرح کلی: 1px توپر #ddd؛ حاشیه بالا: 1px توپر #fff؛ بالشتک: 10px؛ پس‌زمینه: #f0f0f0؛ ) img.dark ( طرح کلی: 1px جامد #111؛ حاشیه بالا: 1px جامد #555; padding: 10px پس زمینه: #333;

این افکت را می توان در منوها یا لیست ها استفاده کرد. این ترکیبی ساده از خطوط بالا و پایین با سایه های مختلف رنگ پس زمینه است. نکته ای که باید در نظر داشته باشید این است که انتخابگرهای فرزند اول و فرزند آخر CSS توسط مرورگرهای قدیمی پشتیبانی نمی شوند. برای دور زدن این وضعیت ناخوشایند می توانید از jQuery استفاده کنید.

# تورفتگی ul( حاشیه: 20 پیکسل 0؛ بالشتک: 0؛ سبک فهرست: هیچ؛ ) # تورفتگی اول لی ( حاشیه بالا: 1 پیکسل توپر #333؛ حاشیه پایین: 1 پیکسل توپر #111؛ ) # فرورفتگی اول لی: اول -child (حاشیه بالا: هیچ؛) #indented ul li:last-child (حاشیه-پایین: هیچ؛) #indented ul li a ( padding: 10px; display: block; color: #fff; text-decoration: none ; ) #indented ul li a:hover (پس زمینه: #111;)

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

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

وظیفه

با استفاده از CSS، بدون استفاده از تصاویر، یک سایه برای متن ایجاد کنید. با این به چه چیزی خواهیم رسید؟

انعطاف پذیری - بدون نیاز به تصاویر، متن به راحتی قابل تغییر است
سرعت - تصاویر کمتر - وزن صفحه کمتر، تماس کمتر با سرور
سئو - متن بهتر از تصاویر بهینه شده است و قابل اعتمادتر از استفاده از تکنیک جایگزین کردن متن با تصویر است.

سایه های متن برای مرورگرهای معمولی

مرورگرهای معمولی شامل تمام مرورگرهای مدرنی هستند که کم و بیش با توصیه های W3C همگام هستند. در این مورد، این مرورگرها ویژگی text-shadow CSS3 را که در سال 2003 توصیه شده بود، درک می کنند.

بنابراین، در اینجا لیستی از مرورگرهایی است که از ویژگی text-shadow پشتیبانی می کنند:

Safari 3.1 (Mac/Win) - پشتیبانی می کند، سایه های متعدد را پشتیبانی نمی کند
Safari 4 (Mac/Win) - به طور کامل پشتیبانی می شود
Opera 9.5+ (Mac/Win/Lin) - به طور کامل پشتیبانی می کند
فایرفاکس 3.1/3.5 (Mac/Win/Lin) - به طور کامل پشتیبانی می کند
Google Chrome 2 (Win) - به طور کامل پشتیبانی می شود
Shiira (Mac) - پشتیبانی می کند، سایه های متعدد را پشتیبانی نمی کند
Konqueror (Lin/Mac/Win) - به طور کامل پشتیبانی می کند
iCab (Mac) - پشتیبانی می کند، سایه های متعدد را پشتیبانی نمی کند
سافاری در آیفون - پشتیبانی می شود، سایه های متعدد پشتیبانی نمی شود
Nokia Symbian-Smartphones (سری 60) - پشتیبانی می کند
Opera Mini 4.1 - پشتیبانی می کند، از تاری سایه پشتیبانی نمی کند

برای این مرورگرها، یک خط CSS برای سایه زدن متن کافی است:

H1 (متن-سایه: 0px 1px 3px #000؛ )

ما این تیتر فانتزی را دریافت می کنیم:

با text-shadow می توانید به انواع افکت های جالب برسید.

متن تار

H1 (رنگ: #fff؛ پس‌زمینه: #666؛ متن-سایه: 0px 0px 3px #fff؛ )

متن تکراری

H1 (متن-سایه: 0px 20px #000؛ )

چندین سایه به شما امکان می دهد چندین اثر دیگر را به دست آورید:

متن درج شده

H1 (پس‌زمینه: #cccc؛ رنگ: #cccc؛ متن-سایه: -1px -1px #666، 1px 1px #FFF؛ خانواده فونت: serif؛ )

متن برجسته

H1 ( پس‌زمینه: #999؛ رنگ: #999؛ متن-سایه: 1px 1px 3px #666، -1px -1px 3px #FFF، 1px 1px #666، -1px -1px #FFF؛ خانواده فونت: سریف؛ )

(IE به شما اجازه نمی دهد از زیبایی اینجا لذت ببرید، زیرا از text-shadow پشتیبانی نمی کند). شما می توانید با استفاده از text-shadow به افکت های مختلف زیادی دست پیدا کنید، تنها محدودیت عملی تخیل شماست.

اکنون در مورد چیز غم انگیز - با IE "مورد علاقه" همه چه باید کرد؟

سایه های متن در IE

اگرچه اینترنت اکسپلورر تا نسخه 8 سایه متن را درک نمی‌کند، اما «زنگ‌ها و سوت‌های» خود را دارد. به طور خاص، یک فیلتر dropShadow() برای ایجاد سایه ها وجود دارد. برای اینکه سایه ها ظاهر شوند، عنصر باید یک مجموعه طرح داشته باشد. شما می توانید به چند روش نصب کنید:

با تنظیم ویژگی های عنصر: block + height() یا width())
دادن عنصر: مطلق
با مشخص کردن: چپ/راست
تنظیم زوم: 1

H1 (filter:progid:DXImageTransform.Microsoft.DropShadow(color="#666666",offX=2,offY=2,positive="true"); زوم: 1;)

به نظر می رسید که می توان فریاد زد "هورا!!!" و از زندگی لذت ببرید، اما ببینید این فیلتر در واقعیت چگونه کار می کند:

اگر فیلتر dropShadow را روی آن اعمال کنید، متن به این صورت ظاهر می شود

برای کسانی که متوجه نمی شوند، در اینجا معایب این فیلتر وجود دارد:

سایه وحشتناک به نظر می رسد: زاویه ای، بدون انتقال صاف به پس زمینه با شفافیت
سبک فونت تحریف شده است
تنظیم سایه عملا غیرممکن است (شما فقط می توانید موقعیت سایه را کنترل کنید) - می توان تا حدی با استفاده از فیلتر سایه به جای dropShadow آن را دور زد، اما دو اشکال اساسی اول باقی می مانند.
وجود اجباری یک طرح تا حدودی توسعه دهنده را محدود می کند

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

کیلیان والخوف استفاده از شبیه سازی سایه را پیشنهاد کرد:

فیلتر را مستقیماً روی متن اعمال نکنید
به جای dropShadow و shadow از ترکیبی از فیلترهای درخشش و تاری استفاده کنید

این کار از تحریف متن جلوگیری می کند و سایه را انعطاف پذیرتر می کند.

سربرگ تستТестовый заголовок

H1 ( text-shadow: 3px 3px 3px #cccccc؛ موقعیت: نسبی؛ زوم: 1؛ رنگ: #000; ) h1 span ( موقعیت: مطلق؛ سمت چپ: -3px؛ بالا: -3px؛ z-index: -1. فیلتر: progid:DXImageTransform.Microsoft.Glow(Color=#cccccc,Strength=1) progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled="true" ; زوم: 1;

اما حتی با این روش، هنوز هم تعدادی از معایب وجود دارد:

کد غیر معنایی یک عنصر اضافی است و حتی با تکرار متن نیز بهترین تاثیر را در ساختار منطقی محتوا و بهینه سازی سئو نخواهد داشت. این مشکل را می توان با استفاده از جاوا اسکریپت حل کرد، که یک عنصر اضافی برای IE در هنگام بارگیری صفحه وارد می کند.
با صفحه نمایش در سایر مرورگرها (که سایه متن را درک می کنند) مطابقت ندارد - فیلترها به شما امکان می دهند سایه را با حداقل تنظیمات شبیه سازی کنید. دستیابی به شباهت سایه با سایر مرورگرها همیشه امکان پذیر نیست
انعطاف‌پذیری کمتر - فیلترها تمام قابلیت‌های text-shadow را ارائه نمی‌کنند، به عنوان مثال، امکان پیاده‌سازی چندین سایه وجود نخواهد داشت.

برای ایجاد سایه برای اینترنت اکسپلورر، می توانید از جاوا اسکریپت استفاده کنید (این اولین باری نیست که جاوا اسکریپت روز را ذخیره می کند)

سایه های متن با استفاده از جاوا اسکریپت

از بین اسکریپت هایی که تست کردم، پلاگین jquery "Drop Shadow" را انتخاب کردم. مزایای آن:

با قرار دادن چندین کانتینر، سایه ها را شبیه سازی می کند. بدون استفاده از فیلتر برای اینترنت اکسپلورر. این امکان ایجاد سایه‌ها در اینترنت اکسپلورر را تا حد امکان به سایر مرورگرها ممکن می‌سازد + بدون نیاز به نگرانی در مورد طرح‌بندی IE.
سایه هایی را نه تنها برای اینترنت اکسپلورر ایجاد می کند، که گاهی اوقات می تواند مفید باشد
اسکریپت سبک است - 4 کیلوبایت (اگر نظرات را از کد حذف کنید)، و اگر فشرده سازی را اعمال کنید، حتی کمتر می شود. برای نوشتن یک اسکریپت الزاماتی وجود دارد - وجود اسکریپت jquery.dimensions.js، اما من هنوز نمی‌دانم چرا به آن نیاز است. سایه ها ایجاد می شوند، حذف می شوند، با شناسه و بدون آن تعریف می شوند.
ساده و واضح برای استفاده
شما می توانید چندین سایه را با موفقیت تقلید کنید

ایرادات:

شما نمی توانید یک اسکریپت را با شناسه عنصر مقداردهی اولیه کنید
اگر به عنصر پس‌زمینه داده شود، سایه نه برای متن، بلکه برای کل عنصر ایجاد می‌شود
گنجاندن اجباری کتابخانه jquery (که بیش از 50 کیلوبایت است). اما محبوبیت جی کوئری عملا این ایراد را برطرف می کند
با توجه به توضیحات اسکریپت، اتصال jquery.dimensions.js (2 کیلوبایت دیگر) نیز مورد نیاز است. اما نمی‌دانم چرا به این کتابخانه نیاز است، به نظر می‌رسد همه چیز بدون آن خوب کار می‌کند

با استفاده از افزونه Drop Shadow

نحو:

JQuery(انتخاب کننده).dropShadow(گزینه ها); // ایجاد سایه روی عنصر jQuery(selector).redrawShadow(); // ترسیم مجدد سایه jQuery(selector).removeShadow(); // حذف سایه jQuery(selector).shadowId(); // شناسه سایه عنصر را برمی گرداند

سمت چپ: [عدد صحیح] (پیش‌فرض = 4) بالا: [عدد صحیح] (پیش‌فرض = 4) تاری: [عدد صحیح] (پیش‌فرض = 2) کدورت: [عدد کسری] (پیش‌فرض = 0.5) رنگ: [رشته] (پیش‌فرض = " سیاه") مبادله: [بولی] (پیش فرض = نادرست)

پارامترهای سمت چپ و بالا مختصات ابتدای سایه نسبت به گوشه سمت چپ بالای برچسب (یا شی) هستند. مقادیر مثبت سایه را به سمت راست و پایین حرکت می دهند، مقادیر منفی سایه را به سمت چپ و بالا می برند.

این ماژول شامل ویژگی های CSS مربوط به استایل متن، مانند خط کشی، سایه های متن و لهجه های متن آسیای شرقی است.

ویژگی های یک ظاهر طراحی شده متن

1. طراحی خط: زیر خط، سکته مغزی و خط

خط‌های زیر خط، ضربه‌ها و خط‌های خط‌دار فقط برای بلوک‌های سطح خط جایگزین نشده (نمایش: درون خطی) نمایش داده می‌شوند و در تمام متن، از جمله فاصله‌های بین کاراکترها و کلمات، به جز تورفتگی در ابتدا و انتهای یک خط، نمایش داده می‌شوند.

مرورگرها ممکن است زیرخط را بشکنند و در جایی که خط با علامت قطع می‌شود حرکت کنند و در هر دو طرف طرح کلی حروف ظاهر شود. هنگامی که مرورگر خط زیر خط یا خط را در مرزهای علامت می شکند، شکل خط روی آن مرز باید با شکل گلیف مطابقت داشته باشد. با این حال، مشخصات روش خاصی را برای "پیروی از شکل" یک علامت نشان نمی دهد و این را به مرورگر واگذار می کند.

برنج. 1. شکستن خط زیر

1.1. نوع خط تزئین: ویژگی متن-دکوراسیون-خط

پشتیبانی از مرورگر

IE: —
حاشیه، غیرمتمرکز: —
فایرفاکس: 36, 35 -moz-
کروم: 57
سافاری: 12.1، 7.1 -webkit-
اپرا: 44
سافاری iOS: 8 -وبکیت-
مرورگر UC برای اندروید: 11.8
کروم برای اندروید: 73
اینترنت سامسونگ: 7.2

ویژگی text-decoration-line تعیین می کند که در صورت وجود چه نوع خطی به عنصر اضافه می شود.

ملک به ارث نمی رسد.

نحو

متن-دکوراسیون-خط: هیچکدام; text-decoration-line: underline; text-decoration-line: overline; text-decoration-line: line-through; text-decoration-line: چشمک زدن; text-decoration-line: underline overline; text-decoration-line: overline underline line-through; text-decoration-line: inherit; text-decoration-line: اولیه;

1.2. سبک خط دکوراسیون: ویژگی متن-دکوراسیون-سبک

پشتیبانی از مرورگر

IE: —
حاشیه، غیرمتمرکز: —
فایرفاکس: 36, 35 -moz-
کروم: 57
سافاری: 12.1، 7.1 -webkit-
اپرا: 44
سافاری iOS: 8 -وبکیت-
مرورگر UC برای اندروید: 11.8
کروم برای اندروید: 73
اینترنت سامسونگ: 7.2

ویژگی text-decoration-style سبک خطوط ترسیم شده برای تزئین متن مشخص شده در عنصر را مشخص می کند. مقادیر همان معنای خاصیت border-style را دارند.

ملک به ارث نمی رسد.

نحو

متن-دکوراسیون-سبک: جامد; text-decoration-style: double; متن-دکوراسیون-سبک: نقطه چین; text-decoration-style: خط تیره; متن-دکوراسیون-سبک: موج دار; text-decoration-style: inherit; متن-دکوراسیون-سبک: اولیه;

1.3. رنگ خط دکوراسیون: ویژگی متن-دکوراسیون-رنگ

پشتیبانی از مرورگر

IE: —
حاشیه، غیرمتمرکز: —
فایرفاکس: 36, 35 -moz-
کروم: 57
سافاری: 12.1، 7.1 -webkit-
اپرا: 44
سافاری iOS: 8 -وبکیت-
مرورگر UC برای اندروید: 11.8
کروم برای اندروید: 73
اینترنت سامسونگ: 7.2

ویژگی text-decoration-color مجموعه رنگ خط دکوراسیون متن را برای یک عنصر با text-decoration-line مشخص می کند.

ملک به ارث نمی رسد.

نحو

متن-تزیین-رنگ: فعلی رنگ; متن-تزیین-رنگ: سالمون; text-decoration-color: #00ff00; متن-تزیین-رنگ: rgba(255, 128, 128, 0.5); متن-تزیین-رنگ: شفاف; متن-دکوراسیون-رنگ: ارث بردن; متن-تزئین-رنگ: اولیه;

1.4. خلاصه ای سریع از ویژگی های یک خط دکوراسیون: ویژگی text-decoration

پشتیبانی از مرورگر

IE: —
حاشیه، غیرمتمرکز: —
فایرفاکس: 36, 35 -moz-
کروم: 57
سافاری: 12.1، 7.1 -webkit-
اپرا: 44
سافاری iOS: 8 -وبکیت-
مرورگر UC برای اندروید: 11.8
کروم برای اندروید: 73
اینترنت سامسونگ: 7.2

ویژگی text-decoration شکل کوتاهی از نوشتن خصوصیات text-decoration-line text-decoration-style text-decoration-color در یک اعلان است. مقادیر از دست رفته به مقادیر اولیه خود تنظیم می شوند. مقدار پیش‌فرض text-decoration: هیچ یک جامد currentColor; . ملک به ارث نمی رسد. با این حال، سبک تمام خطوط متن باید برای یک عنصر یکسان باشد.

1.5. موقعیت خط طراحی: ویژگی text-underline-position

پشتیبانی از مرورگر

IE: —
حاشیه، غیرمتمرکز: 12
فایرفاکس: —
کروم: 71
سافاری: —
اپرا: —
سافاری iOS: —
مرورگر UC برای اندروید: ?
کروم برای اندروید: 71
اینترنت سامسونگ: —

ویژگی text-underline-position موقعیت زیرخط مشخص شده در عنصر را تعیین می کند.

ملک موروثی است.


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

نحو

متن-زیرخط-موقعیت: خودکار; text-underline-position: under; text-underline-position: چپ; text-underline-position: right; text-underline-position: under left; text-underline-position: under right; text-underline-position: inherit; text-underline-position: initial; برنج. 2. در حالت تایپوگرافی عمودی با استفاده از مقادیر چپ و راست، زیر متن در دو طرف خط بکشید

2. Text shadow: ویژگی text-shadow

پشتیبانی از مرورگر

IE: 10
حاشیه، غیرمتمرکز: 12
فایرفاکس: 3.5
کروم: 4
سافاری: 4
اپرا: 10
سافاری iOS: 3.2
مرورگر UC برای اندروید: 11.8
کروم برای اندروید: 73
اینترنت سامسونگ: 4

ویژگی text-shadow برای افزودن سایه به متن استفاده می شود. سایه متن ابزار جالبی است که به شما امکان ایجاد افکت های شگفت انگیز را می دهد. سایه ها می توانند تک یا چند لایه، تار، رنگی یا شفاف باشند. هنگام تعیین سایه برای یک عنصر، می‌توانید تنها یک طول و رنگ را مشخص کنید و در نتیجه یک کپی رنگی از یک کاراکتر یا کلمه ایجاد کنید. همچنین اگر کنتراست بین رنگ متن و پس‌زمینه کم باشد، استفاده از سایه می‌تواند متن را خواناتر کند.

هر سایه هم بر روی خود متن و هم برای عناصر طراحی آن اعمال می شود (ویژگی تزیین متن). شما می توانید چندین سایه را به طور همزمان مشخص کنید و آنها را با کاما از هم جدا کنید. سایه ها روی یکدیگر همپوشانی دارند، اما روی خود متن همپوشانی ندارند. سایه اول همیشه در بالای سایه های دیگر قرار دارد. ملک موروثی است.

هر سایه با دو یا سه طول و یک رنگ اختیاری تعریف می شود. طول های مجاز 0 هستند.

ملک به ارث نمی رسد.

برنج. 3. نحو ویژگی متن سایه

سایه متن
ارزش های:
x-offset	افست افقی سایه را تنظیم می کند. یک مقدار مثبت یک افست سایه را در سمت راست متن ترسیم می کند، یک طول منفی یک سایه را به سمت چپ می کشد.
y-offset	افست عمودی سایه را تنظیم می کند. مقدار مثبت سایه را به سمت پایین و مقدار منفی سایه را به سمت بالا حرکت می دهد.
تاری	شعاع تاری را تنظیم می کند. مقادیر منفی مجاز نیستند. اگر مقدار تاری صفر باشد، لبه سایه تیز است. در غیر این صورت، هر چه مقدار بیشتر باشد، لبه سایه تارتر می شود.
رنگ	سایه ها را تنظیم می کند. در صورت عدم وجود رنگ، رنگ مورد استفاده از ویژگی color گرفته می شود.
هیچ یک	مقدار پیش فرض به معنای عدم سایه متن است. سایه یک عنصر را از گروهی از عناصر با ویژگی مشخص شده حذف می کند.
اولیه	مقدار ویژگی را به مقدار پیش فرض تنظیم می کند.
به ارث می برند	مقدار ویژگی را از عنصر والد به ارث می برد.

بر خلاف box-shadow، سایه‌های متن بریده نمی‌شوند و اگر متن تا حدی شفاف باشد، ممکن است ظاهر شوند. مانند box-shadow، سایه‌های متن روی طرح‌بندی تأثیر نمی‌گذارند و باعث افزایش پیمایش یا اندازه ناحیه قابل پیمایش نمی‌شوند.

نحو

متن-سایه: 2px 2px 4px صورتی. text-shadow: #fc0 1px 0 10px; text-shadow: 5px 5px #4D4644; text-shadow: آبی 2px 5px; text-shadow: 5px 10px; text-shadow: ارث بردن; text-shadow: اولیه;

2.1. نمونه های سایه متن

سایه پوستر

سایه متن

Text-shadow-1 ( پس‌زمینه: #77F7DE؛ رنگ: سفید؛ متن-سایه: -2px -2px 0 #4D4644, 2px -2px 0 #4D4644, -2px 2px 0 #4D4644, 2px 2px 0 #4D4644 سفید، 5px 5px 0 سفید، 6px 6px 0 سفید فاصله: 0.1em )

سایه سه بعدی

سایه متن

Text-shadow-2 ( پس‌زمینه: linear-gradient(-45deg, #FEE864, #F5965E)؛ رنگ: #f4f4f4؛ text-shadow: -1px -1px سفید، 1px 1px خاکستری، 2px 2px #7a7a7a، 3px 3px #7a7a75 , 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px 25x1, 57075 1px #4d4d4d، 18px 18px 30px rgba(0, 0, 0، 0.4)، 18px 18px 10px rgba(0، 0، 0، 0.4)

سایه-متن

سایه متن

Text-shadow-3 ( پس‌زمینه: #FFE6DB؛ رنگ: #FFE6DB؛ فاصله حروف: 0.1em؛ متن-سایه: 3px 0 rgba(250، 111، 142، 0.5)، 6px 0 rgba(250، 111، 142 ، .4)، 9px 0 rgba(250، 111، 142، 0.3)، 12px 0 rgba(250، 111، 142، 0.2)، 15px 0 rgba(250، 111، 142، 0.1);

سایه یکپارچهسازی با سیستمعامل

سایه متن

Text-shadow-4 (رنگ: #FB631E؛ فاصله حروف: 0.1em؛ متن-سایه: 4px 4px سفید، 6px 6px #D7CC88؛ )

سایه لایه ای

سایه متن

Text-shadow-5 (پس‌زمینه: #f1f1f1؛ رنگ: #fcc105؛ فاصله حروف: 0.1em؛ متن-سایه: 4px 4px #ff981d، 7px 7px rgba(200، 120، 22، .2)؛ )

نمونه های سایه متن CSS: چندین تکنیک برای اثرات مختلف سکته مغزی

1. راه اندازی اولیه

با کلاس متن:

گیک های کد وب

2. اثر چاپ

3. افکت سایه یکپارچهسازی با سیستمعامل

4. افکت سایه دوتایی

5. اثر سایه از راه دور

6. افکت سه بعدی مارک دوتو

7. اثر متن برش واقعی گوردون هال

8. جلوه درخشش متن

9. افکت متن مطرح شده

10. افکت سایه بلند

نتیجه

نحو اصلی متن-سایه

نامه های افسرده

سایه سخت

دو سایه

پایین و دور

متن سه بعدی کوچک

متن سه بعدی مارک دوتو

متن تورفتگی توسط گوردون هال

درخشش متن

سبک یکپارچهسازی با سیستمعامل

منابع نوری متعدد

متن برجسته

وظیفه

سایه های متن برای مرورگرهای معمولی

متن تار

متن تکراری

متن درج شده

متن برجسته

سایه های متن در IE

سربرگ تستТестовый заголовок

سایه های متن با استفاده از جاوا اسکریپت

با استفاده از افزونه Drop Shadow

ویژگی های یک ظاهر طراحی شده متن

1. طراحی خط: زیر خط، سکته مغزی و خط

1.1. نوع خط تزئین: ویژگی متن-دکوراسیون-خط

پشتیبانی از مرورگر

1.2. سبک خط دکوراسیون: ویژگی متن-دکوراسیون-سبک

پشتیبانی از مرورگر

1.3. رنگ خط دکوراسیون: ویژگی متن-دکوراسیون-رنگ

پشتیبانی از مرورگر

1.4. خلاصه ای سریع از ویژگی های یک خط دکوراسیون: ویژگی text-decoration

پشتیبانی از مرورگر

1.5. موقعیت خط طراحی: ویژگی text-underline-position

پشتیبانی از مرورگر

2. Text shadow: ویژگی text-shadow

پشتیبانی از مرورگر

2.1. نمونه های سایه متن

سایه پوستر

سایه سه بعدی

سایه-متن

سایه یکپارچهسازی با سیستمعامل

سایه لایه ای