CSS text-shadow თვისება პასუხისმგებელია ტექსტის ჩრდილის დაყენებაზე. ძალიან ჰგავს box-shadow თვისებას.

CSS ტექსტი-ჩრდილოვანი სინტაქსი

ტექსტი-ჩრდილი : X Y R ფერი ;

• X - ჩრდილის ცვლა ტექსტთან მიმართებაში X ღერძის გასწვრივ (ყველაზე ხშირად მითითებულია px პიქსელებში);
• Y - ჩრდილის ცვლა ტექსტთან მიმართებაში Y ღერძის გასწვრივ (ყველაზე ხშირად მითითებულია px პიქსელებში);
• R - ჩრდილის რადიუსი (ყველაზე ხშირად მითითებულია px პიქსელებში);
• ფერი - ფერი (შეიძლება მიუთითოთ ნებისმიერ ფორმატში, იხილეთ html ფერის სახელები)

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

ტექსტი-ჩრდილი: X1 Y1 R1 ფერი1, X2 Y2 R2 ფერი2, ...;

ჩრდილის პრიორიტეტი (რომელიც უფრო მაღალია, რომელი უფრო დაბალია) დამოკიდებულია კონკრეტულ CSS ვერსიაზე. CSS3-ში სიის პირველი ჩრდილი მოთავსებულია ყველაზე ზევით, სიაში ბოლო ბოლოში. CSS2-ში პირიქითაა.

მაგალითები: როგორ გავაკეთოთ ჩრდილი ტექსტისთვის html-ში

მაგალითი No1. მარტივი ჩრდილი ტექსტისთვის html-ში

ქვემოთ მოცემულია უმარტივესი მაგალითი ტექსტის ჩრდილით. აქ ჩვენ გამოვიყენეთ ორივე ოფსეტი (X და Y) და ასევე გავაკეთეთ ბუნდოვანი რადიუსი.

Текст с тенью

Текст с тенью

Пример №2. Фиксированная или жесткая тень у текста в html

Ниже представлены два примера. Тень в обоих случаях одинаковая (фиксированная), т.е. без размытия. Обратите внимание, какой эффект создается, если текст будет на черном фоне.

Фиксированная или жесткая тень

Фиксированная или жесткая тень с фоном

На странице преобразуется в следующее

Фиксированная или жесткая тень

Фиксированная или жесткая тень с фоном

Пример №3. Двойная тень у текста в html

Двойная тень

На странице преобразуется в следующее

Двойная тень

Пример №4. Вдавленные буквы у текста в html

Вдавленные буквы - вариант 1

Вдавленные буквы - вариант 2

На странице преобразуется в следующее

Вдавленные буквы - вариант 1

Вдавленные буквы - вариант 2

Пример №5. Вдавленные буквы у текста в html

Небольшой 3D текст

На странице преобразуется в следующее

Небольшой 3D текст

Для обращения к margin из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.margin ="VALUE "

Влад Мержевич

Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow , мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, о которых мало кто подозревает. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.

Использование text-shadow

В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).

Рис. 1. Параметры text-shadow

Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.

Большим плюсом text-shadow является возможность добавлять сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.

К сожалению, IE до версии 10.0 не поддерживает text-shadow , так что в этом браузере мы никаких красивостей не увидим.

Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.

Рис. 2. Контурный текст

Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.

Пример 1. Контурный текст

ტექსტის მონახაზი

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

მაგალითი 2. ოთხი ჩრდილი კონტურისთვის

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

ტექსტის მონახაზი

ასეთი კონტურის გარეგნობა ნაჩვენებია ნახ. 3. შესამჩნევია, რომ კონტური უფრო გამომხატველია.

ბრინჯი. 3. კონტური ოთხი ჩრდილით

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

ბრინჯი. 4. 3D ტექსტი

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

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

მაგალითი 3: ჩრდილი სამგანზომილებიანობის დასამატებლად

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

ათი კამერიანი მაცივარი

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

ტექსტის ჭედურობა

ტექსტის ჭედური ან სხვა სიტყვებით რომ ვთქვათ, რელიეფის ეფექტის შესაქმნელად, ტექსტის ფერი უნდა შეესაბამებოდეს ფონის ფერს. ზედაპირის ზემოთ „გამოწეული“ ასოების ერთი ნაწილი თითქოს განათებულია, ხოლო მეორე ნაწილი ჩრდილშია (სურ. 5).

ბრინჯი. 5. რელიეფური ტექსტი

მსგავსი ეფექტის დასამატებლად ორი ჩრდილი გვჭირდება - თეთრ ჩრდილს მარცხნივ ერთი პიქსელით გადავაადგილებთ, ხოლო მუქ ნაცრისფერს ქვევით მარჯვნივ (მაგალითი 4).

მაგალითი 4: რელიეფური ტექსტი

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

რელიეფური ტექსტი

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

ტექსტი-ჩრდილი: #333 -1px -1px 0, #fff 1px 1px 0;

ბზინვარება

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

ბრინჯი. 6. მბზინავი ტექსტი

მაგალითი 5. ბზინვარება

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Ნათელი მხარე

Ბნელი მხარე

დაბინდვა

თავად ჩრდილი ბუნდოვანია, ასე რომ, თუ დავტოვებთ მხოლოდ ჩრდილს და დავმალავთ თავად ტექსტს, მივიღებთ ბუნდოვან ასოებს (ნახ. 7), ხოლო დაბინდვის ხარისხი მარტივად შეიძლება დარეგულირდეს ტექსტ-ჩრდილის პარამეტრის გამოყენებით.

ბრინჯი. 7. ტექსტი ბუნდოვანი

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

მაგალითი 6: ტექსტის დაბინდვა

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

ბუნდოვანი ტექსტი

ჩრდილი და ფსევდოკლასები

ჩრდილი არ უნდა დაემატოს პირდაპირ ტექსტს. text-shadow თვისება ლამაზად თამაშობს :hover და :first-ასო ფსევდოკლასებთან. ამის გამო, საინტერესო ეფექტები მიიღება ტექსტით, როგორიცაა აბზაცის კონტურული პირველი ასო ან ბმულის სიკაშკაშე, როდესაც მასზე მაუსის კურსორს ატარებთ. მაგალითი 7 გვიჩვენებს ასეთ ტექნიკას.

მაგალითი 7: ფსევდოკლასების გამოყენება

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

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

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

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

ჩრდილი ( შიგთავსი: 20 პიქსელი; საზღვარი: 1 პიქსელი მყარი #f0f0f0; საზღვრის ქვედა: 2 პიქსელი მყარი #cccc; -webkit-საზღვრის-რადიუსი: 5პx; -moz-საზღვრის-რადიუსი: 5პx; საზღვრის-რადიუსი: 5პx; )

დეპრესიული ბლოკის ეფექტის მიღწევა ასევე ძალიან მარტივია. CSS3 მომრგვალებული კუთხეების დამატება აძლიერებს ეფექტს:

დაჭერილი ( ფერი: #fff; padding: 20px; ფონი: #111; კონტური: 1px მყარი #000; კონტური მარჯვნივ: 1px მყარი #353535; საზღვრის ქვედა: 1px მყარი #353535; -webkit-საზღვრის-რადიუსი: 5px; -moz-border-radius: 5px საზღვარი-რადიუსი: 5px )

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

Img.light ( მონახაზი: 1px მყარი #ddd; საზღვრის ზედა: 1px მყარი #fff; padding: 10px; ფონი: #f0f0f0; ) img.dark ( მონახაზი: 1px მყარი #111; საზღვრის ზედა: 1px მყარი #555; padding: 10px ფონი: #333;

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

#indented ul( ზღვარი: 20px 0; padding: 0; list-style: none; ) #indented ul li ( border-top: 1px solid #333; border-bottom: 1px solid #111; ) #indented ul li:first -child (საზღვრის ზედა: none;) #indented ul li:last-child (border-bottom: none;) #indented ul li a ( padding: 10px; display: block; ფერი: #fff; text-decoration: none ;) #indented ul li a:hover (ფონი: #111;)

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

ჩრდილების საფუძვლები

საკუთრება ტექსტი-ჩრდილიძალიან მარტივი გამოსაყენებელი. მას მხარს უჭერს ყველა თანამედროვე ბრაუზერი და თუნდაც პრეფიქსების გამოყენების გარეშე. მაგრამ IE-ში არ არის მხარდაჭერა (თუნდაც IE9-ში). თქვენ შეგიძლიათ გამოიყენოთ ინსტრუმენტები, როგორიცაა Modernizr, რათა დაგეხმაროთ CSS3 ეფექტების ამოღებაში, თუნდაც IE-ს ძველ ვერსიებზე.

Სინტაქსი

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

ტექსტი-ჩრდილი: horizontal_offset vertical_offset ბუნდოვანი ფერი;

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

ტექსტი-ჩრდილი: 2px 4px 3px rgba(0,0,0,0.3);

ამ ქონების გამოყენების შედეგი ასე გამოიყურება:

რატომ გამოიყენება rgba?

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

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

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

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

ფონის ფერი არის #222 და ტექსტის ფერი დაყენებულია 60% გამჭვირვალობაზე. თეთრი ჩრდილი განლაგებულია ოდნავ ქვემოთ და მარჯვნივ, გამჭვირვალობის დონით 10%.

ძირითადი ტექსტი ( ფონი: #222; ) #ტექსტი h1 (ფერი: rgba(0,0,0,0.6); ტექსტი-ჩრდილი: 2px 2px 3px rgba(255,255,255,0.1); )

საერთოდ არ არის საჭირო ჩრდილის დაბინდვა. მკაფიო ჩრდილი კარგად შეიძლება შეესაბამებოდეს ვებსაიტის დიზაინს.

ტექსტი-ჩრდილი: 6px 6px 0px rgba(0,0,0,0.2);

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

ტექსტი-ჩრდილი: shadow1, shadow2, shadow3;

აქ მოცემულია ორი ჩრდილის გამოყენების მაგალითი. პირველს იგივე ფერი აქვს როგორც ფონი.

ტექსტი-ჩრდილი: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

შორ მანძილზე ქვევით ცვლა

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

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

ტექსტური ჩრდილი: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px,1,0px );

გადაიწიეთ მცირე მანძილზე და ძლიერად დაბინდეთ

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

ტექსტი-ჩრდილი: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

მარკ დოტოს 3D ტექსტი

ეფექტი გამოიყენება ვებგვერდზე MarkDotto.com. ის იყენებს 12 განსხვავებულ ჩრდილს შესანიშნავი 3D ეფექტის შესაქმნელად.

ტექსტური ჩრდილი: 0 1px 0 #cccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,1),. 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

გორდონ ჰოლის მიერ შეჭრილი ტექსტი

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

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

ფონის ფერი: #666666; -webkit-background-clip:text; -moz-background-clip: ტექსტი; ფონი-კლიპი: ტექსტი; ფერი: გამჭვირვალე; ტექსტი-ჩრდილი: rgba(255,255,255,0.5) 0px 3px 3px;

ბზინვარება

ტექსტი-ჩრდილი: 0px 0px 6px rgba(255,255,255,0.7);

ტექსტი-ჩრდილი: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

მრავალი სინათლის წყარო

ტექსტი-ჩრდილი: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);

ფერი: rgba(0,0,0,0.6); ტექსტი-ჩრდილი: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

დასკვნა

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

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

ტექსტის სტილის თვისებები

1. ხაზის დიზაინი: ხაზგასმა, შტრიხი და დარტყმა

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

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

ბრინჯი. 1. ხაზის გატეხვა

1.1. დეკორაციის ხაზის ტიპი: ტექსტი-დეკორაცია-ხაზის თვისება

ბრაუზერის მხარდაჭერა

IE: —
ზღვარი: —
Firefox: 36, 35 -მოზ-
Chrome: 57
Safari: 12.1, 7.1 -ვებ ნაკრები-
ოპერა: 44
iOS Safari: 8 -ვებ ნაკრები-
UC ბრაუზერი Android-ისთვის: 11.8
Chrome Android-ისთვის: 73
სამსუნგის ინტერნეტი: 7.2

text-decoration-line თვისება განსაზღვრავს თუ რა ტიპის ხაზი დაემატება ელემენტს.

ქონება არ არის მემკვიდრეობით მიღებული.

Სინტაქსი

ტექსტი-გაფორმება-ხაზი: არცერთი; ტექსტი-გაფორმება-ხაზი: ხაზგასმა; ტექსტი-გაფორმება-ხაზი: გადახაზული; ტექსტი-გაფორმება-ხაზი: ხაზი-გადაკვეთა; text-decoration-line: blink; ტექსტი-გაფორმება-ხაზი: ხაზი გაუსვით ხაზს; text-decoration-line: overline ხაზგასმა ხაზის მეშვეობით; ტექსტი-გაფორმება-ხაზი: მემკვიდრეობა; ტექსტი-დეკორაცია-ხაზი: საწყისი;

1.2. დეკორაციის ხაზის სტილი: ტექსტის დეკორაციის სტილის საკუთრება

ბრაუზერის მხარდაჭერა

IE: —
ზღვარი: —
Firefox: 36, 35 -მოზ-
Chrome: 57
Safari: 12.1, 7.1 -ვებ ნაკრები-
ოპერა: 44
iOS Safari: 8 -ვებ ნაკრები-
UC ბრაუზერი Android-ისთვის: 11.8
Chrome Android-ისთვის: 73
სამსუნგის ინტერნეტი: 7.2

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

ქონება არ არის მემკვიდრეობით მიღებული.

Სინტაქსი

ტექსტი-გაფორმება-სტილი: მყარი; ტექსტი-გაფორმება-სტილი: ორმაგი; ტექსტი-გაფორმება-სტილი: წერტილოვანი; ტექსტი-გაფორმება-სტილი: წყვეტილი; ტექსტი-გაფორმება-სტილი: ტალღოვანი; ტექსტი-მორთულობა-სტილი: მემკვიდრეობით; ტექსტი-გაფორმება-სტილი: საწყისი;

1.3. დეკორაციის ხაზის ფერი: ტექსტი-დეკორაცია-ფერი თვისება

ბრაუზერის მხარდაჭერა

IE: —
ზღვარი: —
Firefox: 36, 35 -მოზ-
Chrome: 57
Safari: 12.1, 7.1 -ვებ ნაკრები-
ოპერა: 44
iOS Safari: 8 -ვებ ნაკრები-
UC ბრაუზერი Android-ისთვის: 11.8
Chrome Android-ისთვის: 73
სამსუნგის ინტერნეტი: 7.2

text-decoration-color თვისება განსაზღვრავს ტექსტის დეკორაციის ხაზის ფერის კომპლექტს ელემენტისთვის text-decoration-line .

ქონება არ არის მემკვიდრეობით მიღებული.

Სინტაქსი

ტექსტი-დეკორაცია-ფერი: currentColor; ტექსტი-დეკორაცია-ფერი: ორაგული; ტექსტი-დეკორაცია-ფერი: #00ff00; ტექსტი-დეკორაცია-ფერი: rgba(255, 128, 128, 0.5); ტექსტი-დეკორაცია-ფერი: გამჭვირვალე; ტექსტი-მორთულობა-ფერი: მემკვიდრეობით; ტექსტი-დეკორაცია-ფერი: საწყისი;

1.4. დეკორაციის ხაზის თვისებების სწრაფი შეჯამება: ტექსტის დეკორაციის თვისება

ბრაუზერის მხარდაჭერა

IE: —
ზღვარი: —
Firefox: 36, 35 -მოზ-
Chrome: 57
Safari: 12.1, 7.1 -ვებ ნაკრები-
ოპერა: 44
iOS Safari: 8 -ვებ ნაკრები-
UC ბრაუზერი Android-ისთვის: 11.8
Chrome Android-ისთვის: 73
სამსუნგის ინტერნეტი: 7.2

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

1.5. დიზაინის ხაზის პოზიცია: ტექსტი-ხაზგასმული-პოზიციის თვისება

ბრაუზერის მხარდაჭერა

IE: —
ზღვარი: 12
Firefox: —
Chrome: 71
Safari: —
ოპერა: —
iOS Safari: —
UC ბრაუზერი Android-ისთვის: ?
Chrome Android-ისთვის: 71
სამსუნგის ინტერნეტი: —

ტექსტი-ხაზგასმული-პოზიციის თვისება ადგენს ელემენტში მითითებულ ხაზგასმის პოზიციას.

ქონება მემკვიდრეობით არის მიღებული.

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

Სინტაქსი

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

2. ტექსტის ჩრდილი: ტექსტ-ჩრდილის თვისება

ბრაუზერის მხარდაჭერა

IE: 10
ზღვარი: 12
Firefox: 3.5
Chrome: 4
Safari: 4
ოპერა: 10
iOS Safari: 3.2
UC ბრაუზერი Android-ისთვის: 11.8
Chrome Android-ისთვის: 73
სამსუნგის ინტერნეტი: 4

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

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

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

ქონება არ არის მემკვიდრეობით მიღებული.

ბრინჯი. 3. ტექსტურ-ჩრდილოვანი თვისების სინტაქსი

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

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

Სინტაქსი

ტექსტი-ჩრდილი: 2px 2px 4px ვარდისფერი; ტექსტი-ჩრდილი: #fc0 1px 0 10px; ტექსტი-ჩრდილი: 5px 5px #4D4644; ტექსტი-ჩრდილი: ლურჯი 2px 5px; ტექსტი-ჩრდილი: 5px 10px; ტექსტი-ჩრდილი: მემკვიდრეობა; ტექსტი-ჩრდილი: საწყისი;

2.1. ტექსტის ჩრდილის მაგალითები

პლაკატის ჩრდილი

ტექსტის ჩრდილი

ტექსტი-ჩრდილი-1 ( ფონი: #77F7DE; ფერი: თეთრი; ტექსტი-ჩრდილი: -2პx -2პx 0 #4D4644, 2px -2px 0 #4D4644, -2px 2px 0 #4D4644, 2px 2px 0 #4D4644 თეთრი, 5px 5px 0 თეთრი, 6px 6px 0 თეთრი;

3D ჩრდილი

ტექსტის ჩრდილი

ტექსტი-ჩრდილი-2 (ფონი: ხაზოვანი-გრადიენტი (-45 გრადუსი, #FEE864, #F5965E); ფერი: #f4f4f4; ტექსტი-ჩრდილი: -1px -1px თეთრი, 1px 1px ნაცრისფერი, 2px 2px #7a7a7a, 3px575x , 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8Px #5c5c5c, 9px 9px #515x , 9px 9px #515x 1px #4d4d4d, 18px 18px 30px rgba(0, 0, 0, .4), 18px 18px 10px rgba(0, 0, 0, .4 )

ჩრდილი-ტექსტი

ტექსტის ჩრდილი

ტექსტი-ჩრდილი-3 (ფონი: #FFE6DB; ფერი: #FFE6DB; ასოების ინტერვალი: .1em; ტექსტი-ჩრდილი: 3px 0 rgba(250, 111, 142, .5), 6px 0 rgba(250, 111, 142 , .4), 9px 0 rgba(250, 111, 142, .3), 12px 0 rgba(250, 111, 142, .2), 15px 0 rgba(250, 111, 142, .1);

რეტრო ჩრდილი

ტექსტის ჩრდილი

ტექსტი-ჩრდილი-4 (ფერი: #FB631E; ასოების ინტერვალი: .1em; ტექსტი-ჩრდილი: 4px 4px თეთრი, 6px 6px #D7CC88; )

ფენიანი ჩრდილი

ტექსტის ჩრდილი

ტექსტი-ჩრდილი-5 (ფონი: #f1f1f1; ფერი: #fcc105; ასოების ინტერვალი: .1em; ტექსტი-ჩრდილი: 4px 4px #ff981d, 7px 7px rgba(200, 120, 22, .2); )