آشنایی با at-rule =>
@supports not (...) and ((...) or (...)) { /* ... */ }
@supports (...) or (...) not (...) { /* ... */ }
@supports (...) or (...) (not (...)) { /* ... */ }
واستفاده از چندکلاس جدید و فیلترهابرای خلق جلوه های بصری.
.effect {
background-blend-mode:/* luminosity, overlay, hard-light */;
mix-blend-mode:/* multiply, screen, etc, overlay, luminosity, difference */;
filter: grayscale(100%);
filter: blur(7px);
filter: sepia(100%);
filter: brightness(200%);
filter: contrast(250%);
filter: hue-rotate(60deg);
filter: invert(.8);
filter: opacity(.7);
filter: saturate(250%);
filter: brightness(2) invert(1) grayscale(1);
}
نمونه:
.effect-3 {
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
}
@supports ((-webkit-filter: invert(1)) or (filter: invert(1))) and (background-blend-mode: difference, screen) {
.effect-3 {
background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
background-blend-mode: difference, screen;
background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;
-webkit-filter: brightness(2) invert(1) grayscale(1);
filter: brightness(2) invert(1) grayscale(1);
}
}
تعداد 20 دموی نمونه درضمیمه پست:
حتماتصاویردیگرراهم جایگزین نمایید!