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:
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
Resim sınıfına sahip bir kapsayıcı içerisinde 2 farklı
Kapsayıcı divimiz olan
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.
Buraya kadar hepsini yaptıysak görmemiz gereken sahne şöyle olmalı:
Tabii ki istediğimiz bu değil, şimdi kopya resmimize
Burada verdiğimiz
Ş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
Kopya olan resmimiz absolute konumlandırmaya sahip olduğu için ortalama işlemimiz biraz farklı,
Ş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.
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
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.
Doğru kullanım ile yanlış kullanım arasındaki farkı anlamanız için size bir örnek hazırladım:
Ş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ı:
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ı:
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.
Keyifli sosyaller.
