1
Научимся делать текст с блестками и блестящие рамочки - без фоторедактора, непосредственно на веб-странице
Нам понадобится цветной глиттер, типа такого:
Гифка небольшая по размеру, но это не важно, фон будет повторяться сколько нужно.
Заполним фоновым глиттером блок размером 500Х120 пикселей:
тут будет текст
<div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2554166/2554166_original.gif); width:500px; height:120px;">тут будет текст</div>
Внутрь этого контейнера поместим текст, с темно-синим фоном и шрифтовыми эффектами - цвет белый, размер в семь раз больше предустановленного, 900 - болд ("жирный")
<p style="background:#1e2042; font-family:'Palatino Linotype'; font-size:7em; font-weight:900; color:#fff; mix-blend-mode: multiply; ">С Новым!</p>
а компонент mix-blend-mode: multiply - это параметр наложения (смешения фонов), он обеспечит тексту прозрачность.
Конструкция в сборе:
С Новым!
<div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2554166/2554166_original.gif); width:550px; height:auto; text-align:center; padding:7px 0;"><p style="background:#1e2042; font-family:'Palatino Linotype'; font-size:6em; font-weight:900; color:#fff; mix-blend-mode: multiply; margin:0 20px;">С Новым!</p></div>
Чтобы контуры букв искрились - добавим к стилям тень белого цвета: text-shadow: 3px 6px 10px #fff;
С НОВЫМ!
[Посмотреть, как сделано]<div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2553314/2553314_original.gif); width:550px; height:auto;"><div style="background: url(https://ic.pics.livejournal.com/fotovivo/19078119/2552491/2552491_original.gif);width:550px;height:auto;text-align:center;padding:7px 0;"><p style="background: #05100f;font-family:Trebuchet MS;font-size:6em;font-weight: 800;color:#fff;mix-blend-mode: multiply;margin:0 20px;text-shadow: 3px 6px 10px #fff;">С НОВЫМ!</p></div></div>
С новым!
Примечание:
Полной кроссбраузерности у этого эффекта нет - в мело-мягком Итернет Эксплорере смешение слоев не работает. Но в нем много чего не работает, это вечная головная боль профи-верстальщиков.
Рукодельничания для собственного удовольствия в бложике, можно на ИE забить. Хотите видеть страницы во всей полноте их функционала - пересаживайтесь на Хром, Лису, Оперу и прочий Тор :) (А не хотите - полно способов отключить все стили нафиг, а то и вообще любую графику, смотреть на экран в цифро-буквенном формате)
Примерчики с анимированным фоном :
С Новым!
С Новым!
С Новым!
С Новым!
С Новым!
С Новым!
С Новым!
С Новым!
С Новым!
С Новым!
С Новым!
С Новым!
С Новым!
С Новым!
С Новым!
Открытка cо снежными буквами сконструирована по тому же принципу:
С Новым годом!
Объединением глиттера
фона
и текста:
<div style="background: url(https://ic.pics.livejournal.com/fotovivo/19078119/2555045/2555045_original.gif) repeat-x; background-size:40% 40%; width:940px;height:640px;"><div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2549487/2549487_original.jpg);font-family:Arial Black;font-size:4em;font-weight:600;color:#fff;mix-blend-mode: multiply;width:940px;height:640px;"><p style="padding-left:12px; padding-top:4px; text-shadow: 0 -4px 8px #fff;"> ТУТ БУДЕТ ТЕКСТ </p></div></div>
Еще одна фишка - рамочка с блестками, подстраивающаяся под размер картинки:
2019
[Посмотреть, как сделано]<div style="border: 11px solid transparent;background:#000;border-image: url(https://ic.pics.livejournal.com/fotovivo/19078119/2554782/2554782_original.gif) 15% round;width:450px;height:600px;box-shadow: 3px 3px 6px #2e0808, inset -1px -1px 22px #ebb9b9;"><div style="background: url(https://ic.pics.livejournal.com/fotovivo/19078119/2557511/2557511_original.gif) 20px 20px no-repeat; width:450px; height:600px; "><div style="background: url(https://ic.pics.livejournal.com/fotovivo/19078119/2559162/2559162_original.gif) 160px 270px no-repeat;width:450px;height:600px;">Ura</div></div></div>
Все просто - задаем цвет и толщину бордера и добавляем к нему изображение: border:11px solid silver; border-image: url(https://ic.pics.livejournal.com/fotovivo/19078119/2554782/2554782_original.gif) 15% round;
В отличии от цельнокроенных открыток, в коллаж можно подставить любой текст по своему выбору, поменять цвет, шрифт, что угодно:
[Утащилка]
<div style="display:inline-block; border:1px solid silver; padding:18px; background:#fff; box-shadow:2px 2px 4px grey;"><div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2545083/2545083_original.gif); width:550px; height:550px;"><div style="width:111px;height:143px;padding-top: 60%;padding-left: 385px;opacity: 0.7;"><img src='https://ic.pics.livejournal.com/fotovivo/19078119/2555261/2555261_original.gif' /></div></div><div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2552976/2552976_original.gif) 0 36% repeat-x; background-size:40% 40%; width:550px;height:150px;"><div style="background: #0d250c; font-family:Lucida Console; font-size: 3.6em;font-weight: 900;color:#fff;mix-blend-mode: multiply;width: 530px;height:150px;padding-left: 20px;"><div style="padding-left:4px;padding-top:24px;text-shadow: 0 -4px 8px #fff;">ТУТ_БУДЕТ_ТЕКСТ</div></div></div></div>
Контейнер в контейнере, как матрешка (вложений может быть сколько угодно, так и выглядит верстка на веб-страницах).
Коллаж состоит из двух гифок - елочки и снеговика, наложенных друг на друга и "подвала" с текстом по искрящемуся глиттеру.
С Наступающим!
;){kind=link}
;){kind=link}
;width:550px;height:auto;text-align:center;padding:7px){kind=link}
;width:550px;height:auto;text-align:center;){kind=link}
;width:550px;height:auto;text-align:center;){kind=link}
;width:550px;height:auto;text-align:center;){kind=link}
;width:550px;height:auto;text-align:center;){kind=link}
;width:550px;height:auto;text-align:center;){kind=link}
;width:550px;height:auto;text-align:center;){kind=link}
;width:550px;height:auto;text-align:center;){kind=link}
;width:550px;height:auto;text-align:center;){kind=link}
;width:550px;height:auto;text-align:center;){kind=link}
;width:550px;height:auto;text-align:center;){kind=link}
;width:550px;height:auto;text-align:center;){kind=link}
;width:550px;height:auto;text-align:center;){kind=link}
;width:550px;height:auto;text-align:center;){kind=link}
;width:550px;height:auto;text-align:center;){kind=link}
;font-family:Arial){kind=link}
;){kind=link}
← Ctrl ← Alt
Ctrl → Alt →
← Ctrl ← Alt
Ctrl → Alt →