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

სავარძლების სტილის მრავალი გზა არსებობს. ალბათ გახსოვთ სტატია „ჩვენ ვქმნით მოწონების პოსტს Medium-ზე“. მედიუმი ნუ ეცდებით ჩარჩოს მიღმა მუშაობას, მათ უბრალოდ სურდათ მეტი აქცენტი შეექმნათ ტექსტში.

თხელი, შავი ასოები ასოების მახლობლად ქვედა ქუდებით - Marcin Today-ის მიხედვით, სტატიის მიხედვით, ვქმნით პოსტს Medium-ზე.

Garne არის სტანდარტული სავარძელი, რომელსაც ასევე აქვს კარგი ზომა და საშუალებას აძლევს ასოს ქვედა ნაწილებს გაიაროს. უფრო ლამაზად, ნაკლები ბრაუზერების უმეტესობაში. როგორც გაირკვა, Medium გზაზე პრობლემების გარეშე დასრულდა. და არსებობს ორი მიზეზი, რის გამოც სავარძლის სტილიზაცია მაინც კარგია და ბევრ პრობლემას აჩენს.

მიზნები

რატომ არა უბრალოდ ტექსტის დეკორაციის ვიკორიზაცია: ხაზი გაუსვით? როდესაც ჩვენ ვსაუბრობთ იდეალურ სცენარზე, აქცენტი კეთდება:

იზრდება საბაზისო ხაზის ქვემოთ;

ასოების ქვედა ნაწილების გამოტოვება;

ფერების, ქსოვილებისა და სტილის შეცვლა;

ახალ რიგზე გადასვლა;

ივარჯიშე ნებისმიერ ფონზე.

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

გამოდი

მაშ, რა გზები გვაქვს ტექსტის გასაუმჯობესებლად? მე ვიწინასწარმეტყველე მოსვლა:

ტექსტი-გაფორმება;

ფონი-სურათი;

SVG ფილტრი;

Underline.js(ტილო);

ტექსტი-დეკორაცია-*

მოდით გადავხედოთ მთელ სიას და გადავხედოთ კანის მიდგომის ყველა დადებითი და უარყოფითი მხარე.

დეკორაციის ტექსტი

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

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

პლიუსები

უბრალოდ ვიკორისტუვატი;

იზრდება საბაზისო ხაზის ქვემოთ;

გამოტოვებს ასოს ქვედა ნაწილებს Safari-სა და iOS-ში;

ხელახლა იჭიმება ახალ რიგზე;

მუშაობს ნებისმიერ ფონზე.

მინუსები

არ გამოტოვებს მცირე ასოებს სხვა ბრაუზერებში;

ფერების, ქსოვილებისა და სტილის შეცვლა შეუძლებელია.

დენის საზღვარი-ქვედა

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

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

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

ამ დროისთვის არის 4 ავტორიტეტი სავარძლის სტილიზებისთვის. ბევრად უფრო ლამაზი, არა მხოლოდ ტექსტური დეკორაცია.

პლიუსები

თქვენ შეგიძლიათ აირჩიოთ გარდამავალი ძალა და გააცოცხლოთ ფერი და კომიცია;

წესების მიხედვით გადააწყობს ახალ რიგებს, თუ ელემენტი არ არის inline-block;

მინუსები

ხაზი ძალიან შორს არის დაჭიმული და ძნელია მისი ჩასმა;

ბევრი ძლიერი ავტორიტეტია საჭირო, რომ სავარძელი კარგად გამოიყურებოდეს;

ტექსტი არ ჩანს ტექსტის ჩრდილის არჩევისას.

დენის ყუთი-ჩრდილი

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

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

პლიუსები

შეიძლება დაჭიმული იყოს საბაზისო ხაზის ქვეშ;

დამატებითი დახმარებისთვის შეგიძლიათ გამოტოვოთ ტექსტის ჩრდილი;

შეგიძლიათ შეცვალოთ ფერი და სისქე;

გადააწყობს ახალ რიგებს.

მინუსები

თქვენ არ შეგიძლიათ სტილის შეცვლა;

არ აწუხებს ფონი.

Power background-image

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

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

პლიუსები

შეიძლება გაგრძელდეს საბაზისო ხაზის ქვემოთ;

შეგიძლიათ გამოტოვოთ ქვედა ხაზები დამატებითი ტექსტის ჩრდილისთვის;

შეგიძლიათ შეცვალოთ ფერი, სისქე (ნახევარი პიქსელით) და სტილი;

მუშაობს მარტო სურათებთან;

გადაანაწილებს ახალ რიგებს;

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

მინუსები

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

SVG ფილტრი

ღერძი ამ მეთოდით ამოვიტვირე. თქვენ შეგიძლიათ შექმნათ ონლაინ SVG ფილტრის ელემენტი, რომელიც ხაზს უფრო პატარას გახდის და ტექსტს გააფართოვებს ხაზის იმ ნაწილების დასაფარად, რომლებიც სხვაგვარად ჩანს. შეგიძლიათ ფილტრს მიანიჭოთ ID და მიმართოთ მას CSS-ში დახმარების ფილტრისთვის: url ('#svg-ხაზი').

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

და აი, როგორ გამოიყურება ღერძი Chrome-სა და Firefox-ში:

პრობლემებია IE, Edge და Safari. მარტივია SVG ფილტრის მხარდაჭერის ტესტირება CSS-ში. თქვენ შეგიძლიათ შეამოწმოთ @supports წესი ფილტრზე, წინააღმდეგ შემთხვევაში თქვენ შეამოწმებთ მხოლოდ გაგზავნილ რობოტს და არა ფილტრის გამოყენებული თუ არა. ჩემი ჩამოტვირთვის მეთოდი უხეშია ბრაუზერებთან, ამიტომ იყავით მეტი სიფრთხილე.

პლიუსები

რეტუშირება საბაზისო ხაზის ქვემოთ;

გამოტოვებს ქვედა ვაზებს;

შეგიძლიათ შეცვალოთ ფერები, ქსოვილები და სტილი;

მუშაობს ნებისმიერ ფონზე.

მინუსები

არ მოაწყოთ ახალი რიგები;

არ მუშაობს IE-ში, Edge-სა და Safari-ში, მაგრამ თქვენ შეგიძლიათ შეიყვანოთ ტექსტის დეკორაცია სარეზერვო სივრცეში. თავად Safari სავარძლები მშვენივრად გამოიყურება.

Underline.js (ტილო)

Underline.js საოცარი ბიბლიოთეკაა. მე აღფრთოვანებული ვარ, რომ Wenting Zhang-მა შეძლო JS-თან მუშაობა და დეტალებისადმი ყურადღების მიქცევა. თუ ჯერ არ შეგისწავლიათ Underline.js-ის ტექნიკური დემო ვერსია, გადახედეთ და გაოცდით. მერეჟას აქვს გამოსვლა მუშაობის პრინციპებზე ცხრა წლის სასწაულიდან, ამის შესახებ მაშინვე გეტყვით. სავარძლები ტილოს მიღმაა მოხატული. სრულიად ახალი მიდგომა, რომელიც საოცრად კარგად მუშაობს.

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

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

Power text-decoration- *

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

ტექსტი-დეკორაცია-ფერი

ტექსტი-გაფორმება-გამოტოვება

ტექსტი-გაფორმება-სტილი

არ ინერვიულოთ, თქვენ უკვე იცით ბრაუზერებში მხარდაჭერის შესახებ.

Power ტექსტი-დეკორაცია-ფერი

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

დენის ტექსტი-გაფორმება-გამოტოვება

ტექსტის გაფორმება-გამოტოვების ძალა მიუთითებს ზედა ტექსტში ქვედა ღვინოების გამოტოვებაზე.

სიმძლავრე არ არის სტანდარტული და ამჟამად მუშაობს მხოლოდ Safari-ში. სხვა ბრაუზერებში სამუშაოდ, თქვენ უნდა გამოიყენოთ -webkit- პრეფიქსი. Safari-ში სიმძლავრის მნიშვნელობა შედის პარამეტრებში, რის გამოც მხარდაჭერები გამოტოვებენ ქვედა ხაზებს საიტებზე, სადაც ეს სიმძლავრე არ არის მითითებული.

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

Power text-decoration-style

ტექსტის დეკორაციის სტილის ავტორიტეტს ისეთივე აქცენტები აქვს, როგორიც საზღვრის სტილის ავტორიტეტს, ასევე ახალ იერს - ტალღოვანს. შესაძლო მნიშვნელობები:

მაშინვე, ტექსტის დეკორაციის სტილის ძალა მუშაობს მხოლოდ Firefox-ში, ქვემოთ მოცემულია ეკრანის სურათი:

უბრალო სავარძლების ნაკრები ჰგავს?

Რა მოხდა?

ავტორიტეტები ტექსტი-დეკორაცია- * უფრო ინტუიციურია სხვა ავტორიტეტებთან შედარებით სავარძლის სტილიზებისთვის. თუმცა, თუ სხვაგვარად შევხედავთ იმ შეღავათებს, რომლებიც ადრე წარმოგვიდგინეს, შეგვიძლია აღვნიშნოთ, რომ ამ ხელისუფლების დახმარებით შეუძლებელია კავშირებისა და პოზიციების შეცვლა. მოკლე ისტორიის შემდეგ მე ვიცი ორი ძალა:

ტექსტი-ხაზგასმული-სიგანე

ტექსტი-ხაზგასმით-პოზიცია

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

ვისნოვკი

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

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

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

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

ზავდანნია

გადაწყვეტილება

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

ხაზის შესაქმნელად, მიჰყევით საზღვრის-ძირის გამარჯვებულ ძალას ხაზგასმული მნიშვნელობებით, გააფართოვეთ იგი ამომრჩეველზე A. იმისათვის, რომ სავარძელი არ გაჩერდეს ყველა მოთხოვნამდე, თქვენ უნდა შეიყვანოთ უნიკალური კლასი, რომელსაც ეწოდება იოგო, მაგალითად, წერტილი. ასევე აუცილებელია საფოსტო შეკვეთიდან გამოსავლის აღება დამატებითი სიმძლავრის ტექსტის დეკორაციისთვის, არცერთი მნიშვნელობით (მაგალითი 1).

კონდახი 1. წერტილოვანი მკლავი

HTML5 CSS 2.1 IE Cr Op Sa Fx

შედეგი ნაჩვენებია ნახ. 1.

ხაზის სისქე და სავარძლის ფერი ასევე დგინდება სასაზღვრო ქვედა დენის საშუალებით.