CSS: Elementlərə müxtəlif vuruş effektləri üçün bir neçə üsul. CSS mətn kölgəsindən müxtəlif bucaqlarda şrift kölgəsindən istifadə nümunələri css
CSS mətn kölgəsi xüsusiyyəti mətnin kölgəsini təyin etmək üçün cavabdehdir. Box-kölgə xüsusiyyətinə çox bənzəyir.
CSS mətn-kölgə sintaksisi
mətn kölgəsi: X Y R rəngi;
- X - X oxu boyunca mətnə nisbətən kölgənin yerdəyişməsi (ən çox px piksellərlə təyin olunur);
- Y - kölgənin Y oxu boyunca mətnə nisbətən yerdəyişməsi (əksər hallarda px piksellərlə təyin olunur);
- R - kölgə radiusu (ən çox px piksellərlə göstərilir);
- rəng - rəng (istənilən formatda göstərilə bilər, html rəng adlarına baxın)
Mətn-kölgə sintaksisi çoxlu kölgələri vergüllə ayırmağa imkan verir. Misal üçün
mətn kölgəsi : X1 Y1 R1 rəng1 , X2 Y2 R2 rəng2 , ...;
Kölgə prioriteti (hansı daha yüksəkdir, hansı daha aşağıdır) xüsusi CSS versiyasından asılıdır. CSS3-də siyahıda ilk kölgə ən yuxarıda, sonuncu kölgə isə ən aşağıda yerləşdirilir. CSS2-də isə əksinədir.
Nümunələr: html-də mətn üçün kölgə necə etmək olar
Nümunə № 1. Html-də mətn üçün sadə kölgə
Aşağıda mətn kölgəsi ilə ən sadə nümunə verilmişdir. Burada biz həm ofsetləri (X və Y) tətbiq etdik, həm də bulanıqlıq radiusu etdik.
Текст с тенью
Текст с тенью
Пример №2. Фиксированная или жесткая тень у текста в html
Ниже представлены два примера. Тень в обоих случаях одинаковая (фиксированная), т.е. без размытия. Обратите внимание, какой эффект создается, если текст будет на черном фоне.
Фиксированная или жесткая теньФиксированная или жесткая тень с фоном
На странице преобразуется в следующее
Фиксированная или жесткая тень
Фиксированная или жесткая тень с фоном
Пример №3. Двойная тень у текста в html
Двойная тень
На странице преобразуется в следующее
Двойная тень
Пример №4. Вдавленные буквы у текста в html
Вдавленные буквы - вариант 1Вдавленные буквы - вариант 2
На странице преобразуется в следующее
Вдавленные буквы - вариант 1
Вдавленные буквы - вариант 2
Пример №5. Вдавленные буквы у текста в html
Небольшой 3D текст
На странице преобразуется в следующее
Небольшой 3D текст
Для обращения к margin из JavaScript нужно писать следующую конструкцию:
document.getElementById("elementID").style.margin ="VALUE "
Описание
Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Свойство text-shadow может работать совместно с псевдоэлементами :first-letter и :first-line .
Синтаксис
text-shadow: none | тень [,тень]*
где тень:
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>
Значения
None Отменяет добавление тени. цвет Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Необязательный параметр. сдвиг по x Смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное - влево. Обязательный параметр. сдвиг по y Смещение тени по вертикали относительно текста. Также допустимо использовать отрицательное значение, которое поднимает тень выше текста. Обязательный параметр. радиус Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0. Учтите, что алгоритм сглаживания в браузерах обычно разный, поэтому вид тени может несколько различаться в зависимости от заданных параметров сглаживания.
Допускается указывать несколько параметров тени, разделяя их между собой запятой. В CSS3 учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке - в самом низу. В CSS2 порядок наоборот: первая тень размещается в самом низу, а последняя на самом верху.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Sitruslar cənubun kolluqlarında yaşayarmı? Bəli, amma saxta nüsxə!
Nümunənin nəticəsi Şəkildə göstərilmişdir. 1.
düyü. 1. Safari brauzerində kölgə görünüşü
Brauzerlər
Opera maksimum 6-9 kölgə variantını dəstəkləyir. Bu dəyərin artırılması, eləcə də bulanıqlıq radiusunun 100px-dən yuxarı artırılması brauzerin işinə təsir edir. Opera versiyaları 9.5-10 CSS2-yə bənzər çox kölgəli ekrandan istifadə edir.
4.0 versiyasından əvvəlki Safari yalnız bir kölgə seçimini dəstəkləyir, qalanları nəzərə alınmır. 4.0 versiyasından bəri bir çox kölgələr artıq işləyir.
Internet Explorer yalnız 10.0 versiyasından sonra mətn kölgəsi xüsusiyyətini başa düşür. Bunun əvəzinə filtr xassəsindən istifadə olunur: Shadow(parameters) . Məsələn, aşağıdakı konstruksiya kölgənin rəngini (#666666), istiqamətini (şaqulidən 45°) və ofset miqdarını (4 piksel) müəyyən edir.
filtr: Kölgə(Rəng=#666666, İstiqamət=45, Güc=4);
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əri pozulmuşdur. Bu gün mən ümumiyyətlə tipoqrafiya ilə bağlı məsləhət verməyəcəyəm - 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ıqsız 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, 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.
Qordon 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ğ rəngə çeviririk. 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ə bir 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
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ə yaratmaq üçü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. Bu, 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ənin 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əsi mətn-kölgə parametrindən istifadə etməklə asanlıqla tənzimlənə bilər.
düyü. 7. Bulanıqlığı olan 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əsi lazım deyil, 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.
Tipoqrafiya veb-dizaynerlərin sevimli oyuncağıdır. CSS-nin çox maraqlı bir 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);
Qordon 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.
Gordon 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.
