Bir nesne nasıl oluşturulur “yüzer”;Divi Drophadow kullanıyor
Drop Shadow, web sitenizi açmanın olağanüstü bir yoludur, çünkü çok güzel bir üç boyutlu etki sağlamak için görüntünün altına derin bir gölge ekler. Ve gölgenin boyutunu ve dikey mesafesini değiştirerek, görüntünüzün daha uzun veya taşınmaz görünmesini sağlayabilirsiniz. Bu öğreticide, harici bir özel CSS veya fotoğraf düzenleme yazılımı olmadan doğrudan Divi Builder’dan görüntünüz için katmanlı bir damla gölgesi ekleyeceğinizi göstereceğim. Gölgeyi düşürmeye geldiğinizde, ne kadar çok katmanınız varsa, gölge o kadar gerçekçi görülür çünkü birlikte daha iyi birleştirilir. Bu nedenle, web siteniz için görüntüler ve videolar için iyi bir gölge olarak işlev görmesi için her biri özel bir kutu gölgesine sahip 5 metin modülünü nasıl kaplayacağınızı göstereceğim. Ayrıca, başlık görüntünüz için bir yükseklik efekti oluşturmak için animasyon bile ekleyebilirsiniz.
Bu nedenle, Photoshop’a alışık değilseniz veya web sitenizdeki herhangi bir öğeye düşmek için bir gölge eklemek için Divi’nin dostça yöntemini arıyorsanız, doğru yere geldiniz. Sonuç sadece sizi şaşırtabilir. Başlayalım. İşte bu öğreticide neler yapabileceğinize dair bazı örnekler
Tek sütunlu bir satır oluşturun ve yeni bir sayfa için bir resim ekleyin ve bir sütun satırı ile normal bölümü ekleyin. Ardından görüntüyü satırınıza ekleyin (en az 800 piksel genişliğinde). Görüntü düzeyini görüntü modülü ayarlarının tasarım sekmesinde ortaya ayarladığınızdan emin olun.
İlk gölgemizi yapmak için ilk gölge katmanını yapın, metin modülünü görüntünün altına ekleyin. Sonunda bu metin modülü için kutunun gölgesini kullanacağız ve her gölgenin kullandığımız her metin modülüne genişlemesini istiyoruz. Bu ilk metin modülü için genişliği% 20’ye (en kısa 5 katın) ayarlayacağız. Metin modülünün ayarlarını şu şekilde güncelleyin: Genişlik:% 20 Hizalama Modülü: Merkez Bu metin modülüne herhangi bir içerik koymayacağımız için, metin modülünün boyutunu (ve son olarak uygun kutu gölgesini) ayarlamamız gerekir. Üst ve alt dolgu. Drop Shadow için bir genişleme efekti oluşturmak için her yeni metin modülü ile dolgu değerleri artacaktır. Birincisi en küçük yastığa sahip olacak. Özel kenar: 0px dolgu Özel: Top 1 piksel, alt 1 piksel Şimdi metin modülümüz için bir kutunun gölgesi eklemeye hazırız. Buradaki bu hile, gölgenin yukarıdaki modülle örtüşmemesi için yeterli alan yapmak için dikey konum değerini kullanarak kutunun gölgesini metin modülünden ayırmaktır. Sonra bulanıklık, yayma ve gölgemizin rengini ayarlayabiliriz.
Aşağıdaki üçüncü kutu gölge seçeneğini seçin ve güncelleme: Gölge Kutusunun Dikey Konumu: 70px Bulanık Güç Gölge Kutusu: Kare Dağıtım Kutusunun 35px Mukavemeti: 0px Gölge Renk: RGBA (0,0,0,0,0,25) Diğer kutu olmasına rağmen Gölge seçenekleri her katmanla değişecektir, gölgenin rengi aynı kalacaktır, çünkü her renk farklı bir nüans oluşturmak için birbiriyle katmanlanacaktır. Gölgenin rengi, gölgenin karanlığını bir bütün olarak kontrol etmek için de önemlidir. Yani, daha parlak bir gölge istiyorsanız, RGBA Gölge Rengi’ni (0.0,0,0.2.2) kullanmayı seçebilirsiniz ve daha koyu bir gölge için RGBA’yı (0.0.0.0.3) seçebilirsiniz. Şimdi olduğu gibi basit bir düzen ve ihtiyaçlarınıza uyacak şekilde kutunun genişlik ayarları ve gölgeleriyle oynayın, ancak daha gerçekçi bir gölge istiyorsanız, daha fazla katmana ihtiyacınız olacak. Bu modüllerle örtüşmemiz gerektiğinden, varsayılan görsel üreticinin görünümü metin modülünün düzenlenmesini biraz zorlaştırabilir (kafes modunu kullanma başarılı olsa da). Ancak, kutunun gölgesi doğrudan sitede yaptıkları gibi tam olarak yapamayacağı için, metin modülünün kalan katmanlarını çerçeve görüntü ekranından yapalım. İkinci bir damla gölge katmanı oluşturmak, ilk metin modülünüzü çoğaltmak ve aşağıdaki ayarları güncellemek için ikinci damla gölge katmanını oluşturun: Genişlik:% 40 5 katmanımız olduğu için, her yeni katmanla% 20 boyutunu artırmak istiyoruz, böylece Her katman eşit olarak genişleyecektir (%20,%40,%60,%80,%100). Özel kenar: -5px negatif üst kenarın üst değeri, bu katmanı yukarıdaki bir katmanla örtüşmek için kullanılır ve modül boyutuna bağlı olarak her katmanla değişecektir. Pilding Custom: Top 2 pikselde, 2px’in altında, katmanın yüksekliğini bir önceki katmanın dolgu değerinin iki katına çıkarmaya devam edeceğiz. Kürk bulanık Kuvvet Kutusu Gölgesi: 50px bulanıklık mukavemeti de her katmanla artacaktır.
Üçüncü Damla Gölge Katmanı Oluşturma Üçüncü bir damla gölge katmanı oluşturmak için metin modülünü çoğaltarak ve ayarları güncelleyerek devam edeceğiz. Az önce düzenlediğiniz ve güncellediğiniz metin modülünü iki katına çıkar: Genişlik:% 60 Özel Marj: -15px Top Özel Dolgu: Top 3px, Alt 3px Bulanık Güç Gölge Kutusu: 70px Drop yapmak için Dördüncü Damla Gölge Katmanını Kaydet ayarlarını Kaydet Gölge Katman Dördüncü, aşağıdakileri yeni düzenlediğiniz ve güncellediğiniz yinelenen metin modülleri: Genişlik:% 80 Özel Marj: -10px Üstü Özel Dolgu: Top 4px, Alt 4px Dikey Konum Gölge Kutusu: 100 Piksel Bulanık Güç Gölge Kutusu: 90px Burada dikey konum, daha büyük bulanıklık mukavemetini karşılamak ve ayrıca gölgeleri konumlandırmak için 100 piksel seviyeye yükselir. Beşinci Damla Gölge Katmanını Oluşturun Beşinci Damla Gölge Katmanını Oluşturmak, Yeni Düzenlediğiniz Metin Modülünü Çoğaltın: Genişlik:% 100 Özel Kenar: -5px Top, 200px Alt Alt Özel Dolgu: Üst 5 piksel, alt 5px Dikey Konum Kutusu Gölge Kutusu Gölgesi: 100 Piksel Bulanık Güç Gölge Kutusu: 110px Tüm katmanlara eklediğimiz negatif üst kenar boşluğunu barındırmak için marjın altına 200 piksel ekliyorum. Ve bu işe yarayacak. Şimdi resminiz için güzel bir damla gölgeniz var. Kütüphanenize saklandı ve her yere yerleştirin Bu Drop Shadow, görüntülemek isteyebileceğiniz birçok farklı öğeyle çalışacağından, 5 modül içeren satırları kütüphanenize kaydedebilirsiniz. Ardından, bir damla gölgeye ihtiyacınız olduğunda, sayfanıza ve ihtiyacınız olan her yerde modülleri yerleştirebilirsiniz. Bu görünümdür, aynı metin modülünün 5 katmanını, Web Ajansı’nın yön sayfasının düzenine mobil cihaz görüntüsü altına eklerseniz. Gördüğünüz gibi, daha küçük bir sütun genişliğinde daha iyi görünüyor. Gölgenizi daha geniş bir yüzey alanına ve yuvarlak bir açıyla nasıl ayarlayabilirsiniz İlk damla gölgesi için yaptığımız ayarları kullanarak, sayfanızdaki öğeleri görüntülemek için kullanılacak şaşırtıcı damla gölgesi yapabilirsiniz. Örneğin, gölgenin daha geniş bir yüzey alanı ve yuvarlak açı olan dört katmana düşmesi için aşağıdaki ayarları kullanabilirsiniz. Temel fark, gölgeler için daha fazla yüzey alanı yapmak için her metin modülünün dolgudaki artış ve dairesel bir şekil yapmak için tüm açılara% 50 sınır yarıçapı ekleyerek. Drop gölgeniz için dört metin modülü yapmak için ihtiyacınız olan ayarlar. Diğer üç modül yapmayı hızlandırmak için ilk metin modülünü çoğaltmaktan çekinmeyin. Ayarlar Modül Metin Birinci Katman Genişliği:% 25 İstihdam: Özel Kenar Adı Merkezi: 0px Alt Dolgu Özel: 50px TOP, Yuvarlak Açının 50 Piksel Alt:% 50 Dikey Konum Gölge Kutusu: 250px Furfly Mukavemeti Gölge Kutusu: 100 Piksel Güç Yayılma Gölge Kutusu: 0PX Gölge Renk Kutusu: RGBA (0,0,0,0,0,2) İkinci Katman Metin Modülü Genişlik:% 50 İstihdam: Özel Kenar Merkezi: -100 piksel üst, 0px Alt Alt Özel Dolgu: 60px üst, 60px Alt Yuvarlak: 50 % Dikey Konum Gölge Kutusu: 250px Bulanık Güç Gölge Kutusu: Kare Dağıtım Kutusu 110px Mukavemeti: 0px Renk Gölge Kutusu: RGBA (0.0,0,2) Modül metin katmanı üçüncü katman genişliği:% 75 istihdam: Özel kenar boşlukları için merkez: -120px üst, 0px Altında Dolgu Özel: 70 piksel üst, yuvarlak açının 70px alt:% 50 Dikey Konum Gölge Kutusu: 250px Bulanık Güç Gölge Kutusu: Gölge Kutularının Dağıtım Gücü:
0px Gölge Kutusu Rengi: RGBA (0.0,0,0.2) Dördüncü Katman Metin Modülü Genişliği Ayarları:% 100 İstihdam: Özel Kenar Merkezi: -130px UP, 0px Alt Özel Dolgu: 70px yukarı, her ikisi de yuvarlak açı:% 50% Konum Dikey Gölge Kutusu: 250px Bulanık Güç Gölge Kutusu: 130px Gölgelerin Dağıtım Gücü Kutusu: 0px Renk Gölge Kutusu: RGBA (0.0.0.0.2) Genişliğin her katmanla%25 arttığını unutmayın (%25,%50, 75 %100).Ayrıca dolgu ve bulanıklık gücü, gölgeyi kademeli olarak genişletmek ve gizlemek için artar.İşte bir PNG nesnesinin görüntüsünün altındaki ekranın sonuçları. Negatif bir marj vererek nesneyi indirirseniz, nesneyi yüzeyde otururken görebilirsiniz.
Görüntünüze animasyon ekleyin ve yüksekliğimi yapmak için gölgeyi bırakın, animasyon, bir nesne yüzeyden kaldırıldığında gölgelerin nasıl ortaya çıktığı konusunda fizik için% 100 doğru olmayacak, ancak etkisi hala benim için oldukça havalı . Divi görüntüsü ile ilk 5 katmanlı gölge örneğimize biraz animasyon ekleyelim. Konsept basit. “Yükseklik” yapmak istediğiniz resme slayt animasyonunu üste ayarlayın. Ardından resmin altındaki her gölge öğesi için ortada slayt animasyonunu ekleyin. Bu şekilde görüntü aynı zamanda gölge genişledi. Bu animasyonun gerçekçi olabilmesi için, bu animasyonu üst yarı yaşam öğesiyle sınırlamanız gerekebilir, böylece animasyonunuz sayfa yüklendiğinde görüntüde ve gölgede gerçekleşir. Kullanıcı sayfayı aşağı kaydırdığında animasyonun etkinleştirilmesine güveniyorsanız, görüntünün yükselmesi ile gölgenin genişlemesi arasında bir gecikme elde edersiniz. Animasyon eklemek için, görüntü modülü ayarlarını aşağıdakilerle güncelleyin: Animasyon Stili: Slayt Süresi Animasyon: 1400ms Animasyon Yoğunluğu: Beş metin modülünün her biri için%10, aşağıdaki güncelleme: Animasyon Stili: Zoom Süre Animasyonu: 1400ms Animasyon Yoğunluğu: % 10
