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

Пример:

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:

<dl class="sticky-list">
    <dt>A</dt>
    <dd>Alexander</dd>
	<dd>Alphabet</dd>
    <dd>Atuin</dd>
	<!-- ... -->
    <dt>S</dt>
    <dd>Sticky</dd>
	<dd>Spisok</dd>
</dl>

<dd>Alexander</dd>

<dd>Alphabet</dd>

<dd>Atuin</dd>

<dd>Sticky</dd>

<dd>Spisok</dd>

</dl>

CSS:

.sticky-list {
    display: grid;
	background: #FFF;
	grid-template-columns: 4px 1fr;
	margin: 8px;
	color: #000;
	height: 280px;
	border: 4px solid #BFE2FF;
	border-radius: 10px;
	overflow-y: auto;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.1);
}
.sticky-list dt {
	position: sticky;
	top: 10px;
	left: 10px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 18px;
	font-family: Verdana, sans-serif;     
	border-radius: 20px;
	color: #FFF;
	grid-column: 1;
	background: #337AB7;
	margin-top: 12px;
	border: 4px solid #BFE2FF;
}
.sticky-list dd {
	grid-column: 2;
	font-size: 16px;
	font-family: Verdana, sans-serif;    
	line-height: 22px;
	margin-left: 54px;
	position: relative;
	top: -10px;
}
.sticky-list dd:last-child {
    padding-bottom: 20px;
}
.sticky-list dt + dd {
    margin-top: 28px;
}

.sticky-list {

display: grid;

background: #FFF;

grid-template-columns: 4px 1fr;

margin: 8px;

color: #000;

height: 280px;

border: 4px solid #BFE2FF;

border-radius: 10px;

overflow-y: auto;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.1);

}

.sticky-list dt {

position: sticky;

top: 10px;

left: 10px;

width: 36px;

height: 36px;

display: flex;

align-items: center;

justify-content: center;

font-weight: bold;

font-size: 18px;

font-family: Verdana, sans-serif;

border-radius: 20px;

color: #FFF;

grid-column: 1;

background: #337AB7;

margin-top: 12px;

border: 4px solid #BFE2FF;

}

.sticky-list dd {

grid-column: 2;

font-size: 16px;

font-family: Verdana, sans-serif;

line-height: 22px;

margin-left: 54px;

position: relative;

top: -10px;

}

.sticky-list dd:last-child {

padding-bottom: 20px;

}

.sticky-list dt + dd {

margin-top: 28px;

}

Пример:

HTML:

CSS:

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

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