Bu iOS7 bulanıklık efekti nasıl yeniden oluşturulur


Yanıtlar:


29

Alt kısım Gauss bulanık ve yarı saydam beyaz bir kaplamaya sahiptir.

Adım 1: Arka plandaki kaplama alanını seçin (orijinal resim) ve 12px yarıçaplı bir gauss bulanıklığı uygulayın.

2. Adım: Yeni bir katman oluşturun, kaplama için aynı kısmı seçin, beyazla doldurun ve bu katmana% 66 opaklık verin

Referans görüntünün üst kısmı ile çoğaltılmıştır:
EDIT: orijinaliyle eşleşecek yeni parametreler

görüntü tanımını buraya girin


Bu bir ekran görüntüsü ise, bu kodla yapıldığını varsayıyorum. Sanırım bunu bir kompozisyonda mı yoksa makette mi yapıp yapmamayı istediğini veya çevrimiçi olarak mı uyguladığını soruyor.
Eric,

@Peter Walser, daha fazla katman varsa, Gaussian uygulanacak kaplama alanının nasıl oluşturulacağını? Onları birleştirmek için ilk ihtiyacınız var mı?
Fred Collins

1
@FredCollins: evet, önce onları birleştirir ve seçimi bulanıklaştırırsınız ya da birleştirilmiş seçimin bir kopyasını (yeni bir katman değiştirildiğinde yeniden oluşturulması gerekecek) yeni bir katman oluşturur.
Peter Walser

@PeterWalser teşekkürler. Son soru. % 66 opaklıkta yeni şeffaf katman oluşturmak için dikdörtgen aracını kullanıyorum ancak daha iyi bir yol olduğunu hissediyorum. Bulanık katman veya benzeri bir şey için maske / kırpma maskesi oluşturmak gibi. Sen ne önerirsin?
Fred Collins

Ayrı bir katmanla genel opaklığı hızlı bir şekilde ayarlayabilirsiniz. Opaklık maskesi çözümü aynı sonuca sahiptir, burada piksel başına opaklığı bile ayarlayabilirsiniz. Ve elbette her iki yaklaşımı da birleştirebilirsiniz (maske + katman saydamlığı). Hangisi sizin için en uygunsa.
Peter Walser

7

Hangi programı veya teknolojiyi kullandığınızı tanımmadınız. Bu yüzden Peter, Photoshop ile yapmanın güzel bir yolunu tarif ederken , bu etkinin CSS3 kullanılarak da yaratılabileceğini eklemek isterim.

İşte gereken CSS’de bir zirve:

#iOSblur
{
    -webkit-filter: blur(12px);
    -moz-filter: blur(12px);
    -o-filter: blur(12x);
    -ms-filter: blur(12px);
    filter: blur(12px);
}

#iOSopacity
{
    opacity: 0.6;
}

Bunu nasıl yapman gerektiğini söylemiyorsun… aslında ben şahsen Peter'ın prosedürünü kullanırdım.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.