.png)
CSS фрагменти
Јасност на текстот
Го менува стандардниот метод на прикажување на прелистувачот за подобра јасност на текстот.
Текстот изгледа подобро на страната со овој фрагмент.
Состојба на фокус за интеракција со тастатурата
Создава унифициран "избран ефект" за сите фокусирани елементи во изградбата одеднаш.
Користи tabindex атрибут за да се насочат сите фокусирани елементи.
Webflow ни овозможува да ја стилизираме focus-visible состојбата (наречена "Focused (keyboard)" во паѓачкото мени на состојби) за кој било елемент одделно. Користете го ако сакате да го отфрлите стандардниот стил што го создадовме со фрагментот.
Отстранување на горната маргина на Rich Text
Ја отстранува горната маргина од првиот елемент во Rich Text.
На пример, сакаме нашиот H2 да има margin-top: 4rem. Ова е најгорната маргина што ја сакаме низ целиот елемент Rich Text. Сепак, не ја сакаме оваа margin-top за првиот елемент од Rich Text. 4rem маргина создава несакан простор помеѓу горниот дел од елементот Rich Text и првиот H2 текст.
Декларацијата "не" е специјална безбедносна за нашето Table of Content Attribute решение.
Отстранување на долната маргина на Rich Text
Ја отстранува долната маргина за последниот елемент во Rich Text.
На пример, сакаме нашиот Paragraph да има margin-bottom: 0.5rem. Ова е долната маргина што ја сакаме низ целиот елемент Rich Text. Сепак, не го сакаме ова margin-bottom за последниот елемент од Rich Text. 0.5rem маргината создава несакан простор помеѓу дното на елементот Rich Text и последниот Paragraph текст.
Pointer events
Дефинира дали со некој елемент може да има интеракција на кој било начин или не.
Понекогаш не сакаме одреден елемент да ни пречи на лебдењето, движењето на курсорот или кликнувањето на глувчето. Ги користиме pointer-events: none за овие случаи. Ова CSS својство и вредност ќе се спречи сите кориснички интеракции со елемент.
На пример, можеме да ја примениме pointer-events-none класата на слоевити позадински графики. Графиката може да пречи на копче за повик за акција што може да се клика и што стои зад графиката поради визуелни причини за дизајн.
Во некои случаи, сакаме само едно специфично дете од родител кој не може да се кликне да може да се кликне или да се лебди. Ние користиме pointer-events: auto за овие случаи. pointer-events-auto класата овозможува настани на овој посебен елемент.
Проверете пример за користење на pointer-events својството за да се создаде прилагодлив курсор.
Центеризатор за контејнери
Присилува хоризонтално центрирање на сите container- класи.
Секогаш сакаме да ги одржуваме margin-left и margin-right на auto. Ако ние, друг девелопер или наш клиент направиме случајна промена на маргината, auto вредноста ќе остане преку !important ознаките.
Наследени стилови за разни елементи на Webflow
Ги отстранува некои цврсто кодирани стилови и големини од стандардните елементи на Webflow.
Стандардно, овој стил е „исклучен“ (коментиран) во Client-First клонот. Мораш да го вклучиш рачно ако сакаш да го користиш.
Овој фрагмент го олеснува стилизирањето на некои елементи на Webflow. Наместо рачно да ги отфрлиме хардкодираните стилови, можеме да ги inherit(наследиме) стиловите од родителот.
На пример, инпутите на Webflow формулари никогаш не ја следат body font-size. Ова е затоа што внесувањето на формулари е хардкодирано да биде 14px. Мора да примениме класа на инпутот и да ја декларираме font-size. Со овој фрагмент, инпутите не користат 14px и наместо тоа јаinherit(наследува) body font-size(големината на фонтот на телото).
Зошто овој фрагмент е стандардно оневозможен? Ова го сметаме за напредна опција бидејќи може да доведе до неочекувано однесување. На пример, нема да можеме да одбереме "All links" и да ја смениме нивната боја. Ажурирањето на стилот "All links" нема да промени ништо бидејќи веќе не работиме со хардкодирани вредности поставени на овие елементи. Ја отфрламе оваа опција со користење на inherit.
Додај inline flex
Додадете inline-flex како CSS својство достапно во Webflow Designer. Ова својство на CSS не е природно достапно во Webflow.
Елементот со inline-flex се однесува како inline самиот додека се осигура дека неговите деца сѐ уште можат да бидат порамнети како и сите други flex деца.
На пример, кога применуваме flex на CTA копче, тоа се протега до 100% целосна ширина. Ако користиме inline-flex на копчето, копчето ја одржува правилната ширина преку inline однесување и децата на копчето го искористуваат flex контролите.
!important декларации
Ги спречува CSS specificity проблемите за нашите display, padding, и margin помошни класи.
Овој фрагмент гарантира дека нашите помошни класи секогаш ги имаат нивните CSS својства како што сакавме. !important ознаките ги принудуваат помошните класи да ги задржат своите глобални контроли за стилови.
Squareify
CSS магијата додава класа на div-square во нашата градба. Оваа класа секогаш прави квадрат, без разлика на ширината што ќе и ја дадете.
Ве молиме забележете: За да ги ставите дете елементи во div-square, треба да додадете absolute позициран div со position поставена на full. Ставете ги дете елементите во овој absolute позициониран div.