Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Kenworth
102 / 102 / 58
Регистрация: 21.10.2013
Сообщений: 324
1

Увеличение text-shadow

18.11.2016, 15:12. Просмотров 270. Ответов 3
Метки нет (Все метки)

Нужна помощь со свойством "text-shadow" Каким способом его можно увеличить относительно его родителя. Подскажите пожалуйста.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ol class="how-it-works-list flex-container">
 <li class="flex-item">
  <h6>Введите данные</h6>
  <p>
      Вы указываете сведения, необходимые для заполнения документов. Все элементы форм сопровождаются подсказками и элементами контроля данных.
  </p>
 </li>
 <li class="flex-item">
  <h6>Распечатайте документы</h6>
  <p>
      После ввода данных наш сервис автоматически мгновенно готовит все необходимые документы в соответствии с законодательством РФ. Все документы формируются в машиночитаемом формате с двумерным штрих-кодом и проходят проверку по официальным справочникам ФНС.
  </p>
 </li>
</ol>

!! SCSS !!
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 .how-it-works-list{
  .how-it-works-list.flex-container{
  }
  li{
    .title{
      color: #333e50;
      font: 700 18px/27px 'Arial', sans-serif;
      text-transform: uppercase;
    }
  }
}
 
ol {
  counter-reset: list1;
  li {
    list-style-type: none;
    &:before {
      counter-increment: list1;
      content: counter(list1) ". ";
      color: #37d3a7;
      font: 700 48px/1.2 'Arial', sans-serif;;
      text-shadow: 20px -15px lighten(desaturate(adjust-hue(#37d3a7, 10.9231), 40.1249), 39.6078);
    }
  }
}
результат

Пример того, что ожидаю получить на изображении
0
Миниатюры
Увеличение text-shadow  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
18.11.2016, 15:12
Ответы с готовыми решениями:

Увеличение размер тени у текста (text-shadow)
Можно ли сделать так, чтоб размер тени от текста был больше, чем размер самого...

Убрать text-shadow у виджета
Скрываю Jivosite на мобильных разрешениях используя display: none, но блок за...

Text-shadow какая ось используется
первое значение по x второе по y третье размытие четвертое цвет посмотрел...

Не работает PIE.htc для text-shadow
У ссылок в меню задано свойство text-shadow. Для того, чтобы тени отображались...

Inset box-shadow для input[type="text"] в safari
При верстке возникла проблема с отображением inset-тени для текстбокса в...

3
Omion
31 / 30 / 11
Регистрация: 19.05.2015
Сообщений: 295
18.11.2016, 16:13 2
друг. это скорее всего псевдоэлемент. тень можно сдвинуть и размыть, но не увелчить. прочитай про псевдоэлементы а именно про AFTER.

Добавлено через 8 минут
вот пример

Добавлено через 1 минуту
цвет по желанию
HTML5
1
<p>1.</p>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
p{
  position: relative;
  color:red;
  font-size:22px;
}
p::after{
  content:"1.";
  color:black;
  font-size: 35px;
  position: absolute;
  top: -20px;
  left: 3px;
}
Добавлено через 6 минут
я там косякнул. это верный пример

Добавлено через 6 минут
в место ред напиши #00c59a, в место блэк #e4eeed.
1
Kenworth
102 / 102 / 58
Регистрация: 21.10.2013
Сообщений: 324
21.11.2016, 10:12  [ТС] 3
Omion, не хотелось мне так делать. Рассматривал этот вариант самым последним
0
mrtoxas
Модератор
Эксперт HTML/CSS
2571 / 1904 / 1185
Регистрация: 12.07.2015
Сообщений: 5,121
Записей в блоге: 3
21.11.2016, 10:32 4
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.how-it-works-list li .title {
  color: #333e50;
  font: 700 18px/27px 'Arial', sans-serif;
  text-transform: uppercase;
}
 
ol {
  counter-reset: list1;
}
 
ol li {
  list-style-type: none;
  position: relative;
}
 
ol li:before {
  counter-increment: list1;
  content: counter(list1) ". ";
  color: #37d3a7;
  font: 700 48px/1.2 'Arial', sans-serif;
}
 
ol li:after {
  position: absolute;
  top: -30px;
  left: 10px;
  counter-increment: list1-1;
  content: counter(list1) ". ";
  color: #eee;
  font: 700 64px/1.2 'Arial', sans-serif;
  z-index: -1;
}
Все внимание на 27 строку.

HTML5
1
2
3
4
<ol class="how-it-works-list flex-container">
  <li class="flex-item">
  </li>
</ol>
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
21.11.2016, 10:32

Box-shadow не работает в IE 11
Всем привет. Такая проблема. Пишу в стилях box-shadow: 0 0 5px...

IE не отображивает то ли :active, то ли box-shadow
.el1 { position: relative; left: 25px; top: 25px; width:...

Ограничение размера box shadow
Здравствуйте! Подскажите, пожалуйста, как сделать так, чтобы у div было две...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru