Photoshop'un en paha biçilemez özelliklerinden biri - tartışmasız, onu rekabeti ön plana çıkaran özellik - karışım modlarıdır. Karıştırma modları birbirinin üzerine yerleştirilmiş iki piksel alır ve bunları farklı şekillerde birleştirir, örneğin koyu renkli karışım modu iki pikselin daha koyu olmasını sağlar. Tüm bir görüntüye yayıldığında, karışım modları bazı çarpıcı efektler üretebilir.
Adobe'nin Photoshop karışım modlarını icat etmemesine rağmen, onun uygulaması kesinlikle en taklit edildi. Fakat şimdi, resimlerinizi bu şekilde şekillendirmek için Photoshop'a ihtiyacınız yok, çünkü hepsini dinamik bir şekilde CSS3 ile yapabiliriz.
Durduğu gibi, tarayıcı desteği CSS için ' background-blend-mode özelliği gelişiyor. Tarayıcıların önceki sürümlerinde satıcı önekleri veya deneysel özelliklerin etkinleştirilmesi gerekliydi, ancak caniuse.com Chrome, Firefox ve Opera'nın şu anki sürümlerinde, yakında Safari'yi de destekliyor.
Henüz IE desteğinin bir işareti yok, ancak karışım modları ilerlemeci bir gelişme olduğundan, şimdi bunları kullanmayı düşünmeye başlayabiliriz.
CSS3 aday önerilerinde bir dizi karışım modu seçeneği vardır, ancak amaçlarımız için en kullanışlı olanı arka plan karıştırma modudur . Bu özellik, iki görüntüyü veya bir görüntüyü ve bir arka plan rengini karıştırmamızı sağlar.
İşte ihtiyacımız olan kod:
Ve işte bizim temel CSS:
.blend{width:782px;height:540px;background:#3db6b8 url("lighthouse.jpg") no-repeat center center;}Şimdi karışım modlarını eklemeye hazırız.
Bunu yapmak için div'a başka bir sınıf ekleyeceğiz, örneğin “çarp”:
Ve sonra ikinci bir stil kuralı oluşturacağız:
.blend.multiply{background-blend-mode: multiply;}Eğer kod bakmak isterseniz Kaynak dosyaları buradan indirebilirsiniz.
Çarpıcı olarak, adından da anlaşılacağı gibi, taban rengini karışım rengiyle çarpar, bu da daha koyu bir renge neden olur. Siyahı siyahla çarpmak ve beyazı çarpmak görüntüyü değiştirmeden bırakır.
background-blend-mode: multiply;Yerleşimi karmaşık bir karışım modudur. Çarpım, taban rengine bağlıdır: açık renkler daha açık, koyu renkler koyulaşır.
background-blend-mode: overlay;Koyulaşmanın kutup karşıtı, aydınlatıcı , üst üste binen iki pikselle karşılaştırarak ve ikisinin çakmağını seçerek bir görüntüyü aydınlatır.
background-blend-mode: lighten;Renk yanması , renk atlatmanın polar zıtlığıdır, taban rengini koyulaştırır, kontrast artışıyla sonuçlanır.
background-blend-mode: color-burn;Yumuşak ışık , sert ışığa benzer, ancak Renklerin çarpımı veya taranması yerine, yumuşak ışık, daha ince bir etki için yanma ve yanma kullanır.
background-blend-mode: soft-light;Dışlama farklılıklara benzer, ancak daha az kontrast üretir, bu yüzden biraz daha kullanılabilir.
background-blend-mode: exclusion;Renk tonu gibi doygunluk , temel renk değerlerinden ikisini karışım renginin bir özelliği ile birleştirir, bu durumda doygunluk.
background-blend-mode: saturation;Parlaklık , rengin tersidir, temel rengin tonunu ve doygunluğunu ve karışım renginin parlaklığını birleştirir.
background-blend-mode: luminosity;