Pixel Grid

05.07.2015

653

Pixel Grid (пиксельная сетка) применяется для придания текстуры фону или изображению. Служит для затемнения или осветления основы.

К необходимому объекту, например <div> с классом .photo в CSS делаем такие свойства

.w-grid {
  float: left;
  width: 100%;
  position: relative;
}


.w-grid::after {
  background-image: url(https://opttour.ru/wp-content/themes/tester/images/bg-pattern-wt.png);
  width: 100%;
  height: 100%;
  position: absolute;
  left:0;
  content: "";
}
.d-grid {
  float: left;
  width: 100%;
  position: relative;
}


.d-grid::after {
  background-image: url(https://opttour.ru/wp-content/themes/tester/images/bg-pattern.png);
  width: 100%;
  height: 100%;
  position: absolute;
  left:0;
  content: "";
}

!и обязательно чтобы объект внутри <div> был объект (например img) со свойством float:left;

Примеры

pixel-city_ipad
pixel-city_ipad
pixel-city_ipad

Первое изображение без пиксельной сетки, во втором примере добавлен класс w-grid, в третьем примере добавлен класс d-grid
Во 2-м и 3-м примерах ::after прописан не в .photo, а в классах w-grid и d-grid. ::after для изображения (img) задать нельзя, т.к. тэг должен быть открываемый/закрываемый div /div

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
День и ночь: фон

День и ночь: фон

Интересным решением является изменение сайта или его элементов в зависимости от времени суток (Пример — сайт Geometria). Рассмотрим базовую функцию реализации данного функционала. <script> theTime = new Date(); theHour = Читать далее »

Миниатюра — фон сайта

Миниатюра — фон сайта

Мы можем использовать миниатюру записи для самых разных целей. В данной статье рассмотрим вариант использовать миниатюру в виде фонового изображения сайта. Вывод миниатюры в виде фона В цикл вывода миниатюры Читать далее »

/

Добавить комментарий

Пока нет комментариев. Будь первым!

Pixel Grid
Кнопки WC
Рекомендации для васКнопки WCOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.