Закругляем углы на картинках; Вставляем текст на картинку...

Суббота, 14 Января 2017 г. 14:16 + в цитатник

Цитата сообщения bloginja

Прочитать целиком В свой цитатник или сообщество!

*Закругляем острые углы на картинке

Берём картинку

Чтобы закруглить углы на картинке, пишем HTMLкод:

<img src="АДРЕС КАРТИНКИ" width="ШИРИНА КАРТИНКИ" height="ВЫСОТА КАРТИНКИ"border="0" style="border-radius: ЧИСЛО ОТ 1 ДО 100%;" />

Вставляем данные и получаем картинку с закругленными углами :

Радиус установлен 80%

Радиус установлен 9%

Текст на картинкуHTML код:
<div align="center"><table background="АДРЕС КАРТИНКИ"><tr><td valign="bottom" align="center" width="ширина картинки" height="высота картинки"><font face="шрифт текста" size="размер текста" color="#цвет текста">ТЕКСТ.</font></td></tr></table></div>

Пример:

Смотрите на цветы. Минуты не считайте.
В цветах повтора нет, от них нельзя устать.
Смотрите на цветы. Их как стихи читайте.
Прекрасно над цветком в раздумье постоять.

Чтобы текст располагался вверху, нужно заменить в коде valign="bottom" на valign="top"
а заменив на valign="middle", текст будет выровнен по середине.
Пробуйте, эксперементируйте. Количество текста зависит от размера картинки.

bloginja*

KOD моего оформления>>>

===============================

Серия сообщений "*******ШПРАГАЛКИ":
Часть 1 - Рамочки в 1 слой...
Часть 2 - СПЕЦКОДЫ для оформления поста -1-
...
Часть 10 - Картинки в ряд... Превью...
Часть 11 - Рамочка с прокруткой текста - 1 - ...
Часть 12 - Закругляем углы на картинках; Вставляем текст на картинку...
Часть 13 - Рамочка с ПРОКРУТКОЙ ТЕКСТА - 2 - ...
Часть 14 - Cимволы
...
Часть 19 - Ещё одна находка - ВЕРТИКАЛЬНАЯ ЛИНИЯ в тексте.
Часть 20 - И снова — «Рамочка-книжка»
Часть 21 - ***МОИ маленькие находки...