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

Dec 03, 2016 18:18

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

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


В редакторе новой записи (режим 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двиг по вертикали

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

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

веб-штучки

Previous post Next post
Up