Html ინსტრუმენტული მინიშნება კითხვისას დაჭერისას. როგორ გავაკეთოთ მარტივი ინსტრუმენტების რჩევები CSS3-ში

მაქვს title="" ატრიბუტის განთავსების გამოცდილება პირველი დონის სათაურების ტეგებსა და ბმულებში.

პირადად მე ვიყენებ ინსტრუმენტების რჩევებიბუნებრივია, როგორც გარდაუვალი სამოყვარულო ექსპერიმენტების ნაწილი ვებსაიტის ტექსტის საძიებო სისტემის ოპტიმიზაციაში. მე არ ვფიქრობ, რომ ვიმსჯელო, რამდენად წარმატებული იყო ჩემი ექსპერიმენტები. მართალი გითხრათ, ასეთი ოპტიმიზაციის შედეგი ძნელია კვალი, მაგრამ ძალიან ადვილია გადამეტება საკვანძო სიტყვებით და ფრაზებით. ამიტომ, იყავით ფრთხილად და არ გადააჭარბოთ თქვენს პოპულარიზაციას, რადგან ყოველთვის რისკავთ საძიებო სისტემების მიერ დასჯას.

ინსტრუმენტების მინიშნებები შესანიშნავი საშუალებაა დამატებითი ინფორმაციის ჩვენებისთვის, უბრალოდ მაუსის გადატანა ტექსტზე ან სურათზე. ისინი შეიძლება გამოყენებულ იქნას, მაგალითად, სურათების სახელების, ბმულების აღწერილობის ან ნებისმიერი სხვა ინფორმაციის საჩვენებლად, რომელიც შეიძლება სასარგებლო იყოს თქვენი რესურსის მომხმარებლისთვის. და არ არის საჭირო დიზაინის შაბლონის გატეხვა.

ამ გაკვეთილში ჩვენ განვიხილავთ, თუ როგორ უნდა შევქმნათ მარტივი ინსტრუმენტების რჩევები HTML და CSS გამოყენებით, რომელიც აჩვენებს ბმულის სათაურის ატრიბუტის შინაარსს.

ბმული სასარგებლო რესურსზე

მოდით დავაყენოთ კლასის ძირითადი სტილი ინსტრუმენტის მინიშნება:

ინსტრუმენტების მინიშნება (ჩვენება: inline; პოზიცია: შედარებითი;)

ახლა ინსტრუმენტის მინიშნება გამოჩნდება ერთ ხაზზე ბმულით შედარებითი პოზიციონირების გამოყენებით. ახლა მოდით განვსაზღვროთ მომრგვალებული კუთხეები ხელსაწყოების ბლოკისთვის და განვათავსოთ იგი ბმულის თავზე:

მინიშნება: hover:after(ფონი: #333; ფონი: rgba(0,0,0,.8); საზღვრის რადიუსი: 5px; ქვედა: 26px; ფერი: #fff; შინაარსი: attr(სათაური); მარცხნივ: 20 % padding: 5px 15px: 98;

ჩვენ ვიყენებთ :hover ფსევდოკლასს, რომელიც ირჩევს ელემენტს, როდესაც მასზე მაუსი ჩერდება, და :after ფსევდოკლასს, რომელიც ამატებს შინაარსს შერჩეული ელემენტის შემდეგ. ფონი დაყენებულია ნაწილობრივ გამჭვირვალეზე, ხოლო ბრაუზერებისთვის, რომლებსაც არ აქვთ RGBA ფერის ფორმატის მხარდაჭერა, ფონის ფერს ვაყენებთ ნაცრისფერზე.

მომრგვალებული კუთხეები იქმნება საზღვრის რადიუსის ატრიბუტის გამოყენებით. დააყენეთ ტექსტის ფერი თეთრზე. ბოლოს, ჩვენ განვათავსებთ ხელსაწყოს ბლოკს და ვამატებთ ბალიშს.

სტილისა და პოზიციონირების განსაზღვრის გარდა, ჩვენ დავაყენეთ შინაარსის თვისება:

შინაარსი: attr(სათაური);

ეს თვისება საშუალებას გაძლევთ ჩასვათ შინაარსი, რომელიც შეიძლება იყოს სტრიქონი ან ელემენტის ატრიბუტი. ამ შემთხვევაში ვიყენებთ ბმულის სათაურის ატრიბუტს.

ბმული სასარგებლო რესურსზე

დასასრულებლად, თქვენ უნდა დაამატოთ ისარი ხელსაწყოების ბოლოში. ჩვენ ვიყენებთ ფსევდო-კლასს:before და სტილებს ჩარჩოსთვის:

მინიშნება: hover:fore( საზღვარი: მყარი; საზღვრის ფერი: #333 გამჭვირვალე; საზღვრის სიგანე: 6px 6px 0 6px; ქვედა: 20px; შინაარსი: ""; მარცხნივ: 50%; პოზიცია: აბსოლუტური; z-ინდექსი: 99 ;)

ისრის შესაქმნელად გამოვიყენეთ სასაზღვრო ხრიკი: დააყენეთ მარცხენა და მარჯვენა საზღვრების ფერი გამჭვირვალეზე და აკონტროლეთ საზღვრის სიგანე. ისარი ასევე განლაგებულია ხელსაწყოს გვერდის ქვეშ.

HTML ინსტრუმენტების მინიშნება არის ბლოკი დამატებითი ინფორმაციით, რომელიც ჩნდება, როდესაც მაუსის ატარებთ ვებ გვერდის კონკრეტულ ელემენტზე. დღეს ჩვენ შევქმნით ჩვენს საკუთარ ინსტრუმენტს HTML და CSS გამოყენებით:

დემოს ნახვა | ჩამოტვირთეთ საწყისი კოდი

ჩვენ შევძლებთ CSS მინიშნებების გამოყენებას ელემენტების უმეტესობისთვის, როგორიცაა ბმულები, ტეგები, სტილისტური ტექსტი და ა.შ. ჩვენ უნდა გამოვიყენოთ რამდენიმე კლასი ელემენტზე და დავამატოთ მონაცემთა ატრიბუტი Tooltip ტექსტით.

დოკუმენტის დაყენება

ჩვენ უნდა შევქმნათ HTML დოკუმენტი და დავაყენოთ წყაროს მარკირება:

მე დავამატე ბმული Normalize.css-ზე, რომელიც ეხმარება ბრაუზერის ყველა სტილის გადატვირთვას ნაგულისხმევად და უზრუნველყოფს, რომ ყველა ელემენტი ერთნაირად გამოიყურება ყველა ბრაუზერში. სტანდარტული CSS გადატვირთვისგან განსხვავებით, Normalize.css არ შლის ყველა ნაგულისხმევ სტილს, ასე რომ თქვენ არ მოგიწევთ ყველა ელემენტის სტილის თავიდან გადაწერა.

მე შევქმენი div კონტეინერის კლასით, რომელშიც განვათავსებთ HTML ინსტრუმენტთა რჩევების ძირითად მაგალითებს. აქ არის სტილები სხეულისთვის და .container კლასისთვის:

სხეული ( შრიფტი-ოჯახი: "Work Sans", sans-serif; შრიფტის ზომა: 1.5em; ხაზის სიმაღლე: 1.4em; შრიფტის წონა: 700; ფონის ფერი: #28ABE3; ფერი: #fff; ) .კონტეინერი ( სიგანე: 800 პიქსელი; ზღვარი: 100 პიქსელი ავტომატური; ფონი: რადიალური გრადიენტი (წრე ყველაზე შორს კუთხეში 400 პიქსელი 250 პიქსელი, #64BBE0 0%, #28ABE3, #28ABE3 95%); )

კონტეინერის div-ის ცენტრირება მოვახდინე მარჟა-მარცხნივ და ზღვრული-მარჯვნივ ავტოზე დაყენებით. ასევე დაემატა სხეულის განყოფილებას გარკვეული სტილი, რათა ის უკეთესად გამოიყურებოდეს.

მე გადავწყვიტე ფონისთვის დამემატებინა მცირე CSS გრადიენტი. თუ თქვენს ბრაუზერს არ აქვს CSS გრადიენტების მხარდაჭერა ( ეს ძირითადად ეხება IE 8 და 9-ს), ფონის ფერი დაუბრუნდება ნაგულისხმევ ლურჯს ( სხეულის განყოფილების ფონის ფერი).

მე გამოვიყენებ HTML hover მინიშნებებს წამყვანი ტეგებით, მაგრამ თქვენ შეგიძლიათ კლასების მინიჭება სხვა შიდა ელემენტებს, როგორიცაა ძლიერი ტეგი ან span . ქვემოთ მოცემულია კონტეინერის დაყოფის შინაარსი:

• ხელსაწყოს ზედა
• ხელსაწყოს ქვედა ნაწილი
• მინიშნება მარცხნივ
• ინსტრუმენტის მინიშნება მარჯვნივ

ბურთულებიანი სია შეიცავს ოთხ ელემენტს წამყვანი ტეგებით. მე შევცვალე სიის ელემენტების სტილი ისე, რომ ისინი არ შეიცავდნენ სიის პუნქტებს, არამედ გამოჩნდნენ როგორც inline-block. ეს საშუალებას მოგვცემს დავამატოთ ბალიშები მათ შორის:

Tooltip-wrapper ( padding: 160px 0; text-align: center; ) .tooltip-wrapper li ( list-style: none; ჩვენება: inline-block; ზღვარი: 0 10px; ) .tooltip-wrapper li a ( ფერი: # fff ტექსტი-დეკორაცია: არცერთი;

მოდით უფრო ახლოს მივხედოთ წამყვანის ტეგს:

მინიშნება მარცხნივ

ლინკებზე ორი კლასი დავნიშნე. Tooltip კლასი პასუხისმგებელია ინსტრუმენტთა ტანის ნაწილზე, ხოლო მეორე კლასი განსაზღვრავს მის განლაგებას.

თქვენ ასევე შეგიძლიათ იხილოთ მორგებული მონაცემთა ატრიბუტი, რომელიც შეიცავს ჩვენი HTML ინსტრუმენტების ტექსტს.

Tooltip კლასის შექმნა

ქვემოთ მოცემულია კოდი ინსტრუმენტების კლასისთვის:

ხელსაწყოს მინიშნება (პოზიცია: შედარებითი; ) .მინიშნება: შემდეგ (პოზიცია: აბსოლუტური; შიგთავსი: 8 პიქსელი; საზღვარი: 3 პიქსელი მყარი #fff; საზღვრის რადიუსი: 8 პიქსელი; ფონის ფერი: #1FDA9A; შრიფტის ზომა: .9em; შრიფტის წონა სქელი ფერი: #fff; ხილვადობა: დამალული .tooltip:hover:after (გაუმჭვირვალობა: 1; ხილვადობა: ხილული; )

HTML hover tooltip თავისთავად არის ფსევდო ელემენტი :after და განლაგებულია აბსოლუტურად. სწორედ ამიტომ აუცილებელია წამყვან ელემენტს შედარებითი პოზიციის მინიჭება. მე დავამატე რამდენიმე ძირითადი სტილი, როგორიცაა padding, საზღვარი, შრიფტის ზომა და სიგანე. მოდით უფრო დეტალურად განვიხილოთ შინაარსის თვისება.

ის შეიცავს attr() - მნიშვნელობას, რომელიც ინახავს ჩვენს მორგებულ მონაცემთა ინსტრუმენტს და იყენებს მას თავად ინსტრუმენტული მინიშნების ტექსტის საჩვენებლად. თქვენ შეგიძლიათ გამოიყენოთ ნებისმიერი სხვა სახელი data-tooltip-ის ნაცვლად, უბრალოდ დარწმუნდით, რომ ის იწყება data- . ამ ატრიბუტების შესახებ მეტი შეგიძლიათ გაიგოთ აქ.

ხელსაწყოს ნაწილს აქვს მინიმალური სიგანე 80 პიქსელი. თუ გსურთ, რომ ინსტრუმენტული მინიშნების კონტენტი გაიზარდოს ერთ ხაზად, დაამატეთ მაქსიმალური კონტენტის მნიშვნელობა სიგანე თვისებისთვის, რომელიც ამჟამად კომენტირებულია. უნდა აღინიშნოს, რომ ეს არის ექსპერიმენტული ფუნქცია, ამიტომ უნდა გამოიყენოთ გამყიდველის პრეფიქსები -webkit- და -moz- .

იმისათვის, რომ HTML hover tooltip-ს მივცეთ სლაიდის ანიმაციის ეფექტი, ვიყენებთ გადასვლის თვისებას. გაითვალისწინეთ მნიშვნელობა .25s, რომელიც განსაზღვრავს დაყოვნებას ხელსაწყოს მინიშნების ჩვენებამდე ან დამალვამდე. ამდენად, ის არ გამოჩნდება, თუ ტექსტზე შეცდომით გადაიხვევთ, მაგრამ მხოლოდ იმ შემთხვევაში, თუ ტექსტზე უფრო მეტ ხანს ატარებთ. მე ასევე დავაყენე გამჭვირვალობა 0-ზე და ხილვადობა დამალულზე. ჩვენ არ შეგვიძლია გამოვიყენოთ ჩვენება: არცერთი; , რადგან ელემენტი მთლიანად გაქრება და ჩვენ ვერ ვნახავთ გადასვლის ეფექტებს. გამჭვირვალობა და ხილვადობა იცვლება, როდესაც ელემენტს მაუსის ინდიკატორით ატარებთ.

შედეგი:

შეხედე

Შენიშვნა: მე შევცვალე/ამოშალე ზოგიერთი მარკირება და სტილი დემოში CodePen-ზე. საბოლოო შედეგის სანახავად, შეამოწმეთ დემო ვერსია ამ სტატიის ბოლოს.

მოძრაობის დამატება

ახლა, როდესაც ჩვენ განვახორციელეთ HTML ინსტრუმენტების მინიშნება, რომელიც გამოჩნდება/გაქრება გადასატანად, მოდით გადავიტანოთ იგი. ჩვენ უკვე მივანიჭეთ ანიმაციის თვისება, საკმარისია დავაყენოთ საწყისი პოზიცია, საიდანაც ის უნდა გამოჩნდეს და საბოლოო პოზიცია:

/*ინსტრუმენტების მინიშნების საწყისი პოზიცია*/ .tooltip-top:after ( ქვედა: 150%; მარცხენა: 0; ) .tooltip-bottom:after ( top: 155%; მარცხენა: 0; ) .tooltip-left:after ( მარჯვენა: 130%; min-width: 100px) .tooltip-right:after ( მარცხნივ: 130%; min-width: 100px; ) .tooltip-bottom:hover:after ( ზევით: 125%; ) .tooltip-left:hover:after (მარჯვნივ: 110%; ) .tooltip-right:hover:after (მარცხნივ: 110%; )

მე გადავწყვიტე ეს ფუნქცია დამატებით კლასებში დამემატებინა. ასე რომ, თუ თქვენ მიაკუთვნებთ, მაგალითად, კლასს .tooltip-left , ინსტრუმენტის მინიშნება გამოჩნდება ტექსტის მარცხნივ, თუ დაამატებთ .tooltip-top , ზემოდან გამოჩნდება ინსტრუმენტის მინიშნება და ა.შ.

დემოს ნახვა

ამ დემო ვერსიაში მე ვიყენებ .tooltip-right კლასს. შეგიძლიათ ექსპერიმენტი და გამოიყენოთ სხვადასხვა კლასები HTML ინსტრუმენტების სხვადასხვა პოზიციების დასადგენად.

სამკუთხედის შექმნა

ხელსაწყოს ბოლო ელემენტი არის პატარა სამკუთხედი ბლოკის ერთ მხარეს. ჩვენ შევქმნით მას :before ფსევდოკლასის გამოყენებით ( :after ფსევდოკლასი უკვე გამოიყენება თავად ინსტრუმენტისთვის). ჩვენ მას მივაკუთვნებთ ჩვენს ოთხ პოზიციურ კლასს ისე, რომ თითოეული მათგანისთვის სამკუთხედი გამოვა შესაბამისად:

/** * სამკუთხედები */ .tooltip-top:fore, .tooltip-bottom:before, .tooltip-left:before, .tooltip-right:Before ( შინაარსი: ""; ჩვენება: ბლოკი; პოზიცია: აბსოლუტური; საზღვარი- სიგანე: 7 პიქსელი: rgba(0, 0, 0, 0); მარცხენა: hover: ადრე, .tooltip-right:hover: ადრე (გაუმჭვირვალობა: 1; ხილვადობა: ხილული; )

ჩვენ ვქმნით სამკუთხედს საზღვრისთვის სიგანის მინიჭებით, როდესაც თავად ელემენტს არ აქვს სიგანე ან სიმაღლე. ამ შემთხვევაში, ჩარჩოს სიგანე დაყენებულია 7 პიქსელზე. ჩარჩოს ფერი სრულიად გამჭვირვალეა, რაც ძალიან მნიშვნელოვანია. კოდის შემდეგ ფრაგმენტში მე ვანიჭებ ფერს ჩარჩოს შესაბამის მხარეს, რომელიც საშუალებას მაძლევს განვსაზღვრო სამკუთხედის ფორმა.

დანარჩენი სტილი ჰგავს იმას, რაც ჩვენ გავაკეთეთ HTML hover tooltip სხეულისთვის. ჩვენ გვაქვს იგივე გადასვლები, პოზიცია აბსოლუტურია, გამჭვირვალობა დაყენებულია 0-ზე და ხილვადობა დამალულია:

/*სამკუთხედის საწყისი პოზიცია*/ .tooltip-top:fore ( ზევით: -51%; მარცხნივ: 50%; ტრანსფორმაცია: translateX(-50%); საზღვრის ზედა-ფერი: #fff; ) .tooltip-bottom :წინა (ქვემოთ: -56%; მარცხნივ: 50%; ტრანსფორმაცია: translateX(-50%); საზღვრის-ქვედა-ფერი: #fff; ) .tooltip-left:fore ( მარცხნივ: -31%; ზედა: 15% საზღვარი -left-color: #fff ) .tooltip-right:fore ( right: -31%; top: 15%; border-right-color: #fff; ) /* სამკუთხედის ბოლო პოზიცია */ .tooltip; -ზემო:მითითება :წინა ( ზევით: -21%; ) .tooltip-bottom:hover: ადრე (ქვემოთ: -26%; ) .tooltip-left:hover:fore ( მარცხნივ: -11%; ) .tooltip-right :hover: ადრე (მარჯვნივ: -11%; )

იმისათვის, რომ სამკუთხედი ისე მოძრაობდეს, როგორც ხელსაწყოს მინიშნება, თქვენ უნდა მიანიშნოთ საწყისი და დასასრული პოზიცია.