Cara menggunakan css blurry image

Question

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.

Table of Contents Show

menjernihkan gambar dengan css image-rendering

/* Keyword value */
backdrop-filter: none;

/* URL to SVG filter */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> values */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* Multiple filters */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* Global values */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;

none

No filter is applied to the backdrop.

<filter-function-list>

A space-separated list of <filter-function>s or an SVG filter that will be applied to the backdrop.

Initial valuenoneApplies toall elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elementsInheritednoComputed valueas specifiedAnimation typea

Hai kawan Dumenity, apa kabarnya hari ini? Tahun 2015 adalah tahun dimana banyak sekali website parallax yang atraktif dan unik saling bermunculan. Pada kesempatan kali ini saya akan mengajarkan tentang cara membuat efek blur pada background dengan css 3. Metodenya agak berbeda dengan memberikan efek blur pada gambar. Untuk lebih jelasnya kita simak saja langsung source code yang telah saya buat ini

Pada kasus kali ini kita menggunakan element CSS :before pada body untuk menyatakan blur pada bagian belakang. Jika kita tidak berikan elemen :before maka seluruh objek yang ada didalam body akan terkena efek blur.

Lalu kita berikan property content: “ ”; untuk tetap memunculkan backgroundnya

Selanjutnya kita juga memberikan position:fixed; agar membuat background tetap pada posisinya. Jika kita tidak berikan position:fixed; maka background da nisi konten akan terpisah.

Yang terakhir kita berikan z-index:-1; agar letak background berada paling belakang dan property filter: blur(5px) untuk memberikan efek blur.

sisanya silahkan kalian kustomisasi sendiri agar terluhat lebih menarik.

Demikian artikel tentang cara membuat efek blur pada background website dengan css 3 kali ini semoga bermanfaat.

menjernihkan gambar dengan css image-rendering

06.06 |

menjernihkan gambar dengan css image-rendering

ada tiga value yang digunakan untuk mengubah tampilan gambar di dalam CSS :
1. auto
default value digunakan untuk memaksimalkan sebuah gambar di browser
2. crisp-edges
untuk kontras warna yang blur di gunakan khusus untuk pixel art value ini digunakan untuk gambar bergerak naik turun
3. pixelated
untuk mengubah ukuran gambar menjadi lebih jernih

untuk mencoba hasil dari image-rendering CSS langsung saja lihat source codenya seperti dibawah ini :
a. css.css

b. index.php