Как сверстать данный текст?

@Cdelphi78 · Регистрация: 21.02.2014

Студворк — интернет-сервис помощи студентам

@shvyrevvg · 23.02.2019, 10:10

Поддержка плохая, но как вариант

HTML5
1
2
3
<p class="text">
  <span class="text__stroke">hello world</span>
</p>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.text {
  background-color: blue;
  font-family: Arial, sans-serif;
  font-size: 90px;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
}
@supports (-webkit-text-stroke: 1px #fff) { 
  .text__stroke {
    color: transparent;
    -webkit-text-stroke: 1px #fff;
  }
}

Cdelphi78, а в макете этот текст как реализован?

@Cdelphi78 · 23.02.2019, 10:42 **[ТС]**

shvyrevvg, благодарю за ответ, пока что не получается, нужна поддержка IE 10 и выше...
Не знаю как) Это из фигмы..там ничего подозрительного не нашел(

Добавлено через 3 минуты
Я color: transparent; пробовал вместе с тенью text shadow но чет криво работает..тень не удается допилить нормально..

Добавлено через 8 минут
shvyrevvg, а вместо синего цвета картинку то как подставить как фон?

Добавлено через 10 минут
shvyrevvg, разобрался.спасибо.

@shvyrevvg · 23.02.2019, 11:20

Сообщение от Cdelphi78

Не знаю как) Это из фигмы..там ничего подозрительного не нашел(

В ней же, вроде, доступны те же инструменты для работы с текстом как и в css. В принципе, можно и картинкой вставить, а текст добавить рядом и скрыть стилем

CSS
1
2
3
4
5
6
7
8
9
10
11
// первый что нагуглил
.visually-hidden {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding:0 !important;
    border:0 !important;
    height: 1px !important; 
    width: 1px !important; 
    overflow: hidden;
}

@tnfsk · 23.02.2019, 12:05

jsfiddle

HTML5
1
2
3
4
5
<div class="a">
<svg class="svg">
<text class="text" x="50px" y="263px">ABBA</text>
</svg>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.a{
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}
 
.svg{
  width: 835px;
  height: 350px;
  border: 1px solid red;
  
}
 
.text{
  font-family: "Courier New";
  stroke: red;
  font-size: 300px;
  font-weight: 800;
  fill: transparent;
}

@Cdelphi78 · 23.02.2019, 20:00 **[ТС]**

shvyrevvg, IE 11 не работает..

@Freeze_Breeze · 23.02.2019, 20:08

Я один не понимаю зачем верстать шрифт?

@shvyrevvg · 23.02.2019, 20:39

Не по теме:

Сообщение от Freeze_Breeze

Я один не понимаю зачем верстать шрифт?

Вроде как очевидно, что если бы это был просто шрифт, то и вопросов бы не было...

@Cdelphi78 · 23.02.2019, 20:55 **[ТС]**

Можно ли как нибудь менять координаты x y c помощью медиа запросов? Может можно как то это в css запихать?

@Freeze_Breeze · 23.02.2019, 21:07

shvyrevvg,

Не по теме:

Ну да, вполне очевидно что это не просто шрифт, это буквы, скажу более очевидные вещи, что это шрифт и две последние буквы "не шрифта" соприкасаются верхними краями. Плюс поддержка браузеров, плюс "резиновость" данного фокуса с буквами. Ведь это буквы, обычные буквы с внешней подсветкой #fff и opacity 0.4, зачем все так усложнять?

@Cdelphi78 · 23.02.2019, 21:31 **[ТС]**

Freeze_Breeze, хм..накидайте свой пример пожалуйста..а то не очень понятно..

@Freeze_Breeze · 23.02.2019, 22:41

Cdelphi78, Я думал что можно просто вставить обычный контурный текст, но не тут то было. Моя идея превратилась в прах. Но есть и хорошие новости

разработчики webkit придумали такое свойство -webkit-text-stroke которое в два свойства помогает сделать контурный прозрачный текст

CSS
1
2
color: transparent;
-webkit-text-stroke: 1px black;

Но увы это экспериментальное пока свойство и поддержкой в остальных браузерах пока нету.
Но, есть и такое решение, возможно Вы здесь что то и найдете Techniques for Creating Textured Text

Не по теме:

Как же я давно так не парился над задачкой (забросил верстку), а сейчас такой кайф словил когда рыскал, искал, искал... блин такой кайф :) спасибо :)

@shvyrevvg · 23.02.2019, 22:46

Сообщение от Freeze_Breeze

Но есть и хорошие новости разработчики webkit придумали такое свойство -webkit-text-stroke которое в два свойства помогает сделать контурный прозрачный текст

Freeze_Breeze, посмотрите внимательней на первый ответ

@Cdelphi78 · 23.02.2019, 23:16 **[ТС]**

Сообщение от Freeze_Breeze

Cdelphi78, Я думал что можно просто вставить обычный контурный текст, но не тут то было. Моя идея превратилась в прах. Но есть и хорошие новости разработчики webkit придумали такое свойство -webkit-text-stroke которое в два свойства помогает сделать контурный прозрачный текст

Благодарю за помощь!

К сожалению -webkit-text-stroke очень легкое решение и подошло бы если бы не треклятый IE 10 11 12(

Добавлено через 55 секунд
А решение которое с SVG я встрял с адаптациеей этого текста..(

@mrtoxas · 23.02.2019, 23:29

CSS
1
2
3
.wrapper{
  width:300px;
}

HTML5
1
2
3
<div class="wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 135.47 36.91"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><g id="Слой_2" data-name="Слой 2"><g id="Слой_1-2" data-name="Слой 1"><g class="cls-1"><path class="cls-2" d="M.73,36.41,14.52.5h5.12l14.7,35.91H28.92L24.73,25.54h-15l-4,10.87ZM11.09,21.67H23.26l-3.74-10Q17.8,7.19,17,4.27A45.06,45.06,0,0,1,15,11.13Z"/><path class="cls-2" d="M37.94,36.41V.5H51.41A16.63,16.63,0,0,1,58,1.59,8.52,8.52,0,0,1,61.91,5a8.84,8.84,0,0,1,1.41,4.74A8.15,8.15,0,0,1,62.07,14a8.88,8.88,0,0,1-3.78,3.28,9.45,9.45,0,0,1,5,3.26A8.73,8.73,0,0,1,65.05,26,10.48,10.48,0,0,1,64,30.69,9.16,9.16,0,0,1,61.36,34a11.1,11.1,0,0,1-3.94,1.77,23.83,23.83,0,0,1-5.79.6Zm4.75-20.82h7.76A17.27,17.27,0,0,0,55,15.17a5,5,0,0,0,2.73-1.79,5.14,5.14,0,0,0,.92-3.13,5.81,5.81,0,0,0-.86-3.15,4.39,4.39,0,0,0-2.45-1.86,20.66,20.66,0,0,0-5.46-.5H42.69Zm0,16.58h8.94A19.84,19.84,0,0,0,54.86,32a7.61,7.61,0,0,0,2.75-1,5.16,5.16,0,0,0,1.81-2,6.33,6.33,0,0,0,.71-3,5.94,5.94,0,0,0-1-3.49,5.41,5.41,0,0,0-2.85-2.08,17.74,17.74,0,0,0-5.26-.6h-8.3Z"/><path class="cls-2" d="M71.4,36.41V.5H84.87a16.63,16.63,0,0,1,6.6,1.09A8.52,8.52,0,0,1,95.37,5a8.84,8.84,0,0,1,1.41,4.74A8.15,8.15,0,0,1,95.53,14a8.88,8.88,0,0,1-3.78,3.28,9.37,9.37,0,0,1,5,3.26A8.73,8.73,0,0,1,98.51,26a10.48,10.48,0,0,1-1.06,4.69A9.16,9.16,0,0,1,94.82,34a11.1,11.1,0,0,1-3.94,1.77,23.83,23.83,0,0,1-5.79.6Zm4.75-20.82h7.77a17.23,17.23,0,0,0,4.53-.42,5,5,0,0,0,2.73-1.79,5.14,5.14,0,0,0,.92-3.13,5.81,5.81,0,0,0-.86-3.15,4.39,4.39,0,0,0-2.45-1.86,20.66,20.66,0,0,0-5.46-.5H76.15Zm0,16.58h8.94A19.84,19.84,0,0,0,88.32,32a7.61,7.61,0,0,0,2.75-1,5.16,5.16,0,0,0,1.81-2,6.33,6.33,0,0,0,.71-3,5.94,5.94,0,0,0-1-3.49,5.41,5.41,0,0,0-2.85-2.08,17.74,17.74,0,0,0-5.26-.6h-8.3Z"/><path class="cls-2" d="M101.11,36.41,114.9.5H120l14.7,35.91h-5.41l-4.19-10.87h-15l-3.94,10.87Zm10.36-14.74h12.18l-3.75-10q-1.71-4.53-2.55-7.45a45,45,0,0,1-1.93,6.86Z"/></g></g></g></svg>
</div>

@Cdelphi78 · 24.02.2019, 10:41 **[ТС]**

mrtoxas, слово in unity нужно..
шрифт другой...Museo Sans Cyrl, sans-serif нужен
А адаптируется неплохо..еще бы можно было бы font size крутить...

@Freeze_Breeze · 24.02.2019, 11:51

Cdelphi78, думаю тебе поможет эта ссылка in unity, я точно не помню, но есть какой то метод (возможно даже это и он) который преобразует из картинки SVG в код HTML

@Cdelphi78 · 24.02.2019, 12:43 **[ТС]**

Freeze_Breeze, не подскажете как мне определять IE 10 и выше на jquery?

@Freeze_Breeze · 24.02.2019, 12:50

Cdelphi78, уже не подскажу, давно не "программировал", забыл много

@Cdelphi78 · 24.02.2019, 13:15 **[ТС]**

Freeze_Breeze, нашел на всякий случай оставлю здесь

JavaScript
1
2
3
4
var bs = document.body.style, isIE=false;
    if ('msTransition' in bs) {
            isIE = true;
    }

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

Как сверстать данный текст?

Решение

Решение

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444

	Как сверстать данный текст? 23.02.2019, 09:58. Показов 3395. Ответов 20 Метки нет (Все метки) Как сверстать данный текст? Миниатюры 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	23.02.2019, 10:42 [ТС]
	shvyrevvg, благодарю за ответ, пока что не получается, нужна поддержка IE 10 и выше... Не знаю как) Это из фигмы..там ничего подозрительного не нашел( Добавлено через 3 минуты Я color: transparent; пробовал вместе с тенью text shadow но чет криво работает..тень не удается допилить нормально.. Добавлено через 8 минут shvyrevvg, а вместо синего цвета картинку то как подставить как фон? Добавлено через 10 минут shvyrevvg, разобрался.спасибо. 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	23.02.2019, 20:00 [ТС]
	shvyrevvg, IE 11 не работает.. 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	23.02.2019, 20:08
	Я один не понимаю зачем верстать шрифт? 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	23.02.2019, 20:55 [ТС]
	Можно ли как нибудь менять координаты x y c помощью медиа запросов? Может можно как то это в css запихать? 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	23.02.2019, 21:07
	shvyrevvg, Не по теме: Ну да, вполне очевидно что это не просто шрифт, это буквы, скажу более очевидные вещи, что это шрифт и две последние буквы "не шрифта" соприкасаются верхними краями. Плюс поддержка браузеров, плюс "резиновость" данного фокуса с буквами. Ведь это буквы, обычные буквы с внешней подсветкой #fff и opacity 0.4, зачем все так усложнять? 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	23.02.2019, 21:31 [ТС]
	Freeze_Breeze, хм..накидайте свой пример пожалуйста..а то не очень понятно.. 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	24.02.2019, 10:41 [ТС]
	mrtoxas, слово in unity нужно.. шрифт другой...Museo Sans Cyrl, sans-serif нужен А адаптируется неплохо..еще бы можно было бы font size крутить... 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	24.02.2019, 11:51
	Cdelphi78, думаю тебе поможет эта ссылка in unity, я точно не помню, но есть какой то метод (возможно даже это и он) который преобразует из картинки SVG в код HTML 0

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444
	24.02.2019, 12:43 [ТС]
	Freeze_Breeze, не подскажете как мне определять IE 10 и выше на jquery? 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	24.02.2019, 12:50
	Cdelphi78, уже не подскажу, давно не "программировал", забыл много 0