CSS эффект пикселизации изображения

CSS эффект пикселизации изображения

Для эффекта пикселизации нам понадобиться какое-нибудь изображение.

HTML разметка и позиционирование

Итак, у нас есть изображение female.jpg, размером 600×400 пикселей. Чтобы получить его десятикратно уменьшенную копию, откроем эту картинку в родном редакторе Windows, двойным нажатием на мышку. Затем изменим ее размер до 60×40 пикселей (Resize —> Define custom dimensions) и сохраним под новым именем female_pixel.jpg.

CSS эффект пикселизации изображения

<div class="box">
    <img src="female.jpg">
</div>
<div class="box pixel">
    <img src="female_pixel.jpg">
</div>

*{
    margin: 0;/*обнуление отступов*/
    padding: 0;/*обнуление полей*/
    box-sizing: border-box;
}
body{
    display: flex;/*flexbox контейнер*/
    justify-content: center;/*горизонтальное выравнивание*/
    align-items: center;/*вертикальное выравнивание*/
    min-height: 100vh;/*на всю высоту видимой области*/
}

CSS эффект пикселизации изображения

Растяжение маленькой картинки

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

.box {
    position: relative;/*относительное позиционирование*/
    width: 600px;/*ширина*/
    height: 400px;/*высота*/
    margin: 10px;
    background: #000;/*цвет фона*/
}

CSS эффект пикселизации изображения

.box img {
    position: absolute;/*абсолютное позиционирование*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;/*точно подогнать сохраняя пропорции*/
}

CSS эффект пикселизации изображения

Пикселизация

Свойство image-rendering сообщает браузеру, что при увеличении картинки следует сохранять ее контраст и контуры, не допуская их размытия.

.box.pixel img {
    image-rendering: pixelated;/*четкие контуры*/
    filter: contrast(1.4);/*сила контраста*/
}

CSS эффект пикселизации изображения

Усилим эффект пикселизации, наложив сверху псевдоэлемент before с линейным градиентом.

.box.pixel::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;/*на верхнем слое*/
    background: repeating-linear-gradient(0deg,#0006 0%, #0006 4%, transparent 4%, transparent 96%, #0006 96%, #0006 100%),repeating-linear-gradient(90deg,#0006 0%, #0006 4%, transparent 4%, transparent 96%, #0006 96%, #0006 100%);
    background-size: 10px 10px;
}

CSS эффект пикселизации изображения

Источник

Статьи по теме

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

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Back to top button