CSS: Elementlərə müxtəlif vuruş effektləri üçün bir neçə üsul. Html-də kölgə ilə CSS mətn kölgəsi Şriftindən istifadə nümunələri
Tipoqrafiya veb-dizaynerlərin sevimli oyuncağıdır. CSS-in bir çox maraqlı aləti var - mətn kölgəsi(mətn kölgəsi), ilk baxışdan olduqca sadə görünən, lakin onun köməyi ilə ixtiraçılıq və təxəyyüldən istifadə etsəniz, yaddaqalan effektlər yarada bilərsiniz.
Kölgə əsasları
Əmlak mətn kölgəsi istifadə etmək çox asandır. Bütün müasir brauzerlər tərəfindən və hətta prefikslərdən istifadə etmədən də dəstəklənir. Lakin IE-də (hətta IE9-da) dəstək yoxdur. Siz hətta IE-nin köhnə versiyalarında CSS3 effektlərini çıxarmağa kömək etmək üçün Modernizr kimi vasitələrdən istifadə edə bilərsiniz.
Sintaksis
Mətn kölgəsi yaratmaq üçün xassə sintaksisindən istifadə edin mətn kölgəsi hansı aşağıda verilmişdir. Müəyyən etmək üçün dörd parametr var: ilk ikisi kölgənin yerini təyin edir, üçüncüsü bulanıqlıq səviyyəsini, dördüncüsü isə kölgənin rəngini təyin edir.
Mətn-kölgə: horizontal_offset vertical_offset bulanıq rəng;
Aşağıda iki piksel aşağı və dörd piksel sağa ofset edilmiş, üç piksel bulanıqlaşdırılmış və 30% qeyri-şəffaflıqda qara rəngə təyin edilmiş mətn kölgəsi nümunəsidir.
Mətn-kölgə: 2px 4px 3px rgba(0,0,0,0.3);
Bu əmlakdan istifadənin nəticəsi belə görünəcək:
Niyə rgba istifadə olunur?
Xüsusiyyəti təyin edərkən kölgə rəngini təyin etmək üçün rgba-dan istifadə etmək lazım deyil. Bununla belə, rgba kölgəni təyin edərkən başqa bir ölçü əlavə edir - şəffaflıq səviyyəsi.
Bu üsul rəngin müəyyən edilməsinin digər üsullarından daha sadədir. Kölgə rənginin kölgəsini müəyyən etməyə diqqət yetirmək lazım deyil, bu fon rəngindən yalnız bir qədər qaranlıq və ya daha açıq ola bilər. Rgba ilə siz sadəcə ağ və ya qaradan istifadə edə və rəngləri qarışdırarkən istədiyiniz fon rənginə nail olmaq üçün onların qeyri-şəffaflığını artıra bilərsiniz.
Əmlakdan istifadə mətn kölgəsi Siz sadə kölgələrlə məhdudlaşmamaqla mətn üçün müxtəlif effektlər yarada bilərsiniz. Məsələn, depressiyaya düşmüş mətnin illüziyasını yaratmaq üçün kod buradadır.
Əvvəlcə mətn rəngini fon rəngindən bir qədər tünd təyin etməlisiniz. Və sonra əmlakdan istifadə etməlisiniz mətn kölgəsi ağ rəng və artan şəffaflıq ilə.
Fon rəngi #222 və mətn rəngi 60% qeyri-şəffaflığa təyin edilib. Ağ kölgə 10% qeyri-şəffaflıq səviyyəsi ilə bir qədər aşağı və sağa yerləşdirilib.
Əsas (fon: #222; ) #text h1 (rəng: rgba(0,0,0,0.6); mətn kölgəsi: 2px 2px 3px rgba(255,255,255,0.1); )
Kölgəni ümumiyyətlə bulandırmağa ehtiyac yoxdur. Aydın bir kölgə veb sayt dizaynı ilə yaxşı uyğunlaşa bilər.
Mətn-kölgə: 6px 6px 0px rgba(0,0,0,0.2);
Əsl əyləncə yalnız bir kölgəyə sahib olmaq məhdudiyyətini atdığınız zaman başlayır. Tərifləri ayırmaq üçün vergüldən istifadə etməklə, istədiyiniz qədər kölgə istifadə edə bilərsiniz!
Mətn-kölgə: kölgə1, kölgə2, kölgə3;
Budur iki kölgədən istifadə nümunəsi. Birincisi fonla eyni rəngə malikdir.
Mətn-kölgə: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
Uzun məsafə aşağı sürüşmə
Bir neçə kölgədən istifadə etməyi öyrəndikdən sonra nəticələr getdikcə daha dramatik olacaq. Mətn üçün 3D effekti yaratmaq çox asandır.
Nümunədə dörd kölgə istifadə olunur, hamısı müxtəlif məsafələrdə aşağı sürüşdürülmüş və bulanıqdır.
Mətn kölgəsi: 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 rgba(0,0,0,01) );
Kiçik bir məsafəni aşağı sürüşdürün və çox bulanıqlayın
Budur, eyni fikrin başqa bir təcəssümü. Üç kölgə daha kiçik bir məsafəyə sürüşdürülür və daha bulanıq olur.
Mətn-kölgə: 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);
Mark Dotto tərəfindən 3D mətn
Effekt MarkDotto.com saytında istifadə olunur. Əla 3D effekti yaratmaq üçün 12 müxtəlif kölgədən istifadə edir.
Mətn kölgəsi: 0 1px 0 #ccc, 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 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);
Gordon Hall tərəfindən girintili mətn
Yuxarıdakı nümunədə diqqət yetirin, mən texnikamı “tez və çirkli” hərf effekti adlandırdım. Bunun səbəbi, daha inandırıcı olan bəzi ciddi şəkildə daxil edilmiş mətn yaratmaq üçün daha çox cəlbedici bir yol var.
Qordon yalnız xarici kölgəni deyil, həm də həqiqi daxili kölgəni çəkmək üçün ciddi CSS vudu istifadə edir. Texnikanın tam izahı üçün onun blog yazısına baxın.
Fon rəngi: #666666; -webkit-background-clip: mətn; -moz-background-clip: mətn; fon klipi: mətn; rəng: şəffaf; mətn kölgəsi: rgba(255,255,255,0.5) 0px 3px 3px;
Parıltı
Mətn-kölgə: 0px 0px 6px rgba(255,255,255,0.7);
Mətn-kölgə: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;
Çoxsaylı işıq mənbələri
Mətn-kölgə: 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);
Rəng: rgba(0,0,0,0,6); mətn kölgəsi: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
Nəticə
Əksər CSS effektləri kimi, kölgələri də həyata keçirmək çox asandır. Ancaq sadə hərəkətlərin birləşməsi heyrətamiz effektlərə səbəb ola bilər.
Vlad Merzheviç
Bir vaxtlar kölgələrlə mətn üçün müəyyən bir moda var idi və oxşar effekti demək olar ki, hər hansı bir veb saytında tapmaq olardı. Qrafik redaktorda kölgə əlavə etmək sadədir, əla görünür, burada saytın üslubundan və dizaynerin nisbət hissindən asılı olmayaraq kölgəli və veb səhifələrə çəkilmiş mətndir. Əksər brauzerlər mətn-kölgə üslubu xüsusiyyətini dəstəkləməyə başlayanda moda artıq keçmişdi və indi kölgəli mətn olduqca nadirdir. Bununla belə, mətn kölgəsinin az adamın şübhələndiyi bir sıra digər gizli istifadələri var. Bu xassədən istifadə edərək kontur mətni yarada, onu "çıxara", parıltı, bulanıqlıq və s. yarada bilərsiniz.
Mətn kölgəsindən istifadə
Dörd parametr dəyər kimi yazılır: kölgə rəngi, üfüqi və şaquli yerdəyişmə və kölgə bulanıqlığı radiusu (şək. 1).
düyü. 1. Mətn-kölgə parametrləri
Rəng istənilən uyğun CSS formatında bütün parametrlərin əvvəlində və ya sonunda yazıla bilər. Beləliklə, rgba formatından istifadə edərək şəffaf bir kölgə edə bilərsiniz. Müsbət ofset dəyərləri kölgəni sağa və aşağıya, mənfi ofset dəyərləri isə müvafiq olaraq sola və yuxarıya kölgə salır. Mətnin ətrafında kölgə olması üçün ofset dəyərlərini sıfıra təyin etmək kifayətdir. Bulanıqlıq radiusu kölgənin nə qədər kəskin olacağını təyin edir. Bulanıqlıq radiusu nə qədər böyükdürsə, kölgə bir o qədər yumşaq görünür.
Mətn-kölgəsinin böyük üstünlüyü, parametrlərini vergüllə ayıraraq bir neçə fərqli kölgə əlavə etmək imkanıdır. Bu xüsusiyyət əsasən müxtəlif effektlər yaratmağa imkan verir.
Təəssüf ki, 10.0 versiyasından əvvəlki IE mətn kölgəsini dəstəkləmir, ona görə də bu brauzerdə heç bir gözəllik görməyəcəyik.
Kontur mətni hər bir hərfin rəngi mətnin rəngindən fərqlənən xəttlə əhatə olunması ilə xarakterizə olunur (şək. 2). Bu effekt başlıqlar kimi böyük şrift ölçüsü ilə yaxşı görünür. Əsas mətn üçün konturdan istifadə yalnız oxunaqlılığı pozur.
düyü. 2. Mətnin konturunu çəkin
Kontur iki üsuldan istifadə etməklə yaradıla bilər. Birinci üsulda biz sıfır kölgə ofsetini və kiçik bulanıqlıq radiusunu, sözün həqiqi mənasında 1-2 piksel təyin etdik (nümunə 1). Bulanıqlıq dəyərinin artırılması konturu mətn ətrafında parıltıya çevirir, bu da fərqli effekt verir.
Nümunə 1: Mətn kontur
Mətni kontur
Bu üsulla hazırlanmış kontur Şəkildə göstərilmişdir. 1. Kontur bir qədər bulanıq olur, buna görə aydın bir xətt əldə etmək istəyənlər üçün ikinci üsul nəzərdə tutulur. O, eyni rəngli dörd kəskin kölgədən istifadə etməkdən ibarətdir, onlar bir piksel müxtəlif bucaqlara köçürülür (nümunə 2).
Misal 2. Kontur üçün dörd kölgə
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Mətni kontur
Belə bir konturun görünüşü Şek. 3. Konturun daha ifadəli olması nəzərə çarpır.
düyü. 3. Dörd kölgə ilə kontur
Şəkildə göstərilən 3D mətn effektini əlavə etmək üçün. Şəkil 4-də eyni vaxtda bir neçə kölgə tətbiq olunur, onlar bir-birinə nisbətən üfüqi və şaquli olaraq bir piksel sürüşdürülür.
düyü. 4. 3D mətn
Şəxsən, bu tip mətn mənə retro üslublu hərfləri xatırladır və yenə də veb səhifənin əsas hissəsinə deyil, başlıqlara ən uyğun gəlir.
Kölgələrin sayı mətni nə qədər qabağa çəkmək istədiyinizdən asılıdır. Daha böyük rəqəm hərflərin "dərinliyini" artırır, daha kiçik bir rəqəm, əksinə, üçölçülülüyünü azaldır. Misal 3 eyni rəngli beş kölgədən istifadə edir.
Misal 3: Üçölçülülük əlavə etmək üçün kölgə
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
On kameralı soyuducu
Bütün kölgələr üçün bulanıqlıq radiusunu sıfıra və eyni rəngə təyin etdik. Kölgələr yalnız ofset dəyərlərində fərqlənir.
Mətn qabartması
Mətn qabartma və ya başqa sözlə, relyef effektini yaratmaq üçün mətnin rəngi fon rənginə uyğun olmalıdır. Səthin üstündə “çıxmış” hərflərin bir hissəsi işıqlandırılmış kimi görünür, digər hissəsi isə kölgədədir (şək. 5).
düyü. 5. Qabartma mətni
Bənzər bir effekt əlavə etmək üçün bizə iki kölgə lazımdır - ağ kölgəni bir piksel sola, tünd boz kölgəni isə sağa doğru hərəkət etdiririk (nümunə 4).
Nümunə 4: Qabarıq mətn
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Qabartma mətni
Rölyef boz fonda ən yaxşı görünür, buna görə də effekt saytın hər rəng sxeminə uyğun deyil. Yeri gəlmişkən, sadəcə kölgə rənglərini dəyişdirmək əvəzinə sıxışdırmaq asandır;
Mətn-kölgə: #333 -1px -1px 0, #fff 1px 1px 0;
Parıltı
Mətnin ətrafındakı parıltı eyni kölgədir, yalnız parlaq və təzadlıdır. Beləliklə, parıltı effekti yaratmaq üçün kölgə rəngini dəyişdirmək və istədiyiniz bulanıqlıq radiusunu təyin etmək kifayətdir. Mətnin ətrafındakı parıltı vahid olmalıdır, kölgə ofseti sıfıra təyin edilməlidir. Şəkildə. Şəkil 6-da müxtəlif rənglərdə parıltı nümunəsi göstərilir.
düyü. 6. Parlaq mətn
Misal 5. Parıltı
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Parlaq tərəf
Qaranlıq tərəf
Bulanıq
Kölgənin özü bulanıqdır, ona görə də yalnız kölgəni qoyub mətnin özünü gizlətsək, bulanıq hərflər alacağıq (şək. 7) və bulanıqlığın dərəcəsini mətn-kölgə parametrindən istifadə etməklə asanlıqla tənzimləmək olar.
düyü. 7. Bulanıq mətn
Orijinal mətni gizlətmək üçün rəngi şəffaf olaraq təyin edin (misal 6). Kölgə rəngi daha sonra mətn rəngi kimi çıxış edir və bulanıqlıq radiusu hərflərin bulanması dərəcəsini təyin edir.
Misal 6: Mətni bulandır
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Bulanıq mətn
Kölgə və psevdosinflər
Kölgənin birbaşa mətnə əlavə edilməsinə ehtiyac yoxdur, mətn-kölgə xassəsi :hover və :first-letter psevdo-sinifləri ilə gözəl oynayır; Bunun sayəsində mətnlə maraqlı effektlər əldə edilir, məsələn, paraqrafın konturlu ilk hərfi və ya siçan kursorunu onun üzərinə gətirdiyiniz zaman keçidin parıltısı. Misal 7 belə texnikaları göstərir.
Misal 7: Pseudo-Siniflərdən istifadə
HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx
Niş layihə, xərclərdən asılı olmayaraq ənənəvi kanalı ləngidir. Bazar strukturu, detallardan imtina edərək, əvvəlki kampaniyaların təcrübəsindən istifadə edərək, marketinq və satış departamentini sabitləşdirir. Brend qurulması, təbii ki, bazar seqmentini qazanaraq, konvergent PR-ni kortəbii şəkildə uzaqlaşdırır. İnvestisiya rəqabəti artıraraq rolun sosial vəziyyətini sinxronlaşdırır. Brend təbii olaraq əvvəlki kampaniyaların təcrübəsindən istifadə edərək yerləşdirmə planını müəyyən edir.
Veb dizaynına gəldikdə, mətbəə mənim sevimli oyuncağımdır. Əlbəttə ki, onun köməyi ilə şriftin üslubunu və ya ölçüsünü bir az dəyişdirərək bir insanın diqqətini cəlb edə bilərsiniz. Bu mövzuda çox sadə və çox təsirli kitablar yazılmış və mübahisələrdə çoxlu nüsxələr pozulmuşdur. Bu gün mən ümumiyyətlə mətbəə ilə bağlı məsləhət verməyəcəyəm - mənim kifayət qədər ixtisasım yoxdur, lakin veb saytınızın mətnini necə tərtib etmək həmişə xoşdur. Beləliklə, bu gün sizə CSS3 xüsusiyyətindən istifadə etməyin bir neçə yolunu göstərəcəyəm. mətn kölgəsi, çox sadə, lakin doğru əllərdə möcüzələr yarada bilər.
Əsas mətn-kölgə sintaksisi
Bu əmlak CSS3 Bütün ən son brauzerlərdə -moz və -webkit kimi satıcı prefiksləri olmadan işləyir. Hətta IE bu xüsusiyyəti başa düşmək üçün öyrədilə bilər, siz Modernizr və ya analoqlardan istifadə etməlisiniz;
Mətn-kölgə: x-ofset y-ofset bulanıq rəng;
Bütün əsas sintaksis budur. Birinci dəyər üfüqi ofset, ikincisi şaquli ofset, kölgə bulanıqlığı və kölgə rəngidir. Bir misala baxaq:
Mətn-kölgə: 2px 4px 3px rgba(0,0,0,0.3);
Kölgəni köçürdük, 3 piksel tutqunlaşdırdıq və 30% şəffaflıqla qara rəng təyin etdik. Niyə mən alfa kanalı və ya şəffaflıqdan istifadə edirəm? Bu, hərəkətlərinizdə daha çox sərbəstlik verir, siz rəng seçimindən narahat olmadan sadəcə şəffaflıq dəyərini dəyişdirərək onu bir az daha açıq və ya tündləşdirə bilərsiniz. Çox tez çıxır, tövsiyə edirəm.
Depressiyaya düşən məktublar
gövdə (fon: #222; ) #text h1 (rəng: rgba(0,0,0,0.6); mətn kölgəsi: 2px 2px 3px rgba(255,255,255,0.1); )
Burada işləmə prinsipi belədir: fon hərflərdən bir qədər yüngüldür, yüngül şəffaflığa malik yüngül kölgə. Nəticə şəkildədir, cəhd edin.
Sərt kölgə
mətn kölgəsi: 6px 6px 0px rgba(0,0,0,0.2);
İndiki vaxtda retro üslub dəbdədir və orada kölgədən bulanıqlıq olmadan istifadə edirlər. Yaxşı, biz buna hazırıq
İkiqat kölgə
mətn kölgəsi: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
Və burada əmlakın başqa bir çətin xüsusiyyətindən istifadə olunur mətn kölgəsi, seçicilər vergüllə ayrılaraq siyahıya alına bilər və beləliklə, lazım olan qədər kölgə yarada bilər. İlk kölgəyə fona bənzər bir rəng təyin edilə bilər, sonra təsir şəkildəki kimi olacaq.
Aşağı və uzaq
mətn kölgəsi: 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 rgba(0,0,0,0.1) );
Mətn həcmlidir və fonun üstündən asılmış kimi görünür, elə deyilmi? Burada müxtəlif bulanıqlıq və yer səviyyələrinə malik 4 kölgədən istifadə edirik. Ümumiyyətlə, kölgələr nə qədər çox istifadə olunursa, effekti layihələrinizdə bir o qədər də nəzərə alın;
Kiçik 3D mətn
mətn kölgəsi: 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);
Əvvəlki nümunəyə bənzər, üç kölgə, lakin daha yaxında yerləşir, buna görə də mətnin üçölçülü və çəkisinin təsiri.
Mark Dotto tərəfindən 3D mətn
mətn kölgəsi: 0 1px 0 #ccc, 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 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);
Bu dizaynerin işinə onlayn rast gəldim və onu ötürə bilmədim. Təsirli realizm.
Gordon Hall tərəfindən girintili mətn
fon rəngi: #666666; -webkit-background-clip:mətn; -moz-background-clip: mətn; fon klipi: mətn; rəng: şəffaf; mətn kölgəsi: rgba(255,255,255,0.5) 0px 3px 3px;
Mülklə təsirli işin başqa bir nümunəsi mətn kölgəsi. Amma prinsip yuxarıda dediyim kimidir. Bir qədər açıq fon, hərflərin altında açıq kölgə və yuxarıda qaranlıq. Sadə, lakin çox gözəl hazırlanmışdır.
Parlaq mətn
mətn kölgəsi: 0px 0px 6px rgba(255,255,255,0.7);
Burada da hər şey sadədir - biz kölgəni hərəkət etdirmirik, onu daha güclü şəkildə bulandırırıq və ağ edirik. Bütün parıltı budur.
Retro stil
mətn kölgəsi: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;
Yuxarıda retro üslubdan danışdım, bu da eyni operadandır. İndi çox dəbdədir, çoxsaylı aydın kölgələr. Öz mülahizənizlə istifadə edin
Çoxsaylı işıq mənbələri
mətn kölgəsi: 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);
Budur, bütün istiqamətlərdə kölgələr verən çoxsaylı işıq mənbələrinin təsiri.
Yüksəltilmiş mətn
rəng: rgba(0,0,0,0,6); mətn kölgəsi: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
Depressiyaya düşən mətn artıq orada idi, amma indi qaldırılıb. Kifayət qədər sadə təsir, lakin məsələn, başlıqlarda çox gözəl görünür. İstifadə edin, cəhd edin
Sonda demək istəyirəm - CSS3 mətn kölgəsi xüsusiyyətiçox sadə, artıq gördüyünüz kimi. Ancaq onun düzgün istifadəsi və bir az təxəyyül ilə möcüzələr yarada bilər.
Təcrübə edin, gününüz xoş keçsin
Modul mətn üslubu ilə bağlı CSS xüsusiyyətlərini, məsələn, altını çəkmək, mətn kölgələri və Şərqi Asiya mətn vurğularını ehtiva edir.
Mətn üslubunun xüsusiyyətləri
1. Xətt dizaynı: altını xətt, ştrix və cızıq
Alt xəttlər, ştrixlər və cızıqlar yalnız əvəz edilməmiş sətir səviyyəli bloklar üçün göstərilir (göstəriş: daxili) və sətrin əvvəlində və sonunda olan abzas istisna olmaqla, simvollar və sözlər arasındakı boşluqlar da daxil olmaqla, bütün mətndə göstərilir.
Brauzerlər qlifin konturunun hər iki tərəfində bir qədər məsafədə görünən xəttin qliflə kəsişdiyi yerin altındakı xətti və ştrixi poza bilər. Brauzer qlif sərhədlərində alt xətti və ya konturu pozduqda, həmin sərhəddəki xəttin forması qlifin formasına uyğun olmalıdır. Bununla belə, spesifikasiya qlifin "formasına əməl etmək" üçün xüsusi bir üsul təyin etmir və bunu brauzerin öhdəsinə buraxır.
düyü. 1. Alt xəttin qırılması 1.1. Dekorasiya xətti növü: mətn-dekorasiya-xətt xüsusiyyəti
Brauzer dəstəyi
IE: —
Kənar: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -vebkit-
Opera: 44
iOS Safari: 8 - veb dəsti-
Android üçün UC Brauzeri: 11.8
Android üçün Chrome: 73
Samsung İnternet: 7.2
text-decoration-line xüsusiyyəti, əgər varsa, elementə hansı növ xəttin əlavə olunduğunu müəyyən edir.
Əmlak miras qalmır.
Sintaksis
Mətn-bəzək xətti: heç biri; mətn-bəzək-xətti: altından xətt çəkmək; mətn dekorasiya xətti: üst xətt; mətn-bəzək-sətir: sətir vasitəsilə; mətn dekorasiya xətti: yanıb-sönmək; mətn-dekorasiya-xətti: üstündən xətt çəkmək; mətn-bəzək-sətir: üstündən xətt altından xətt-through; mətn-bəzək-sətir: varis; mətn dekorasiya xətti: ilkin;
1.2. Dekorasiya xətti üslubu: mətn-bəzək üslubu xüsusiyyəti
Brauzer dəstəyi
IE: —
Kənar: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -vebkit-
Opera: 44
iOS Safari: 8 - veb dəsti-
Android üçün UC Brauzeri: 11.8
Android üçün Chrome: 73
Samsung İnternet: 7.2
text-decoration-style xassəsi elementdə göstərilən mətni bəzəmək üçün çəkilmiş xətlərin üslubunu təyin edir. Dəyərlər haşiyə tərzi mülkü ilə eyni məna daşıyır.
Əmlak miras qalmır.
Sintaksis
Mətn-bəzək üslubu: bərk; mətn dekorasiya üslubu: ikiqat; mətn dekorasiya üslubu: nöqtəli; mətn dekorasiya üslubu: tire; mətn dekorasiya üslubu: dalğalı; mətn-bəzək üslubu: varis; mətn dekorasiya üslubu: ilkin;
1.3. Dekorasiya xətti rəngi: mətn-dekorasiya-rəng xüsusiyyəti
Brauzer dəstəyi
IE: —
Kənar: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -vebkit-
Opera: 44
iOS Safari: 8 - veb dəsti-
Android üçün UC Brauzeri: 11.8
Android üçün Chrome: 73
Samsung İnternet: 7.2
text-decoration-color xassəsi mətn dekorasiya xətti ilə element üçün mətn bəzək xətti rəng dəstini təyin edir.
Əmlak miras qalmır.
Sintaksis
Mətn-bəzək-rəng: cari Rəng; mətn-bəzək-rəng: qızılbalıq; mətn-bəzək-rəng: #00ff00; mətn-bəzək-rəng: rgba(255, 128, 128, 0.5); mətn-bəzək-rəng: şəffaf; mətn-bəzək-rəng: varis; mətn-bəzək-rəng: ilkin;
1.4. Dekorasiya xəttinin xüsusiyyətlərinin qısa xülasəsi: mətn-bəzək xüsusiyyəti
Brauzer dəstəyi
IE: —
Kənar: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -vebkit-
Opera: 44
iOS Safari: 8 - veb dəsti-
Android üçün UC Brauzeri: 11.8
Android üçün Chrome: 73
Samsung İnternet: 7.2
Mətn-bəzək xassəsi mətn-dekorasiya-sətir mətn-bəzək-stil mətn-bəzək-rəng xassələrinin tək bəyannamədə yazılmasının qısa formasıdır. Çatışmayan dəyərlər ilkin dəyərlərinə təyin edilir. Defolt dəyər mətn dekorasiyası: heç biri bərk currentColor; . Əmlak miras qalmır. Bununla belə, bütün mətn sətirlərinin üslubu bir element üçün eyni olmalıdır.
1.5. Dizayn xəttinin mövqeyi: text-underline-position xüsusiyyəti
Brauzer dəstəyi
IE: —
Kənar: 12
Firefox: —
Chrome: 71
Safari: —
Opera: —
iOS Safari: —
Android üçün UC Brauzeri: ?
Android üçün Chrome: 71
Samsung İnternet: —
text-underline-position xassəsi elementdə göstərilən alt xəttin mövqeyini təyin edir.
Mülk miras qalır.
| Dəyərlər: | |
| avto | Brauzer alt xəttin mövqeyini müəyyən etmək üçün istənilən alqoritmdən istifadə edə bilər, lakin sətir mətnin əsas xətti üzərində və ya aşağıda yerləşdirilməlidir. Cari dəyər. |
| altında | Alt xətt elementin mətn məzmununun altında yerləşir. Bu halda, alt xətt adətən enənlə kəsişmir. Şaquli tipoqrafik rejimlərdə müəyyən bir tərəfə üstünlük verilirsə, bu dəyər sola və ya sağa birləşdirilə bilər. |
| sol | Şaquli tipoqrafik rejimlərdə alt xətt mətnin sol kənarına düzülür. Bununla belə, bu dəyər altında şərh edilir. |
| sağ | Şaquli tipoqrafiya rejimlərində alt xətt mətnin sağ kənarına düzülür. Bununla belə, bu dəyər aşağıdakı kimi şərh olunur. |
| miras almaq | |
| ilkin | |
Sintaksis
Mətn-altın xətt-mövqe: avtomatik; mətn-altın xətt-mövqe: altında; mətn-altın xətt-mövqe: sol; mətn-altın xətt-mövqe: sağ; mətn-altın xətt-mövqe: sol altında; mətn-altın xətt-mövqe: sağ altında; mətn-altın xətt-mövqe: varis; mətn-altın xətt-mövqe: başlanğıc; 
düyü. 2. Sol və sağ qiymətlərdən istifadə edərək şaquli tipoqrafiya rejimlərində hər iki tərəfdən mətnin altını çəkin
2. Mətn kölgəsi: mətn kölgəsi xassəsi
Brauzer dəstəyi
IE: 10
Kənar: 12
Firefox: 3.5
Chrome: 4
Safari: 4
Opera: 10
iOS Safari: 3.2
Android üçün UC Brauzeri: 11.8
Android üçün Chrome: 73
Samsung İnternet: 4
Mətn-kölgə xüsusiyyəti mətnə kölgə əlavə etmək üçün istifadə olunur. Mətn kölgəsi heyrətamiz effektlər yaratmağa imkan verən maraqlı vasitədir. Kölgələr tək və ya çox qatlı, bulanıq, rəngli və ya şəffaf ola bilər. Element üçün kölgə təyin edərkən, yalnız bir uzunluq və rəng təyin edə bilərsiniz, bununla da tək simvol və ya sözün rəngli surətini yarada bilərsiniz. Həmçinin, mətnin rəngi ilə fon arasında kontrast aşağı olarsa, kölgədən istifadə mətni daha oxunaqlı edə bilər.
Hər bir kölgə həm mətnin özünə, həm də onun dizayn elementlərinə (mətn-bəzək xüsusiyyəti) tətbiq edilir. Siz eyni anda bir neçə kölgə təyin edə bilərsiniz, onları vergüllə ayıra bilərsiniz. Kölgələr üst-üstə düşür, lakin mətnin özünü üst-üstə düşmür. Birinci kölgə həmişə digər kölgələrin üstündə yerləşir. Mülk miras qalır.
Hər bir kölgə iki və ya üç uzunluq və isteğe bağlı rəng ilə müəyyən edilir. İcazə verilən uzunluqlar 0-dır.
Əmlak miras qalmır.
düyü. 3. Mətn-kölgə xassəsinin sintaksisi | mətn kölgəsi | |
|---|---|
| Dəyərlər: | |
| x-ofset | Kölgənin üfüqi ofsetini təyin edir. Müsbət dəyər mətnin sağına kölgə ofsetini, mənfi uzunluq isə sola kölgə çəkir. |
| y-ofset | Kölgənin şaquli ofsetini təyin edir. Müsbət dəyər kölgəni aşağı, mənfi qiymət isə kölgəni yuxarı aparır. |
| bulanıqlıq | Bulanıqlıq radiusunu təyin edir. Mənfi dəyərlərə icazə verilmir. Bulanıqlıq dəyəri sıfırdırsa, kölgənin kənarı kəskindir. Əks halda, dəyər nə qədər yüksək olsa, kölgənin kənarı bir o qədər bulanıq olar. |
| rəng | Kölgələr təyin edir. Rəng yoxdursa, istifadə olunan rəng rəng xüsusiyyətindən götürülür. |
| heç biri | Varsayılan dəyər mətn kölgəsinin olmaması deməkdir. Müəyyən edilmiş xüsusiyyətə malik elementlər qrupundan elementin kölgəsini silir. |
| ilkin | Əmlak dəyərini standart dəyərə təyin edir. |
| miras almaq | Əsas elementdən xassə dəyərini miras alır. |
Qutu kölgəsindən fərqli olaraq, mətn kölgələri kəsilmir və mətn qismən şəffaf olduqda görünə bilər. Qutu-kölgə kimi, mətn kölgələri tərtibata təsir etmir və sürüşməyə və ya sürüşdürülə bilən sahənin ölçüsünün artmasına səbəb olmur.
Sintaksis
Mətn kölgəsi: 2px 2px 4px çəhrayı; mətn kölgəsi: #fc0 1px 0 10px; mətn kölgəsi: 5px 5px #4D4644; mətn kölgəsi: mavi 2px 5px; mətn kölgəsi: 5px 10px; mətn kölgəsi: varis; mətn kölgəsi: başlanğıc;
2.1. Mətn kölgəsi nümunələri
Poster kölgəsi
Mətn kölgəsi
Mətn kölgəsi-1 (fon: #77F7DE; rəng: ağ; mətn kölgəsi: -2px -2px 0 #4D4644, 2px -2px 0 #4D4644, -2px 2px 0 #4D4644, 2px 2px 0 #4D4644, 4px 4px ağ, 5px 5px 0 ağ, 6px 6px 0 ağ hərflər arası: 0.1em )
3D kölgə
Mətn kölgəsi
Mətn-kölgə-2 (fon: xətti-gradient(-45deg, #FEE864, #F5965E); rəng: #f4f4f4; mətn kölgəsi: -1px -1px ağ, 1px 1px boz, 2px 2px #7a7a7a, 3px 3px #757575 , 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px #575757, 10px 10px #241d, 18px 30px rgba(0, 0, 0, .4), 18px 18px 10px rgba(0, 0, 0, .4 )
Kölgə mətni
Mətn kölgəsi
Mətn-kölgə-3 (fon: #FFE6DB; rəng: #FFE6DB; hərf aralığı: .1em; mətn kölgəsi: 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);
Retro kölgə
Mətn kölgəsi
Mətn-kölgə-4 (rəng: #FB631E; hərf aralığı: .1em; mətn kölgəsi: 4px 4px ağ, 6px 6px #D7CC88; )
Qatlı kölgə
Mətn kölgəsi
Mətn-kölgə-5 (fon: #f1f1f1; rəng: #fcc105; hərf aralığı: .1em; mətn kölgəsi: 4px 4px #ff981d, 7px 7px rgba(200, 120, 22, .2); )
Veb səhifəni bəzəməyin başqa bir yolu CSS-də kölgə ilə mətn hazırlamaqdır. Bu üslubdan düzgün istifadə etməklə siz başlığı, paraqrafı və ya mətnin bir hissəsini uğurla vurğulaya bilərsiniz. Siz kölgə rəngini, ofset və bulanıqlığı tənzimləyə bilərsiniz.
Internet Explorer 9 və daha əvvəlki versiyalar istisna olmaqla, bütün brauzerlər tərəfindən dəstəklənən mətn kölgəsi xüsusiyyətindən istifadə edərək CSS-də mətn kölgəsi təyin edə bilərsiniz. Opera Mini ilə də problemlər var - bu brauzer əmlakı yalnız qismən dəstəkləyir. Aşağıda yazı üslubu və mülkiyyət dəyərləri nümunəsi verilmişdir:
H1 (mətn kölgəsi: 3px 5px 6px #6C9; )
Gördüyünüz kimi, boşluqla ayrılmış dörd dəyərə qədər qeyd etdik. Gəlin onu ardıcıllıqla keçirək:
- 3px – birinci dəyər kölgənin X oxu boyunca ofsetindən məsuldur (sağ, sol). Müsbət dəyər kölgəni sağa, mənfi dəyər isə kölgəni sola aparır.
- 5px – ikinci dəyər Y oxu boyunca kölgənin ofsetindən məsuldur (aşağı, yuxarı). Müsbət dəyər kölgəni aşağı, mənfi dəyər isə kölgəni yuxarı aparır.
- 6px – üçüncü dəyər kölgə bulanıqlığı radiusundan məsuldur. Bu parametr isteğe bağlıdır. Varsayılan olaraq, bulanıqlıq 0 pikseldir, bu da kölgəni aydın və bulanıq edir.
- #6c9 – dördüncü dəyər kölgənin rəngindən məsuldur. Bu parametr isteğe bağlıdır. Varsayılan olaraq, kölgə rəngi üslubun tətbiq olunduğu mətnlə eyni rəngə təyin edilir.
Brauzerdə kölgə necə görünür (ekran görüntüsü):
Ekran görüntüsü: kölgə ilə mətn, CSS Mətn üçün çoxlu CSS kölgələri
Mətn-kölgə xüsusiyyəti üçün bir neçə dəyər qrupundan istifadə etmək də mümkündür. Bu o deməkdir ki, bir mətn üçün birdən çox kölgə təyin edə bilərsiniz. Bunu etmək üçün vergüllə ayrılmış dəyərlər qruplarını yazmalısınız.
H1 (mətn kölgəsi: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7; )
Bu üslubun tətbiqinin nəticəsi ekran görüntüsündə görünür:
Ekran görüntüsü: CSS mətni üçün çoxlu kölgələr CSS mətn kölgəsi xüsusiyyəti ilə həqiqətən gözəl şeylər yarada bilərsiniz. Təcrübə edə bilərsiniz: şəffaflığı tənzimləmək üçün alfa kanalından istifadə edərək, çox sayda müxtəlif kölgələr təyin edin, rəngi yalnız onaltılıq sistemdə deyil, həm də RGBA formatında təyin edin. Bu əmlaka kifayət qədər diqqət yetirsəniz baş verə biləcəklər:
Ekran görüntüsü: CSS-də 3D mətn kölgəsi
