Како да креирате УИ прекидач користећи ЦСС маску
У обради слике, маскинг је техника која вам омогућава сакрити слику са другом. Маска се користи за прављење дела слике прозирно. Можете извршити маскирање помоћу ЦСС-а помоћу особина маскирања.
У данашњем посту направићемо маскирану слику помоћу две ПНГ слике и ЦСС маскинг технике, и омогућити корисницима да рукују двема стањима слике (дан и ноћ) уз помоћ прекидача УИ.
Због неких проблема са компатибилношћу са прегледачем - нису све особине маскирања подржане у сваком претраживачу (од јуна 2016.) - Показаћу две технике за додавање маски, један за Вебкит-базиране прегледнике, а други за Фирефок. Два прва корака у овом упутству у три корака су иста за сваки прегледач, али ће бити разлика у трећем кораку.
Корак 1. Креирајте основни прекидач
Пошто типични прекидач има два стања са само један омогућен у исто време можете да користите а радио дугме група од два за креирање радних компоненти прекидача. Поставите сваки радио дугме на леви и десни крај свог основног елемента.
Групе радио дугмади се креирају тако да сваки радио тастер буде исти име аттрибуте. У групи радио дугмади, само један радио дугме може се проверити одједном.
Почињемо са следећим ХТМЛ-ом и ЦСС-ом:
ХТМЛ
ЦСС
У ЦСС-у испод, користио сам апсолутно позиционирање да поставим радио дугмад на екран тачно тамо где желим.
#оутерВраппер видтх: 450пк; хеигхт: 90пк; паддинг: 10пк; маргин: 100пк ауто 0 ауто; радијус: 55пк; бок-схадов: 0 0 10пк 6пк #ЕАЕБЕД; бацкгроунд: #ффф; #иннерВраппер хеигхт: 100%; бордер-радиус: 45пк; оверфлов: хидден; позиција: релативна; .радио видтх: 90пк; висина: 100%; позиција: апсолутна; маргин: 0; непрозирност: 0; #ригхтРадио ригхт: 0; .радио: нот (: цхецкед) цурсор: поинтер;
Додао сам непрозирност: 0 правило .радио класе да би сакријте радио дугмад. Последње правило у блоку кода испод, курсор: показивач; приказује показивач показивача за непровјерени радио гумб, тако да корисници знају које дугме да кликну за промјену стања прекидача.
Корак 2. Додајте Скинс на Свитцх
У овом кораку додаћемо два Користим "Дан" и "Ноћ" као два стања прекидача, инспирисана Дрибббле снимком Минх Килли Ле. ХТМЛ ЦСС Тхе Са ЦСС својством поинтер-евентс можете подесити околности под којима графички елемент може бити циљани догађајима миша. Као алтернативу горе наведеном коду, два За Цхроме и друге Вебкит-базиране прегледнике, користит ћу Генерално, постоје две врсте маскирања: луминанце и алпха. У Цхромеу (од верзије 51.0.2704.103, Вин10) тренутно функционише само алфа. Ин ЦСС, Ево ЦСС-а додаје маску у позадинске слике у Вебкит прегледачима: ЦСС Користио сам За ноћну кожу створио сам прозирни круг, а преостали дио контејнера сам направио непрозирним. За дан коже, учинио сам супротно: створио је непрозирни круг са Иако још није подржан у Вебкит претраживачима, додао сам Као што можете видети горе, граница круга није баш глатка. До сакријте грубе ивице, адд а ХТМЛ ЦСС Тхе иако Дакле, уместо а СВГ слика изнад изгледа као комбинација а вхите рецтангле и а блацк цирцле. Додајте ово и још једно са црни правоугаоник и а вхите цирцле као маске за ХТМЛ који смо користили у верзији Вебкит-а. ХТМЛ Замените (или комбинујте) ЦСС код за Сада имамо две различите слике маске (ЦСС градијент и СВГ), два различита типа маске (Алпха & Луминанце), и оба Вебкит и Фирефок подршка. ЦСС
#даиСкин бацкгроунд-имаге: урл ('даи.пнг'); #нигхтСкин бацкгроунд-имаге: урл ('нигхт.пнг'); .скин видтх: 100%; висина: 100%; поинтер-догађаји: ниједан; позиција: апсолутна; маргин: 0; поинтер-догађаји: ниједан; Правило се додаје у скинове тако да догађаји клика на прекидачу могу проћи кроз њих, и дођите до радио дугмади.
Корак 3а. Додај маску (Вебкит верзија)
маск-имаге ЦСС својство, које - од писања овог поста - ради само са -вебкит префикс у Вебкит прегледачима. Тхе маск-имаге имовина вам дозвољава одредите слику који ће се користити као маска.алпха и луминанце су вредности маск-типе својство.#нигхтСкин бацкгроунд-имаге: урл ('нигхт.пнг'); тип маске: алфа; / * прозирни круг са преосталим делом непрозиран * / -вебкит-маск-слика: радијални градијент (круг на 45пк 45пк, ргба (0,0,0,0) 45пк, ргба (0,0,0,1) 45пк) ; / * Када је дан изабран скин * / #лефтРадио: цхецк ~ # нигхтСкин маск-типе: алпха; / * непрозиран круг са преосталим делом транспарентан * / -вебкит-маск-слика: радијални градијент (круг на 405пк 45пк, ргба (0,0,0,1) 45пк, ргба (0,0,0,0) 45пк) ; -вебкит-маск-имаге за креирање почетне слике маске. Његова вредност користи радијални градијент () ЦСС функција која се користи за креирање слике из унапред дефинисаног облика, радијалног градијента и центра градијента.радијални градијент () функцију, а остатак је учинио транспарентним.маск-типе за ЦСС за будућу референцу.
#свитцхБтнОутлине видтх: 90пк; висина: 100%; бордер-радиус: 45пк; бок-схадов: 0 0 2пк 2пк сива, 0 0 10пк сива; поинтер-догађаји: ниједан; позиција: апсолутна; маргин: 0; / * Поставите #свитцхБтнОутлине на десни крај када је изабрана кожа дана * / #лефтРадио: цхецк ~ # свитцхБтнОутлине ригхт: 0;
Корак 3б. Додај маску (верзија Фирефока)
маск-имаге ЦСС својство је заправо а лонгханд проперти, и то је део скраћене имовине маска који вам омогућава да одредите слику која ће се користити и као маска. Док маск-имаге још није подржан у Фирефок-у, маска је.маска својство треба да прихвати слику која је креирана са радијални градијент () ЦСС функционише као вредност, баш као и маск-имаге још увек нема подршке за Фирефок.радијални градијент () Користимо СВГ слику као слику маске са типом маске луминанце.
#нигхтСкин користили смо у Вебкит верзији са следећим кодом. И завршили сте.#нигхтСкин бацкгроунд-имаге: урл ('нигхт.пнг'); тип маске: осветљеност; маска: урл (#лефтСвитцхМаск); #лефтРадио: цхецкед ~ # нигхтСкин маск-типе: луминанце; маска: урл (#ригхтСвитцхМаск); Проверите Демо
