CSS ile Sitenize Özel Fare İmleci Seçin

Tarih: 20 Ağustos 2010   Yazar: SO  |  3.038 kez okundu
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.


    Bu yazı için 5 yorum yapılmış.
  1. Slayer dedi ki:

    Güzel bir anlatım olmuş işime yarayacak teşekkürler..

  2. Burak Dülgar dedi ki:

    Güzel bir makele olmuş Said teşekkürler :)

  3. Ömer Faruk Aksu dedi ki:

    Desteklediği tarayıcılar ?
    ya da desteklemediği ?

    Teşekkür ederim.

  4. osaman dedi ki:

    ustadan ses yok hala tatilde herhalde:) bari soruya ben cevap vereyim sanırım sadece son çıkan tarayıcıları destekliyor özellikle opera ve İE nin eski sürümlerinde kesinlikle çalışmaz.

  5. Tural Abiyev dedi ki:

    bi aralar kullanmıştım güzel anlatım olmuş, siteniz takip edilmeye değer bi site, başarılar.


Yorum yazmak istermisiniz?

Sorbize RSS Beslemesi    Sorbize E-Posta Aboneliği    Sorbize'yi Facebooktan Takip Edin    Sorbize'yi Twitter'dan Takip Edin    Abone

Yazılar E-Posta'na Gelsin:

Lazım Olabilir
  • Webmaster Portalı
  • Url Kısaltma Servisi
  • Sorbize.com bir çok kategoride güzel ve özgün makaleler okuyabileceğiniz güncel web 2.0 bir blogdur.
    © Tüm Hakları Saklıdır.
    Bu websitesi DMCA Protection ile lisanslanmıştır. Yazılar kaynak belirtilmeden kullanılamaz.