Rimon Lusi (fotovivo) wrote,
Rimon Lusi
fotovivo

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

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:&#39;Palatino Linotype&#39;; 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 забить. Хотите видеть страницы во всей полноте их функционала - пересаживайтесь на Хром, Лису, Оперу и прочий Тор :) (А не хотите - полно способов отключить все стили нафиг, а то и вообще любую графику, смотреть на экран в цифро-буквенном формате)


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

С Новым!

[Утащилка]<div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2550289/2550289_original.gif);width:550px;height:auto;text-align:center;"><p style="background:#1e2042; font-family:Arial; font-size:6em; font-weight:700; color:#fff; mix-blend-mode: difference;text-shadow: 3px -2px 5px #62c3f7; padding:10px;margin:0 20px;">С Новым!</p></div>

С Новым!

[Утащилка]<div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2550739/2550739_original.gif);width:550px;height:auto;text-align:center;"><p style="background:#1e2042; font-family:Tahoma, Verdana; font-size:6em; font-weight:700; color:#fff; mix-blend-mode: difference; padding:10px;margin:0 20px;">С Новым!</p></div>

С Новым!

[Утащилка]<div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2549942/2549942_original.gif);width:550px;height:auto;text-align:center;"><p style="background:#1e2042; font-family:Tahoma, Verdana; font-size:6em; font-weight:700; color:#fff; mix-blend-mode: difference; padding:10px;margin:0 20px;">С Новым!</p></div>

С Новым!

[Утащилка]<div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2548827/2548827_original.gif);width:550px;height:auto;text-align:center;"><p style="background:#1e2042; font-family:Tahoma, Verdana; font-size:6em; font-weight:700; color:#fff; mix-blend-mode: difference; padding:10px;margin:0 20px;">С Новым!</p></div>

С Новым!

[Утащилка]<div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2546872/2546872_original.gif);width:550px;height:auto;text-align:center;"><p style="background:#1e2042; font-family:Tahoma, Verdana; font-size:6em; font-weight:700; color:#fff; mix-blend-mode: difference; padding:10px;margin:0 20px;">С Новым!</p></div>

С Новым!

[Утащилка]<div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2550199/2550199_original.gif);width:550px;height:auto;text-align:center;"><p style="background:#1e2042; font-family:Tahoma, Verdana; font-size:6em; font-weight:700; color:#fff; mix-blend-mode: difference; padding:10px;margin:0 20px;">С Новым!</p></div>

С Новым!

[Утащилка]<div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2548531/2548531_original.gif);width:550px;height:auto;text-align:center;"><p style="background:#1e2042; font-family:Tahoma, Verdana; font-size:6em; font-weight:700; color:#fff; mix-blend-mode: difference; padding:10px;margin:0 20px;">С Новым!</p></div>

С Новым!

[Утащилка]<div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2547458/2547458_original.gif);width:550px;height:auto;text-align:center;"><p style="background:#1e2042; font-family:Tahoma, Verdana; font-size:6em; font-weight:700; color:#fff; mix-blend-mode: difference; padding:10px;margin:0 20px;">С Новым!</p></div>

С Новым!

[Утащилка]<div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2545715/2545715_original.gif);width:550px;height:auto;text-align:center;"><p style="background:#1e2042; font-family:Georgia; font-size:5em; font-weight:700; color:#fff; mix-blend-mode: difference; padding:10px;text-shadow: 2px 2px 6px #fff;margin:0 20px;">С Новым!</p></div>

С Новым!

[Утащилка]<div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2547148/2547148_original.gif);width:550px;height:auto;text-align:center;"><p style="background:#1e2042; font-family:Impact; font-size:6em; font-weight:700; color:#fff; mix-blend-mode: difference; padding:10px;margin:0 20px;">С Новым!</p></div>

С Новым!

[Утащилка]<div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2547943/2547943_original.gif) 55% 55%;width:550px;height:auto;text-align:center;"><p style="background:#1e2042;font-family: calibri;font-size: 7em;font-weight: 900;color: #d7ffef;mix-blend-mode: exclusion;padding: 10px;margin: 0 10px;text-shadow: 10px 10px #ff4f6a;text-decoration: overline underline;">С Новым!</p></div>

С Новым!

[Утащилка]<div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2545461/2545461_original.gif);width:550px;height:auto;text-align:center;"><p style="background: #4141d2;font-family:Tahoma,Verdana;font-size:6em;font-weight:700;color:#fff;mix-blend-mode:multiply;padding:10px;margin:0 20px;text-decoration: underline #fff dashed;">С Новым!</p></div>

С Новым!

[Утащилка]<div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2545930/2545930_original.gif);width:550px;height:auto;text-align:center;"><p style="background:#1e2042;font-family:Segoe Print;font-size: 4em;font-weight: 700;color: #f582e6;mix-blend-mode:multiply;padding:10px;margin:0 20px;text-decoration: underline #fff dotted;">С Новым!</p></div>

С Новым!

[Утащилка]<div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2553413/2553413_original.gif);width:550px;height:auto;text-align:center;"><p style="background:#555a3a;font-family:Arial Black;font-size:5em;font-weight:800;color:#fff;mix-blend-mode:multiply;padding: 0 40px 40px 40px;margin: 1px 20px;text-decoration: underline salmon wavy;">С Новым!</p></div>

С Новым!

[Утащилка]<div style="background:url(https://ic.pics.livejournal.com/fotovivo/19078119/2551255/2551255_original.gif);width:550px;height:auto;text-align:center;"><p style="background:#1e2042; font-family:Tahoma, Verdana; font-size:6em; font-weight:700; color:#fff; mix-blend-mode: difference; padding:10px;margin:0 20px;">С Новым!</p></div>


Открытка 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>

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


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



Tags: НГ, блогоухищрения, веб-штучки
Subscribe

Featured Posts from This Journal

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 49 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →