ЦСС3 Туториал Направите елегантан дугме за укључивање / искључивање
Коришћење дугмета је, до сада, преферирани начин за интеракцију са електронским стварима; као што су радио, ТВ, музички плејер, па чак и паметни телефон који има функцију гласовне команде и даље треба бар један или два физичка дугмета.
Штавише, у овом дигиталном добу дугме је еволуирао иу свом дигиталном облику, што га чини интерактивнијим, динамичнијим и реалнијим за прављење, у поређењу са физичким дугметом.
Дакле, овај пут ћемо креирати гладак и интерактивни гумб који се заснива на овом одличном дизајну у Дрибббле-у користећи само ЦСС.
Па, хајде да почнемо.
ХТМЛ
Почећемо са дугметом тако што ћемо поставити следећу ознаку на наш ХТМЛ документ. То је стварно једноставно, дугме би се заснивало на анцхор тагу, такође имамо а спан поред њега да бисте креирали индикаторску лампицу, а онда су заједно омотани унутар ХТМЛ5 сецтион таг.
& # кФ011;
Ево како прво изгледа наше дугме.
Басиц Стилинг
У овом делу ћемо почети да радимо на Стилови.
Прво наносимо ову тамну позадину из Суптилног узорка на документ тијела, и центрирамо сецтион. Онда ћемо уклонити и точкасте оутлине Након што се : фоцус и : ацтиве линк.
тело позадина: урл ('имагес / мицро_царбон.пнг'); сецтион маргин: 150пк ауто 0; видтх: 75пк; хеигхт: 95пк; позиција: релативна; тект-алигн: центар; : ацтиве,: фоцус оутлине: 0; Коришћење прилагођеног фонта
За икону дугмета користићемо прилагођени фонт из програма Фонт Авесоме, а не слике. На тај начин ће икона бити лако стилизована и моћи ће да се скали кроз стилску табелу.
Преузмите фонт, похраните датотеке фонта (еот, вофф, ттф и свг) у фонтови затим поставите следећи код на ваш стилски лист да бисте дефинисали нову фамилију фонтова.
@ фонт-фаце фонт-фамили: "ФонтАвесоме"; срц: урл ("фонтс / фонтавесоме-вебфонт.еот"); формат: урл ("фонтс / фонтавесоме-вебфонт.еот? #иефик") формат ('еот'), урл ("фонтс / фонтавесоме-вебфонт.вофф") формат ('вофф'), урл ("фонтс / фонтавесоме- вебфонт.ттф ") формат ('труетипе'), урл (" фонтс / фонтавесоме-вебфонт.свг # ФонтАвесоме ") формат ('свг'); фонт-веигхт: нормал; фонт-стиле: нормал; 
Тхе икона снаге које нам је потребно за ово дугме је представљено у Уницоде броју Ф011; ако пажљиво погледате горе наведену ХТМЛ ознаку, ставили смо овај нумерички карактер & # кФ011; унутар ознаке сидра, али пошто нисмо дефинисали обичај породица фонтова у стилу дугмета, икона још није исправно приказана.
Додатна литература: Уницоде и ХТМЛ: знакови документа
Стилинг тхе Буттон
Пре свега, морамо дефинисати обичај породица фонтова за дугме.
Наше дугме ће бити круг, можемо постићи круг ефекат користећи бордер-радиус и поставите вредност на бар половину дугмета видтх.
Пошто користимо фонт за икону, лако можемо да подесимо цолор и додај тект-схадов и за икону у стилу.
Следеће, такође ћемо направити ефект за дугме. Овај ефекат је прилично лукав. Прво, морамо да се пријавимо бацкгроунд-цолор: ргб (83,87,93); за базу боја дугмета, онда додамо до четири слоја бок-схадовс.
фонт-фамили: "ФонтАвесоме"; боја: ргб (37,37,37); текст-сенка: 0пк 1пк 1пк ргба (250,250,250,0.1); фонт-сизе: 32пт; дисплеј блок; позиција: релативна; тект-децоратион: ноне; бацкгроунд-цолор: ргб (83,87,93); бок-схадов: 0пк 3пк 0пк 0пк ргб (34,34,34), / * 1ст Схадов * / 0пк 7пк 10пк 0пк ргб (17,17,17), / * 1нд Схадов * / инсет 0пк 1пк 1пк 0пк ргба , 250, 250, .2), / * 3. Схадов * / инсет 0пк -12пк 35пк 0пк ргба (0, 0, 0, .5); / * 4тх Схадов * / ширина: 70пк; хеигхт: 70пк; граница: 0; радијус: 35пк; тект-алигн: центар; лине-хеигхт: 79пк;
Постоји и већи круг у спољашњем делу дугмета и ми ћемо користити :пре него што псеудо-елемент умјесто да додаје додатну ознаку.
а: пре цонтент: ""; видтх: 80пк; хеигхт: 80пк; дисплеј блок; з-индекс: -2; позиција: апсолутна; бацкгроунд-цолор: ргб (26,27,29); лево: -5пк; топ: -2пк; гранични радијус: 40пк; бок-схадов: 0пк 1пк 0пк 0пк ргба (250,250,250,0.1), инсет 0пк 1пк 2пк ргба (0, 0, 0, 0.5);
Додатна литература: ЦСС: пре и после псеудо-елементи (Хонгкиат.цом)
Сигнална лампица
Испод дугмета се налази сићушно светло за означавање статуса укључености и искључености. У наставку, примењујемо црвену боју за светло јер је снага у почетку искључена, додајемо бок-схадов да опонашају блистав ефекат светлости.
а + спан дисплаи: блоцк; видтх: 8пк; хеигхт: 8пк; бацкгроунд-цолор: ргб (226,0,0); бок-схадов: инсет 0пк 1пк 0пк 0пк ргба (250,250,250,0.5), 0пк 0пк 3пк 2пк ргба (226,0,0,0,5); бордер-радиус: 4пк; јасно: обоје; позиција: апсолутна; боттом: 0; лево: 42%;
Ефекат
У овом тренутку наше дугме почиње изгледати добро и потребно је само додати неке ефекте на њега, на примјер, када се дугме кликне, желимо да гумб изгледа као да је притиснут и задржан.
Да би се постигао ефекат, прво бок-схадов у дугмету ће бити нулта и позиција ће бити спуштена мало. Такође морамо мало подесити интензитет осталих трију сенки да би одговарали положају дугмета.
а: ацтиве бок-схадов: 0пк 0пк 0пк 0пк ргб (34,34,34), / * 1ст Схадов * / 0пк 3пк 7пк 0пк ргб (17,17,17), / * 2нд Схадов * / инсет 0пк 1пк 1пк 0пк ргба (250, 250, 250, .2), / * 3. Схадов * / инсет 0пк -10пк 35пк 5пк ргба (0, 0, 0, .5); / * 4тх Схадов * / бацкгроунд-цолор: ргб (83,87,93); топ: 3пк;
Штавише, када се дугме кликне, оно треба да остане притиснуто, а икона треба да „засија“ да би показала да је напајање укључено.
Да би се постигао такав ефекат, циљаћемо на дугме користећи : таргет псеудо-класа, затим промените боју иконе на белу и додајте а тект-схадов такође са белом бојом.
а: таргет бок-схадов: 0пк 0пк 0пк 0пк ргб (34,34,34), 0пк 3пк 7пк 0пк ргб (17,17,17), инсет 0пк 1пк 1пк 0пк ргба (250, 250, 250, .2) , инсет 0пк -10пк 35пк 5пк ргба (0, 0, 0, .5); бацкгроунд-цолор: ргб (83,87,93); топ: 3пк; цолор: #ффф; текст-сенка: 0пк 0пк 3пк ргб (250,250,250);
Додатна литература: Коришћење: таргет псеудо-класа
Такође морамо да прилагодимо бок-схадов у кругу изван дугмета, као што следи.
а: ацтиве: бефоре, а: таргет: бефоре топ: -5пк; бацкгроунд-цолор: ргб (26,27,29); бок-схадов: 0пк 1пк 0пк 0пк ргба (250,250,250,0.1), инсет 0пк 1пк 2пк ргба (0, 0, 0, 0.5);
Светлосни индикатор ће се претворити из подразумеване црвене у зелену, како би нагласио да је напајање већ укључено.
а: таргет + спан бок-схадов: инсет 0пк 1пк 0пк 0пк ргба (250,250,250,0.5), 0пк 0пк 3пк 2пк ргба (135,187,83,0.5); бацкгроунд-цолор: ргб (135,187,83);
Транситион Еффецт
На крају, да би ефекат дугмета био глатко, применићемо и следећи ефекат прелаза.
Овај исечак испод ће посебно додати прелазак на цолор имовине тект-схадов за 350мс у елементу сидра.
а транситион: цолор 350мс, тект-схадов 350мс; -о-транзиција: боја 350мс, тект-схадов 350мс; -моз-транситион: цолор 350мс, тект-схадов 350мс; -вебкит-транситион: цолор 350мс, тект-схадов 350мс;
Овај други исечак испод ће додати прелаз за боја позадине и бок-схадов у светлосном индикатору.
а: таргет + спан транситион: бацкгроунд-цолор 350мс, бок-схадов 700мс; -о-транзиција: позадинска боја 350мс, бок-схадов 700мс; -моз-транзиција: позадинска боја 350мс, бок-схадов 700мс; -вебкит-транситион: бацкгроунд-цолор 350мс, бок-схадов 700мс;
Крајњи резултат
Прошли смо кроз све стилове који су нам потребни, сада можете видјети коначни резултат уживо, као и преузети изворну датотеку са линкова испод.
- Демо
- Довнлоад Соурце
Бонус: Како га искључити
Ево бонуса. Ако сте пробали дугме из горње демо верзије, приметили сте да се дугме може кликнути само једном, а то је да га укључите, па како да га искључимо?.
Нажалост, морамо то да урадимо са јКуери-ом, али је и то заиста једноставно. Испод је јКуери код који нам је потребан.
$ (доцумент) .реади (фунцтион () $ ('# буттон')) цлицк (фунцтион () $ (тхис) .тогглеЦласс ('он'););); Исјечак изнад ће додати класу ОН у сидро, а ми смо користили тогглеЦласс функција из јКуери да бисте је додали. Дакле, када #буттон јКуери ће проверити да ли је класа ОН додата или не: када није, јКуери ће додати класу, а ако је додата, јКуери ће уклонити класу..
Белешка: Не заборавите да укључите јКуери библиотеку.
Сада морамо мало промијенити стил. Једноставно замените све : таргет псеудо-елемент са .на селектор класе, као што следи:
а.он бок-схадов: 0пк 0пк 0пк 0пк ргб (34,34,34), 0пк 3пк 7пк 0пк ргб (17,17,17), инсет 0пк 1пк 1пк 0пк ргба (250, 250, 250, .2) , инсет 0пк -10пк 35пк 5пк ргба (0, 0, 0, .5); бацкгроунд-цолор: ргб (83,87,93); топ: 3пк; цолор: #ффф; текст-сенка: 0пк 0пк 3пк ргб (250,250,250); а: ацтиве: бефоре, а.он: бефоре топ: -5пк; бацкгроунд-цолор: ргб (26,27,29); бок-схадов: 0пк 1пк 0пк 0пк ргба (250,250,250,0.1), инсет 0пк 1пк 2пк ргба (0, 0, 0, 0.5); а.он + спан бок-схадов: инсет 0пк 1пк 0пк 0пк ргба (250,250,250,0.5), 0пк 0пк 3пк 2пк ргба (135,187,83,0.5); бацкгроунд-цолор: ргб (135,187,83);
На крају, пробајмо га у прегледнику.
- Демо
- Довнлоад Соурце
