Как сделать надпись поверх картинки

[rimon_fotovivo]

ко вчерашней теме добавочка из мумми-сумочки

Если уж картинки можно наложить одну на другую, то надпись и подавно.


В редакторе новой записи (режим HTML) есть кнопочка тТ
выберем, напр, размер шрифта -> большой
Получим вот такой код:

<span style="font-size: 1.5em;">Здравствуй, Новый Год!</span>
(1.5em - это значит, что шрифт будет в полтора раза крупнее заданного по умолчанию)

Здравствуй, Новый Год!


Теперь поместим текст в контейнер (block), c указанием размеров:

<span style="display:block; width:600px; height:150px; font-size:1.5em; ">Привет, Мороз!</span>

Привет, Мороз!



и можем задать этому блоку фоновую картинку
- всё как в предыдущем примере с гифами.

<span style="display:block; width:600px; height:400px;  background:url(http://вашфон.jpg);">.....осень облетела .....здравствуй новый Год</span>


Наполним контейнер пирожками:

.....осень облетела
.....здравствуй новый Год
.....ёлка-праздники-подарки и
.....к весне вперед




А чтоб совсем красиво смотрелось - добавим отступы и,
на случай темного фона, изменим цвет текста:

<span style="display:block; width:500px; height:530px; font-size:1.2em; background:url(http://адрескартинки.jpg); padding:20px; color: yellow;"> скоро вновь зима нагрянет кошки улетят на юг</span>


скоро вновь зима нагрянет
кошки улетят на юг
второе маловероятно
но вдруг




украсим блок рифленой рамочкой (border) шириной 15 пикселей,
и даже тень у нее выведем (#ccc - серая; может быть любого цвета. Как и рамка)

<span style="display:block; width:500px; height:600px; font-size:1.2em; background:url(http://адрескартинки.jpg); padding:20px; color: blue;  border: 15px ridge #ccc; box-shadow: 1px 1px 10px 10px lightblue; ">зима бежишь с горы кататься</span>



зима бежишь с горы кататься

наперекор своей судьбе
и кажется что минус двадцать
тебе




А шрифт выберем с выкрутасами и
добавим скругление уголков:

<span style="display:block; width:500px; height:280px; font-size:1.3em;  background:url(http://вашакартинка.jpg); padding:25px; color:yellow;  border: 4px solid red; box-shadow: 2px 2px 2px #ccc; font-family:Segoe Print; border-radius: 25px;">Вы там держитесь!</span>


Вы там держитесь!



Чем больше borer-radius, тем круглее.
Вплоть до того, что контейнер превратится в круг (но тогда исходно он должен быть квадратным):

<span style="display:block; width:460px; height:460px; background:url(http://квадратныйimg.jpg); padding-top:320px; color:#000; border: 3px; border-radius: 230px; ">согреет дам в холодный вечер</span>


согреет дам в холодный вечер

получше пледа и мурлык
слегка накинутый на плечи

мужик




Еще можно поиздеваться над border-ом: если вместо обычного solid напишем dotted - получим границу в точечку:

<span style="display:block; width:500px; height:350px; padding:20px; background:url(http://kartinka.gif); color:darkblue; border: 9px dotted #fff; ">я вежд дотёпа леп и истов</span>


я вежд дотёпа леп и истов

доумеваю настных взгод

навижу взрачные забудки

годую брежно доросль рях





Для желающих - домашнее задание:
1. Догадайтесь, что делает атрибут text-shadow
2* Как сделать рамочку с блестками? предлагайте варианты




Остается отметить, что порадовать френдов виртуальной открыточкой можно только в записях на своей странице,
в комментариях, увы, допускается только минимальный ХТМЛ, типа болд-италик-подчеркивание;
по-хорошему в комментах никакие стилевые изощрения не пройдут
(левой ногой через правое ухо можно, но оно того не стоит :)




И последний штрих - позиционирование:
чтобы надпись расположилась по середине картинки -
допишем в кодах text-align:center;

<span style="display:block; width:600px; height:500px; font-size:2.3em; background:url(http://ваш.gif); color:#fff;  font-family:Monotype Corsiva;  text-align:center; line-height: 150px;"><b>С Надвигающимся!</b></span>

соответственно text-align:right сдвинет текст вправо (слева он расположен по умолчанию)
line-height - cдвиг по вертикали


С Надвигающимся!





Не ждите чуда! Чудите сами!