Fareyle üzerine gelindiğinde CSS ipuçları. CSS3 ile basit ipuçları nasıl yapılır

Düzen gurularının bu yazıda yeni bir şey bulması pek olası değildir. Bu gönderi daha çok benim gibi evrensel araç ipuçlarını oluşturma ve şekillendirme konusunda sorun yaşayan yeni başlayanlar için.

Son zamanlarda küçük bir blog hazırlarken, şık ama aynı zamanda basit araç ipuçları yapma görevi ile karşı karşıya kaldım. Araç ipuçları için ayrı div kapsayıcıları oluşturmanın veya saf CSS'de araç ipuçları oluşturmanın farklı yollarını denedikten sonra, kodu karmaşıklaştırmayacak, çapraz tarayıcı olacak ve aynı zamanda uygulanması çok basit olacak evrensel bir çözüm buldum.
Bu basit sorunu çözme yöntemimle ilgilenen herkes, lütfen cat altında.

Çözüm

Size önereceğim yöntem oldukça basit ve etkilidir. Tüm tarayıcılarda çalışır, hatta IE 6 (Benim tarafımdan birçok kez test edilmiştir). Değiştirilmesi kolay ve kullanışlı. Kodu karıştırmaz ve görselleştirir. İhtiyaçlarınıza göre kolayca değiştirilebilir. Örneğin, setTimeout veya başka bir şey aracılığıyla bir ipucunun çıktısını geciktirmek için.

HTML

Fareyle üzerine gelindiğinde bir ipucu görüntülemek istediğimiz bağlantı içeren bir HTML sayfamız olduğunu varsayalım:
Bağlantı


Listeden de görebileceğiniz gibi, LESS css önişlemcisini kullanıyorum.
CSS stillerini ve komut dosyalarını ayrı dosyalara ekledik. Ayrıca, araç ipucu için kapsayıcı olacak bir bağlantımız ve bir div bloğumuz var.
HTML5 belirtimi, bir öğe veya blok hakkında bazı bilgileri depolayabilen data-atribute türündeki özel özniteliklerin kullanımına izin verir. Araç ipuçlarının metnini veri özniteliklerinde saklayacağız.
Bağlantı
Depolama için data-tooltip niteliğini kullanıyorum.
HTML bittiğinde - stillere geçebilirsiniz.

css

LESS Elements kitaplığını kullanıyorum ve herkese tavsiye ediyorum, bu yüzden bu çerçeveyi kullanarak bazı özellikler yazacağım.
@import "css/elements.less"; #tooltip ( z-index: 9999; konum: mutlak; görüntü: yok; üst:0 piksel; sol: 0 piksel; arka plan rengi: #000; dolgu: 5 piksel 10 piksel 5 piksel 10 piksel; renk: beyaz; .opacity(0.5); . yuvarlatılmış(5 piksel); )
Listeden, LE'yi dahil ettiğimiz ilk satırda div#tooltip bloğunu mutlak konumlandırmaya ayarlayıp gizlediğimiz açıktır. Ardından, bloğa bir arka plan rengi ve bir metin rengi veriyoruz, köşeleri (5 piksel) yuvarlayarak şeffaflık değerini %50'ye ayarlıyoruz.

jQuery

Ve şimdi en ilginç olanı - jQuery.
$.jQuery(document).ready(function() ( $("").mousemove(function (eventObject) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "üst" : eventObject.pageY + 5, "sol" : eventObject.pageX + 5 )) .show(); ))).mouseout(function () ( $("#tooltip) ").hide() .text("") .css(( "üst" : 0, "sol" : 0 )); )); ));// Hazır son.
Şimdi data-tooltip özniteliğine sahip tüm elementleri seçime ekliyoruz ve mouse ile istenilen elementin üzerine geldiğimizde tooltip değerini alıp bir değişkende saklıyoruz. Ardından, araç ipucu metnini #tooltip bloğuna ekleyin, imleç koordinatlarını sayfanın kenarından + 5 piksel verin ve son olarak araç ipucu bloğunu doğru yerde görüntüleyin. Fare elemandan ayrıldıktan sonra #tooltip bloğunu gizler, içeriğini temizler ve 0;0; konumuna geri döndürürüz.

Bu kadar!
Sonuç olarak, şöyle bir şey elde edeceğiz: Demo

Bu basit komut dosyasıyla, sayfadaki data-tooltip özniteliğine sahip tüm öğeler araç ipucunu alacaktır.

İlginiz için teşekkür ederiz!

Merhaba sevgili arkadaşlar. Geçen gün müvekkillerimden biri, sitesine son halini vermek için bana ulaştı. Daha doğrusu eski form değiştiği için sitede yeni bir başvuru formu oluşturun.

Ayrıca her form alanına bir araç ipucu eklemesini istedi. Muhtemelen bu tür ipuçlarını görmüşsünüzdür, fare imlecini bir görüntünün veya bir kelimenin üzerine getirdiğinizde bir araç ipucu belirir.

Elbette, bu tür ipuçlarını uygulamak için birçok seçenek var. Doğal olarak sunucudaki yükü en aza indirmeye odaklanarak HTML ve CSS kullanarak araç ipuçları yapmaya karar verdim. Bu oldukça basittir ve sunucuyu en ufak bir şekilde yüklemez.

Ve böyle bir ipucunun türü yalnızca beceri ve hayal gücünüze bağlıdır. Müşteri formunda, bunu, araç ipucunun göründüğü giriş alanının yanında, soru işaretli bir resim olarak uyguladım.

Araç İpucu Uygulama Örneği

Araç ipucu nasıl oluşturulur

Yani, tüm süreç sizi 5 dakikadan fazla sürmez. Öncelikle dikkat çeken nesnenin nasıl görüneceğine karar vermelisiniz. Yani, bir görüntü olabilir CSS stilleri kullanılarak oluşturulmuş basit bir araç ipucu böyle görünür. Ve görüntüye bağlı. veya .

Bir araç ipucunu bir resme bağlamak için önce resmin sitenize yüklenmesi gerekir. Bence bunun üzerinde durmanın bir anlamı yok. Ardından, sırasıyla bu resmi ve araç ipucunu görüntülemek istediğiniz yere şu kodu yapıştırın:

RESME BAĞLANTI" alt="(!LANG: ipucu" />!} İPUCU METNİ

Bu bir kelime veya kelime öbeği ise, bu kodu buraya, bir ipucu görüntülemek istediğiniz yere eklemeniz gerekir.

KELİME İPUCU METNİ

Şimdi stilleri CSS stil sayfanıza yapıştırmanız gerekiyor, çoğu durumda bu style.css dosyasıdır.

WP yönetici panelini açın "Dış görünüş" — "Editör" — "Stil sayfası" ve bu stilleri en sona yapıştırın.

Yardım (renk: #2C8505; ana hat: yok; /*araç ipucu rengi*/ imleç:yardım; metin-dekorasyon: yok; /*imleç üzerine gelindiğinde imleç görünümü, işaretçi ile değiştirilebilir*/ pozisyon: göreceli; /*durum*/ ) /*araç ipucu konumu*/.help yayılma alanı ( sol kenar boşluğu: -999em; konum: mutlak; ) /*vurgu ipucu*/.help:hover yayılma alanı ( yazı tipi ailesi: Verdana, Tahoma, Geneva, sans-serif; /*font*/ konum: mutlak; /*konum*/ sol: 10 piksel; üst: 25 piksel; z-endeksi: 99; kenar boşluğu- sol: 0; genişlik: 200 piksel; /*ipucu bloğunun genişliği*/ } /*görüntü parametreleri*/.help:hover img ( kenarlık: 0; ) /*araç ipucu bloğu*/.airhelp ( arka plan: yok tekrar kaydırma 0 0 rgba(97, 177, 255, 0.9); /*arka plan rengi ve şeffaflık*/ kenarlık: 1 piksel düz #2b82b8; /*sınır parametreleri*/ sınır yarıçapı: 5px /*yuvarlak köşeler*/ kutu gölgesi: 5px 5px 5px rgba(0, 0, 0, 0.2); /*blok gölgesi*/ renk: #fff; /*araç ipucu yazı tipi rengi*/ dolgu: 5 piksel /*girinti*/ }

Gördüğünüz gibi, sizin için ipuçları hazırladım. Tek yapmanız gereken tasarımınızda değişiklik yapmak ve araç ipuçlarının keyfini çıkarmak. Ziyaretçilerinizin bir şeyler doldurması, siteye kaydolması veya bazı işlemler yapması gerekiyorsa, o zaman sadece ipuçlarına ihtiyacınız vardır. Ve ziyaretçileriniz size çok minnettar olacak.

Düzen gurularının bu yazıda yeni bir şey bulması pek olası değildir. Bu gönderi daha çok benim gibi evrensel araç ipuçlarını oluşturma ve şekillendirme konusunda sorun yaşayan yeni başlayanlar için.

Son zamanlarda küçük bir blog hazırlarken, şık ama aynı zamanda basit araç ipuçları yapma görevi ile karşı karşıya kaldım. Araç ipuçları için ayrı div kapsayıcıları oluşturmanın veya saf CSS'de araç ipuçları oluşturmanın farklı yollarını denedikten sonra, kodu karmaşıklaştırmayacak, çapraz tarayıcı olacak ve aynı zamanda uygulanması çok basit olacak evrensel bir çözüm buldum.
Bu basit sorunu çözme yöntemimle ilgilenen herkes, lütfen cat altında.

Çözüm

Size önereceğim yöntem oldukça basit ve etkilidir. Tüm tarayıcılarda çalışır, hatta IE 6 (Benim tarafımdan birçok kez test edilmiştir). Değiştirilmesi kolay ve kullanışlı. Kodu karıştırmaz ve görselleştirir. İhtiyaçlarınıza göre kolayca değiştirilebilir. Örneğin, setTimeout veya başka bir şey aracılığıyla bir ipucunun çıktısını geciktirmek için.

HTML

Fareyle üzerine gelindiğinde bir ipucu görüntülemek istediğimiz bağlantı içeren bir HTML sayfamız olduğunu varsayalım:
Bağlantı


Listeden de görebileceğiniz gibi, LESS css önişlemcisini kullanıyorum.
CSS stillerini ve komut dosyalarını ayrı dosyalara ekledik. Ayrıca, araç ipucu için kapsayıcı olacak bir bağlantımız ve bir div bloğumuz var.
HTML5 belirtimi, bir öğe veya blok hakkında bazı bilgileri depolayabilen data-atribute türündeki özel özniteliklerin kullanımına izin verir. Araç ipuçlarının metnini veri özniteliklerinde saklayacağız.
Bağlantı
Depolama için data-tooltip niteliğini kullanıyorum.
HTML bittiğinde - stillere geçebilirsiniz.

css

LESS Elements kitaplığını kullanıyorum ve herkese tavsiye ediyorum, bu yüzden bu çerçeveyi kullanarak bazı özellikler yazacağım.
@import "css/elements.less"; #tooltip ( z-index: 9999; konum: mutlak; görüntü: yok; üst:0 piksel; sol: 0 piksel; arka plan rengi: #000; dolgu: 5 piksel 10 piksel 5 piksel 10 piksel; renk: beyaz; .opacity(0.5); . yuvarlatılmış(5 piksel); )
Listeden, LE'yi dahil ettiğimiz ilk satırda div#tooltip bloğunu mutlak konumlandırmaya ayarlayıp gizlediğimiz açıktır. Ardından, bloğa bir arka plan rengi ve bir metin rengi veriyoruz, köşeleri (5 piksel) yuvarlayarak şeffaflık değerini %50'ye ayarlıyoruz.

jQuery

Ve şimdi en ilginç olanı - jQuery.
$.jQuery(document).ready(function() ( $("").mousemove(function (eventObject) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "üst" : eventObject.pageY + 5, "sol" : eventObject.pageX + 5 )) .show(); ))).mouseout(function () ( $("#tooltip) ").hide() .text("") .css(( "üst" : 0, "sol" : 0 )); )); ));// Hazır son.
Şimdi data-tooltip özniteliğine sahip tüm elementleri seçime ekliyoruz ve mouse ile istenilen elementin üzerine geldiğimizde tooltip değerini alıp bir değişkende saklıyoruz. Ardından, araç ipucu metnini #tooltip bloğuna ekleyin, imleç koordinatlarını sayfanın kenarından + 5 piksel verin ve son olarak araç ipucu bloğunu doğru yerde görüntüleyin. Fare elemandan ayrıldıktan sonra #tooltip bloğunu gizler, içeriğini temizler ve 0;0; konumuna geri döndürürüz.

Bu kadar!
Sonuç olarak, şöyle bir şey elde edeceğiz: Demo

Bu basit komut dosyasıyla, sayfadaki data-tooltip özniteliğine sahip tüm öğeler araç ipucunu alacaktır.

İlginiz için teşekkür ederiz!

Araç ipuçları, farenizi metnin veya bir resmin üzerine getirerek ek bilgileri görüntülemenin harika bir yoludur. Örneğin, resim başlıklarını, bağlantı açıklamalarını veya kaynağınızın kullanıcısı için yararlı olabilecek diğer bilgileri görüntülemek için kullanılabilirler. Ve tasarım şablonunu kırmak gerekli değildir.

Bu öğreticide, bir bağlantı için başlık özniteliğinin içeriğini görüntüleyen HTML ve CSS kullanarak basit araç ipuçlarının nasıl oluşturulacağına bakacağız.

Yararlı bir kaynağa bağlantı

Sınıf için temel stili ayarlayın ipucu:

Araç ipucu( ekran: satır içi; konum: göreli; )

Araç ipucu, artık göreli konumlandırma kullanılarak bağlantıyla aynı satırda görüntülenecektir. Şimdi araç ipucu bloğu için yuvarlatılmış köşeler tanımlayalım ve onu bağlantının üstüne yerleştirelim:

Araç ipucu:hover:after( arka plan: #333; arka plan: rgba(0,0,0,.8); kenarlık yarıçapı: 5 piksel; alt: 26 piksel; renk: #fff; içerik: attr(başlık); sol: 20 %; dolgu: 5px 15px; konum: mutlak; z-endeksi: 98; genişlik: 220px; )

Fare üzerinde hareket ettiğinde öğeyi seçen :hover sözde sınıfını ve seçilen öğeden sonra içerik ekleyen :after sözde sınıfını kullanırız. Arka plan kısmen saydam olarak ayarlanmıştır ve RGBA renk biçimini desteklemeyen tarayıcılar için arka plan rengini gri olarak ayarladık.

Yuvarlatılmış köşeler border-radius özniteliği kullanılarak oluşturulur. Metin rengini beyaz olarak ayarlayın. Son olarak ipucu bloğunu konumlandırıyoruz ve padding ekliyoruz.

Stilleri ve konumlandırmayı tanımlamaya ek olarak, content özelliğini de belirledik:

içerik: attr(başlık);

Bu özellik, bir dize veya öğe niteliği olabilen içerik eklemenize olanak tanır. Bu durumda, bağlantının title niteliğini kullanırız.

Yararlı bir kaynağa bağlantı

Bitirmek için ipucunun altına bir ok eklemeniz gerekir. Çerçeve için :before sözde sınıfını ve stillerini kullanıyoruz:

Araç ipucu:hover:önce( border: katı; border-color: #333 şeffaf; border-width: 6px 6px 0 6px; alt: 20px; içerik: ""; sol: %50; konum: mutlak; z-endeksi: 99 ; )

Oku oluşturmak için kenarlık hilesini kullandık: sol ve sağdaki kenarlığın rengini şeffaf olarak ayarlayın ve kenarlığın genişliğini kontrol edin. Ayrıca ok, araç ipucunun altına yerleştirilmiştir.

Vlad Merjeviç

HTML zaten bir web sayfasındaki herhangi bir öğeye eklenebilecek bir genel başlık özelliğine sahiptir. Bu özniteliğe sahip olmak, fareyle öğenin üzerine geldiğinizde görünen bir araç ipucu ekler. Metnin yazı tipi, araç ipucunun boyutu ve genel olarak görünümü işletim sistemine bağlıdır ve stiller kullanılarak değiştirilemez. Ek olarak, birçok geliştirici böyle bir ipucunun oldukça hızlı bir şekilde kaybolmasından memnun değil. Bu, sizi istediğiniz şekilde tasarlanacak olan araç ipucunuzu oluşturmanın yollarını aramaya zorlar. Tabii ki, en evrensel yol , ancak bazı durumlarda tek başına CSS yeterlidir.

Örnek olarak fotoğrafları seçtim, fare ile üzerlerine geldiğinizde fotoğrafın adı görünüyor. Content özelliğini kullanarak metin çıktısını kendisi yapacağız ve metnin değerini attr() aracılığıyla bazı niteliklerden alacağız. Maalesef içerik, img ile birleştirildiğinde istendiği gibi çalışmaz, bu nedenle fotoğraflar öğeye eklenir