ZorNet.Ru — сайт для вебмастера » HTML и CSS » Надпись внутри изображение для сайта

Надпись внутри изображение для сайта

Надпись внутри изображение для сайта
Рассмотрим как можно сделать отображение надписи на изображение в разном ракурсе. Также можно сделать ее по разному в плане дизайн. Можно назвать это подсказка, что будет прописано на самой картинке, но не нужно исключать, что визуально смотрится стильно. Само фиксированные будет расположено по разному, это может быть просто по центру шрифт. Но и как вверху в красивой рамке и безусловно в самом низу, и сделать еще ее прозрачным. Все будет представлено в материале, в низу по клику откроется текстовой формат, где будет код и стили под него. Вам только останется только выбрать, то что вам больше подходит.

Что по самому коду, то он будет на всех одинаковый, под тегом "figcaption" где ставим его и просто дополняем CSS на его, и появится вам нужная стилистика. Вы можете применить такой способ вывода изображение, как на файл или статью, где не нужно увеличивать и все описано будет, но лучше ставить само название, но здесь вам виднее станет при самой установке, так как показ представлен и вы можете понять, как точно располагаться и где. Но здесь еще идут стили, что можно с уверенностью добавить самим что то, это как углы закруглить, или сделать шрифт более красивее, вообщем по представленному коду понятно.

Здесь все не так сложно, как пример элемента, как можно ставить.

Код
<figure>
  <figcaption>
  Здесь ваша подпись
  </figcaption>
  <img src="http://zornet.ru/Aben/Gsa/zartyn/zornet.jpg">
</figure>


Также можно поменять и все работать будет:

Код
<figure>
  <img src="http://zornet.ru/Aben/Gsa/zartyn/zornet.jpg">
  <figcaption>
  Здесь ваша подпись
  </figcaption>
</figure>


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

Переходим к установке:

Первая: Подпись отображается по вверх.

Подпись размещается по вверх

«Клик на первый материал»

Вторая: Подпись размещается внизу.

Подпись размещается внизу

«Клик на второй материал»

Третье: Подпись прижата вверх картинки.

Подпись прижата вверх картинки

«Клик на второй материал»

Четвертая: подпись по центру изображение.

Подпись по центру картинки

«Клик на четвертый материал»

Пятая: Выделенные подписи на изображение.

Выделенные подписи на изображение

«Клик на пятый материал»

PS - здесь представлено пять разных по своему формату описание, где можно разместить стиль и настроить как вам нужно или все сделать по умолчанию. И потом только ставим код, но при допалнение его сначало создаем описание и ставим ссылку. И таким спомобом вы можете размещать оригинально на всем интернет ресурсе.

Источник: dbmast.ru
16 Ноября 2016 Просмотров: 1522 Комментариев: (5)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 5
tsakonter
tsakonter 16 Ноября 2016 23:321
0
Так очень даже не плохо смотрится, разве что рамку сделать не такую темную, но здесь все зависит от самого сайта и его цвета, это темный или светлый. Но больше понравился с прозрачным, его вот можно на сайт поставить. А это только в CSS как понял закинуть и потом коды проставлять где нужно.
Kosten
Kosten 16 Ноября 2016 23:382
0
Все правильно, та тестовом проверил, что выбираем что вам подходит под сайт, также можете что то по стилям сами настроить и закинуть в CSS ресурса. И коды что представлены, можно с ними также работать, но и под каждой картинкой есть полный расклад по ней, кликам и копируем.
ucozmental
ucozmental 17 Ноября 2016 00:203
0
Вот по центру надпись сделать прозрачной, намного красивей смотрелось.
Kosten
Kosten 17 Ноября 2016 00:344
0
Но это можно сделать даже на браузере, потом скопировать и изменить стиль.
Советник
Советник 17 Ноября 2016 00:415
0
Где то на сайте встречал похожий материал, но здесь представленно больше, думаю что то подберу, за что спасибо.
avatar