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

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

وظیفه

با استفاده از 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 آن را دور زد، اما دو اشکال اساسی اول باقی می مانند.
• وجود اجباری یک طرح تا حدودی توسعه دهنده را محدود می کند

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

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

1. فیلتر را مستقیماً روی متن اعمال نکنید
2. به جای 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) رنگ: [رشته] (پیش‌فرض = " سیاه") swap: [بولی] (پیش فرض = نادرست)

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

ویژگی text-shadow CSS وظیفه تنظیم سایه متن را بر عهده دارد. بسیار شبیه به ویژگی box-shadow است.

CSS text-shadow syntax

text-shadow : X Y R رنگ ;

• X - تغییر سایه نسبت به متن در امتداد محور X (اغلب در پیکسل های px تنظیم می شود).
• Y - تغییر سایه نسبت به متن در امتداد محور Y (اغلب در پیکسل های px تنظیم می شود).
• R - شعاع سایه (اغلب در پیکسل های px مشخص می شود).
• رنگ - رنگ (در هر قالبی قابل تعیین است، نام رنگ های html را ببینید)

سینتکس text-shadow اجازه می دهد تا چندین سایه مشخص شود که با کاما از هم جدا شوند. مثلا

text-shadow : X1 Y1 R1 color1 , X2 Y2 R2 color2 , ...;

اولویت سایه (که بالاتر است، که کمتر است) به نسخه خاص CSS بستگی دارد. در CSS3، اولین سایه در لیست در بالا و آخرین سایه در لیست در پایین ترین قسمت قرار می گیرد. در CSS2 برعکس است.

مثال: نحوه ایجاد سایه برای متن در html

مثال شماره 1. سایه ساده برای متن در html

در زیر ساده ترین مثال با سایه متن است. در اینجا ما هر دو افست (X و Y) را اعمال کرده ایم و همچنین یک شعاع تاری ایجاد کرده ایم.

Текст с тенью

Текст с тенью

Пример №2. Фиксированная или жесткая тень у текста в html

Ниже представлены два примера. Тень в обоих случаях одинаковая (фиксированная), т.е. без размытия. Обратите внимание, какой эффект создается, если текст будет на черном фоне.

Фиксированная или жесткая тень

Фиксированная или жесткая тень с фоном

На странице преобразуется в следующее

Фиксированная или жесткая тень

Фиксированная или жесткая тень с фоном

Пример №3. Двойная тень у текста в html

Двойная тень

На странице преобразуется в следующее

Двойная тень

Пример №4. Вдавленные буквы у текста в html

Вдавленные буквы - вариант 1

Вдавленные буквы - вариант 2

На странице преобразуется в следующее

Вдавленные буквы - вариант 1

Вдавленные буквы - вариант 2

Пример №5. Вдавленные буквы у текста в html

Небольшой 3D текст

На странице преобразуется в следующее

Небольшой 3D текст

Для обращения к margin из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.margin ="VALUE "

Влад Мержевич

Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow , мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, о которых мало кто подозревает. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.

Использование text-shadow

В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).

Рис. 1. Параметры text-shadow

Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.

Большим плюсом text-shadow является возможность добавлять сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.

К сожалению, IE до версии 10.0 не поддерживает text-shadow , так что в этом браузере мы никаких красивостей не увидим.

Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.

Рис. 2. Контурный текст

Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.

Пример 1. Контурный текст

طرح کلی متن

کانتور ساخته شده با این روش در شکل نشان داده شده است. 1. به نظر می رسد که طرح کلی کمی تار است، بنابراین برای کسانی که می خواهند یک خط واضح داشته باشند، روش دوم در نظر گرفته شده است. این شامل استفاده از چهار سایه تیز از همان رنگ است، آنها با یک پیکسل به زوایای مختلف منتقل می شوند (مثال 2).

مثال 2. چهار سایه برای طرح کلی

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

طرح کلی متن

ظاهر چنین کانتوری در شکل نشان داده شده است. 3. قابل توجه است که کانتور رساتر است.

برنج. 3. کانتور با چهار سایه

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

برنج. 4. متن سه بعدی

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

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

مثال 3: سایه برای افزودن سه بعدی

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

یخچال ده محفظه

برای همه سایه ها شعاع تاری را روی صفر و یک رنگ قرار می دهیم. سایه ها فقط در مقادیر افست خود متفاوت هستند.

برجسته سازی متن

برای ایجاد جلوه برجسته متن یا به عبارتی برجسته، رنگ متن باید با رنگ زمینه مطابقت داشته باشد. یک قسمت از حروف "برآمده" بالای سطح به نظر می رسد روشن است، در حالی که قسمت دیگر در سایه است (شکل 5).

برنج. 5. متن برجسته

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

مثال 4: متن برجسته

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

متن برجسته

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

Text-shadow: #333 -1px -1px 0, #fff 1px 1px 0;

درخشش

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

برنج. 6. متن درخشان

مثال 5. درخشش

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

سمت روشن

سمت تاریک

محو کردن

خود سایه تار است، بنابراین اگر فقط سایه را رها کنیم و خود متن را مخفی کنیم، حروف تار دریافت می کنیم (شکل 7) و درجه تاری را می توان به راحتی با استفاده از پارامتر text-shadow تنظیم کرد.

برنج. 7. متن با تاری

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

مثال 6: متن را محو کنید

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

متن تار

سایه و شبه طبقات

نیازی نیست که سایه مستقیماً به متن اضافه شود، ویژگی text-shadow به خوبی با شبه کلاس‌های :hover و :first حرف بازی می‌کند. به همین دلیل، جلوه‌های جالبی با متن به دست می‌آید، مانند حرف اول منحنی یک پاراگراف یا درخشش یک پیوند وقتی نشانگر ماوس را روی آن می‌برید. مثال 7 چنین تکنیک هایی را نشان می دهد.

مثال 7: استفاده از کلاس های شبه

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

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

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

مبانی سایه

ویژگی سایه متنبسیار آسان برای استفاده توسط تمام مرورگرهای مدرن و حتی بدون استفاده از پیشوند پشتیبانی می شود. اما هیچ پشتیبانی در IE (حتی در IE9) وجود ندارد. می توانید از ابزارهایی مانند Modernizr برای کمک به بیرون کشیدن افکت های CSS3 حتی در نسخه های قدیمی IE استفاده کنید.

نحو

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

Text-shadow: horizontal_offset vertical_offset blur color;

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

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

نتیجه استفاده از این ویژگی به صورت زیر خواهد بود:

چرا از rgba استفاده می شود؟

برای تعیین رنگ سایه هنگام تعریف یک ویژگی، لازم نیست از rgba استفاده کنید. با این حال، rgba بعد دیگری را هنگام تعریف یک سایه اضافه می کند - سطح شفافیت.

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

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

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

رنگ پس زمینه #222 است و رنگ متن روی 60% شفافیت تنظیم شده است. سایه سفید کمی پایین و سمت راست با سطح کدورت 10 درصد قرار گرفته است.

متن ( پس‌زمینه: #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);

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

متن-سایه: shadow1, shadow2, shadow3;

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

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 30,1,0px rgba )

فاصله کمی را به پایین تغییر دهید و به شدت محو کنید

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

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);

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

این افکت در وب سایت MarkDotto.com استفاده می شود. از 12 سایه مختلف برای ایجاد یک افکت سه بعدی عالی استفاده می کند.

متن-سایه: 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)، . 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 استفاده می کند تا نه تنها یک سایه بیرونی بلکه یک سایه درونی واقعی را نیز از بین ببرد. برای توضیح کامل این تکنیک، پست وبلاگ او را بررسی کنید.

رنگ زمینه: #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);

نتیجه

مانند بسیاری از افکت های CSS، اجرای سایه ها بسیار آسان است. اما ترکیبی از اقدامات ساده می تواند اثرات شگفت انگیزی داشته باشد.

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

می توانید با استفاده از ویژگی text-shadow که توسط همه مرورگرها به جز اینترنت اکسپلورر نسخه 9 و قبل از آن پشتیبانی می شود، یک سایه متن در CSS تنظیم کنید. همچنین مشکلاتی در مورد Opera Mini وجود دارد - این مرورگر فقط تا حدی از ویژگی پشتیبانی می کند. در زیر نمونه ای از سبک نگارش و مقادیر ویژگی ها آورده شده است:

H1 (متن-سایه: 3px 5px 6px #6C9؛ )

همانطور که می بینید، ما چهار مقدار را مشخص کردیم که با یک فاصله از هم جدا شده اند. بیایید به ترتیب آن را مرور کنیم:

• 3px - اولین مقدار مسئول افست سایه در امتداد محور X (راست، چپ) است. مقدار مثبت سایه را به سمت راست و مقدار منفی سایه را به سمت چپ حرکت می دهد.
• 5px - مقدار دوم مسئول افست سایه در امتداد محور Y (پایین، بالا) است. مقدار مثبت سایه را به سمت پایین و مقدار منفی سایه را به سمت بالا حرکت می دهد.
• 6px - مقدار سوم مسئول شعاع تاری سایه است. این پارامتر اختیاری است. به طور پیش فرض، تاری 0 پیکسل است که باعث می شود سایه روشن و تار نشود.
• #6c9 - مقدار چهارم مسئول رنگ سایه است. این پارامتر اختیاری است. به طور پیش فرض، رنگ سایه به همان رنگ متنی که استایل روی آن اعمال می شود، تنظیم می شود.

سایه در مرورگر چگونه به نظر می رسد (عکس از صفحه):

اسکرین شات: متن با سایه، CSS

چندین سایه CSS برای متن

همچنین امکان استفاده از چندین گروه از مقادیر برای ویژگی text-shadow وجود دارد. این بدان معناست که شما می توانید چندین سایه برای یک متن تنظیم کنید. برای انجام این کار، باید گروه هایی از مقادیر را بنویسید که با کاما از هم جدا شده اند.

H1 ( text-shadow: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7; )

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

اسکرین شات: چندین سایه برای متن CSS

شما می توانید چیزهای بسیار زیبایی را با ویژگی text-shadow CSS ایجاد کنید. می توانید آزمایش کنید: تعداد زیادی سایه مختلف را تنظیم کنید، رنگ را نه تنها در هگزادسیمال، بلکه در قالب RGBA، با استفاده از کانال آلفا برای تنظیم شفافیت تنظیم کنید. اگر به این ویژگی توجه کافی داشته باشید این اتفاق می افتد:

اسکرین شات: سایه متن سه بعدی در CSS