حرفه ای: آشنایی باچند کلاس css3

https://barnamenevis.org/attachment.p...7&d=1480197395
https://barnamenevis.org/attachment.p...p;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 دموی نمونه درضمیمه پست:
حتماتصاویردیگرراهم جایگزین نمایید!