CSS ile Sitenize Özel Fare İmleci Seçin

Css ile hayal gücü bir araya geldiğinde gerçekten sıra dışı güzel özellikler ortaya çıkıyor. Bize düşen sadece hayal gücümüzü kullanıp başka neler yapabiliriz diye düşünmek. Zaten bu düşüncenin ortaya çıkardığı sonuç her geçen gün web sitesi sahiplerinin kişisel özelliklerini yansıtan web sitelerinin daha da türemesi. Eskiden büyüklerimizin şöyle bir sözü vardı. Bana dostunu söyle sana kim olduğunu söyliyeyim. Şu sıralar  bu söz bana siteni göster sana kim olduğunu söyliyeyim şekline dönüştü.

Örneğin sorbize.com’a baktığınızda sade ama bi o kadar da düzenli ve tertipli  bi site görürsünüz. Bu site yöneticimizin nasıl biri olduğu hakkında bir fikir verir. Aynı şekilde sorbize yazarlarından Aycan arkadaşımız blogunda bidusun de oldukça ferahlatıcı ve şık ve eğlenceli bir taktik kullanmış. Bu da onun hakkında bir fikir verebilir. Bu tarz sitelerde ne kadar çok kendinizden birşeyler katarsanız hem sitenizi sevip sahiplenmeniz o kadar kolay olur hem de bu iş sizin için bir eğlenceye dönüşür.

Bundan sonraki derslerimizde sürekli olarak site editleme örnekleri hakkında bilgi veren bir yazı dizisi şeklinde her hafta bir bölümü ele alacağız bunlar tablolar galeriler kutular menuler şeklinde gidecek. Bu yazı serisinin ilk yazısı mouse imleci hakkında olsun istedim çünkü kendi blogum için böyle bişi yapmayı düşünüyordum ve sizinle paylaşmak istedim.

1. Adım: Html

Çok da fazla üstünde durulacak bir adım değil sadece mouse imlecimizin hangi alanlar içerinde seklinin değişmesini istiyorsak o alanları <Div> tagları arasına ekliyoruz dilerseniz bunu tüm siteyi kapyacak şekilde de yapabilirsiniz örnek verelim hemen.

<div id="deneme-alani">

</div>

2. Adım: CSS

Bu adımda imlecimizin şeklini şemalini belirleyeceğiz ama bunun için kendimize bir imleç resmi bulmalıyız. Bunun için iconfinder sitesinden cursor olarak aratırsanız kendinize güzel bir tane bulabilirsiniz. Ben aşağıdaki resimdeki imleci kullanacağım.

Bence gayet güzel siz kendinize başkasını kullanabilirsiniz. Hemen css kodumuza geçelim açıklamalı meali ile birlikte.

Css kodumuzu oluştururken ilk olarak bi alan oluşturalım ve imlecimizin olmasını istediğimiz resmi seçelim.

#deneme-alani{
cursor: url(resim/imlec.png);  /* İmlecimizin resmini belirlediğimiz kısım. */
}

Evet yukarıdaki css kodlaması gibi isterseniz sizde artık css ile imlecinizi değiştirebilirsiniz. Demo olarak buraya bakabilirsiniz.

5 Yorum

  1. Slayer 20 Ağustos 2010
  2. admin 21 Ağustos 2010
  3. Ömer Faruk Aksu 22 Ağustos 2010
  4. osaman 31 Ağustos 2010
  5. Tural Abiyev 17 Ağustos 2011

Yorum Yaz