Təmiz CSS-da 8 faydalı imkan: 7) Rəng qarışımı rejimləri

12.03.2019 0 PAYLAŞIM 56 OXUNMA

#Step IT Academy tərəfindən təqdim olunur  




    CSS texnologiyasında 8 faydalı həllər barədə olan məqalə seriyasına davam edirik.

Öncəki hissələr:

1) «Yapışqan» footer
2) İmage zoom on hover
3) Daimi Night Mode
4) Custom bullet-lar
5) Parallaks-şəkillər
6) Şəkilin kəsilmə animasiyası



7. Rəng qarışımı rejimləri


    Photoshop ilə tanışsınızsa rəng qarışımı rejimlərinin (blend modes) verdiyi imkanlar barədə artıq məlumatınız vardır. Bəs bu imkanların CSS-də də mümkün olduğunu bilirdinizmi?

    Bu, Medium səhifəsində  blend modes istifadəsinin nümunəsidir. Burada background-color — lightblue və blend-mode — difference istifadə olunub:

 


    Bu rejimlərin imkanları təkcə fon dəyişiklikləri ilə kifayətlənmir. mix-blend-mode elementlərin özlərini fon ilə qarışdırmaq imkanını verir. Məsələn, mix-blend-mode — color-dodge və lightsalmon fonu ilə belə bir effekt əldə etmək olar.

    Chrome 58+ brauzerində kiçik bir xəta olduğu üçün elementlərin renderi düzgün işləmir. Həll yolu background-color — white.