Тренды UX/UI дизайна на 2024 год
Bento UI — очередная дизайнерская тенденция, которая начала набирать популярность на таких платформах, как Dribbble и Behance, и была замечена миллионами дизайнеров. Однако концепция “модульного” дизайна началась с панелей управления для сайтов. Это включает в себя панели управления продажами и финансами, например PayPal, аналитику, наподобие Google Ads, и многое другое.
#ru
Bento UI — очередная дизайнерская тенденция, которая начала набирать популярность на таких платформах, как Dribbble и Behance, и была замечена миллионами дизайнеров. Однако концепция “модульного” дизайна началась с панелей управления для сайтов. Это включает в себя панели управления продажами и финансами, например PayPal, аналитику, наподобие Google Ads, и многое другое.
#ru
This media is not supported in your browser
VIEW IN TELEGRAM
Magnify Glass w/ Zoom
Изначально на картинку накладывается фильтр blur. В js создана логика, благодаря которой фильтр убирается в месте, где находится курсор пользователя.
#js
Изначально на картинку накладывается фильтр blur. В js создана логика, благодаря которой фильтр убирается в месте, где находится курсор пользователя.
#js
Как анимировать контур при помощи CSS
Загрузчики и индикаторы прогресса являются одними из наиболее широко используемых примеров в руководствах и учебниках по CSS.
Существует огромное множество способов их реализации. Возможно, некоторые подходы будут "лучше" других, но это также зависит от того, чего вы хотите добиться.
В этой статье будет показан подход, использующий анимированные пользовательские свойства, конический градиент, CSS свойство offset и эмодзи, чтобы создать анимацию скутера, мчащегося по круглой дорожке.
#css #ru
Загрузчики и индикаторы прогресса являются одними из наиболее широко используемых примеров в руководствах и учебниках по CSS.
Существует огромное множество способов их реализации. Возможно, некоторые подходы будут "лучше" других, но это также зависит от того, чего вы хотите добиться.
В этой статье будет показан подход, использующий анимированные пользовательские свойства, конический градиент, CSS свойство offset и эмодзи, чтобы создать анимацию скутера, мчащегося по круглой дорожке.
#css #ru
Задачки по Front-end - канал с задачками и тестами по JS/CSS/HTML.
На канале вы найдете:
- тесты по Javascript;
- тесты по CSS;
- тесты по HTML;
- вопросы с собеседований с решением по JS, CSS, HTML
Подписывайтесь, решайте и предлагайте свои решения: @frontquizes
На канале вы найдете:
- тесты по Javascript;
- тесты по CSS;
- тесты по HTML;
- вопросы с собеседований с решением по JS, CSS, HTML
Подписывайтесь, решайте и предлагайте свои решения: @frontquizes
Не стоит недооценивать HTML
«HTML – это просто», «Разрабатывать фронтенд проще, чем бэкенд», «После реализации бэкенда обновление UI не должно составлять труда», – за время работы в сфере веб-разработки вокруг меня то и дело звучали эти и другие аналогичные утверждения.
И очень часто они вызывали у меня грусть.
Дело в том, что бо́льшую часть времени я проводила за написанием фронтенда, включая работу с HTML, CSS и JavaScript (по факту в основном TypeScript). Когда кто-нибудь говорит мне о «простоте» моей работы, я начинаю думать, что мои навыки не представляют высокой ценности, и меня может легко заменить любой разработчик…
В статье же я решила описать свои размышления, которые рождались в течение последних двух лет во время работы с людьми из разных команд с разным опытом в HTML-разработке и фронтенд-технологиях в целом. Здесь я озвучу несколько основных своих вопросов «Почему?», сопроводив их возможными ответами.
#html #ru
«HTML – это просто», «Разрабатывать фронтенд проще, чем бэкенд», «После реализации бэкенда обновление UI не должно составлять труда», – за время работы в сфере веб-разработки вокруг меня то и дело звучали эти и другие аналогичные утверждения.
И очень часто они вызывали у меня грусть.
Дело в том, что бо́льшую часть времени я проводила за написанием фронтенда, включая работу с HTML, CSS и JavaScript (по факту в основном TypeScript). Когда кто-нибудь говорит мне о «простоте» моей работы, я начинаю думать, что мои навыки не представляют высокой ценности, и меня может легко заменить любой разработчик…
В статье же я решила описать свои размышления, которые рождались в течение последних двух лет во время работы с людьми из разных команд с разным опытом в HTML-разработке и фронтенд-технологиях в целом. Здесь я озвучу несколько основных своих вопросов «Почему?», сопроводив их возможными ответами.
#html #ru
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Responsive animated Accordion
Адаптивный анимированный аккордеон. Реализован с помощью JavaScript и CSS.
#js
Адаптивный анимированный аккордеон. Реализован с помощью JavaScript и CSS.
#js
This media is not supported in your browser
VIEW IN TELEGRAM
Animated BottomBar
Набор из разных анимаций перехода, применяемых к элементам навигационного меню.
#js
Набор из разных анимаций перехода, применяемых к элементам навигационного меню.
#js
Как при помощи JavaScript определить, включен ли Caps Lock
Кто угодно может нажать Caps Lock в любой момент времени и не заметить этого. Вводя обычный текст, пользователи легко обнаруживают, что Caps Lock включен. Но когда вводится пароль, проблема не столь очевидна. В результате пароль не принимается, и это раздражает пользователя. В идеале разработчики могли бы предупреждать пользователя о том, что у него включен Caps Lock.
#js #ru
Кто угодно может нажать Caps Lock в любой момент времени и не заметить этого. Вводя обычный текст, пользователи легко обнаруживают, что Caps Lock включен. Но когда вводится пароль, проблема не столь очевидна. В результате пароль не принимается, и это раздражает пользователя. В идеале разработчики могли бы предупреждать пользователя о том, что у него включен Caps Lock.
#js #ru
This media is not supported in your browser
VIEW IN TELEGRAM
Gooey Navigation
При наведении на элементы меню задействуются CSS-трансформации, параметры которых задаются через CSS-переменные.
#css
При наведении на элементы меню задействуются CSS-трансформации, параметры которых задаются через CSS-переменные.
#css
