Düz CSS'de vurgulu resimle bağlantı oluşturma

Güncelleme: 27 Şub 2020 / Makale: Jerry Low

* Güncelleme notları: Bu yazı ilk olarak Ekim 2009'da yayınlanmıştır. Bahsettiğim bazı teknikler belki modası geçmiş olabilir. Lütfen bakın en son web sitesi oluşturma tekniği için bu kılavuz.

Bir vurgun nedir? Tanımlanan UWStout.edu:

'Hover', imleci herhangi bir türdeki bağlantının üzerine yerleştirdiğinizde ortaya çıkan bir efekttir. Bağlantı, renk değiştirerek, yeni bir grafik göstererek ve hatta bir ses dosyası çalarak vurgulu fareye yanıt verecek şekilde kodlanabilir.

Fareyle üzerine gelme efekti, web kullanılabilirliğini artırır ve web sahiplerinin web trafiklerini yönlendirmelerine yardımcı olur. Web kullanıcılarınızın özel bir bağlantıya daha fazla dikkat etmesini istediğinizde, bunu yapmanın iyi bir yolu, çekici vurgulu bir bağlantı oluşturmaktır. Bunun gibi basit bir fareyle üzerine gelme efekti (basit bir alt çizgi ve metin renginin değişmesi), bu metnin 'tıklanabilir' olduğunu gösterir ve web etkileşimlerini iyileştirir. Bununla birlikte, metin rengini ve stillerini değiştirmek (altı çizili / üst çizgi / kalın) çok temeldir ve fareyle üzerine gelindiğinde yapılabilecek çok şey vardır.

Bu yazıda, hover efektli nasıl iyi görünümlü bağlantılar yaratabileceğinizi göstereceğim.

Örnek 1: Vurgulu düğme ile bağlantı

İlk olarak, çalışan örneğe bir göz atın (nasıl çalıştığını görmek için fareyi bağlantının üzerine getirin - yan taraftaki simgenin değiştirilmesi).

Örnek 1 - Fareyle üzerine gelinen düğme resmiyle bağlantı

Bu örnekte neyin oluşturulacağının tamamlanmış halidir.

Düz CSS'de nasıl yaratıyoruz?

Düğme resmi

Adım 1, gördüğünüz gibi, iki farklı versiyonda bir ok simgesine ihtiyacımız var. Örneğimizde, varsayılan bağlantı düğmesi olarak kırmızı (#CC3300) kullandım; vurgulu etkisi için gri (#333333). Böyle bir düğme herhangi bir görüntü düzenleme yazılımı kullanılarak kolayca yapılabilir.

Şimdi kırmızı renkli butona (diyelim, b1.png) ve rey rengine sahibiz (düğme diyelim, b2.png). Bu ikisini b1.png'nin üstünde b2.png ile bir görüntü dosyasına birleştirin. Bu link için son resmimiz olacak. İstediğiniz yeri (x.png) adlandırın ve istenen konumu yükleyin (benim durumum için, WP şablon klasörüne yerleştirdim).

Senin referansın için:

b1.png , b2.png ve x.png

CSS Kodu

Ardından, CSS kodunda. Temel olarak, elde etmek istediğimiz şey, link metnini butona yer açmak için sağa hafifçe girmektir; ve aynı zamanda, bağlantı hover durumunda olduğunda farklı bir görüntüyü gösterir. Bunlar arka plan pozisyonunda küçük bir büküme ihtiyaç duymamız dışında oldukça temel şeylerdir. Hile, orijinal bağlantı için resmin üst kısmını (kırmızı düğme) göstermektir; ve üzerine gelindiğinde, arkaplan resmini bir -11px ile (web sitenizde farklı olabilir) gri düğme gösterecek şekilde değiştirin.

.xa {color: #cc3300; dolgu-sol: 14px; yazı tipi ağırlığı: kalın; background-image: url (görüntüler / x.png); arka plan konumu: 0 2px; arka plan tekrarı: no-tekrarı; }
.xa: hover {color: #333333; dolgu-sol: 14px; yazı tipi ağırlığı: kalın; background-image: url (görüntüler / x.png); arka plan konumu: 0 -11px; arka plan tekrarı: no-tekrarı; }

Uygulama

Bu vurgulu efekti göstermek için, belirtilen alana x sınıfını eklemeniz yeterlidir. İşte nasıl yapabileceğinize bir örnek.

Anasayfa

Örnek 2: Vurgulu arka planda bağlantı

Aynı konsept ile, bağlantılarınızın serin görünmesini sağlamanın sonsuz yolları vardır. Hover efektleriyle biraz farklı bir yöntemle neler yapabileceğimize bir başka örnek. Yine bitmiş versiyona bir göz atın.

Örnek 2 - Fareyle üzerine gelindiğinde arka planda bağlantı

Bu örnekte, benim yapacağım şey, kullanıcılar fareyi üzerine yerleştirdikten sonra arka planın değişeceği düğme benzeri bir köprü oluşturmaktır.

Düz CSS'de nasıl yaratıyoruz?

Arka plan resimleri

İlk önce yuvarlatılmış dikdörtgenin iki görüntüsünü oluşturun. Gösteri amacıyla, bu örnekte bu iki görüntüyü birleştirmeyeceğiz. Kırmızı (#CC3300) dikdörtgenini b1.png; ve kestane rengi (#9F2800) b2.png biçiminde dikdörtgen.

CSS Kodu

Sonra, stil sayfanız için kodlar (bu ikinci örnekte 'y' sınıfını adlandırıyoruz).

ay {width: 280px; yükseklik: 42px; renk: #000000; dolgu maddesi: 10px; text-decoration: none; Ekran bloğu; yazı tipi ağırlığı: kalın; background-image: url (görüntüler / b1.png); arka plan tekrarı: no-tekrarı; }
ay: hover {width: 280px; yükseklik: 42px; renk: #FFFFFF; dolgu maddesi: 10px; yazı tipi ağırlığı: kalın; text-decoration: none; Ekran bloğu; background-image: url (görüntüler / b2.png); arka plan tekrarı: no-tekrarı; }

Uygulama

Bağlantıyı görüntülemek için, basitçe (y) sınıfını kaynak kodunuzdaki etikete ekleyin. Misal:

Anasayfa

Tamamlayan

Umarım bu makale size değerli bilgiler sağlamıştır ve bazılarınıza CSS'yi yaratıcı bir şekilde kullanma konusunda ilham vermiştir. Bu kılavuza eklemem gerektiğini düşündüğüm başka noktalar varsa, fikirlerinizi yorum bölümünde bırakmaktan çekinmeyin.

Jerry Low hakkında

WebHostingSecretRevealed.net (WHSR) 'nin kurucusu - 100,000 kullanıcıları tarafından güvenilen ve kullanılan bir hosting incelemesi. 15'in üzerinde web barındırma, bağlı kuruluş pazarlaması ve SEO konusunda yılların tecrübesi. ProBlogger.net, Business.com, SocialMediaToday.com ve daha fazlasına katkıda bulundu.