CSS Дизайн и FrontEnd

В этой статье мы создадим кнопку мобильного меню на чистом CSS, без картинок, svg вектора и другой ерунды. Кнопка открытия бокового меню для мобильной версии сайта. Универсальная кнопка, которая подойдет для раскрытия бокового меню сайта в адаптивной и мобильной верстке.

В этой статье разберем процесс создания мобильного меню с плавным выездом слева из-за границы окна на Jquery, JS, CSS и HTML. Меню будет адаптивно, то есть будет возможность применить его и в версии для ПК и планшетов. Ширину для ПК установим примерно в 30% от ширины экрана.

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

Украсить сайт можно с помощью необычного UI решения "Эффект матового стекла" веб-дизайна при помощи HTML и CSS (ну и немного JS).

Сегодня мы посмотрим на уже не новую, но до сих пор актуальную тенденцию веб-дизайна, это цветные градиенты и цветные тени для них. Она немного отличается от классического Flat или по-другому плоского минималистичного дизайна, который используют уже очень долго.

Adobe XD - популярный инструмент UI/UX веб-дизайна и прототипирования пользовательских интерфейсов. Вы изучите все основные функции этого мощного приложения в формате ускоренного курса, создавая при этом пользовательский интерфейс для вымышленного туристического бизнеса.

Заводская версия Bootstrap 4 является достаточно объемной и зачастую там присутствует огромное количество классов которые не используются в вашем проекте. Поэтому я уже очень давно урезала в ней стили и использую версию поменьше.