⛄⛄⛄ Новогодний коллаж своими руками

[fotovivo]

1

Научимся делать текст с блестками и блестящие рамочки - без фоторедактора, непосредственно на веб-странице

Нам понадобится цветной глиттер, типа такого:



Гифка небольшая по размеру, но это не важно, фон будет повторяться сколько нужно.
Заполним фоновым глиттером блок размером 500Х120 пикселей:

тут будет текст

тут будет текст

Внутрь этого контейнера поместим текст, с темно-синим фоном и шрифтовыми эффектами - цвет белый, размер в семь раз больше предустановленного, 900 - болд ("жирный")

С Новым!

а компонент mix-blend-mode: multiply - это параметр наложения (смешения фонов), он обеспечит тексту прозрачность.

Конструкция в сборе:

С Новым!

С Новым!

Чтобы контуры букв искрились - добавим к стилям тень белого цвета: text-shadow: 3px 6px 10px #fff;

С НОВЫМ!

[Посмотреть, как сделано]

С НОВЫМ!


С новым!

Примечание:
Полной кроссбраузерности у этого эффекта нет - в мело-мягком Итернет Эксплорере смешение слоев не работает. Но в нем много чего не работает, это вечная головная боль профи-верстальщиков.
Рукодельничания для собственного удовольствия в бложике, можно на ИE забить. Хотите видеть страницы во всей полноте их функционала - пересаживайтесь на Хром, Лису, Оперу и прочий Тор :) (А не хотите - полно способов отключить все стили нафиг, а то и вообще любую графику, смотреть на экран в цифро-буквенном формате)

Примерчики с анимированным фоном :

С Новым!
[Утащилка]

С Новым!


С Новым!
[Утащилка]

С Новым!


С Новым!
[Утащилка]

С Новым!


С Новым!
[Утащилка]

С Новым!


С Новым!
[Утащилка]

С Новым!


С Новым!
[Утащилка]

С Новым!


С Новым!
[Утащилка]

С Новым!


С Новым!
[Утащилка]

С Новым!


С Новым!
[Утащилка]

С Новым!


С Новым!
[Утащилка]

С Новым!


С Новым!
[Утащилка]

С Новым!


С Новым!
[Утащилка]

С Новым!


С Новым!
[Утащилка]

С Новым!


С Новым!
[Утащилка]

С Новым!


С Новым!
[Утащилка]

С Новым!


Открытка cо снежными буквами сконструирована по тому же принципу:

С Новым годом!

Объединением глиттера

фона

и текста:

ТУТ БУДЕТ ТЕКСТ

Еще одна фишка - рамочка с блестками, подстраивающаяся под размер картинки:

2019

[Посмотреть, как сделано]

Ura

Все просто - задаем цвет и толщину бордера и добавляем к нему изображение: border:11px solid silver; border-image: url(https://ic.pics.livejournal.com/fotovivo/19078119/2554782/2554782_original.gif) 15% round;

В отличии от цельнокроенных открыток, в коллаж можно подставить любой текст по своему выбору, поменять цвет, шрифт, что угодно:

[Утащилка]



ТУТ_БУДЕТ_ТЕКСТ

Контейнер в контейнере, как матрешка (вложений может быть сколько угодно, так и выглядит верстка на веб-страницах).
Коллаж состоит из двух гифок - елочки и снеговика, наложенных друг на друга и "подвала" с текстом по искрящемуся глиттеру.




С Наступающим!