1 Тема від Nick9956 Востаннє редагувалося Nick9956 (14.03.2017 19:46:16)

  • Nick9956
  • Користувач
  • Поза форумом
  • Дата реєстрації: 05.03.2015
  • Повідомлень: 297
    • Репутація: 56

Тема: Обводки навколо тексту || HTML

Всім привіт

Підкажіть, хтось з таким може стикався

Як зробити товстий контур тексту , такий як на малюнку ?
Я маю на увазі контур навколо кожної буква

Читав, що це можна зробити за допомогою text-shadow, але на практиці так і не вийшло зробити

Post's attachments

Без імені.png 5.7 kb, 221 downloads since 2017-03-14 

2 Відповідь від Vi

  • Vi
  • Vi
  • Користувач
  • Поза форумом
  • Звідки: г. Краматорськ. Донеччина
  • Дата реєстрації: 19.02.2017
  • Повідомлень: 105
    • Репутація: 89

Re: Обводки навколо тексту || HTML

Мабудь тобі потрібно дістати той фонт, що на малюнку.
Інакше, гадаю, ніяк.

3 Відповідь від Monolith

  • Monolith
  • Monolith
  • Replace Group
  • Поза форумом
  • Звідки: Звідси
  • Дата реєстрації: 29.07.2014
  • Повідомлень: 724
    • Репутація: 768

Re: Обводки навколо тексту || HTML

http://htmlbook.ru/css/text-shadow - перше ж посилання з видачі Гугл. Скажіть, що саме у Вас не виходить...

4 Відповідь від Vi

  • Vi
  • Vi
  • Користувач
  • Поза форумом
  • Звідки: г. Краматорськ. Донеччина
  • Дата реєстрації: 19.02.2017
  • Повідомлень: 105
    • Репутація: 89

Re: Обводки навколо тексту || HTML

misha_bondar_2012 написав:

перше ж посилання з видачі Гугл.

Йому потрібна не тінь, а жирна окантовка навколо літер.

5 Відповідь від Betterthanyou Востаннє редагувалося Betterthanyou (15.03.2017 01:34:11)

  • Звідки: Київ
  • Дата реєстрації: 16.05.2014
  • Повідомлень: 1 695
    • Репутація: 1022

Re: Обводки навколо тексту || HTML

Vi написав:
misha_bondar_2012 написав:

перше ж посилання з видачі Гугл.

Йому потрібна не тінь, а жирна окантовка навколо літер.

Я думаю це якраз за допомогою тіні і робиться, просто потрібно багато її додати.

Ось щось схоже, але потрібно шрифт ще найти більш підходящий (поки що це Arial Narrow)

CSS

.text {

    font-family: Arial Narrow;
    font-size: 51px;
    color: #FFFFFF;
    text-shadow: 
        -0   -4px 0   #0A3E53,
         0   -4px 0   #0A3E53,
        -0    4px 0   #0A3E53,
         0    4px 0   #0A3E53,
        -4px -0   0   #0A3E53,
         4px -0   0   #0A3E53,
        -4px  0   0   #0A3E53,
         4px  0   0   #0A3E53,
        -1px -4px 0   #0A3E53,
         1px -4px 0   #0A3E53,
        -1px  4px 0   #0A3E53,
         1px  4px 0   #0A3E53,
        -4px -1px 0   #0A3E53,
         4px -1px 0   #0A3E53,
        -4px  1px 0   #0A3E53,
         4px  1px 0   #0A3E53,
        -2px -4px 0   #0A3E53,
         2px -4px 0   #0A3E53,
        -2px  4px 0   #0A3E53,
         2px  4px 0   #0A3E53,
        -4px -2px 0   #0A3E53,
         4px -2px 0   #0A3E53,
        -4px  2px 0   #0A3E53,
         4px  2px 0   #0A3E53,
        -3px -4px 0   #0A3E53,
         3px -4px 0   #0A3E53,
        -3px  4px 0   #0A3E53,
         3px  4px 0   #0A3E53,
        -4px -3px 0   #0A3E53,
         4px -3px 0   #0A3E53,
        -4px  3px 0   #0A3E53,
         4px  3px 0   #0A3E53,
        -4px -4px 0   #0A3E53,
         4px -4px 0   #0A3E53,
        -4px  4px 0   #0A3E53,
         4px  4px 0   #0A3E53,
        -4px -4px 0   #0A3E53,
         4px -4px 0   #0A3E53,
        -4px  4px 0   #0A3E53,
         4px  4px 0   #0A3E53;

}

HTML

<p class="text">Обслуживание сайта</p>
Подякували: Monolith, Nick9956, Сергій78, ostap34PHP4

Betterthanyou вебсайт