Смещение текста

Как сделать в Фигме

  • Добавляем к текстовому слою Effects → Drop shadow.
  • Устанавливаем нужные значения по оси X и Y, а так же Blur.
  • При выделенном текстовом слое переходим во вкладку inspect, в правой панели в Фигмы, скролим вниз и копируем параметр text-shadow (код тени в css).
У меня получился следующий код:
text-shadow: 8px 8px 3px #FF0303;

Как сделать в Тильде

  • Создаем дизайн в Zero Block.
  • Нажимает на текстовый элемент правой кнопкой мыши, выбираем Add CSS class name.
  • Задаем название стиля, например, offset.
  • Добавьте в Zero Block html-элемент.
  • Копируем код ниже и вставляем его в html-элемент, используя кнопку Edit Code.
  • Параметр text-shadow берем тот, что скопировали в Фигме.
<style>

.offset {
        
    text-shadow: 8px 8px 3px #FF0303;  
}

</style>
Синтаксис

text-shadow: #FF0303 (цвет) 5px (смещение по оси x) 5px (смещение по оси y) 3px (радиус размытия цвета смещения);

После переноса кода из Фигмы в Тильду, смещение может немного отличаться от того, которое было в дизайне. Поэтому, меняя параметры смещения по оси X и Y, можно добиться нужного угла.

После чего мы можем добавить фоновую тень под наш текст.

Смещение текста с фоновой тенью

Как сделать в Фигме

  • Добавляем к текстовому слою еще один Effects → Drop shadow.
  • Значения по оси X и Y устанавливаем равными нулю.
  • Устанавливаем нужное значение Blur.
  • При выделенном текстовом слое переходим во вкладку inspect, в правой панели в Фигмы, скролим вниз и копируем параметр text-shadow.
У меня получился следующий код:
text-shadow: 8px 8px 3px #FF0303, 0px 0px 150px #0500FF;

Как сделать в Тильде

  • Создаем дизайн в Zero Block.
  • Нажимает на текстовый элемент правой кнопкой мыши, выбираем Add CSS class name.
  • Задаем название стиля, например, offset_shadow.
  • Добавьте в Zero Block html-элемент.
  • Копируем код ниже и вставляем его в html-элемент, используя кнопку Edit Code.
<style>

.offset_shadow {
        
    text-shadow: 8px 8px 3px #FF0303, 0px 0px 150px #0500FF;

}

</style>
Синтаксис

text-shadow: 8px (смещение по оси x первого слоя) 8px (смещение по оси y первого слоя) 3px (размытие первого слоя) #FF0303 (цвет первого слоя), 0 (смещение по оси x слоя с тенью) 0 (смещение по оси y слоя с тенью) 150px (размытие слоя с тенью) #0500FF (цвет слоя с тенью);

Если угол смещения и размытие тени перенеслось из Фигмы не точно, то меняя эти параметры, можно добиться нужного угла смещения, цвета и размытия смещенного текста и тени под ним.
Made on
Tilda