8 способів зробити списки привабливими за допомогою стилів

Сьогодні немає практично жодного сайту, де б не використовувалися HTML списки (

- Невпорядкований перелік). У цьому уроці я покажу вам 8 відмінних способів, що дозволяють зробити звичайні нудні html-списки привабливими. Ми лише додамо кілька простих CSS технік і наші списки не лише набудуть приголомшливого вигляду, але й кількох додаткових можливостей.

А тепер подивіться демо-версію, щоб побачити, що ж ми з вами створюватимемо.

Виглядають набагато краще, чи не так? І ви можете створити такі списки за допомогою простого CSS коду. Хочете знати як? Читайте!

Список #1: Проста система навігації

Найчастіше списки використовуються під час створення навігаційного меню. Код HTML/CSS прикладу дозволяє створити просту, навіть трохи скромну, але привабливу систему навігації.

HTML

CSS

Список #2: Використання різного шрифту при нумерації

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

HTML

CSS

Список #3 : Зображення-маркери

Ви легко можете змінити вигляд маркерів неупорядкованого списку, вказавши одне зі стандартних значень, але можна як маркерів використовувати і зображення. Таке рішення допоможе зробити ваші списки оригінальнішими. А ось і код:

HTML

CSS

Список #4: iPhone-стиль

Цей список взято зі статтіthe iPhone Contacts App, створений за допомогою CSS та jQuery. Так виглядають списки на iPhone. Дуже привабливо, чи не так? Бажаєте такий на свій сайт?

HTML

CSS

Список #5 : Вкладені списки

Вкладені списки можуть бути надзвичайно корисними і виглядають красиво. Змінивши третю техніку (Зображення-маркери) ми можемо створити «розширений список». Звичайно ж не без допомоги jQuery:

HTML

CSS

Список #6: Римська нумерація + багаторядковий тип

За замовчуванням у списку використовується стандартна нумерація (1, 2, 3, 4 тощо). Змінивши значення CSS, можна встановити інший тип нумерації, наприклад, римський. Так само за замовчуванням, нумерація та маркери розміщуються поза списком (відмінний приклад тому - наш список під номером 2). Але і це можна виправити, лише потрібно змінити значення list-style-position властивості на inside.

HTML

CSS

Список #7 : Лінійний список, в якому пункти перераховуються через кому

Зазвичай списки використовуються для відображення кількості чогось і відображаються у вигляді стовпчика. Але що робити, якщо вам потрібен лінійний список? Це досягається шляхом зміни значення display властивості на inline. Але якщо вам раптом потрібно вбудувати список у текст, то за правилами, пунктики списку повинні бути розділені комою. Як цього досягти? А, просто, за допомогою елемента символічного коду.

HTML

CSS

Список #8 : Навігаційне меню, що обертається

Ось і остання техніка, для роботи якої знадобиться CSS3 (підтримується лише останніми версіями Firefox, Safari та Chrome). При наведенні курсору на один із елементів блокувключається ефект - обертання. Звичайно не найзручніший спосіб, але дуже гарний.

HTML

CSS

Висновок

Як бачите, реально створити унікальні речі зі звичайного html-списку. І це силами CSS. Дуже радий, якщо ви дізналися багато цікавого для себе.

Даний урок підготовлений для вас командою сайту.

5 останніх уроків рубрики "CSS"

Смішні ефекти для літер

Невеликий ефект з інтерактивною анімацією букв.

Реалізація кумедних підказок

Невеликий концепт кумедних підказок, які реалізовані на SVG та anime.js. Крім особливого стилю у прикладі реалізовано анімацію та трансформацію графічних об'єктів.

Анімовані літери

Експеримент: анімовані букви SVG на базі бібліотеки anime.js.

Сонцезахисні окуляри від першої особи

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

Навігація, що розкривається

Експериментальний скрипт навігації, що розкривається.