Dropshadow Kullanarak Divi'de “Yüzen” Nesneler Nasıl Oluşturulur

Alt gölgeler, web sitenizin resimlerine hayat vermenin harika bir yoludur, çünkü gerçekten harika bir üç boyutlu efekt vermek için resmin altına derin bir gölge ekler. Ve gölgenin boyutunu ve dikey mesafesini değiştirerek, görüntülerinizin yüksek veya durağan görünmesini sağlayabilirsiniz.

Bu eğitimde, herhangi bir harici özel CSS veya fotoğraf düzenleme yazılımı olmadan doğrudan Divi Builder'dan resimlerinize nasıl çok katmanlı bir gölge ekleyeceğinizi göstereceğim. Alt gölgeler söz konusu olduğunda, ne kadar çok katmana sahip olursanız, gölge o kadar gerçekçi görünür çünkü birlikte daha iyi harmanlanır. Bu nedenle size, web siteniz için resimler ve videolar için harika bir gölge işlevi görmesi için her biri özel bir kutu gölgesine sahip 5 metin modülünü nasıl katmanlayacağınızı göstereceğim. Ayrıca, başlık resimleriniz için bir yükseklik efekti oluşturmak için bir animasyon bile ekleyebilirsiniz.

Bu nedenle, photoshop'a aşina değilseniz veya web sitenizdeki herhangi bir öğeye alt gölge eklemek için Divi dostu bir yöntem arıyorsanız, doğru yere geldiniz.

Sonuçlar sizi şaşırtabilir.

Başlayalım.

İşte Bu Eğitimde Yaratabileceklerinize Birkaç Örnek

Bu Alt Gölgeler Nerede Kullanılır?

Bariz olanı belirtmek için, bir alt gölge, gölgenin nesnesinin şeklini yansıtmalıdır. Dikdörtgen görüntülerin dikdörtgen gölgeleri, dairelerin dairesel gölgeleri vb. Ve hesaba katılması gereken sonsuz sayıda nesne olduğundan, her biri için mükemmel bir alt gölge oluşturmak bu makalenin kapsamı dışındadır. Bunun yerine, bu gönderiyi, birkaç öğe için çalışacak temel dikdörtgen ve dairesel nesneler için gölgeler bırakacak şekilde sınırlayacağım.

Dropshadow Kullanarak Divi'de “Yüzen” Nesneler Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Fotoğraflar, Videolar ve Cihazlar için Çok Katmanlı Alt Gölge Oluşturma

Oluşturacağımız ilk gölge, tanıtım videoları, öne çıkan resimler, mobil cihazlar ve kaydırıcılar gibi dikdörtgen öğeleri sergilemek için iyidir. Bu alt gölge, bu öğelerin derinlik eksikliğine uyum sağlamak için daha ince olacaktır. Gölgeyi oluşturmak için kutu gölgeli 5 metin modülü kullanacağız. Ardından, özel kenar boşlukları ve boyutlandırma kullanarak, birlikte güzel bir şekilde karışması için gölgeleri katmanlayacağız.

Tek Sütunlu Bir Satır Oluşturun ve Bir Resim Ekleyin

Yeni bir sayfa oluşturun ve tek sütunlu bir satır içeren normal bir bölüm ekleyin. Ardından satırınıza bir resim ekleyin (en az 800 piksel genişliğinde). Görüntü modülü ayarlarının tasarım sekmesinde görüntünün hizalamasını ortalayacak şekilde ayarladığınızdan emin olun.

İlk Gölge Katmanını Oluşturma

İlk gölgemizi oluşturmak için resmin altına bir metin modülü ekleyin. Sonunda bu metin modülü için kutu gölgesini kullanacağız ve kullandığımız her metin modülü ile her gölgenin genişliğinin artmasını istiyoruz. Bu yüzden bu ilk metin modülü için genişliği %20'ye ayarlayacağız (5 katmanın en kısası). Metin modülü ayarlarını aşağıdaki gibi güncelleyin:

Genişlik: 20%
Modül Hizalaması: Merkez

Bu metin modülüne herhangi bir içerik koymayacağımız için, metin modülünün boyutunu (ve nihai olarak karşılık gelen kutu gölgesini) ona bir üst ve alt dolgu vererek belirlememiz gerekiyor. Alt gölge için genişleme efekti oluşturmak için her yeni metin modülüyle birlikte dolgu değerleri artacaktır. Bu ilki en küçük dolguya sahip olacak.

Özel Kenar Boşluğu: 0px
Özel Dolgu: 1px Üst, 1px Alt

Artık metin modülümüz için kutu gölgesini eklemeye hazırız. Buradaki hile, gölgenin yukarıdaki modülle örtüşmemesi için yeterli alan yaratmak için dikey konum değerini kullanarak kutu gölgesini metin modülünden ayırmaktır. Ardından gölgemizin bulanıklığını, yayılmasını ve rengini ayarlayabiliriz.

Üçüncü kutu gölge seçeneğini seçin ve aşağıdakileri güncelleyin:

Kutu Gölgesi Dikey Konumu: 70px
Kutu Gölge Bulanıklığı Gücü: 35px
Kutu Gölge Yayılma Gücü: 0px
Gölge Rengi: rgba(0,0,0,0.25)

Diğer kutu gölge seçenekleri her katmanda değişse de, her renk üst üste katmanlanarak farklı gölgeler oluşturulacağından gölge rengi aynı kalacaktır. Gölge rengi, gölgenin genel karanlığını kontrol etmek için de önemlidir. Bu nedenle, daha açık bir gölge istiyorsanız, rgba(0,0,0,0.2) gölge rengi ile gitmeyi ve daha koyu bir gölge için rgba(0,0,0,0.3) tercih edebilirsiniz.

Aslında bu basit tek yerleşimli alt gölgeyi şu anda olduğu gibi kullanabilir ve ihtiyaçlarınıza göre genişlik ve kutu gölge ayarlarıyla oynayabilirsiniz, ancak daha gerçekçi bir gölge istiyorsanız, daha fazla katmana ihtiyacınız olacaktır.

Bu modülleri çakıştırmamız gerekeceğinden, varsayılan görsel oluşturucu görünümü, metin modüllerini düzenlemeyi biraz zorlaştırabilir (ancak ızgara modunu kullanmak işe yarayabilir). Ancak kutu gölgeleri canlı sitede tam olarak nasıl olacaklarını göstermeyeceklerinden, tel kafes görünümünden metin modülü katmanlarının geri kalanını oluşturalım.

İkinci Alt Gölge Katmanını Oluşturun

İkinci alt gölge katmanını oluşturmak için ilk metin modülünüzü çoğaltın ve ayarları aşağıdaki gibi güncelleyin:

Genişlik: %40

5 katmanımız olduğu için, her yeni katmanla boyutu %20 artırmak istiyoruz, böylece her katman eşit olarak genişleyecektir (%20, %40, %60, %80, %100).

Özel Kenar Boşluğu: -5px Üst

Negatif üst kenar boşluğu değeri, bu katmanı yukarıdaki katmanla örtüşmek için kullanılır ve modülün boyutuna bağlı olarak her katmanda değişecektir.

Özel Dolgu: 2px Üst, 2px Alt

Önceki katmanın dolgu değerini ikiye katlayarak katmanın yüksekliğini ikiye katlamaya devam edeceğiz.

Kutu Gölge Bulanıklığı Gücü: 50px

Bulanıklık gücü de her katmanda artacaktır.

Üçüncü Alt Gölge Katmanını Oluşturma

Üçüncü gölge katmanı oluşturmak için metin modülünü çoğaltarak ve ayarları güncelleyerek devam edeceğiz. Düzenlemeyi yeni bitirdiğiniz metin modülünü çoğaltın ve aşağıdakileri güncelleyin:

Genişlik: %60
Özel Kenar Boşluğu: -15px Üst
Özel Dolgu: 3px Üst, 3px Alt
Kutu Gölge Bulanıklığı Gücü: 70px

Ayarları kaydet

Dördüncü Alt Gölge Katmanını Oluşturma

Dördüncü alt gölge katmanını oluşturmak için düzenlemeyi yeni bitirdiğiniz metin modülünü çoğaltın ve aşağıdakileri güncelleyin:

Genişlik: %80
Özel Kenar Boşluğu: -10px Üst
Özel Dolgu: 4px Üst, 4px Alt
Kutu Gölgesi Dikey Konumu: 100px
Kutu Gölge Bulanıklığı Gücü: 90 piksel

Burada dikey konum, daha fazla bulanıklık kuvvetine uyum sağlamak ve ayrıca gölgeyi konumlandırmak için 100 piksele yükseltildi.

Beşinci Alt Gölge Katmanını Oluşturma

Beşinci alt gölge katmanını oluşturmak için düzenlemeyi yeni bitirdiğiniz metin modülünü çoğaltın ve aşağıdakileri güncelleyin:

Genişlik: %100
Özel Kenar Boşluğu: -5px Üst, 200px Alt
Özel Dolgu: 5px Üst, 5px Alt
Kutu Gölgesi Dikey Konumu: 100px
Kutu Gölge Bulanıklığı Gücü: 110 piksel

Katmanlar boyunca eklediğimiz negatif üst kenar boşluğunu yerleştirmek için 200 piksellik bir alt kenar boşluğu ekledim.

Ve bu yapacak. Artık görüntünüz için güzel bir alt gölgeniz var.

Kitaplığınıza Kaydedin ve İstediğiniz Yere Yerleştirin

Bu alt gölge, görüntülemek isteyebileceğiniz birçok farklı öğe ile çalışacağından, 5 modülü içeren satırı kitaplığınıza kaydedebilirsiniz. Ardından, ne zaman bir alt gölgeye ihtiyacınız olursa, satırı sayfanıza ekleyebilir ve modülleri ihtiyacınız olan yere yerleştirebilirsiniz.

Web Ajansı Açılış Sayfası Düzeninde mobil cihaz görüntüsünün altına aynı 5 katman metin modülünü eklerseniz, şöyle görünür. Gördüğünüz gibi, daha küçük sütun genişliklerinde daha da iyi görünüyor.

Daha büyük yüzey alanı ve yuvarlak köşeler için gölgenizi nasıl ayarlayabilirsiniz?

İlk alt gölge için yaptığımız kurulumun aynısını kullanarak, sayfanızdaki öğeleri görüntülemek için kullanmak üzere bazı harika alt gölgeler oluşturabilirsiniz.

Örneğin, daha geniş bir yüzey alanına ve yuvarlatılmış köşelere sahip dört katmanlı bir alt gölge oluşturmak için aşağıdaki ayarları kullanabilirsiniz.

Temel fark, gölge için daha fazla yüzey alanı oluşturmak için metin modüllerinin her biri için artırılmış dolgu ve dairesel şekil oluşturmak için tüm köşelere %50 kenarlık yarıçapı ekleyerek olacaktır.

Alt gölgeniz için dört metin modülü oluşturmak için ihtiyacınız olan ayarlar burada. Diğer üçünün oluşturulmasını hızlandırmak için ilk metin modülünü çoğaltmaktan çekinmeyin.

İlk Katman Metin Modülü Ayarları

Genişlik: %25
Hizalama: Merkez
Özel Kenar Boşluğu: 0px Alt
Özel Dolgu: 50px Üst, 50px Alt
Yuvarlatılmış Köşeler: %50
Kutu Gölge Dikey Konumu: 250px
Kutu Gölge Bulanıklığı Gücü: 100 piksel
Kutu Gölge Yayılma Gücü: 0px
Kutu Gölge Rengi: rgba(0,0,0,0.2)

İkinci Katman Metin Modülü Ayarları

Genişlik: %50
Hizalama: Merkez
Özel Kenar Boşluğu: -100px Üst, 0px Alt
Özel Dolgu: 60px Üst, 60px Alt
Yuvarlatılmış Köşeler: %50
Kutu Gölge Dikey Konumu: 250px
Kutu Gölge Bulanıklığı Gücü: 110 piksel
Kutu Gölge Yayılma Gücü: 0px
Kutu Gölge Rengi: rgba(0,0,0,0.2)

Üçüncü Katman Metin Modülü Ayarları

Genişlik: %75
Hizalama: Merkez
Özel Kenar Boşluğu: -120px Üst, 0px Alt
Özel Dolgu: 70px Üst, 70px Alt
Yuvarlatılmış Köşeler: %50
Kutu Gölge Dikey Konumu: 250px
Kutu Gölge Bulanıklığı Gücü: 120px
Kutu Gölge Yayılma Gücü: 0px
Kutu Gölge Rengi: rgba(0,0,0,0.2)

Dördüncü Katman Metin Modülü Ayarları

Genişlik: %100
Hizalama: Merkez
Özel Kenar Boşluğu: -130px Üst, 0px Alt
Özel Dolgu: 70px Üst, 70px Alt
Yuvarlatılmış Köşeler: %50
Kutu Gölge Dikey Konumu: 250px
Kutu Gölge Bulanıklığı Gücü: 130 piksel
Kutu Gölge Yayılma Gücü: 0px
Kutu Gölge Rengi: rgba(0,0,0,0.2)

Her katmanda genişliğin %25 arttığına dikkat edin (%25, %50, %75, %100). Ayrıca, gölgeyi dışa doğru kademeli olarak genişletmek ve bulanıklaştırmak için dolgu ve bulanıklık gücü artırıldı.

İşte bir nesnenin png görüntüsü altında nasıl göründüğünün sonucu.

Negatif bir kenar boşluğu vererek nesneyi aşağı indirirseniz, nesnenin yüzeyde oturuyormuş gibi göründüğünü görebilirsiniz.

Görüntünüze Animasyon Ekleme ve Yükseklik Oluşturmak için Alt Gölge

Yalan söylemeyeceğim, animasyon, bir nesne yüzeyden kaldırıldığında bir gölgenin nasıl göründüğünün fiziği açısından yüzde 100 doğru olmayacak, ancak efekt hala paylaşmam için yeterince havalı.

Divi Image ile ilk 5 katmanlı gölge örneğimize biraz animasyon ekleyelim. Konsept basit. “Yükseltmeyi” yapmak istediğiniz görüntüye göre yukarı yönde bir slayt animasyonu ayarlayın. Ardından, görüntünün altındaki gölge öğelerinin her biri için orta yönde bir slayt animasyonu ekleyin. Bu şekilde, gölge genişlerken aynı zamanda görüntü yükselir. Bu animasyonun gerçekçi olması için, muhtemelen bu animasyonu ekranın üst kısmındaki öğelerle sınırlandırmalısınız, böylece sayfa yüklendiğinde animasyonunuz hem görüntüye hem de gölgeye aynı anda gelsin. Kullanıcı sayfayı aşağı kaydırdığında animasyonu etkinleştirmeye bağlıysanız, görüntü yükseltme ile gölge genişletme arasında bir gecikme yaşarsınız.

Animasyonu eklemek için görüntü modülü ayarlarını aşağıdakilerle güncelleyin:

Animasyon Stili: Slayt
Animasyon Süresi: 1400ms
Animasyon Yoğunluğu: %10

Ardından, beş metin modülünün her biri için aşağıdakileri güncelleyin:

Animasyon Stili: Yakınlaştır
Animasyon Süresi: 1400ms
Animasyon Yoğunluğu: %10

İşte ortaya çıkan animasyon…

Duyarlı ve Tarayıcı Uyumlu

Bu gölge katmanları yüzde genişlikleri kullanılarak oluşturulduğundan, bulundukları sütunun boyutuna uyacak ve herhangi bir cihaz veya tarayıcı genişliğinde harika görüneceklerdir. Ayrıca, bu gölgeleri oluşturmak için kullanılan box-shadow css özelliği, tüm büyük tarayıcılar tarafından yaygın olarak kabul edilmektedir.

İşte bu gölgelerin mobil cihazlarda hızlı bir görünümü…

Mobil için gölgenizin boyutunu ayarlamak istiyorsanız, gölgenizi oluştururken her bir katman için her zaman tablet ve akıllı telefon için belirli bir özel dolgu ayarlayabilirsiniz.

Son düşünceler

Başlangıçta bu gölgeleri bulanıklaştırma filtresini kullanarak oluşturmaya koyuldum, ancak

Burada açıklanan çok katmanlı alt gölgeler, Divi oluşturucu ile yapabileceğiniz birçok gölge karışımı, renk ve şekil kombinasyonunun yalnızca bir kısmıdır. Metin modüllerinin kutu gölgelerini katmanlama tekniğini anladıktan sonra, alt gölgeyi kolayca ayarlayabilirsiniz. Ayrıca, bu katmanları Divi Kitaplığı'na kaydedebilir ve sitenizin herhangi bir yerinde kullanabilirsiniz.

Umarım bu tasarım tekniği, bir sonraki projenizde harika alt gölgeler yaratmanız için size ilham verir. Demek istediğim, henüz beşten fazla katman denemedim.

Yorumlarda sizden haber bekliyorum.