CloseTag | الشروحات | CSS | الصور في لغة CSS | CSS Images

<!DOCTYPE html>
<html>
<head>
<style>
img 
{
  width: 200px;
  height: auto;
  float: left; 
  max-width: 235px;
}

.blur{filter: blur(4px);}
.brightness {filter: brightness(250%);}
.contrast {filter: contrast(180%);}
.grayscale {filter: grayscale(100%);}
.huerotate {filter: hue-rotate(180deg);}
.invert {filter: invert(100%);}
.opacity {filter: opacity(50%);}
.saturate {filter: saturate(7);}
.sepia {filter: sepia(100%);}
.shadow {filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>



<img src="https://www.closetag.com/images/mango.jpg" alt="Mango">
<img class="blur" src="https://www.closetag.com/images/mango.jpg" alt="Mango">
<img class="brightness" src="https://www.closetag.com/images/mango.jpg" alt="Mango">
<img class="contrast" src="https://www.closetag.com/images/mango.jpg" alt="Mango">
<img class="grayscale" src="https://www.closetag.com/images/mango.jpg" alt="Mango">
<img class="huerotate" src="https://www.closetag.com/images/mango.jpg" alt="Mango">
<img class="invert" src="https://www.closetag.com/images/mango.jpg" alt="Mango">
<img class="opacity" src="https://www.closetag.com/images/mango.jpg"  alt="Mango">
<img class="saturate" src="https://www.closetag.com/images/mango.jpg" alt="Mango">
<img class="sepia" src="https://www.closetag.com/images/mango.jpg" alt="Mango">
<img class="shadow" src="https://www.closetag.com/images/mango.jpg" alt="Mango">

</body>
</html>

PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCjxoZWFkPg0KPHN0eWxlPg0KaW1nIA0Kew0KICB3aWR0aDogMjAwcHg7DQogIGhlaWdodDogYXV0bzsNCiAgZmxvYXQ6IGxlZnQ7IA0KICBtYXgtd2lkdGg6IDIzNXB4Ow0KfQ0KDQouYmx1cntmaWx0ZXI6IGJsdXIoNHB4KTt9DQouYnJpZ2h0bmVzcyB7ZmlsdGVyOiBicmlnaHRuZXNzKDI1MCUpO30NCi5jb250cmFzdCB7ZmlsdGVyOiBjb250cmFzdCgxODAlKTt9DQouZ3JheXNjYWxlIHtmaWx0ZXI6IGdyYXlzY2FsZSgxMDAlKTt9DQouaHVlcm90YXRlIHtmaWx0ZXI6IGh1ZS1yb3RhdGUoMTgwZGVnKTt9DQouaW52ZXJ0IHtmaWx0ZXI6IGludmVydCgxMDAlKTt9DQoub3BhY2l0eSB7ZmlsdGVyOiBvcGFjaXR5KDUwJSk7fQ0KLnNhdHVyYXRlIHtmaWx0ZXI6IHNhdHVyYXRlKDcpO30NCi5zZXBpYSB7ZmlsdGVyOiBzZXBpYSgxMDAlKTt9DQouc2hhZG93IHtmaWx0ZXI6IGRyb3Atc2hhZG93KDhweCA4cHggMTBweCBncmVlbik7fQ0KPC9zdHlsZT4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+IDo6LXdlYmtpdC1zY3JvbGxiYXJ7d2lkdGg6N3B4O2hlaWdodDo3cHg7fTo6LXdlYmtpdC1zY3JvbGxiYXItdHJhY2t7YmFja2dyb3VuZDojZmZmO306Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1ie2JvcmRlci1yYWRpdXM6NXB4O2JhY2tncm91bmQ6IzJmNDVmZjt9PC9zdHlsZT48L2hlYWQ+DQo8Ym9keT4NCg0KDQoNCjxpbWcgc3JjPSJodHRwczovL3d3dy5jbG9zZXRhZy5jb20vaW1hZ2VzL21hbmdvLmpwZyIgYWx0PSJNYW5nbyI+DQo8aW1nIGNsYXNzPSJibHVyIiBzcmM9Imh0dHBzOi8vd3d3LmNsb3NldGFnLmNvbS9pbWFnZXMvbWFuZ28uanBnIiBhbHQ9Ik1hbmdvIj4NCjxpbWcgY2xhc3M9ImJyaWdodG5lc3MiIHNyYz0iaHR0cHM6Ly93d3cuY2xvc2V0YWcuY29tL2ltYWdlcy9tYW5nby5qcGciIGFsdD0iTWFuZ28iPg0KPGltZyBjbGFzcz0iY29udHJhc3QiIHNyYz0iaHR0cHM6Ly93d3cuY2xvc2V0YWcuY29tL2ltYWdlcy9tYW5nby5qcGciIGFsdD0iTWFuZ28iPg0KPGltZyBjbGFzcz0iZ3JheXNjYWxlIiBzcmM9Imh0dHBzOi8vd3d3LmNsb3NldGFnLmNvbS9pbWFnZXMvbWFuZ28uanBnIiBhbHQ9Ik1hbmdvIj4NCjxpbWcgY2xhc3M9Imh1ZXJvdGF0ZSIgc3JjPSJodHRwczovL3d3dy5jbG9zZXRhZy5jb20vaW1hZ2VzL21hbmdvLmpwZyIgYWx0PSJNYW5nbyI+DQo8aW1nIGNsYXNzPSJpbnZlcnQiIHNyYz0iaHR0cHM6Ly93d3cuY2xvc2V0YWcuY29tL2ltYWdlcy9tYW5nby5qcGciIGFsdD0iTWFuZ28iPg0KPGltZyBjbGFzcz0ib3BhY2l0eSIgc3JjPSJodHRwczovL3d3dy5jbG9zZXRhZy5jb20vaW1hZ2VzL21hbmdvLmpwZyIgIGFsdD0iTWFuZ28iPg0KPGltZyBjbGFzcz0ic2F0dXJhdGUiIHNyYz0iaHR0cHM6Ly93d3cuY2xvc2V0YWcuY29tL2ltYWdlcy9tYW5nby5qcGciIGFsdD0iTWFuZ28iPg0KPGltZyBjbGFzcz0ic2VwaWEiIHNyYz0iaHR0cHM6Ly93d3cuY2xvc2V0YWcuY29tL2ltYWdlcy9tYW5nby5qcGciIGFsdD0iTWFuZ28iPg0KPGltZyBjbGFzcz0ic2hhZG93IiBzcmM9Imh0dHBzOi8vd3d3LmNsb3NldGFnLmNvbS9pbWFnZXMvbWFuZ28uanBnIiBhbHQ9Ik1hbmdvIj4NCg0KPC9ib2R5Pg0KPC9odG1sPg==