Nə alət ipucu. CSS-də alət ipucu. Alət məsləhətlərinin təsirinin artırılması

Birinci səviyyəli başlıq teqlərində və keçidlərində title="" atributunu yerləşdirmək təcrübəm var.

Şəxsən mən istifadə edirəm alət ipuçları, təbii olaraq, veb sayt mətninin axtarış motorunun optimallaşdırılmasında qaçılmaz həvəskar təcrübələrin bir hissəsi kimi. Təcrübələrimin nə qədər uğurlu olduğunu mühakimə etməyi düşünmürəm. Düzünü desəm, belə optimallaşdırmanın nəticəsini izləmək çətindir, lakin açar sözlər və ifadələrlə onu aşmaq çox asandır. Odur ki, diqqətli olun və reklamınızda həddi aşmayın, çünki həmişə axtarış motorları tərəfindən cəzalandırılmaq riskiniz var.

Bu gün biz CSS istifadə edərək alət ipuçlarını yaradacağıq. Alət göstərişləri, məsələn, başlıq atributunda onun təsviri varsa, keçidin üzərinə getdiyiniz zaman gördüyünüz şeylərdir.

Alət ipucu həm linklər, həm də şəkillər üçün istifadə edilə bilər.

İşlənmiş formada alət ipucu belə görünür:

Alət ipucu başlıq atributundan istifadə edərək standart sistem metodundan istifadə etməklə göstərilir.
Dekorsuz alət ipucu ilə standart keçid kodu:

Link

Alət göstərişi CSS

CSS-dən istifadə edərək alət ipucunuzu tərtib edə bilərsiniz. Üç varianta baxacağıq CSS-də alət ipucu.

Təəssüf ki, başlıq dizaynı üçün heç bir CSS “resepti” yoxdur, ona görə də biz əlavə atributlar əlavə etməli, onların dizaynını təyin etməli və onları gözəl etmək istədiyimiz link/şəkil koduna əlavə etməli olacağıq. alət ipucu CSS.

Birinci nümunədə edəcəyik alət ipucu CSSşəklin üstündə, ən aşağısında.

Bunun üçün biz iki atributdan istifadə edəcəyik: şəkil, alət ipucunun işləməsi üçün isə ::after və data-text-dən istifadə edəcəyik ki, bu da ipucunun mətnini göstərsin.

Bu nümunə üçün CSS üslubları:

Şəkil ( displey: inline-block; mövqe: nisbi; ) .image:hover::after ( content: attr(data-text); /* Tooltip mətnini göstərin */ mövqe: mütləq; sol: 0; sağ: 0; alt: 0px; /* Alət ipucunun yeri */ z-indeks: 1; /* Alət ipucunu digər elementlərin üstündə göstərin */ fon: rgba(0,255,102,0.6); /* Rəng (RGB) və onun şəffaflığı */ rəng: # fff; /* Mətn rəngi */ text-align: center; /* Mətni mərkəzə düzün */ font-family: Arial, sans-serif; /* Font ailəsi */ font-size: 11px; / * İpucu mətn ölçüsü * / doldurma: 5px 10px; /* Kənarlar */ haşiyə: 1px bərk #333; /* Sərhəd seçimləri */ )

1

Nəticə:

Bu dizayn bağlantılar üçün işləməyəcək, ona görə də onlar üçün bir qədər fərqli variantlardan istifadə edəcəyik.
Birinci seçim linkin üstündə alət ipucunu göstərəcək.

Podskazka( displey: inline; mövqe: nisbi;).podskazka:hover:after( fon: #333; fon: rgba(204,102,0,.8); sərhəd-radius: 5px; alt: 26px; rəng: #fff; məzmun: attr(title); sol: 20%; doldurma: 5px 15px; mövqe: mütləq; z-index: 98; en: auto;).podskazka:hover:before( /* Alət ipucunun aşağısına ox əlavə edin blok */ haşiyə : bərk; haşiyə rəngi: #cc6600 şəffaf; haşiyə eni: 6px 6px 0 6px; alt: 20px; məzmun: ""; sol: 50%; mövqe: mütləq; z indeksi: 99;)

Link

Və son seçim linkin altında alət ipucunu göstərməkdir. Seçim əvvəlkinə bənzəyir, yalnız alət ipucu aşağıda göstərilir.

Alət ipucu ( mövqe: nisbi; /* Elementi göstərişlər üçün əsas edin */ kursor: kömək;).tooltip span ( mövqe: mütləq; /* Elementi axından çıxarın */ margin-left: -30000px; /* Və onu ekranın kənarının çox arxasında gizlədin */ background-color: rgba(0,0,153,.8); /* Pop-up blok fonu */ color: #fafafa; /* Mətn rəngi */ padding:10px; / * Doldurma */ -webkit-border- radius: 5px; /* Küncləri yuvarlaqlaşdırın */ -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;).tooltip:hover span ( /* Hover üzərində */ margin-left : 0; /* Bloku ekranın uzaq kənarından yerinə qaytarın */ eni: 250px; /* Genişliyi təyin edin */ z-index: 1000; /* Yerləşdirin onu ən yuxarıda */ /* Əsas bloka nisbətən yerləşdirin */ top:30px ; /* Üst doldurma */ sol:20px; /* Sol padding */ ).tooltip span:after( content: ""; /* Əlavə edilmiş məzmun */ eni:0; /* 0-a çevirərək gizlədin */ hündürlük :0; sərhəd-alt: 10px bərk #000099; /* Üçbucağın rəngini və hündürlüyünü təyin etmək üçün alt haşiyədən istifadə edin * / haşiyə-sağ: 30px möhkəm şəffaf; /* Sağ - sağa doğru üçbucağın eni */ mövqe: mütləq; /* Əsas bloka nisbətən mövqe */ top:-10px; sol: 10px;)

Bu dərsdə biz edəcəyik hover üzərində alət ipucu təmizdəki ikonaya CSS. Eyni prinsipi bir şəkilə də tətbiq etmək olar. Baxmağa keçin demo səhifələr .

HTML işarələmə

Gəlin beş elementdən ibarət bir siyahı yaradaq. Hər bir elementin içərisində bir etiket yerləşdirəcəyik i istədiyiniz ikona ilə, sadəcə olaraq saytdan müəyyən bir simvolun kodunu kopyalayaraq Şrift Əla.

Simge etiketinin altına etiketi yazacağıq qarış müvafiq qısa göstəriş mətni ilə.

• 
  
  Rahat otaqlar
  


• 
  
  Kredit kartları
  


• 
  
  Otaqda duş
  


• 
  
  Səhər yeməyi daxildir
  


• 
  
  Ev heyvanları yaxşıdır
  

Bundan sonra üslub faylını birləşdirin - style.css. Nişanların yerini şaqulidən üfüqiyə dəyişdirin.

Bunu etmək üçün dəyəri ana konteynerə təyin edin - əyilmək.

Ul (
ekran: flex;
}

Biz ikonaların altındakı fonu və nişanların öz rəngini rəngləyirik.

Ulli (
fon: #cecfcf;
rəng: #fff;
}

İşarənin ölçüsü şrift ölçüsündən istifadə etməklə təyin edilir.

Ulli (
şrift ölçüsü: 40px;
}

Simge sırasının görünüşü artıq formalaşıb.

Kursoru ikona üzərinə gətirdiyiniz zaman işarənin rəngi və kursorun görünüşü dəyişir.

Ul li:hover (
rəng: #03a9f4;
kursor: göstərici;
}

Alət göstərişi

Simvolun üzərinə gətirdiyiniz zaman mətn işarəsi düzbucaqlı blokda görünəcək HTML işarələmə etiketdəki mətndir qarış. İşarələri nişanların üstündə yerləşdirək.

Ulli span (
mövqe: mütləq;
yuxarı: -30px;
sol: 50%;
çevirmək: translateX(-50%) translateY(-20px);
}

Qutu ölçülərini aşağıdakı sabit ölçülərə təyin edək.

Ulli span (
eni: 120px;
hündürlük: 24px;
}

Mətni şaquli və üfüqi olaraq mərkəzə uyğunlaşdırır.

Ulli span (
xəttin hündürlüyü: 24px;
mətni düzün: mərkəz;
}

Fon rəngi, mətn rəngi və mətn ölçüsü.

Ulli span (
fon: #03a9f4;
rəng: #fff;
şrift ölçüsü: 14px;
}

Küncləri 4 piksel yuvarlaqlaşdırın və sürüşərkən hamar bir keçid edin.

Ulli span (
sərhəd radiusu: 4px;
keçid: .5s;
}

Alət göstərişi görünməz və şəffaf olur.

Ulli span (
qeyri-şəffaflıq: 0;
görünmə: gizli;
}

Pseudo-element::əvvəl

Blokun altında kiçik bir ox çəkmək üçün psevdo elementdən istifadə edəcəyik ::əvvəl, bu, praktikada oxun əslində yoxdur HTML fayl (boş məzmun), lakin yalnız mövcuddur CSS fayl. Ucu ikona tərəf yönəlmiş ox 45 dərəcə fırlanmış və bloka basılmış 10x10 piksel kvadrat formadan başqa bir şey deyil. qarış mənfi dəyərlə. Nəticədə, kvadrat üçbucağa çevrilir və aşağıdakı təbəqədə yatır z indeksi: -1 ana etiketindən daha çox qarış.

Müəllifdən: Salam. Alət ipucu siçanı elementin, adətən şəklin üzərinə gətirdiyiniz zaman görünən kiçik izahlı mətndir. Bu gün biz HTML-də müxtəlif yollarla necə alət ipucu edə biləcəyinizi nəzərdən keçirəcəyik.

Standart göstəriş

Varsayılan olaraq, başlıq atributu izahlı mətnin göstərilməsinə cavabdehdir. O, müxtəlif elementlər üçün istifadə edilə bilər, lakin adətən yalnız onların göstərdiklərini izah etmək üçün şəkillər üçün istifadə olunur.

Əvvəlki məqalələrin birində şəkil ölçüləri ilə işləməyi göstərmək üçün bir pələng təsvirindən istifadə etdim. Əgər zehmet olmasa, bu şəkili yenidən istifadə edəcəm. Beləliklə, ipucu göstərmək üçün sadəcə başlıq atributunu əlavə etmək və orada istədiyiniz mətni yazmaq lazımdır.

Bir söz və ya bir neçə cümlə ola bilər. Və bu belə görünür:

İpucu rəvan şəkildə, sürüşdükdən dərhal sonra deyil, bir müddət sonra görünür. Bu standart davranışdır.

Belə bir ipucu ilə əsas problem onun stilizə edilə bilməməsidir. Bu problemi necə həll etmək olar? Biz başqa yollarla bir ipucu verməliyik. İndi sizə bir cüt göstərəcəyəm.

Təmiz css üsulu

Şəkil üçün işarəni gözəl göstərməyə imkan verən çox maraqlı bir yol. HTML işarələməsi sadədir, yalnız şəkil blok konteynerinə daxil edilməlidir, biz ona identifikator təyin edəcəyik ki, sonradan ona üslublarda müraciət edək:

Burada sizə aydın olmayan yeganə şey data-name atributudur. Məsələ burasındadır ki, bu, öz-özünə heç bir şey etməyən sözdə məlumat atributudur, lakin onun dəyəri css və javascript-də istifadə edilə bilər ki, bu da onu bəzi hallarda faydalı edir. Bunu növbəti dəfə görəcəksiniz.

Beləliklə, əvvəlcə konteyner üçün üslubları təsvir edək. Bizə nisbi yerləşdirmə lazımdır, çünki biz bloku mütləq şəkildə izahlı mətnlə yerləşdirəcəyik ki, yerləşdirmə bütün səhifəyə deyil, ana bloka nisbətən baş versin.

#pələng(mövqe: nisbi; ekran: inline-block; )

Block-line displey blokun (və onunla birlikdə yaradacağımız alət ipucu ilə blokun) pəncərənin bütün eni boyunca uzanmasının qarşısını alacaq. Yalnız ipucunun özünü yaratmaq qalır. CSS-də bunu psevdo elementlərdən istifadə etməklə etmək çox rahatdır. Bunun kimi:

#tiger:hover:after ( məzmun: attr(data-name); mövqe: mütləq; sol: 0; alt: 0; fon: rgba(5,13,156,.55); rəng: #fff; mətni align: mərkəz ; şrift ailəsi: kursiv; şrift ölçüsü: 14px; doldurma: 3px 0; en: 100%; )

Çox kod var, amma burada mürəkkəb bir şey yoxdur. #tiger:hover:after seçicisi aşağıdakı mənaları ifadə edir: biz şəkli olan blokun üzərinə gətirdiyimiz zaman psevdo-elementdən sonra yaratmalıyıq (sonra qaydalar əyri mötərizələrdə verilmişdir). Məzmun: attr(data-name) xassəsi blokun mətn dəyərini təyin edir. Şəkil sarğı blokunun data-name atributunda yazılanlara bərabər olacaq.

Bu alət ipucu siçanı şəklin üzərinə gətirdiyiniz zaman görünür, lakin standartdan fərqli olaraq, o, bunu qəfil edir və görünüşün özü də sürüşmə anında dərhal baş verir. Bu halda, hamar keçidi həyata keçirmək mümkün olmayacaq, çünki pseudo-elementlər üçün hamar keçidlər dəstəklənmir.

Metod 2. Saf css və hamar görünüş

Bununla belə, kodu bir qədər yenidən yazmaqla siz alət ipucunun hamar görünüşünə nail ola bilərsiniz və yenə də javascript istifadə etmədən.

Sonra sizə göstərəcəyim 2 effekti özünüz görmək üçün Notepad və ya hər hansı rahat kod redaktorunu açıb məndən sonra hər şeyi təkrar etməyi məsləhət görürəm. Düzdür, bunun üçün hələ də stil faylı daxil etməlisiniz, baxmayaraq ki, üslublar teqlərdə html-də də yazıla bilər