Красиви подсказки за css. Подсказка в CSS. Какво има под капака ни

Предоставянето на допълнителна информация за потенциално сложни елементи на потребителския интерфейс е много важна част от работата на уеб дизайнера при проектирането на използваем и достъпен уеб сайт.

Един широко използван механизъм за показване на допълнителна информация извън това, което се вижда на страницата, са подсказките (дизайн елементи за показване на подсказки за определени елементи на екрана).

Въпреки че има много иновативни решения, използващи CSS и JavaScript (със или без използване на JavaScript рамка като jQuery), понякога е полезно да погледнете как новите технологии разтърсват старите техники.

Този урок ще ви покаже как да използвате Само CSSможете да направите прекрасни подсказки за различни браузъри.

Съветите за изскачащи прозорци са страхотни!

Където трябва да обясните съкращение или акроним, да обясните значението на дума или да предоставите допълнителна информация за нещо, подсказките ще просто, но ефективно решение.

От малък жълт блок от текст, който се появява над елемент, като изображение, и извежда съдържанието на атрибута title (или атрибут alt, ако използвате Internet Explorer, за съжаление) до базирани на скрипт, сложни решения с помощта на подсказки, подсказките са фантастичен инструмент, който изглежда не е много популярен в дизайнерската общност.

Повечето браузъри имат стилове по подразбиране за подсказки, въпреки че не изглеждат много красиво.

Увеличаване на въздействието на подсказките

Докато бързо развиващите се стандарти с новите методи стават все по-добри и по-добре поддържани от новите браузъри, развитието на CSS също ни позволява да правим подсказки (които служат като заместител на скучните настройки на браузъра по подразбиране като снимката по-горе) на ново ниво на детайлност и стил .

Ако преди сте използвали решения, базирани на jQuery, тогава, разбира се, имайте предвид, че JavaScript може да прави много неща, които CSS не може (като например забавяне преди изчезването на подсказката). Но подчертаването и стилизирането може да се направи с CSS, който подобрява дизайна и вдъхновява други страхотни неща, които надхвърлят подсказките.

Какво ще правим

В този урок ще направим чист css подсказки.

Означава, че те ще работят в браузъри, които не поддържат CSS3(като Internet Explorer 8 и по-стари) - те няма да изглеждат толкова добре в тях, колкото в по-новите браузъри.

Появата на ефекти като цветове, шрифтове, изображения и рамки за подсказки ще зависи от това какво се използва на компютъра на крайния потребител (браузър, инсталирани шрифтове или контраст на монитора).

CSS3 разширения

Използването на прости, но мощни разширения, като свойствата на border-radius и box-shadow, ви позволява да придадете на обикновения изскачащ правоъгълник нов и красив вид.

Какво имаме под капака?

Нека започнем с HTML кода за нашия пример.

различни видове подсказки

За да ви дадем достатъчно идеи за вашите собствени проекти, ние ще направим пет различни типа подсказки.

Всеки от тях изглежда много подобен на останалите, за да се стандартизира изхода на екрана. Но след това можете да експериментирате с тях за подробно проучване и промяна във външния вид.

Кръстосана съвместимост на браузъра

Този механизъм трябва да работи във всички браузъри, но ако имате нужда, можете да го промените по ваш вкус.

Основна маркировка

В кода по-долу използваме XHTML 1.0 Generic Template с обикновен елемент .

Тъй като използваме CSS за изграждане на нашите елементи, за целите на обучението CSS се вгражда в документа с помощта на тага

Съдържанието на подсказката се премахва от изгледа с отрицателна стойност на свойството margin-left, вместо display: none или visibility: hidden , тъй като някои екранни четци игнорират тези свойства.

CSS стилове за подсказки

Скоро ще настроим подсказките да функционират по същия начин в различни браузъри. Сега нека добавим няколко реда CSS код.

Като добавим част от кода по-долу, ще покажем подсказки на екрана, въпреки че те ще изглеждат банално и ще бъде трудно визуално да ги отделим от останалия текст.

CSS за показване на подсказка

Необходимост от *html низ

Може би се чудите защо е включен последният ред в кода по-горе? Той задава прозрачността за фона на връзката. Докато тествах подсказките, открих странен ефект в IE6, който не можеше да бъде премахнат, докато съществуваше фонът на връзката!

Горният код кара подсказките да работят. Те се показват на екрана, но е доста трудно да се отделят от общия текст. Няма цветови схеми, които подчертават текста на подсказката на страницата.

Задайте цветовата схема за подсказки/

Кодът по-долу задава цветова схема за всеки от петте стила на подсказки.

След промяна на кода на страницата и актуализирането му в браузъра, подсказките ще се показват при задържане на курсора на мишката върху връзката по почти същия начин във всички браузъри.

CSS код за цветова схема

CSS кодът е много прост, но дава страхотен вид на подсказките и върши работата си навсякъде. Цветовата схема може да бъде променена по ваш вкус.

Няколко докосвания на CSS3 за разширено показване на подсказки

Преди да приключим с урока, нека вмъкнем няколко реда CSS3 код, за да придадем някои визуални ефекти на нашите подсказки. Нека да зададем заоблени ъгли със свойството border-radius и да дадем малко измерение със свойството box-shadow.

Тъй като нито едно от тези свойства не се поддържа глобално, те ще работят само в някои от най-новите версии на браузъра. Но там, където работят, подсказките ще изглеждат елегантни и секси!

Добавете следния код към селектора на .tooltip:hover span и опреснете страницата.

Визуалните ефекти за граница, сянка и прозрачност повдигат подсказката над текста на страницата и правят информацията контрастна и лесна за четене.

Може да забележите, че се използват не само официални CSS3 свойства, но и разширения за Mozilla и WebKit.

Допълнителни CSS свойства за нови браузъри

Резюме

Този урок демонстрира, че не са необходими много усилия за подобряване на интерфейса. Освен това си струва да прегледате опита от използването на CSS, който може да бъде полезен при задаване на ново ниво на интерактивност в уеб приложение.

или кои HTML елементи могат да имат подсказки

Главата съдържа примери подсказки от областта Hypertext Markup.

В менюто вляво ще намерите модерни и много подробни HTML уроци.

Те ще ви позволят да създадете своя сайт от нулатадокато изглежда малко по-ниско.

В тази глава ще разгледаме

Преди да пристъпите към HTML съветиПредлагам ви да прочетете информацията.

Може да е интересно.

Основни тенденции на ранния интернет

От 1997 г., след появата на първите браузъри, някои потребители активно се специализират в различни области на Интернет, както и в областта на информационните технологии и компютърната поддръжка. Много потребители стават уеб дизайнери, започват да създават лични и корпоративни уебсайтове, участват в изграждането на локални компютърни мрежи. Така те се самообучават. Това състояние на нещата продължава и до днес. Днес е много модерно и удобно да получавате знания чрез световната мрежа. Днес и особено тогава, в средата на 90-те години на миналия век, бившите социалистически страни имаха нужда от специалисти по програмиране. Има търсене - ще има и оферта. Програмистите учат масово – кой в ​​университетите, кой вкъщи пред екрана на компютъра. В тези приказни времена стават много популярни форумите за програмиране, където млади и не особено специалисти обменят своя опит и идеи.

Подсказка за HTML връзка

Тук всичко е почти същото: атрибутът title="". определя изскачащ html намек .

alt="" на изображението дефинира алтернативния текст, който ще се показва на страницата, ако изображението не се показва.

Не се бъркайте HTMLнамек и алтернативен текст, тъй като те са напълно различни неща.

Изскачащ HTML подсказка за текст

HTML подсказкасе отнася за почти всички елементи на страницата.

Казано по друг начин, title="" познат от примерите по-горе може да има етикети за заглавия на всички нива, тагове на абзаци, блокови тагове, изображения и вградени елементи като , други.

Имам опит с поставянето на атрибута title="" в заглавни тагове от първо ниво и във връзки.

Лично аз ползвам подсказки, разбира се, като част от неизбежните любителски експерименти по оптимизация за търсачки на текста на сайта. Не си позволявам да преценя колко успешни са били експериментите ми. Честно казано, резултатът от подобна оптимизация е трудно да се проследи, но е много лесно да се прекали с ключови думи и фрази. Затова бъдете внимателни и не прекалявайте с промоцията си, тъй като винаги рискувате да бъдете наказани от търсачките.

Гурутата на оформлението е малко вероятно да намерят нещо ново в тази публикация. Тази публикация е повече за начинаещи, които като мен имаха проблеми със създаването и стилизирането на универсални подсказки.

Наскоро, когато правех малък блог, бях изправен пред задачата да направя стилни, но в същото време прости подсказки. След като изпробвах различни начини за създаване на отделни div контейнери за подсказки или създаване на подсказки в чист CSS, намерих универсално решение, което няма да претрупва кода, да бъде крос-браузър и в същото време да бъде много лесно за изпълнение.
Всеки, който се интересува от моя метод за решаване на този прост проблем, моля под кат.

Решение

Методът, който ще ви предложа е доста прост и ефективен. Работи във всички браузъри, дори IE 6 (Тестван много пъти от мен). Лесен за смяна и удобен. Не претрупва кода и го прави визуален. Може лесно да се модифицира, за да отговаря на вашите нужди. Например, за да забавите изхода на намек чрез setTimeout или нещо друго.

HTML

Да приемем, че имаме HTML страница с връзка, за която искаме да покажем подсказка при задържане на курсора:
Връзка

Както можете да видите от списъка, използвам по-малко css препроцесор.
Включихме CSS стилове и скриптове в отделни файлове. Имаме също една връзка и div блок, който ще бъде контейнерът за подсказката.
HTML5 спецификацията позволява използването на персонализирани атрибути от тип data-atribute, които могат да съхраняват известна информация за елемент или блок. Именно в атрибутите на данните ще съхраняваме текста на подсказките.
Връзка
За съхранение използвам атрибута data-tooltip.
При завършен HTML - можете да преминете към стилове.

css

Използвам библиотеката LESS Elements и съветвам всички, така че ще напиша някои свойства, използвайки тази рамка.
@import "css/elements.less"; #tooltip ( z-индекс: 9999; позиция: абсолютна; дисплей: няма; отгоре:0px; отляво:0px; фон-цвят: #000; padding: 5px 10px 5px 10px; цвят: бял; .opacity(0.5); . закръглено (5px); )
От листинга става ясно, че в първия ред включваме LE, задаваме блока div#tooltip на абсолютно позициониране и го скриваме. След това даваме на блока цвят на фона и цвят на текста, заобикаляме ъглите (5px) и задаваме стойността на прозрачността на 50%.

jQuery

И сега най-интересното - jQuery.
$.jQuery(document).ready(function() ( $("").mousemove(function (eventObject)) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "горе" : eventObject.pageY + 5, "ляво" : eventObject.pageX + 5 )) .show(); )).mouseout(function () ( $("#tooltip ").hide() .text("") .css(( "отгоре" : 0, "вляво" : 0 )); )); ));// Готов край.
Сега добавяме всички елементи с атрибута data-tooltip към селекцията и когато задържим курсора на мишката върху желания елемент с мишката, получаваме стойността на подсказката и я съхраняваме в променлива. След това добавете текста на подсказката към блока #tooltip, дайте му координатите на курсора от ръба на страницата + 5 px и накрая покажете блока на подсказката на правилното място. След като мишката напусне елемента, ние скриваме блока #tooltip, изчистваме съдържанието му и го връщаме на 0;0;.

Това е всичко!
В резултат на това ще получим нещо подобно: Демонстрация

С този прост скрипт всички елементи на страницата, които имат атрибут data-tooltip, ще получат подсказката.

Благодаря за вниманието!

От автора:Здравейте. Подсказката е малък обяснителен текст, който се появява, когато задържите курсора на мишката върху елемент, обикновено изображение. Днес ще видим как можете да направите подсказка в html по различни начини.

Стандартна подкана

По подразбиране атрибутът title е отговорен за показването на обяснителен текст. Може да се даде на различни елементи, но обикновено се използва само за снимки, за да се обясни какво е показано на тях.

В една от предишните статии използвах изображението на тигър, за да покажа как се работи с размерите на изображенията. Ако нямате нищо против, отново използвам това изображение. Така че, за да покажете подсказка, просто трябва да добавите атрибута title и да напишете желания текст в него.

< img src = "tiger.jpg" title = "Това е тигър" >

Може да има една дума или няколко изречения. И ето как изглежда:

Намекът се появява плавно, не веднага след задържане, а след известно време. Това е поведението по подразбиране.

Основният проблем с такъв подсказка е, че не може да бъде стилизиран. Как да реша този проблем? Ще трябва да давате намеци по други начини. Сега ще ви покажа двойка.

чист css метод

Много интересен начин, който ви позволява да покажете красиво подсказка за изображение. Html маркирането е просто, само изображението трябва да бъде затворено в контейнерен блок, към който ще окачим идентификатор, за да се позоваваме на него по-късно в стилове:

< div id = "tiger" data - name = "Суматрански тигър"> < img src = "tiger.jpg" > < / div >

Само атрибутът data-name може да е неразбираем за вас тук. Въпросът е, че това е така нареченият атрибут на данни, който сам по себе си не прави нищо, но стойността му може да се използва в css и javascript, което го прави полезен в някои случаи. Ще видите това по-нататък.

И така, за начало ще опишем стиловете за контейнера. Нуждаем се от относително позициониране, защото абсолютно ще позиционираме блока с обяснителен текст, така че позиционирането да става спрямо родителския блок, а не цялата страница.

#tiger( позиция: относителна; дисплей: inline-block; )

#тигър( позиция : относителна ; дисплей: вграден блок;

Блоковият ред, от друга страна, ще попречи на блока (а с него и на блока с намек, който ще създадем) да се разтегне до цялата ширина на прозореца. Остава да създадем самия намек. В css това е много удобно да се прави с помощта на псевдоелементи. Като този:

#tiger:hover:after ( съдържание: attr(име-данни); позиция: абсолютна; ляво: 0; дъно: 0; фон: rgba(5,13,156,.55); цвят: #fff; подравняване на текст: център ; font-family: cursive; font-size: 14px; padding: 3px 0; width: 100%; )

#tiger:hover:after ( съдържание : attr (данни - име) ; позиция : абсолютна ; вляво: 0 отдолу: 0 фон: rgba (5, 13, 156, .55); цвят : #fff; текст - подравняване : център ; семейство шрифтове: курсив; размер на шрифта: 14px; допълване : 3px 0 ; ширина: 100%

Има много код, но тук няма нищо сложно. Селекторът #tiger:hover:after означава, че когато задържим курсора на мишката върху блок с изображение, трябва да създадем псевдоелемент след (и след това правилата са изброени в къдрави скоби). Свойството content: attr(data-name) задава текстовата стойност на блока. Ще бъде равно на това, което е написано в атрибута data-name на блока на обвивката на изображението.

Тази подсказка се появява, когато задържите курсора на мишката върху изображение, но за разлика от стандартното, това го прави рязко, а самото появяване се появява директно в момента на задържане на курсора. Гладкият външен вид в този случай няма да работи, тъй като плавните преходи не се поддържат за псевдоелементи.

Метод 2: Чист css и избледняване

Въпреки това, като пренапишете кода доста, можете да постигнете гладък вид на подсказката и отново, без да използвате javascript.

За да видите сами 2-та ефекта, които ще ви покажа по-нататък, препоръчвам да отворите бележника или всеки удобен редактор на кодове и да повторите всичко след мен. Вярно е, че за това все още трябва да свържете файл със стил, въпреки че стиловете могат да бъдат записани и в html в тагове