[UI & UX Dersleri] Resim Gölgeleri Nasıl Olmalı?

Bloğumda kullanıcı arayüzü ve kullanıcı deneyimi adına öğretici paylaşımlarda bulunmak istiyorum, bu benim ilk blog makalem olacak. Bu makalede yaptığınız site tasarımlarınızdaki resimlerin nasıl gölgelendirilmesi gerektiğiyle ilgili bir tüyo vereceğim. Normalde site içerisinde tasarladığımız kutularda düz renk kullanırız, çünkü kutular da düz renktir. Ancak resimler tek bir renge sahip olmadıklarından düz renkle gölgelendirmek pek içi açıcı sonuçlar doğurmaz.

Doğru kullanım ile yanlış kullanım arasındaki farkı anlamanız için size bir örnek hazırladım:

Screenshot_20200826_133552.png

XenForo dosya yüklerken kaliteyle oynuyor olacak ki yüklediğim resimdeki gölgeler bozuk gözüküyor, o yüzden net bir şekilde bakmak isterseniz bu bağlantıdan bakabilirsiniz. Yapacağınız gölge bağlantıdaki gibi gözükecek, burada gözüktüğü gibi bozuk değil.

Şimdi nasıl yaptığımıza gelelim. Doğru kullanımda aslında 2 tane resim mevcut, birisi ön planda kalan net resim. Diğeri arkaplanda kalan blur uyguladığımız bir kopya. Yanlış kullanım zaten tahmin edebileceğiniz gibi yalnızca box-shadow kullanılmış basit bir örnek. Önce HTML yapımızı oluşturalım:

HTML:
<div class="resim">
    <div class="gercekResim">
        <img src="https://i.hizliresim.com/xs8aka.jpg" alt="">
    </div>
    <div class="kopyaResim">
        <img src="https://i.hizliresim.com/xs8aka.jpg" alt="">
    </div>
</div>

Resim sınıfına sahip bir kapsayıcı içerisinde 2 farklı div ve 2 adet img etiketi kullandık. Şimdi CSS kodlarımıza bakalım:

CSS:
.resim {
    position: relative;
    display: inline-block;
}

Kapsayıcı divimiz olan .resim için uygulamamız gerekenler bunlar, position: relative ekliyoruz ki içerisindeki kopya (gölge) resmi kapsayıcımıza göre konumlandırabilelim. Display: inline-block özelliğini ise divimiz resmin boyutu kadar genişlik alabilsin diye yapıyoruz, eğer bunu yapmazsak kapsayıcı divi tüm ekranı kaplayacak şekilde genişliğe sahip olur. Şimdi resmi istediğimiz gibi boyutlandıralım ve ufak bir köşe eğimi verelim.

CSS:
.gercekResim img {
    width: 200px;
    height: 200px;
    border-radius: 12px;
}

Bu da tamam, şimdi gölgemiz olması gereken kopya resmimize ne yapacağımıza bakalım. Öncelikle kopya olan resim gerçek resimle aynı genişlikte olmamalı, eğer olursa abartı bir gölge ile karşılaşırız. Bu yüzden kopya olan resmin genişliği orijinal resmin genişliğinin %90~95 kadarı falan olmalı. Bu örnekte asıl resmimin genişliği 200 piksel, kopya resmimin genişliğini ise 180 piksel olarak ayarlayacağım. Yükseklik yine 200 piksel yani orijinal resimle aynı olacak.

CSS:
.kopyaResim img {
    width: 180px;
    height: 200px;
}

Buraya kadar hepsini yaptıysak görmemiz gereken sahne şöyle olmalı:

Screenshot_20200826_135757.png

Tabii ki istediğimiz bu değil, şimdi kopya resmimize position: absolute vererek relative olan kapsayıcımıza (.resim) göre hareket etmesini sağlayalım. Bu sayede orijinal resmin hizasına getirip, daha sonra 10 piksel aşağıya kaydırabiliriz.

CSS:
.kopyaResim img {
    width: 180px;
    height: 200px;
    position: absolute; 
    top: 10px;
}

Burada verdiğimiz top: 10px değeri aslında elemanın en üstünden 10px aşağıya konumlandırmasını sağlıyor. Eğer bunları da yaptıysak elde edeceğimiz görüntü şu şekilde olmalı:

Screenshot_20200826_140451.png

Şimdi burada birden fazla sorunumuz var, ilk sorun kopya olan resmin orijinal resmin sağında duruyor olması. Öncelikle kopya olacak resmimizi ortalamamız gerekiyor. İkinci sorunumuz ise kopya olan resmin katman olarak orijinal resmin önünde, üstünde gözükmesi. Kopya olan resmi z-index metodunu kullanarak orijinal resmin arkasına atmamız gerekiyor. Önce ortalamamızı yapalım.

Kopya olan resmimiz absolute konumlandırmaya sahip olduğu için ortalama işlemimiz biraz farklı, transform: translate(-50%, 0) verirsek resmimizin ortalandığını görürüz.

Şimdi elimizde tek bir sorun var, kopya resmin orijinal resmin üstünde duruyor olması. Bunun da çözümü tıpkı ortalama işlemi gibi tek bir koda bakıyor. z-index: -1 kodunu kopya resmimize eklersek kopya resim katman olarak diğer elemanların altında duracaktır. Hepsini yaptıktan sonra kopya resmin CSS kodları şu şekilde olmalı.

CSS:
.kopyaResim img {
    width: 180px;
    height: 200px;
    position: absolute;
    top: 10px;           
    z-index: -1;
    transform: translate(-50%, 0);
}

Tüm bunları yapınca siz de fark edeceksiniz ki tek eksiğimiz gölge olması gereken kopya resmimizin hiç de gölge gibi gözükmüyor oluşu :) Onu gölge gibi göstermek için tek yapmamız gereken ona bir blur eklemek hepsi bu. Bunun için CSS'in filter özelliğini kullanacağız. Bu iş için 20 piksellik bir blur filtresi işimizi görür.

Kopya resmimize filter: blur(20px) kodunu ekliyoruz ve işte bu kadar.

Screenshot_20200826_142038.png

Eğer daha iyi anlayacağınızı düşünürseniz diye bir örneğini JSFiddle'da yaptım, bu bağlantıya tıklayarak örneği JSFiddle üzerinden kontrol edebilirsiniz. Farklı HTML yapılarında uygulamanız gereken CSS komutlarının değişebileceğini unutmayın.

Keyifli sosyaller.

Son incelemeler

Artıları: Her satırdaki kodlar detaylı olarak anlatılmış.
Giriş seviyesi HTML ve CSS bilmeme rağmen anladım. Öğretici bir içerik.
Artıları: Gayet güzel ve bilgilendirici.
UI ve UX önemli konular ancak Technopat üzerinde bunlara dair pek bilgi yok. Paylaşımlarınız değerli. Emekleriniz için teşekkürler.

Yorumlar

Bilgilendirici, eğitici ve öğretici bir içerik olmuş gerçekten, ellerinize sağlık.

Yalnız şöyle bir durum var. Yaptığınız gölgelendirme her ne kadar "Ambilight" tarzı ambiyans şeklinde gözükmesine rağmen, bu kullanım her yapı için uygun değil. Şöyle ki, UI ve UX kesin çizgilerle şu doğru ve şu yanlış kullanım şeklinde ayrılamaz. UI ve UX, kendi içindeki bir dilde doğru ve yanlış kullanıma sahiptir. Çünkü UI ve UX tasarımı en başta bir "kimlik" meselesidir. Bir sanat olduğu için eğer genel bir şekilde kabul görürse (örnek olarak Samsung'un mobil cihazlarda yaygın bir şekilde oturttuğu yuvarlağımsı kare (squircle) verilebilir) bir dönemin kimliği olarak yansımaya başlar. Veya her firmanın kendine ait bir "kurumsal kimlik" klavuzu mevcuttur bilirsiniz ki. Biliriz ki, biz bu kimliklerin kalıntılarını gördüğümüz de bunun hangi döneme ait olduğunu çok kolaylıkla tanımlayabiliriz.

Örneğin Microsoft'un Akıcı Tasarım (Fluent Design) dili kendi içinde doğru ve yanlış kullanıma sahip iken, Samsung'un Tek Arayüz (One UI) tasarım dili kendi içinde doğru ve yanlış kullanıma sahiptir. Microsoft'un diline göre doğru olan bir kullanım, Samsung'un kullanımına göre çok ciddi bir tasarım yanlışı olabilir.

Bu sebeple, bu öğretileri paylaşırken eğer kendi tasarım diliniz ise kendi tasarım dilinize ait olduğunu eğer halka açık bir platformun tasarım dili ise hangi tasarım diline ait olduğunu belirtmeniz, yaptığınız bu değerli işe gölge düşürmeyecek aksine değer katacaktır diye düşünüyorum. :)

Umarım yazdıklarımı yanlış yorumlamazsınız. Maksat gelebilecek kötü eleştirileri daha başından ortadan kaldırmak. Blog serinizin devamını takip edeceğim eğer bir aksilik yaşamazsam. 😊
 

Blog girdisi detayları

Ekleyen
Stefano Valentini
Görüntüleme
288
Yorumlar
1
İncelemeler
2
Son güncelleme
Değerlendirme
5,00 yıldız 2 değerlendirme

Teknoloji kategorisindeki diğer girdiler

Bu girdiyi paylaş

Yukarı