Підписи для картинок на html і css
У верстці часто доводиться працювати з картинками. Чи не в контексті створення з їх допомогою оформлення, а саме картинками як картинками. І дизайнери іноді дуже люблять вигадувати різні способи оформлення підписів до картинок, верстка яких може викликати труднощі у початківців. У цій замітці я постараюся розкрити один із способів верстки підписів для зображень.
Отже, ми хочемо побачити результат приблизно як на малюнку 1.
Малюнок 1. Початкова картинка
Для цього нам знадобитися написати ось такий html-код:
Поки все просто: обертаємо картинку в блок, нижче картинки всередині span вписуємо підпис для неї. Сам прийом заснований на додаванні до елементу, який містить підпис (в даному випадку - до span), абсолютного позиціонування і розташування внизу, що дозволить тексту в ньому розтягувати елемент не вниз, а вгору. Але щоб всі елементи вели себе правильно, потрібно буде прописати деякі стилі і для картинки, і для блоку-обгортки. Отже, по порядку.
Так як span у нас буде абсолютним, до обгортці потрібно додати position: relative. а також вказати ширину.
Картинку слід примусово зробити блокової, щоб прибрати непотрібні нам відступи знизу і видалити рамку в IE.
Але найбільше стилів ми пропишемо для span:
- ми робимо його блоком
- задаємо padding щоб текст не прилипав до країв
- задаємо примусову ширину (не забудьте зменшити її на ширину padding'a)
- робимо абсолютне позиціонування і «приклеюємо» до низу блоку-обгортки, який є візуально і самим низом картинки
- далі задаємо колір фону, його прозорість (згідно зі статтею 12 простих і корисних прийомів), оформляємо текст підпису за смаком
Таким чином, найголовніше - це перші п'ять властивостей. Решта оформлення ви можете змінити як завгодно на ваш розсуд. В результаті вийшла така сторінка
Зверніть увагу Ширини блоку-обгортки, картинки і блоку з назвою з урахуванням padding повинні бути рівними!