Оформление списка, сгруппированного по алфавиту

Как создать такой список описано в теме: "Группировка списка по первым буквам на PHP". В этой рассмотрен вариант его оформления с "залипанием" буквы алфавита

Пример:

3
3D hover-эффект ориентированный на направление курсора
3D волна на фотографии
3D карусель Cloud 9 Carousel
3D карусель изображений
3D панорама на JS
3D слайдер с перспективой
3D слайдер-карусель
3D табы с картинкой и описанием
3D текст на CSS
3D-карусель управляемая мышью
4
4 анимированных абстрактных фона
F
Fancybox 3 с темой оформления
H
Hover-эффекты для изображений
Q
QR-код для ссылки на страницу
S
SVG иконки популярных брендов
W
WebGL слайдер фотографий
А
Автозаполнение для поля input
Автоматическое поздравление с праздниками
Адаптивная reCAPTCHA
Адаптивная сетка для новостных блоков
Адаптивная таблица на CSS
Адаптивная таблица на Flexbox
Адаптивное видео для фона блока
Адаптивное мега-меню на jQuery
Адаптивные вкладки openTabby
Адаптивный шаблон для проигрывателя jPlayer
Аккордеон на CSS
Анимационные эффекты при прокрутке страницы
Анимация SVG-графики при прокрутке страницы
Анимация букв у заголовков при прокрутке страницы
Анимация фона с помощью изображения на JS
Анимация элементов при прокрутке — WOW.js
Анимированное изображение хранилища данных
Анимированное соединение точек
Анимированные SVG-линии
Анимированные картинки на CSS детской тематики
Анимированные полноэкранные модальные окна
Анимированные рамки для блоков на CSS
Анимированные фоны для блоков и страниц — ч.1
Анимированные фоны для блоков и страниц — ч.2
Анимированный Tab Bar
Анимированный переход между пунктами меню
Анимированный переход между страницами
Анимированный разделитель для секций на CSS
Анимированный эффект смены фотографий на JS
Б
Бесконечный зум многоугольников
Бесконечный коридор на JS
Бесшовные графические фоны
Бесшовные светлые фоны
Блок-секция для лицензий
Блок-секция с мороженным
Блоки из фигур на CSS
Блоки с разноцветными пузырями
Блокирование элементов сайта при включенном AdBlock на CSS
Блокировка вредоносных ботов
Блочное меню со сменой фона
Боковое меню с иконками на CSS
Броуновское движение на JS
В
Варианты наложения текста на изображение
Варианты оформления jQuery UI Slider
Варианты установки SVG иконки
Векторные стрелки на SVG
Версия для печати без использования отдельной страницы
Вертикальная прокрутка fakeScroll
Вертикальные вкладки
Вертикальные неоновые линии
Вертикальный аккордеон для фотографий
Вертикальный таймлайн на CSS
Визуализация нейронной сети
Волна из частиц на JS
Вращающаяся сфера на JS
Вращающиеся окружности
Вращающиеся фигуры на JS
Вращающийся земной шар
Вращающийся по окружности слайдер
Все иконки FontAwesome 5
Всплывающее окно при закрытии страницы
Всплывающие пузырьки на CSS
Всплывающие пузырьки на JS
Всплывающие фото-подсказки
Вывод текста по окружности
Выдвигающееся описание для фотографий
Выдвижная боковая панель на CSS
Выделение лиц на фотографии
Выравнивание блоков по высоте
Г
Галерея фотографий из ромбиков на CSS
Гамбургер SVG-иконки
Гамбургер иконки с анимированными переходами
Гармошка из фотографий на jQuery
Геолокация на JavaScript
Геолокация на PHP
Гирлянда для шапки сайта
Глассморфные кнопки
Горизонтальные вкладки с анимацией
Горизонтальный поворот страницы
Горизонтальный таймлайн
Градиентный фон с ховер-эффектом
Градиенты для блоков
Группа из 4-х секций
Группировка списка по первым буквам на PHP
Д
Двигающееся за курсором существо
Двигающиеся по секции кольца
Двигающийся по секции мяч
Движущиеся облака на CSS
Движущиеся частицы на JS
Движущиеся частицы на фотографиях
Движущийся туман на CSS
Движущийся цветок на CSS
Двумерное дерево на JS
Девушка и бабушка на диване
Диагональная карусель фотографий
Динамически изменяющееся поле ввода текста
З
Закладки для страниц сайта
Замедленная загрузка изображений
Замена блока на фотографию при наведении курсора
Запоминание данных формы
Запрет отправки формы пока не установлен флажок
Звуковые эффекты при клике или наведении
И
Изменение высоты textarea в зависимости от кол-ва текста
Иконки на фоне кляксы
Имитация книги из фотографии
Индикатор прокрутки страницы
К
Калькулятор букв и других символов
Капли воды на CSS
Капля случайной формы на JS
Карта субъектов РФ в SVG
Карточки в виде стикеров для заметок
Карточки для заметок, комментариев или отзывов
Карусель для фотографий
Карусель только для малых экранов
Качающиеся фоторамки на CSS
Кнопка "вверх" и варианты ее оформления
Кнопки закрытия на CSS
Колода фотографий
Корова-бабочка на CSS
Кот идущий на передних лапах
Красивый эффект смены 2-х фотографий
Красочный фон турбулентности на JS
Креативный эффект для секции с текстом
Кролик пускающий мыльные пузыри
Круговая диаграмма на JS
Круговая пульсация на элементах
Л
Летающие привидения
Лоадеры и спиннеры на CSS
Логотипы на CSS
М
Маска для ввода номера телефона
Медиа-плейер Plyr для HTML5, YouTube и Vimeo
Миньон на CSS
Многоуровневое вертикальное меню
Многоуровневый аккордеон
Мобильный Tab Bar с вкладками
Модальная картина на CSS
Модальное окно для контактов
Модальное окно по таймеру
Модальные окна на CSS
Модальные окна наоборот
Мозайка изображений или контента
Мыльные пузыри для секции
Мыльные пузыри на JS
Н
Набор анимаций animate.css
Навигационное меню для лендинга
Наклонная галерея
Настраиваемое контекстное меню на элементе
Неоновые волны на JS
Неоновый текст на CSS
Нестандартная защита от копирования
Новогоднее украшение для логотипа
Новогодние елки на CSS
Новогодняя кнопка "вверх"
Новогодняя открытка
Новогодняя секция
Новостной слайдер
Ночная тема для сайта
О
Определение и склонение городов по падежам
Определение изменения размера элемента
Оригинальный фон из точек
Открытие и закрытие контента на jQuery
Отложенная загрузка изображений
Отложенная загрузка контента
Отложенная загрузка Яндекс карты и виджета ВК
Оформление блоков с иконками
Оформление горизонтальных линий HR
Оформление кнопок на CSS
Оформление ползунка input type="range"
Оформление секции с фотографией
Оформление списка, сгруппированного по алфавиту
Оформление списков ul li для информационных блоков
Оформление ссылок внутри контента
Оформление ссылок внутри текста
Оформление ссылок на социальные сети
Оформление текста в SVG
Оформление хлебных крошек
Оформление цитат на CSS
П
Падающие сферы на JS
Падающий снег на CSS
Параллакс библиотека Ukiyo
Параллакс подвал
Параллакс эффект simpleParallax
Параллакс-эффекты с библиотекой parallax.js
Переключатель checkbox с фоновым изображением
Перелистывание изображений при скроллинге
Перелистывающиеся страницы с фотографиями
Печатающий кот Bongo Cat
Печатающийся текст на jQuery
Плавное переключение радиокнопок
Пламенная бездна на JS
Плеер для аудио-отзывов
Плейлисты для плеера Plyr
Плюс и минус для поля input
Поверхность океана
Подсветка блоков курсором мыши
Поздравление с 8 марта
Показ определенных блоков при изменении формы
Полезные ресурсы для работы с изображениями
Полезные решения на CSS
Ползунок диапазонов jQuery UI Slider
Полноэкранное мобильное меню
Полноэкранный просмотр изображений
Пончиковая диаграмма на CSS
Постер из разных фотографий на CSS
Пошаговый слайдер
Появляющиеся неоновые полигоны
Прелоадер, его создание и варианты оформления
Проверка показа рекламы на сайте
Прокрутка страницы к нижнему краю элемента
Простое горизонтальное меню на CSS
Простое модальное окно на JS
Пукающая прокрутка
Пульсирующий цветок на CSS
Р
Радиокнопки — карточки
Радиокнопки с иконками
Развевающийся флаг на JS
Разделенные изображения
Разделители для разноцветных секций
Разлетающиеся частицы при нажатии на кнопку
Размер шрифта в зависимости от ширины блока
Размытые мерцающие окружности
Рамки для фонового видео
Рейтинг со звездочками на CSS
Рентгеновские лучи на JS
С
Сборник SVG иконок Feather
Сборник решений и функций на jQuery
Сверкающие звезды на WebGL
Свинка Пеппа на CSS
Сдвиг частей фотографии в разные стороны
Сдвигающийся плейсхолдер
Секция для тарифов на CSS
Секция с заголовком и фотографией
Секция с овалом
Секция с падающим снегом на JS
Секция с фотографиями и раскрывающимся их описанием
Секция с шестиугольными фотографиями
Секция-галерея на GSAP
Секция-слайдер с четырьмя фотографиями
Сетка из шестиугольников на CSS
Синхронный скролл двух блоков
Слайдер "До" и "После"
Слайдер для radio кнопок
Слайдер для смены двух фотографий
Слайдер с диагональной сменой фотографий
Слайдер с меняющимися фото на CSS
Слайдер с точками
Слайдер с фиксированным текстом
Слайдер фоновых изображений Vegas
Слайдер-презентация с красивым эффектом
Следующая за курсором клякса
Следующая за курсором разноцветная лента
Следящие за курсором глаза
Случайные геометрические фоны
Случайные фрактальные окружности
Смена слайдов мышкой или пальцем на Bootstrap 3
Снежинки для сайта
Снежный шар с котом
Создание сообщения об использовании куки (cookie)
Солнечные лучи на JS
Список ul li в 3d варианте
Стилизованная рабочая форма обратной связи
Стрелки на CSS
Сценические волны на JS
Т
Таймер бездействия посетителя на странице
ТВ-рамки для видео из YouTube
Текст на размытом фоне
Тени для блоков
У
Увеличение подписчиков группы в виджете ВК
Уголки и рамки на CSS
Установка карты на API 2ГИС
Установка флажка checkbox карандашом
Ф
Фиксация блока при прокрутке
Фиксация сайдбара при прокрутке вверх и вниз
Фиксированное гамбургер-меню
Фиксированные снежинки на CSS
Фиксированный фон в секции
Фильтр для фотографий на WebGL
Фильтр контента по буквам на jQuery
Фильтрация и сортировка элементов
Флаги стран мира на SVG
Фон с движущимися трапециями
Фон с появляющимися звездочками
Фон с появляющимися цветами
Фон с разноцветными существами
Фон с рандомными окружностями
Фоновое изображение из текста
Фото в смартфоне на CSS
Х
Ховер-эффекты с наложенными друг на друга фотографиями
Ц
Целующиеся смайлики на CSS
Цыпленок с вращающимися звездами
Ч
Частичное увеличение изображения на CSS
Ш
Шкала сердцебиения на SVG и CSS
Э
Электрический паук на JS
Эффект водной ряби на фоновом изображении
Эффект волны на изображении
Эффект дождя на JS
Эффект дождя на стекле
Эффект искажения изображения на JS
Эффект матрицы на фотографиях
Эффект метели на JS
Эффект размытия изображения на JS
Эффект старого фильма для фотографии на CSS
Эффект фонарика на CSS и jQuery
Эффективный способ размещения видео с YouTube
Эффекты смены двух фотографий на CSS

HTML:

CSS:

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!