• Страница 1 из 1
  • 1
Фоновый слой сетки для оформление сайта
Kosten
Четверг, 17 Января 2019, 22:01 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Вашему вниманию сетчатый эффект, где представлен в несколько вариантов фонового слоя темной сетки, которая идет формате PNG. Которую применяют на разных элементах стиля на сайте, так как можно поставить на изображение и оно становится оригинальным. Ведь если смотреть на оригинал картинки, то не чего такого вы не заметите, но как только стоит наложить фон, то совершенно по другому смотрится.

Вы можете посмотреть вверх сайта, где как раз применен слой, что по умолчанию изображение идет ярким. Как только подключили по вверх слой, то яркость уменьшилась, где сама картинка уже смотрится совершенно в другом стили. Если говорить про элементы, то низ сайта аналогично был задействован, где просто темный шел, а теперь в крапинку.

Первые три слоя:



1. /ABVUN/Abas/01.png

2. /ABVUN/Abas/02.png

3. /ABVUN/Abas/03.png

Второй набор слоя:



4. /ABVUN/Abas/04.png

5. /ABVUN/Abas/05.png

6. /ABVUN/Abas/06.png

Третий вариант:



7. /ABVUN/Abas/07.png

8. /ABVUN/Abas/08.png

9. /ABVUN/Abas/09.png

Рассмотрим на примере картинки и элемента дизайн.

Реальное изображение:



Изображение со слоем:



Теперь идет элемент сайта

Низ в стандартном виде:



На этот низ уже поверх выставлен фон



Установка:

Находим элемент или картинку, и к ним прописываем.

Код
background: url(Здесь ссылка на фоновый слой) repeat #000000;


Как можно видеть изменение заметно, это касается любого оттенка цвета, как на светлом или темном фоне видны кардинальные изменение.
Прикрепления: 6352484.png (5.1 Kb) · 5381617.png (6.4 Kb) · 2032372.png (8.2 Kb) · 6894087.jpg (30.4 Kb) · 0472559.jpg (59.1 Kb) · 1722428.jpg (6.3 Kb) · 0530982.jpg (9.9 Kb)
Страна: (RU)
Kosten
Пятница, 18 Января 2019, 01:35 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Один из многих интересных эффектов, как Эффект холста, где фотографий придает оригинальный стиль. Теперь можно посмотреть как этот эффект преобразил картинку, где изначально идет по умолчанию, и потом подключаем стили.

Оригинал:



Эффект:



Здесь используется режим смешивания:

HTML

Код
<div class="satedu-kpgvamub"></div>


CSS

Код
.satedu-kpgvamub {
  width: 587px;
  height: 387px;
  background-image: url(http://zornet.ru/ABVUN/Abas/derasqun.jpg), url(http://zornet.ru/ABVUN/Abas/gsan.jpg);
  background-blend-mode: color-burn;
}


Теперь можно под оригинальный дизайн поставить несколько таких эффектов.

Демонстрация
Прикрепления: 8080336.jpg (28.9 Kb) · 1709411.jpg (96.5 Kb)
Страна: (RU)
Kosten
Вторник, 22 Января 2019, 01:01 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Еще один фоновый рисунок, который на тесной гамме красиво смотрится.



/SKRIPT/code.gif
Прикрепления: 2316653.png (40.9 Kb) · 1978338.gif (0.1 Kb)
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: