Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Короткий Урок: Створення чекбоксів і радіокнопок з CSS3

by
Length:LongLanguages:

Ukrainian (українська мова) translation by Andy Yur (you can also view the original English article)

Ви коли небудь замислювалися, як стилізувати чекбокси і радиокнопки, при цьому не використовуючи JavaScript? Ви це можете завдяки CSS3 ! Ось що ми збираємося зробити в цьому уроці:

Якщо ви шукаєте графіку для елементів інтерфейсу, погляньте на UI набори доступні на Envato Elements. В іншому випадку, прихопіть чашечку кави і давайте починати наш урок!

1. Розуміння Процесу

Рекомендоване читання: 30 CSS селекторів Які Ви Повинні Пам'ятати

Для тих хто відчуває себе впевнено у використанні CSS і кому потрібен тільки легкий поштовх у правильному напрямку, ось найважливіший CSS рядок з усього уроку:

Тепер для тих, хто відчуває, що їм цього мало, і треба побільше інформації, не боїмося, читаємо далі!

Добре, давайте повернемося до нашої теми. Так що ж ми будемо робити? Завдяки відмінному псевдоселектору CSS3 - :checked, ми можемо вказати на елемент в залежності від його статусу відзначений - не зазначено. Потім, ми можемо використовувати + суміжний селектор з CSS2.1, що б вказати на елемент наступний за чекбоксів або радіокнопкою, ніж в нашому випадку є label.

2. Записуємо Наш HTML-код

Тепер ми почнемо створювати наші HTML і СSS файли (хоча може ви віддаєте перевагу іншому стиль) і приступаємо до роботи. Я сподіваюся, ви знаєте як це робити, так, що ми не будемо зупинятися на цьому докладно.

Я покажу вам техніку тільки для випадку чекбокса, щоб направити вас на "шлях істинний", а, для випадку радиокнопки, процес буде такий же, і крім того, в исходниках все є.

Добре, давайте вже почнемо, ми можемо вже? Ми почнемо з створення нашого чекбокса, за яким слідує тег label.

Тепер, на випадок, якщо ви мало знаєте про тег <label> , ви повинні зв'язати input і label, для того, що б ви могли взаємодіяти з чекбоксів через label. Це робиться за рахунок використання, for="" і ID для чекбокса.

Я також додам <span> в label, що є моїм індивідуальним перевагою, але вам все стане зрозуміліше на 3 кроці.

3. А для чого все це: CSS

Ось тут у нас починається найцікавіше. Перше, що ми робимо, що є основою для цього уроку, ми приховуємо стандартний чекбокс.

Тепер коли ми це зробили, ми можемо створити стиль для label, а точніше для span, який знаходиться у нас в label. Я роблю це, що б у мене було більше контролю над становищем чекбокса. Без цього вам би довелося звертатися до фонового зображення в label, і довелося б повозитися з його позиціонуванням.

Добре, тепер давайте, я вам поясню швиденько, що ми тут робимо. В першу чергу, зверніть увагу на фонове зображення. У мене для нього є маленький спрайт (об'єднаний набір картинок), тому все, що я повинен зробити - прописати положення для фонового зображення в span. Сам span задає точну ширину і висоту для кожного елемента в спрайт, таким чином, стає легше ставити кожен стан.

Our sprite sheet
Наш спрайт лист

Далі решта CSS, відповідно за моїм стилем. Це більше для краси і відповідає моєму смаку або цього дизайну.

4. Запускаємо в Роботу

Залишилося трохи роботи, давайте закінчимо з цим. Все що вам залишилося, це прописати стан для елемента input, на випадок імзененія стану на - "відзначений" (checked), і зокрема для hover. Це дуже просто, погляньте!

Зауважте, оскільки я використовував спрайт, все що мені потрібно зробити, це змінити положення фонового зображення. Так само зауважте, що, все що мені потрібно було, що б змінити відображення вмісту span в label, коли ви "відзначаєте" чекбокс / радіокнопку, це ісполользовать псевдоселектор CSS3 - :checked.

Невелике Зауваження по підтримки браузера

Псевдоселектори підтримуються майже у всіх браузерах, але бувають деякі виключення, при цьому резервні відображення - цілком пристойні:

Can I use data for pseudo selectors
Can I Use - можливість використання псевдоселекторов.
IE9 on Windows 7
Резервний варіант: IE9 на Windows 7

Питання з підтримкою :checked в старих браузерах використовуваних в мобільних додатках не зовсім ясний. Наприклад, Mobile Safari для iOS6 його не підтримує.

Висновок

Отже, ми все зробили, вірно? Давайте звіримося. Спочатку код для HTML:

У вас все так же? Не забудьте додати <span>! Коли ви будете експериментувати з цим самостійно, я вкрай рекомендую знайти вам новий або інший спосіб, зробити цю частину. Я із задоволенням подивлюся на ваші більш ефективні варіанти. Тепер звіримо CSS:

Все на місці? Відмінно. Пам'ятайте, що стилізація, в даному випадку, відповідає створеним мною демо файлів. Я пропоную вам написати ваш власний стиль, і поекспериментувати з розміщенням і відображенням елементів.

На закінчення, найважливіше, що ви повинні винести з цього уроку - це мой перший рядок CSS, який я привів на самому початку:

За допомогою цього, можна створити цілий набір різних речей. Можливості :checked йдуть далі, ніж використання його для чекбоксів і радіокнопок в формах, але я пропоную вам поекспериментувати на цю тему самостійно. Ось вам варіанти для експериментів:

  • Додати 2x спрайт для РЕТІНА екранів
  • Використовувати SVG замість растра

Я сподіваюся вам сподобалася ця коротка стаття, і ще я сподіваюся, що ви розвинете або поліпшите, то, що ви тут дізналися!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.