Каким образом можно реализовать такую штуку?

Ссылка скопирована
CSS HTML PHP
1 ответ

Нужно чтоб текст (по середине) шел как бы в паре с картинкой фона. Чтобы при уменьшении или увеличении оно выглядело одинаково. Как такое можно реализовать?

Каким образом можно реализовать такую штуку?

Дополнительно:

На svg к примеру
Или канвас ...

  • Максим, немножко не понял. Всмысле текст делать svg картинкой вместе с фоном?

  • Как такое можно реализовать?

    Использовать пропорции и относительные единицы измерения.

    Аналоги:
    https://codepen.io/AnnaSummer/pen/QWQOvzy
    https://codepen.io/AnnaSummer/pen/eYVeWXR

  • Overlord934, да верно, можно вставить хоть кодом в html хоть тегом img, щас посмотрел с компа лучше всё таки изображением в png
  • Overlord934,

    Всмысле текст делать svg картинкой вместе с фоном?

    Хорошо бы не забыть, что текст текстом нужен скринридерам и читалкам.
    Если вы считаете этот текст не текстом, а не имеющим смысла изображением, тогда вообще хоть чем его вставляйте.

  • Ankhena, В данном случае считаю, что не получится сделать текст картинкой т.к. это заголовок сайта и текст нужен для поиска по названию сайта. И исходя из этого вопрос, можно ли такое вообще реализовать только средствами css и html? Как допустим стилизовать отдельно букву O, чтоб она была как бы элементом объектива на фоновом изображении( на картинке в описании видно)?
  • Overlord934, Вообще, то, что нарисовано - это логотип.
    Его можно вставить и в стили, потому что уже есть лого в шапке.
    Можно и как img. От читалок, скорее всё таки скрыть, опять таки и потому что уже есть в хедере и потому что вы хотите к нему норм текст.

    Если к этому ещё нужен и текст, то visually-hidden в помощь (легко гуглится). Например, для h1.

  • Ankhena, т.е можно использовать тег h1 с текстом и просто скрыть его видимость и тогда с точки зрения семантики это будет верно? Я правильно понял?
  • Overlord934, доступно скрыть. С помощью одного из паттернов visually-hidden
  • Ankhena, Понял, благодарю за ответ

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Никита Орлов Ответ

    Для реализации подсветки синтаксиса кода всех языков программирования на сайте, можно воспользоваться тегом

    . Этот тег позволяет отображать код с подсветкой синтаксиса для конкретного языка программирования, в данном случае для PHP.
 
Пример использования тега <pre lang="php">:
 
<pre lang="php">

    . Этот тег позволяет отображать код с подсветкой синтаксиса для конкретного языка программирования, в данном случае для PHP. Пример использования тега <pre lang="php">: <pre lang="php">

    Таким образом, все блоки кода, обернутые в тег 

    , будут отображаться с подсветкой синтаксиса PHP. 
    

    Если вам необходимо отобразить код на других языках программирования, вы можете использовать аналогичный подход, заменяя "php" на соответствующий язык (например, "js" для JavaScript, "html" для HTML и т.д.).
    

    Надеюсь, данное решение поможет вам реализовать подсветку синтаксиса кода на вашем сайте. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.
    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Искусственный интеллект Что делать, если OpenRouter ограничивает доступ к моделям? 1 ответ