Як створити реалістичні текстові ефекти, Як створити сайт
- Головна   /  Уроки   /  Уроки CSS   /  Рецепти CSS   /  Оформлення тексту   /  
- Як створити реалістичні текстові ефекти
Як створити реалістичні текстові ефекти
Проблема
Іноді певні прикраси тексту набувають у Мережі величезного поширення. Наприклад, вдавлений текст, розмиття тексту при наведенні покажчика миші, об'ємний текст і т. д. Ці ефекти зазвичай будуються на комбінації ретельно опрацьованих текстових, а також на знанні того, як влаштовано наш зір, — багато хто з них у тій чи іншій мірі ґрунтується .
При використанні подібних ефектів дуже легко забути про доступність тексту, тому ніколи не лінуйтеся тестувати ступінь контрастності оформлення на оптичних ілюзіях. Якщо вам вже відомі трюки, що використовують, то створювати такі ефекти дуже легко, проте вони не завжди піддаються простому зворотному декодуванню за допомогою інструментів розробки. Секрет присвячений створенню подібних ефектів, щоб ви ніколи більше не задавалися питанням: «Як взагалі це працює?!»
Ефект втисненого тексту
Ефект вдавленого тексту — один із найпопулярніших на веб-сайтах зі скевоморфним дизайном. І хоча скевоморфний дизайн вже не такий популярний, як колись, у нього завжди будуть свої вірні шанувальники. Цей ефект найкраще працює на помірно світлому фоні з темним текстом, але його можна застосовувати і до світлого тексту на темних фонах, якщо текст не на 100% чорний, а фон не на 100% білий або чорний.
В його основі той самий задум, який використовується з часів перших графічних інтерфейсів користувача для створення враження вдавленихабо опуклих кнопок: світліша тінь внизу (або темна нагорі) створює ілюзію, що об'єкт вигравіюваний на основній поверхні.
Подібним чином темніша тінь внизу (або світла нагорі) створює ілюзію того, що об'єкт видавлений з основної поверхні. Причина, чому це працює, полягає в тому, що ми зазвичай припускаємо наявність джерела світла нагорі: таким чином, опуклий об'єкт повинен відкидати тінь вниз, а вигравіруваний об'єкт має бути освітлений знизу. Як точку відліку давайте візьмемо кольори з малюнка.
Колір тексту тут -hsl(210, 13%, 30%), а колір фону - hsl(210, 13%, 60%) :background: hsl(210, 13% , 60%);color: hsl(210, 13%, 30%); Коли ми використовуємо темний шрифт на більш світлому тлі (як у попередньому прикладі), найкращим чином зазвичай працює світла тінь унизу. Наскільки світла — залежить від конкретних кольорів, що працюють у вашому дизайні, а також від того, наскільки помітним має бути ефект. Поекспериментуйте з параметром альфа-каналу, щоб досягти найпривабливішого результату. У нашому прикладі ми зупинилися на 80% білому, але у вашому рішенні значення можуть бути зовсім іншими:background: hsl(210, 13%, 60%);color: hsl(210, 13%, 30%);text-shadow: 0 1px 1px hsla(0,0%,100%,.8);
В даному випадку для створення ефекту ми використовували значення в пікселах, а не в одиницях em, проте якщо у вашому дизайні текст може бути будь-якого розміру, від крихітних до величезних букв, то вам краще підійдуть одиниці довжини em:text -shadow: 0 .03em .03em hsla(0,0%,100%,.8);
Що станеться, якщо ми матимемо світлий текст на темному тлі? Тінь, що визначається у фрагменті коду вище, призводить до жахливих результатів у разі,коли кольори міняються місцями, через що текст виглядає таким, що розплився.
Чи означає це, що ефект вдавленого тексту застосувати неможливо? Ні, це лише означає, що необхідно трохи скоригувати підхід. У таких ситуаціях темна тінь нагорі працює краще, що підтверджує малюнок.
CSS-код виглядає так:background: hsl(210, 13%, 40%);color: hsl(210, 13%, 75%);text-shadow: 0 -1px 1px black;
СПРОБУЙТЕ САМІ!
Текст із обведенням
У майбутньому створювати текст з контуром/обведенням буде набагато простіше, тому що ми зможемо використовувати параметр розмазування властивості text-shadow, роблячи тіні більшими і перетворюючи їх на подобу обведення - аналогічно тому, як ми імітуємо контури за допомогою розмазування box-shadow.
На жаль, підтримка браузерами цього параметра в даний час дуже обмежена, і нам доводиться покладатися на інші способи імітувати обведення, що дають більш менш прийнятні результати. Найпоширеніший спосіб — накладати один на одного кілька тіней text-shadow з значеннями зміщення, що трохи відрізняються, наприклад так:
background: deeppink;color: white;text-shadow: 1px 1px black, -1px -1px black,1px -1px black, -1px 1px black;
В якості альтернативи можна було б використовувати кілька злегка розмитих тіней без усунення:text-shadow: 0 0 1px black, 0 0 1px black,0 0 1px black, 0 0 1px black,0 0 1px black, 0 0 1px black;
Однак це не завжди дозволяє отримати візуально привабливі результати, до того ж, це більш дорогий з точки зору продуктивності спосіб, оскількирозмиття більше навантажує системні ресурси. На жаль, чим товщі обведення, тим гірше виходять результати кожного з цих рішень. Наприклад, погляньте, як некрасиво виглядає обведення товщиною 3px:
background: deeppink;color: white;text-shadow: 3px 3px black, -3px -3px black,3px -3px black, -3px 3px black;
Звичайно, для вирішення завдання завжди можна вдатися до допомоги формату SVG, але він сильно засмічує розмітку. Припустимо, ми хочемо використовувати код SVG для стилізації заголовка першого рівня. HTML-код буде виглядати так:SVG
Точно не ідеальний варіант, але він дає найкращі візуальні результати, і навіть у стародавніх браузерах, які не підтримують SVG, текст все ще залишається читабельним, красиво стилізований і розпізнається програмами читання екрану.
Сяючий текст
Сяйво - досить поширений ефект. Часто так відображаються посилання при наведенні на них покажчика миші або заголовки на певних веб-сайтах.
Крім того, це один із найлегших у створенні ефектів. У своїй простій формі він вимагає лише парочки накладених один на одного тіней text-shadow без будь-яких зрушень і того ж кольору, що і основний текст:background: #203;color: #ffc;text-shadow: 0 0 .1em, 0 0 .3em; Якщо ви створюєте ефект для стану посилання, коли на неї наводиться покажчик миші, то потрібно також додати перехід, наприклад так:abackground: #203;color: white;transition: 1s;>a:hovertext-shadow: 0 0 .1em, 0 0 .3em ;> Ви можете визначити ще цікавіший ефект, приховуючи сам текст приспрацьовуванні :hover і, по суті, створюючи ілюзію того, що букви плавно розпливаються:
abackground: #203;color: white;transition: 1s;>a:hovercolor: transparent;text-shadow: 0 0 .1em white, 0 0 .3em white;> Однак пам'ятайте, що залежність від text-shadow у питанні відображення тексту таїть у собі небезпеку: це рішення немає елегантного обхідного шляху. Якщо text-shadow не підтримується, взагалі ніякий текст візуалізований не буде. Таким чином, необхідно виявляти обережність і застосовувати це тільки в оточеннях, які підтримують text-shadow. Або розмивати текст за допомогою фільтрів CSS:
abackground: #203;color: white;transition: 1s;>a:hoverfilter: blur(.1em);>
Можливо, у цьому варіанті підтримка браузерами буде гіршою, але, принаймні, нічого не зламається, якщо підтримка не буде зовсім.
Об'ємний текст
Ще один популярний (мабуть навіть занадто) ефект скевоморфного дизайну - це об'ємний текст.
Головна ідея полягає у використанні великої кількості накладених один на одного тіней: кожна трохи темніша за попередню, без розмиття і зі зсувом тільки на 1px. У самому ж низу «стопки» повинна бути сильно розмита темна тінь, що імітує тінь, яку відкидала б вся ця конструкція. Давайте візьмемо як відправну точку текст на малюнку вище, для стилізації якого застосовується цей простий CSS-код:
background: #58a;color: white;
Тепер додамо кілька тіней text-shadow, поступово роблячи їх темнішими:background: #58a;color: white;text-shadow: 0 1px hsl(0,0%,85%),0 2px hsl(0,0%,80%),0 3px hsl(0,0%,75%),0 4px hsl(0,0%,70%),0 5px hsl(0,0%,65%);
Як видно на малюнку, ми вже наближаємося до бажаного результату, але ефект все ще виглядає недостатньо реалістичним. Вірите чи ні, але для того, щоб досягти результату, показаного на малюнку, нам потрібно лише додати ще одну тінь внизу:background: #58a;color: white;text-shadow: 0 1px hsl(0,0%,85%),0 2px hsl(0,0%,80%),0 3px hsl(0,0%,75%),0 4px hsl(0,0%,70%),0 5px hsl(0,0%,65%),0 5px 10px black;
Такий громіздкий код, що повторюється, — перший кандидат на перетворення в препроцесорну домішку. Один із варіантів, як це можна було б зробити в SCSS, показаний далі:SCSS@mixin text-3d($color: white, $depth: 5)$shadows: ();$shadow-color: $color;@for $i з 1 через $depth$shadow-color: darken($shadow-color, 10%);$shadows: append($shadows,0 ($i * 1px) $shadow-color, comma);>color: $color;text- shadow: append($shadows,0 ($depth * 1px) 10px black, comma);>h1
Існує безліч варіацій цього ефекту. Наприклад, якщо зробити всі тіні чорними (колір black) і прибрати останню розмиту тінь, то можна імітувати ефект вдавленого тексту, який часто використовується для імітації старих табличок або оформлення їх у ретростилі:
color: white;background: hsl(0,50%,45%);text-shadow: 1px 1px black, 2px 2px black,3px 3pxblack, 4px 4px black,5px 5px black, 6px 6px black,7px 7px black, 8px 8px black;
Цей варіант простіше перетворити на домішку або - що в даному випадку зручніше - на функцію:SCSS@function text-retro($color: black, $depth: 8)$shadows: (1px 1px $color,);@for $i з 2 через $depth$shadows: append($shadows,($i*1px) ($i*1px) $color, comma);>@return $shadows;>h1color: white;background: hsl(0,50%,45%);text-shadow: text-retro();>