آشنایی باچند کلاس css3

[tamafi6]

http://barnamenevis.org/attachment.php?attachmentid=143607&d=1480197395
http://barnamenevis.org/attachment.php?attachmentid=143581&d=1479899912
آشنایی با 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 دموی نمونه درضمیمه پست:
حتماتصاویردیگرراهم جایگزین نمایید!

[tamafi6]

Up

آشنایی با at-rule =>


@supports not (...) and ((...) or (...)) { /* ... */ }
@supports (...) or (...) not (...) { /* ... */ }
@supports (...) or (...) (not (...)) { /* ... */ }