Главная » Уроки

Отзывчивый Аккордеон на чистом CSS

В своих статьях, я не раз уже касался темы создания блоков в стиле "аккордеон", как на чистом CSS, так и с использованием jQuery, но каждый раз возвращаюсь, ищу новые решения, экспериментирую пытаясь найти вариант одинаково хорошо работающий на всех устройствах, во всех браузерах, и был максимально понятен любому веб-мастеру, для реализации в своих новых проектах.Сегодня хочу представить очередной вариант "аккордеона". На этот раз это будет ...

Выдвигающееся боковое меню на чистом CSS

Боковые меню, выдвигающиеся по клику, в последнее время широко используются разработчиками сайтов. Самое известное, на данный момент, это конечно же меню навигации, упакованное под кнопки в стиле "гамбургер". Наверняка каждый из вас хотя бы раз встречал в интернетах сайт, на котором сбоку, справа или слева, красуется кнопа такого вида:  ☰ , при клике на которую и появляется(выдвигается) панелька с вертикальным меню.Существует масса готовых ...

Выдвигающаяся верхняя панель на чистом CSS

Наверняка вам частенько встречались на страницах сайтов, выдвигающиеся панели различного вида и расположения, высказывающие сверху, снизу, справа или слева на полном автомате, с заданным интервалом времени, или же активируемые по клику. Как правило, в таких панелях размещают скрытую с глаз пользователя до поры до времени, какую-либо дополнительную информацию, важную и не очень. Например формы подписки, виджеты соц.сетей, ссылки, теги, контактные ...

Отзывчивый аккордеон с помощью jQuery

Представляю на ваше рассмотрение очередной вариант блоков с скрытым содержанием в стиле вертикального "аккордеона", плавно раскрывающихся по клику. В интернетах можно легко найти немало интересных решений по созданию "аккордеонов", как горизонтальных так и вертикальных. Очень популярны компактные, многоуровневые меню в стиле "аккордеон", точно так же, как и раскрывающиеся панели с скрытым контентом, работающих на jQuery или на чистом CSS3. ...

Коллекция модальных окон и форм

Здравствуйте всем. Посмотрел тут на днях внимательно статистику блога и обнаружил, что больший интерес у наших интернет-трудящихся вызывают уроки и примеры по созданию модальных окон. Самыми популярными оказались решения реализации всплывающих окон без использования javascript, исключительно на чистом CSS3. За время работы у меня накопилось немало интересных решений, которые в разное время я детально расписал в развернутых статьях на страницах ...

Фиксированные подписи к изображениям

Вывод подписей к изображениям организовать можно по-разному, например используя различные hover-эффекты (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение и т.д и т.п.), или же просто, сделать их фиксированными, расположенными вне тела картинки, или непосредственно на изображении, в той или иной его части.    В данном уроке продемонстрирую несколько простейших вариантов вывода ...

Адаптивное модальное окно строго по центру

Как сделать стопроцентно адаптивное модальное окно, которое к тому же выводилось строго по центру и одинаково хорошо, без видимой ломки, смотрелось на различных типах экранов пользовательских устройств? Вопрос конечно интересный, а процесс реализации и вовсе увлекательнейший. Конечно, макет модального окна, о котором сегодня пойдёт речь, скорее резиновый, так как адаптивность, в навороченных кругах, подразумевает наличие, прописных мета-тегов ...

Адаптивные изображения с помощью CSS

В этом небольшом уроке, мы рассмотрим простейшие способы создания адаптивных изображений с помощью CSS. Существует не мало различных решений сделать изображения адаптивными, все они различаются и по сложности, и степени поддержки браузерами. Примером сложного пути реализации адаптивных картинок, является использование атрибута srcset, для которого требуется несколько изображений, больше разметки, а также зависимость от поддержки браузерами. ...

Модальное окно на HTML5, CSS3 и скрытых чекбоксах

Судя по комментариям, тема создания модальных окон довольно популярна. Я не раз уже описывал различные техники исполнения, как с помощью jQuery, так и на чистом CSS. Да и в интернетах, информации по теме предостаточно, и каждый может выбрать для себя оптимальный вариант. Меня больше интересуют решения без использования javascript, не потому-что у меня какая-то фобия к js, нет, мне просто интересны эксперименты, поиск новых возможностей связки ...

Модальный блок видео на CSS3

Наглядный пример того, как можно организовать просмотр видео в модальном блоке, исключительно средствами CSS3, без javascript и дополнительных изображений в оформлении. За основу взял модальное окно на чистом CSS, кардинально ничего менять не стал, разве что видоизменил кнопку закрытия, эффект появления и фоновою заливку.Для резинового макета модального блока использовал ширину в %. Видео поместил в встроенный div-контейнер, с параметрами ...

Модальная форма контактов на CSS3

Всем доброго времени суток! Форма обратной связи, или если по простому, контактная форма, это очень важный элемент любого сайта, созданного для людей, и тем более, она важна для блогов, где изначально подразумевается прямое общение с пользователями, посредством электроyной почты. Большинство веб-мастеров не особо заморачиваются по поводу подачи контактных форм пользователю. Чаще всего создаётся отдельная страница, на которой размещают всю ...

Аккордеон на чистом CSS работающий на скрытых чекбоксах

Предлагаю очередной вариант компактного блока "аккордеон", или если хотите, раскрывающегося меню, сформированного на чистом CSS, и работающего на скрытых чекбоксах, используя различные комбинации type="radio" и type="checkbox". Не оставляю попытки найти самое оптимальное решение, с минимальным кодом, концепт "аккордеона" на чистом CSS, без использования js, которую бы поддерживали все современные браузеры. Идея конечно не нова, вариантов ...
1 2 3 4 5
Рейтинг@Mail.ru