Как создать эффект полутонов на изображениях с чистым CSS? - PullRequest
Новая
       0

Как создать эффект полутонов на изображениях с чистым CSS?

0 голосов
/ 21 июня 2020

Это мой CSS код: 

<TITLE>My Page</TITLE>
<head>
<style>
.retroimage1 {
filter: blur(0.5px) grayscale(100%);
}
</style>
</head>
<img class="retroimage1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Volvo_740_GLE_%289166377791%29.jpg/180px-Volvo_740_GLE_%289166377791%29.jpg">
<p>VOLVO 740 TURBO, red, Mitsubishi turbo  fitted to Volvo engine £2,300</p>

Я хочу попробовать сделать изображение как в оттенках серого, так и с точками на нем - как на изображениях ниже на распечатанной странице.

Использование только CSS без Javascript, как я могу добиться этого полутона в моем HTML:

MG magazine scan

Полутоновое изображение Ford Sierra из журнала сканирования

в дополнение к фильтру оттенков серого (исходное изображение было сепия на этом сканировании).

Я был бы признателен за любую помощь, пытался сам и смотрел в Google, но ничего не добился с этим. New-i sh для фильтров в CSS, благодарю за любую помощь.

Ответы [ 2 ]

0 голосов
/ 21 июня 2020

Думаю, это то, что вам нужно:

https://codepen.io/ycw/pen/NBjqze

HTML

<h1> 
  <select id="elStyle">
    <option>original</option>
    <option selected="selected">char</option>
    <option>dots</option>
    <option>emoji</option>
    <option>line</option>
  </select>
  <select id="elSample">
    <option selected="selected">cat</option>
    <option>face</option>
  </select>
  <select id="elKernel">
    <option>3</option>
    <option selected="selected">5</option>
    <option>7</option>
    <option>11</option>
    <option>19</option>
  </select>
</h1>
<div class="frame" id="elFrame"><img id="elImg"/></div>

CSS

body {
  display:flex; flex-flow:column nowrap;
  justify-content:center;
  align-items:center;
  min-height:100vh;
}

select {
  margin-bottom:0.5em;
}

.frame {
  position:relative;
  width:90vw;
  height:90vh;
}

.frame canvas, .frame img {
  object-fit:contain;
  width:100%;
  height:100%;
  display:block;
  position:absolute;top:0;left:0;
}

#elImg {
  opacity:0;
  transition:all 1s;
}

#elImg.show {
  opacity:1;
}

JS в ручке. Слишком много кода.

0 голосов
/ 21 июня 2020

Вы должны использовать изображение с div в качестве фона, а не как тег img. Потому что вам придется комбинировать его с фильтром сепии и точечным изображением. 

div {
  height: 135px;
  width: 180px;
  filter: blur(0.5px) grayscale(100%) sepia(1) brightness(.8);
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=),
              url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Volvo_740_GLE_%289166377791%29.jpg/180px-Volvo_740_GLE_%289166377791%29.jpg") 
              0 0 / contain no-repeat;
}
<div></div>
<p>VOLVO 740 TURBO, red, Mitsubishi turbo fitted to Volvo engine £2,300</p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...