ЦСС нуди разне оквире за програмере за дизајнирање динамичких веб страница. Допадљивији је јер пружа све важне карактеристике и алате на једном месту. Дакле, не морате да користите друге оквире. Таилвинд фрамеворк у ЦСС-у је најчешће коришћен јер штеди време корисника за писање прекомерног ЦСС-а.
Овај водич пружа употребу лебдења, фокуса и других стања у Таилвинд-у.
Како користити Ховер, Фоцус и друга стања у Таилвинд-у?
Приликом дизајнирања веб страница потребно је додати динамичне и атрактивне елементе како би се одржала интерактивност са корисницима. Функције у Таилвинд-у се могу користити за креирање интерактивних и динамичких страница без писања додатног прилагођеног ЦСС-а. Неке функције су „лебдење“, „фокус“ и „активно“ које помажу у додавању привлачности дизајну.
Коришћење Левер Вариант у ХТМЛ-у
Својство ховер се користи за стилизовање ХТМЛ елемента када корисник помери курсор миша преко одређеног елемента. Помаже да се представи глатко искуство.
Корак 1: Примените својство „ховер“ у ХТМЛ-у
Направите ХТМЛ датотеку и примените својство лебдења на неки елемент у коду. Да бисте имали идеју, погледајте код дат у наставку:
< тело >
< див класа = 'центар' >
< дугме класа = 'бг-греен-500 ховер:бг-блуе-500 тект-вхите фонт-болд роундед' >
Ховер Ме!
< / дугме >
< / див >
< / тело >
У овом коду:
- Дугме под називом „ Ховер Ме! ” се креира помоћу ознаке дугмета.
- “ бг-греен-500 ” поставља боју позадине дугмета на зелену.
- “ лебдети: бг-блуе-500 ” мења боју дугмета из зелене у плаву када се мишем помери преко њега.
- Текст у дугмету има белу боју “ текст-бело ' и ' фонт-болд ” подебљава фонт.
- Облик дугмета је подешен да заокружи „ заокружено ”.
Корак 2: Прегледајте излаз
Након извршавања горњег кода, коначни приказ изгледа овако:
Види се да дугме мења боју када се курсор миша помери преко њега.
Коришћење Фоцус Вариант у ХТМЛ-у
Својство фокуса се користи за стилизовање ХТМЛ елемената тако да када корисник кликне на елемент он буде истакнут како би привукао пажњу корисника.
Корак 1: Примените својство Фоцус у ХТМЛ коду
Направите ХТМЛ датотеку и примените својство фокуса на неки жељени елемент. Да бисте стекли утисак, размотрите код у наставку:
< див >
< / див >
< / тело >
У овом коду:
- „ флек ” класа креира флекс.
- „ јустифи-центар ” оправдава поравнање садржаја према центру.
- „ предмети-центар ” класа прилагођава објекте центру екрана.
- „ х-екран ” поставља величину екрана према прозору за приказ.
- “ бг-блуе-200 ” поставља боју позадине на плаву.
- Креира се поље за унос текста.
- „ фокус: бг-греен-300 ” мења боју поља за унос у зелену када корисник кликне на њега.
- “ в-64 ” поставља ширину на 64 пиксела.
- “ х-10 ” поставља висину на 10 пиксела.
- “ пк-4 ” додаје допуну од 4 пиксела на горњу и леву страну.
- “ пи-2 ” додаје допуну од 2 пиксела на врху и на дну.
Корак 2: Прегледајте својство Фоцус
Сачувајте ХТМЛ код и отворите веб страницу коју је креирао. Затим померите курсор на поље за унос и кликните на њега и догодиће се следећа промена:
Коришћење активне варијанте у ХТМЛ-у
Ово својство се користи за стилизовање елемената за услов када корисник динамички додирује елемент. Активно стање је временски период од фазе активације курсора и његовог ослобођеног стања.
Синтакса
активно: { имовина }Одређено ЦСС својство се примењује на изабрани елемент.
Корак 1: Примените активну варијанту у ХТМЛ коду
Направите ХТМЛ датотеку и примените активно својство на неки елемент који је у доњем случају дугме:
< див класа = 'флек јустифи-центер итемс-центер х-сцреен' >
< дугме класа = 'бг-греен-600 п-4 роундед-мд транзиција-трајање трансформације-400 трансформ ацтиве:сцале-110' >
Кликни ме!
< / дугме >
< / див >
< / тело >
У овом коду:
- “ бг-греен-600 ” поставља боју позадине на зелену.
- “ п-4 ” додаје допуну од 4 пиксела.
- “ роундед-мд ” чини облик дугмета заобљеним.
- “ прелаз-трансформација ” се користи за трансформацију дугмета за кратко време које је подешено помоћу „ трајање-400 трансформација ”.
- „ активно: скала-110 ” претвара дугме у већу величину.
Корак 2: Прегледајте излаз
Сачувајте горњи код у ХТМЛ датотеци и прегледајте веб страницу коју је креирао. Веб страница ће изгледати овако:
Види се да се величина дугмета повећава када га миш држи и чим се отпусти враћа се у почетно стање.
Закључак
Да бисте користили лебдење, фокус и друга стања у Таилвинд-у, користите унапред дефинисане класе стања као што је „лебдење“ и примените нека својства стила на њих као што су промена боје, креирање прстена за фокусирање и тако даље. Услужни програми за приказ се користе за представљање скалабилног излаза. Овај запис је демонстрирао метод за коришћење лебдења, фокуса и других стања у Таилвинд-у.