9. Efecte vizuale via CSS

Folosirea filtrelor + transformărilor 2D asupra imaginilor.

by Sabin Buraga

HTML

<div>
<p>Efect asupra unei imagini (stocate pe alt server):</p>
<img src="https://lh3.googleusercontent.com/6ZUkGHRTBhEr20dA8-1KGnGR60HFILOjTsixujxXX15UDCudCQVnJCKeIzOPmZCSrdF3A4degXrJXA=w440-h330" alt="Macea, Arad" />
<img src="https://lh3.googleusercontent.com/6ZUkGHRTBhEr20dA8-1KGnGR60HFILOjTsixujxXX15UDCudCQVnJCKeIzOPmZCSrdF3A4degXrJXA=w440-h330" alt="Macea, Arad" class="effect" />
</div>

CSS

img.effect {
  filter: hue-rotate(90deg) brightness(1.2) drop-shadow(10px 10px 5px gray);
  transform: rotate(-15deg);
}