Како користити дијагоналне разломке у Таилвинд Цсс

Овај чланак ће објаснити како да користите дијагоналне разломке у Таилвинд-у.

Како користити дијагоналне разломке у Таилвинд ЦСС-у?

Класа дијагоналних разломака у Таилвинд-у је унапред дефинисана нумеричка варијанта фонта која чини бројилац и именилац мањим и раздваја их косом цртом. Ово чини да се број разломка разликује од остатка текста.

Синтакса

Синтакса коришћења „ дијагонални-разломци ” класа је следећа:

Као што можете видети из горње синтаксе, програмер мора да обезбеди „ дијагонални-разломци ” у „ класа ” атрибут елемента.

Хајде да користимо класу „дијагонални разломци“ као практичан пример. У доњој демонстрацији, корисник може да види разлику између нормалних и дијагоналних разломака:

Објашњење горњег кода је следеће:

• „ див ” елемент се креира и даје као боја позадине помоћу „ бг-{цолор}-{нумбер} ' класа.
• Затим, текст добија велику величину фонта и поравнава се са средиштем елемента помоћу „ текст-лг ' и ' текстуални центар ” класе респективно.
• Следеће, два ' <п> ” се креирају елементи, при чему је други опремљен са „ дијагонални-разломци ' класа.

Излаз:

Разлика између дијагоналног и нормалног разломка може се јасно видети у горњем излазу.

Коришћење класе дијагоналних разломака са тачкама прекида

Тачке прекида се користе као медијски упити у Таилвинд-у. Постоји пет подразумеваних тачака прекида са одређеним минималним ширинама. Ове тачке прекида се могу користити са било којом класом у Таилвинд-у за креирање прилагодљивих и динамичких дизајна.

Да бисте користили „ дијагонални-разломци ” класа са тачком прекида у Таилвинд-у, користи се следећа синтакса:

Табела у наставку даје минималну ширину за различите тачке прекида у Таилвинд-у:

Хајде да користимо тачке прекида са „ дијагонални-разломци ” да бисте практично разумели њихову употребу:

У горе наведеном коду, елемент див је обезбеђен у „ мд:дијагонални разломци ” класа која ће променити фонт бројчаних разломака када „ доктор медицине ” је достигнута тачка прекида.

Излаз

Као што можете видети у излазу, бројеви разломака су обезбеђени фонтом дијагоналног разломка када је „ доктор медицине ” је достигнута тачка прекида:

Коришћење класе дијагоналне фракције са стањима задњег ветра

Таилвинд обезбеђује подразумевани „ државе ” да би се елементу обезбедила својства дизајна када се то специфично стање активира. Ово чини изглед дизајна привлачнијим и динамичнијим. Да би се користила класа „дијагонални разломци“ са стањем у Таилвинд-у, користи се следећа синтакса:

Подразумевано стање које обезбеђује Таилвинд је следеће:

• Лебдети: Када корисник пређе курсором преко елемента.
• Фокус: Када се корисник фокусира на елемент навигацијом до њега.
• Активан: Када корисник активира елемент кликом на њега.
• Онемогући: Када кориснику није дозвољено да активира елемент.

Доња демонстрација пружа практичан пример коришћења „ дијагонални-разломци ” разред са “ лебдети ” стање у Таилвинд:

„ див ” елемент у горњем коду је обезбеђен помоћу „ лебдећи: дијагонални разломци ” која ће променити нормални фонт бројева разломака у дијагонални фонт фракција.

Излаз

Као што можете видети у излазу, нумерички фонт броја разломка се мења док корисник пређе курсором миша преко њега:

То је све о коришћењу класе дијагоналних разломака у Таилвинд ЦСС-у.

Закључак

Да бисте користили дијагоналне разломке у Таилвинд ЦСС-у, користите „ дијагонално-разломак ' класа. Ова класа ће одвојити бројилац и именилац косом цртом и учинити их малим. Корисници такође могу да користе класу „дијагонални разломци“ са подразумеваним тачкама прекида и стањима у Таилвинд-у како би дизајн учинили динамичнијим. Овај чланак је дао процедуру за коришћење дијагоналних разломака у Таилвинд-у.