Если уж картинки можно наложить одну на другую, то надпись и подавно.
В редакторе новой записи (режим 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двиг по вертикали
С Надвигающимся!
Не ждите чуда! Чудите сами!

← Ctrl ← Alt
Ctrl → Alt →
← Ctrl ← Alt
Ctrl → Alt →