Eskiden Photoshop kullanarak web sitesi için farklı tasarımlar üretmeye çalışırdık. En çok kullandığımız ve en çok popüler olanlar gölge efektleriydi. Web sitesindeki içeriklere gölge efekti verince 3 boyutlu bir görünüm kazanır ve bir hayli de çekici olurdu. Bu günkü web teknolojisi ile artık Photoshop olmadan da bölge efektleri kullanmak mümkün. Henüz bütün tarayıcılar tarafından desteklenmese bile major diye adlandırılan en çok kullanılan tarayıcılar üzerinde yapılabiliyor.
Css3 box-shadow ile kutulara text-shadow ile de yazılara bunu yapabilmek mümkün. Kendi başına mouseye duyarlı olmasa bile 3D görünümlü web tasarımları hazırlamak için oldukça işe yarıyor. Ivan Indamix tarafından geliştirilen RealShadow.js uygulaması da hazırladığınız divlere gölge efekti vermek için yapılmış. Eklentinin en güzel yanı gölgenin mouse pozisyonlarına göre hareket etmesidir. Mousenizi bir ışık veya güneş olarak düşünün ve çerçevelerin etrafında gezdirin. Bu sırada gölgelerin nasıl mouseye duyarlı bir şekilde hareket ettiğini göreceksiniz.
Kullanım
- Head etiketleri arasına eklenmesi gereken bölümler.
<link rel="stylesheet" href="example.css"/> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="realshadow.js"></script>
JavaScript :
Bu kısıma gölge efekti olmasını sitediğiniz div yada elementleri ekleyerek gölge efektini kullanabilirsiniz. Örnek olarak eklenmiş olan elementler : button, .container, .text
<script type="text/javascript">
$(function(){
$('button, .container, .text').realshadow({
pageY: 10
});
});
</script>
Basit kullanım :
<script type="text/javascript">
$(selector).realshadow(); // options are optional Secenekler istege bagli
$(selector).realshadow({
followMouse: false, // true by default / true default olarak calisir
pageX: x, // x coordinate of the light source / x isik kaynagi koordinati
pageY: y // y coordinate of the light source / y isik kaynagi koordinati
c: { // shadow color /Golge rengi
r: 1, // red channel for shadow / Golge icin kirmizi kanal
g: 1, // green channel for shadow / golge icin yesil kanal
b: 1, // blue channel for shadow / golge icin mavi kanal
}
});
</script>
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div class="container"> <ul class="menu"> <li><button>1</button></li> <li><button>2</button></li> <li><button>3</button></li> <li><button>4</button></li> <li><button>5</button></li> </ul> <p class="text">Mintik.com</p> <p class="text">Mintik.com</p> </div>