Как сделать надпись поверх картинки
ко вчерашней теме добавочка из мумми-сумочки
Если уж картинки можно наложить одну на другую, то надпись и подавно.
В редакторе новой записи (режим HTML) есть кнопочка тТ
выберем, напр, размер шрифта -> большой
Получим вот такой код:
Здравствуй, Новый Год!
(1.5em - это значит, что шрифт будет в полтора раза крупнее заданного по умолчанию)
Теперь поместим текст в контейнер (block), c указанием размеров:
и можем задать этому блоку фоновую картинку
- всё как в предыдущем примере с гифами.
.....осень облетела .....здравствуй новый Год
.....осень облетела
.....здравствуй новый Год
.....ёлка-праздники-подарки и
.....к весне вперед
А чтоб совсем красиво смотрелось - добавим отступы и,
на случай темного фона, изменим цвет текста:
скоро вновь зима нагрянет кошки улетят на юг
скоро вновь зима нагрянеткошки улетят на югвторое маловероятноно вдруг
украсим блок рифленой рамочкой (border) шириной 15 пикселей,
и даже тень у нее выведем (#ccc - серая; может быть любого цвета. Как и рамка)
ridge #ccc; box-shadow: 1px 1px 10px 10px lightblue; ">зима бежишь с горы кататься
зима бежишь с горы кататьсянаперекор своей судьбеи кажется что минус двадцать тебе
А шрифт выберем с выкрутасами и
добавим скругление уголков:
Чем больше borer-radius, тем круглее.
Вплоть до того, что контейнер превратится в круг (но тогда исходно он должен быть квадратным):
согреет дам в холодный вечер получше пледа и мурлык слегка накинутый на плечи мужик
Еще можно поиздеваться над border-ом: если вместо обычного solid напишем dotted - получим границу в точечку:
я вежд дотёпа леп и истов доумеваю настных взгод навижу взрачные забудки годую брежно доросль рях
Для желающих - домашнее задание:
1. Догадайтесь, что делает атрибут text-shadow
2* Как сделать рамочку с блестками? предлагайте варианты
Остается отметить, что порадовать френдов виртуальной открыточкой можно только в записях на своей странице,
в комментариях, увы, допускается только минимальный ХТМЛ, типа болд-италик-подчеркивание;
по-хорошему в комментах никакие стилевые изощрения не пройдут
(левой ногой через правое ухо можно, но оно того не стоит :)
И последний штрих - позиционирование:
чтобы надпись расположилась по середине картинки -
допишем в кодах text-align:center;
соответственно text-align:right сдвинет текст вправо (слева он расположен по умолчанию)
line-height - cдвиг по вертикали
