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

Yazan makale:
  • Web Sitesi Tasarımı
  • Güncelleme: Şubat 27, 2020

* 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ür bağlantının üzerine getirdiğinizde oluşan bir etkidir. Bağlantı, renk değiştirerek, yeni bir grafik göstererek veya hatta bir ses dosyası oynayarak vurguyu yanıtlamak için kodlanabilir.

Fareyle üzerine gelme etkisi, web kullanılabilirliğini artırır ve web sahiplerinin web trafiğini yönlendirmelerine yardımcı olur. Web kullanıcılarınızın özel bir bağlantıya daha fazla dikkat etmesini istediğinizde, bunun için iyi bir yol çekici vurgulu efektli bir bağlantı oluşturmaktır. Bunun gibi basit bir fareyle üzerine gelme efekti (basit bir alt çizgi ve metin renginin değiştirilmesi) bu metnin 'tıklanabilir' olduğunu ve web etkileşimlerini geliştirdiğini gösterir. Bununla birlikte, metin rengini ve stillerini değiştirmek (alt çizgi / üst çizgi / kalın) çok temeldir ve fareyle daha fazla şey yapılabilir.

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ışma örneğine bir bakış (nasıl çalıştığını görmek için bağlantıyı fareye yerleştirin - yandaki simgenin değiştirilmesi).

Örnek 1 - Vurgulu düğme görüntüsüyle 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.

<p class = 'x'> <a href="http://www.webhostingsecretrevealed.com"> Ana Sayfa </a> </ p>

Ö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 - Vurgulu 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

Daha 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, sınıfı (y) basitçe kaynak kodunuzdaki <a href> etiketine yerleştirin. Örnek:

<a href="http://www.webhostingsecretrevealed.com" class="y"> Ana Sayfa </a>

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.