Фіксовані підписи до зображень

27

Висновок підписів до зображень можна організувати по-різному, наприклад використовуючи різні hover-ефекти (спливаючі підпису, підказки, плавні переходи, трансформація, ротація, збільшення, зміщення і т. д і т. п.), або ж просто, зробити їх фіксованими, розташованими поза тіла картинки, або безпосередньо на зображенні, в тій чи іншій його частині.

Фиксированные подписи к изображениям

У даному уроці продемонструю кілька найпростіших варіантів виведення фіксованих підписів до зображень, використовуючи теги і для групування картинок і підписів до них. Навчившись правильно використовувати ці елементи, надалі вам не складе особливої праці, прикрутити до них різноманітні ефекти.

HTML

Синтаксис(розмітка html) у всіх прикладах буде приблизно однаковий, тег , який містить опис тега , повинен бути першим або останнім елементом в групі, все дуже просто.
Так:

Підпис до зображення...

Підпис до зображення…

або так:


Підпис до зображення...


Підпис до зображення…

Зовнішній вигляд і розташування підписів будемо формувати безпосередньо в таблиці стилів CSS, попередньо зв’язавши всі елементи зі стилями через певні класи. Наприклад, я зробив зображення в блоці «гумовими», використовуючи відсоткові значення ширини картинки width: 100%;. Як зробити картинки адаптивними, розповідав докладно в статті Адаптивні зображення з допомогою CSS, кому цікаво, можете освіжити пам’ять.
У всіх випадках базового контейнера визначаємо відносне позиціонування position: relative;, а підписів (елемент ), у варіантах з накладенням, визначаємо абсолютне позиціонування position: absolute;.

1. Підпис розміщується вгорі, перед зображенням

Варіант коли підпис до зображення виводиться поза тіла картинки, першим елементом в групі, тобто перед зображенням. Якихось додаткових стилів, цей варіант не вимагає, опціонально ви можете змінити фон, додати рамку або зовнішню тінь базового контейнера, змінити розмір і сімейство шрифтів, все справа смаку.

  • Результат
  • HTML
  • CSS
Підпис розміщується вгорі перед зображенням.

Підпис розміщується вгорі перед зображенням.

/* групуємо картинки */
figure {
margin: 0px;
}
/* position: relative; обов'язково, інше за смаком */
figure.ink-image {
position: relative;
border: 1px solid #555;
}
/* зображення гумові */
figure.ink-image > img {
border: 0px none;
width: 100%;
vertical-align: top;
}
/* формуємо підписи до картинок */
figure.ink-image > figcaption {
padding: 1em;
background: none repeat scroll 0% 0% #FFF;
line-height: 1.3;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}

/* групуємо картинки */
figure {
margin: 0px;
}
/* position: relative; обов’язково, інше за смаком */
figure.ink-image {
position: relative;
border: 1px solid #555;
}
/* зображення гумові */
figure.ink-image > img {
border: 0px none;
width: 100%;
vertical-align: top;
}
/* формуємо підписи до картинок */
figure.ink-image > figcaption {
padding: 1em;
background: none repeat scroll 0% 0% #FFF;
line-height: 1.3;
font-family: ‘Roboto’, sans-serif;
font-weight: 400;
}

2. Підпис розміщується внизу під зображенням

Наступний варіант підпису розміщеної під зображенням. На відміну від першого варіанта елемент figcaption прописуємо після тега , всі необхідні стилі задаємо в css, або ж залишаємо як є. Думаю основний принцип угруповання зрозумілий, короткі коментарі в коді css, допоможуть вам швидше зорієнтуватися.

  • Результат
  • HTML
  • CSS

Підпис розміщується внизу після зображення.


Підпис розміщується внизу після зображення.

/* групуємо картинки */
figure {
margin: 0px;
}
/* position: relative; обов'язково, інше за смаком */
figure.ink-image {
position: relative;
border: 1px solid #555;
}
/* зображення гумові */
figure.ink-image > img {
border: 0px none;
width: 100%;
vertical-align: top;
}
/* формуємо підписи до картинок */
figure.ink-image > figcaption {
padding: 1em;
background: none repeat scroll 0% 0% #FFF;
line-height: 1.3;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}

/* групуємо картинки */
figure {
margin: 0px;
}
/* position: relative; обов’язково, інше за смаком */
figure.ink-image {
position: relative;
border: 1px solid #555;
}
/* зображення гумові */
figure.ink-image > img {
border: 0px none;
width: 100%;
vertical-align: top;
}
/* формуємо підписи до картинок */
figure.ink-image > figcaption {
padding: 1em;
background: none repeat scroll 0% 0% #FFF;
line-height: 1.3;
font-family: ‘Roboto’, sans-serif;
font-weight: 400;
}

3. Підпис поверх зображення, притиснутий до верхнього краю

Останнім часом, дуже часто використовується висновок підписів безпосередньо на тілі зображення, візуальний ефект накладення, з напівпрозорим фоном, або ж зовсім без фону. В даному прикладі демонструється підпис розташована поверх картинки, притиснута до верхнього краю на злегка прозорому тлі. Стилі для цього виду підписів виділені в окремий клас class=”over-top”, колір фону визначається властивості background у форматі rgba, змінюючи значення альфа-каналу від 0 до 1, ви легко можете встановити ступінь прозорості, за замовчуванням виставив проміжне значення 0.5 — напівпрозорість елемента.

  • Результат
  • HTML
  • CSS

Підпис поверх зображення, зверху, злегка прозорий фон.


Підпис поверх зображення, зверху, злегка прозорий фон.

/* групуємо картинки */
figure {
margin: 0px;
}
/* position: relative; обов'язково, інше за смаком */
figure.ink-image {
position: relative;
border: 1px solid #555;
}
/* зображення гумові */
figure.ink-image > img {
border: 0px none;
width: 100%;
vertical-align: top;
}
/* формуємо підписи до картинок */
figure.ink-image > figcaption {
padding: 1em;
background: none repeat scroll 0% 0% #FFF;
line-height: 1.3;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
/* підпис поверх картинки зверху */
figcaption.over-top {
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.7);
border: medium none;
position: absolute;
top: 0px;
width: 100%;
}

/* групуємо картинки */
figure {
margin: 0px;
}
/* position: relative; обов’язково, інше за смаком */
figure.ink-image {
position: relative;
border: 1px solid #555;
}
/* зображення гумові */
figure.ink-image > img {
border: 0px none;
width: 100%;
vertical-align: top;
}
/* формуємо підписи до картинок */
figure.ink-image > figcaption {
padding: 1em;
background: none repeat scroll 0% 0% #FFF;
line-height: 1.3;
font-family: ‘Roboto’, sans-serif;
font-weight: 400;
}
/* підпис поверх картинки зверху */
figcaption.over-top {
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.7);
border: medium none;
position: absolute;
top: 0px;
width: 100%;
}

4. Підпис поверх зображення, притиснута до нижнього краю

Все теж саме що і в попередньому прикладі, різниця тільки в розташуванні підпису. У цьому варіанті підпис притиснута до нижнього краю зображення, працює властивість bottom: 0px; при абсолютному позиціонування position: absolute;.

  • Результат
  • HTML
  • CSS
 
 

5. Підпис на зображенні строго по центру

Таким способом найчастіше розміщують заголовки статей або слогани на повноекранних картинках і широкоформатних слайдерах. У зв’язці з анімацією css переходів появи, можна досягти приголомшливих результатів. Базова конструкція фіксованого розташування підпису строго по центру зображення, буде виглядати приблизно так:

  • Результат
  • HTML
  • CSS

Підпис по центру


Підпис по центру

/* групуємо картинки */
figure {
margin: 0px;
}
/* position: relative; обов'язково, інше як вставить)) */
figure.ink-image {
position: relative;
border: 1px solid #555;
}
/* зображення гумові */
figure.ink-image > img {
border: 0px none;
width: 100%;
vertical-align: top;
}
/* формуємо підписи до картинок */
/* підпис строго по центру */
figure.ink-image > figcaption.center {
background: none;
position: absolute;
width: 100%;
font-family: 'Roboto', sans-serif;
font-weight: 900;
color: white;
text-transform: uppercase;
text-align: center;
margin: 0;
top: 50%;
left: 50%;
font-size: 2rem;
transform: translate(-50%, -50%);
}

/* групуємо картинки */
figure {
margin: 0px;
}
/* position: relative; обов’язково, інше як вставить)) */
figure.ink-image {
position: relative;
border: 1px solid #555;
}
/* зображення гумові */
figure.ink-image > img {
border: 0px none;
width: 100%;
vertical-align: top;
}
/* формуємо підписи до картинок */
/* підпис строго по центру */
figure.ink-image > figcaption.center {
background: none;
position: absolute;
width: 100%;
font-family: ‘Roboto’, sans-serif;
font-weight: 900;
color: white;
text-transform: uppercase;
text-align: center;
margin: 0;
top: 50%;
left: 50%;
font-size: 2rem;
transform: translate(-50%, -50%);
}

6. Виділені підпису з фоновою заливкою

На завершення парочка прикладів підписів розташованих в різних кутах зображення, виділених фонової заливкою того чи іншого кольору. Розмір контейнера підписів відповідає розміру текстового змісту, включаючи внутрішні відступи padding: 4px 8px;. Розташування підписів встановлюється з допомогою властивостей left: відправляючи вліво або right: відправляючи вправо. У прикладі показаний варіант розташування підписів у нижніх кутах картинки, задіяний відступ від нижнього краю, властивість bottom:. Відповідно, щоб розташувати підпису у верхніх кутах, досить використовувати top:, цифрові значення опціонально.

  • Результат
  • HTML
  • CSS

Підпис на темному тлі.

Підпис на світлому фоні.


Підпис на темному тлі.

Підпис на світлому фоні.

/* групуємо картинки */
figure {
margin: 0px;
}
/* position: relative; обов'язково, інше опціонально */
figure.ink-image {
position: relative;
border: 1px solid #555;
}
/* зображення гумові */
figure.ink-image > img {
border: 0px none;
width: 100%;
vertical-align: top;
}
/* формуємо підписи до картинок */
figure.ink-image > figcaption {
padding: 1em;
line-height: 1.3;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
/* виділені підпису з фоном */
/* підпис на темному тлі */
figure.ink-image > figcaption.dark {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.75);
padding: 4px 8px;
color: white;
margin: 0;
font: 14px Sans-Serif;
}
/* підпис на світлому фоні */
figure.ink-image > figcaption.light {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.75);
padding: 4px 8px;
color: black;
margin: 0;
font: 14px Sans-Serif;
}

/* групуємо картинки */
figure {
margin: 0px;
}
/* position: relative; обов’язково, інше опціонально */
figure.ink-image {
position: relative;
border: 1px solid #555;
}
/* зображення гумові */
figure.ink-image > img {
border: 0px none;
width: 100%;
vertical-align: top;
}
/* формуємо підписи до картинок */
figure.ink-image > figcaption {
padding: 1em;
line-height: 1.3;
font-family: ‘Roboto’, sans-serif;
font-weight: 400;
}
/* виділені підпису з фоном */
/* підпис на темному тлі */
figure.ink-image > figcaption.dark {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.75);
padding: 4px 8px;
color: white;
margin: 0;
font: 14px Sans-Serif;
}
/* підпис на світлому фоні */
figure.ink-image > figcaption.light {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.75);
padding: 4px 8px;
color: black;
margin: 0;
font: 14px Sans-Serif;
}

На цьому мабуть і все! Звичайно, це далеко не всі варіанти розташування підписів на зображеннях, все обмежується лише фантазією розробника. Експериментуючи з параметрами, додавши різні ефекти анімації, можна домогтися чудових результатів. Навчившись робити підписи фіксованими, надалі не складе труднощів зробити їх, наприклад, спливаючими при наведенні. При цьому неважливо, чи будете ви використовувати елементи і , або звичні div-контейнери з додатковими елементами, для реалізації підписів до картинок.

Вихідні матеріали з прикладами упакував в архів і виклав у хмарі на Яндекс.Диск, звідки ви запросто зможете їх завантажити:

Завантажити Вихідні Коди

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: