Как стать автором
Обновить
49.27

CSS *

Каскадные таблицы стилей

Сначала показывать
Порог рейтинга
Уровень сложности

Как сделать ужасный для пользователя интерфейс. Коллекция HTML/CSS лайфхаков

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров11K


Привет, Хабр!


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


А недавно я подумал: а вдруг есть фронтендеры, которые хотят сделать ужасный интерфейс? Ну не любят они пользователей. Или хотят сделать пакость работодателю, который их обидел. Где им взять советы?


Надо помочь! Я собрал вредные HTML и CSS техники. Они супер простые, но очень действенные. Я уверен на сто процентов, что благодаря им интерфейс вашего проекта заставит пользователя вспомнить несколько «ласковых» слов.


Давайте посмотрим, что я вам подготовил.

Читать дальше →

Новости

Продолжаем чинить стартовую страницу в Firefox

Время на прочтение3 мин
Количество просмотров4.7K

Предыдущая часть тут.


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


После очередного, 139-ого, обновления дизайнеры из Мозиллы порадовали вот такой картинкой:


Читать дальше →

Создание вращающейся ручки на основе Input Range

Время на прочтение4 мин
Количество просмотров1.1K

Рад приветствовать тебя,%username%. В этой статье я поделюсь тем, как создать вращающуюся ручку (в зарубежной литературе именуемой Knob). Далее по тексту я её буду называть «кноб». Перейдём к сути вопроса.

Что меня сподвигло на написание данной статьи, или как я докатился до жизни такой

Когда‑то давно, будучи ещё совсем зелёным и несмышлёным кодером, мне взбрело в голову сделать своё приложение. Моих знаний хватало на какой‑нибудь «Hello, World!», но кое‑что выдать я мог. И на тоот момент мне позарез нужно было реализовать кноб — тот самый круглый регулятор, который можно крутить и он будет менять значения. И как любой уважающий себя программист, я сразу же полез гуглить стековерфлоу и прочее непотребство, дабы найти тот самый рецепт хлеба сладкого ответ на вопрос, который так долго меня волновал. Однако перешерстив весь интернет, ничего путёвого я не нашёл. Расстроившись, я забил на эту идею. Но какие‑то угольки веры в то, что у меня получится это сделать, тлели в моей охолодевшей к этому миру душонке. И вот на днях, когда я начал работать над своим проектом (небольшая программка, если она найдёт отклик в народных массах, то и по ней напишу парочку руководств, но пока что спустимся на землю), мне опять ударила моча в голову с этими кнобами. Тем более, что все предпосылки ведут именно к этому. Они нужны в интерфейсе. Забравшись в православный яндекс и одновременно в бездуховный гугл, я опять наткнулся на мель отсутствия нужной мне информации. Были только решения с какими‑то библиотеками и интересными историями на jQuery. Плюнув на всё и засучив рукава, я вдруг осознал, что этот мир нуждается в моём компетентном и всем так очень нужном мнении (спойлер: нет). Тогда я принялся за gehirnsturm и молниеносно придумал пару решений. Первое заключалось в SVG на основе path, но оно показалось мне чересчур геморройным. Там много JS надо написать, но не надо никаких стилей зато. И вот второе решение отчасти продолжает идею первого, но с некоторыми отличиями: оно немножко проще в том плане, что начальное, конечное и текущее значение, а также шаг уже вмонтированы в него, что существенно сокращало труды мои праведные. Но, как гласит закон сохранения энергии, энергия не приходит и не уходит, она лишь изменяется. Поправьте, если не так. А это значит, что если где‑то стало проще, то где‑то стало сложнее.

Читать далее

Как красиво признаться в любви не покупая цветы и конфетки с плюшевым мишкой на память, используя чистый HTML и CSS с JS

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров3.2K

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

Просмотреть

Как работает position: sticky и почему он часто не прилипает

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров1.9K

Привет, Хабр!

position: sticky — штука, которая превращает relative-элемент в fixed-элемент, как только он доезжает до заданного инсет-порога, и отлипает в момент, когда скроллинг выталкивает родителя за край.

Работает круто, пока вы не включите overflow, не забудете задать top, не положите элемент в flex c align-items: stretch, не сделаете таблицу из <thead> и не упрётесь в кейс с вложенными скролл-контейнерами.

Читать далее

Как использовать любой CSS-фреймворк в вашем проекте: Часть 5

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров1.6K

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

Читать далее

Автоматический подбор браузером контрастного цвета в CSS

Уровень сложностиПростой
Время на прочтение10 мин
Количество просмотров2.1K

Вам когда-нибудь хотелось, чтобы можно было написать простой CSS для объявления цвета, после чего браузер сам бы определял, чёрный или белый должен сочетаться с этим цветом? Теперь это возможно благодаря contrast-color(). В статье мы объясним, как это работает.

Представьте, что вы разрабатываете веб-сайт или веб-приложение, и в дизайне требуется куча кнопок с разными цветами фона. Для обработки цвета фона можно создать переменную --button-color, а затем присваивать ей разные значения.

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

Читать далее

ChatGPT vs Гик. Сможет ли AI заменить опытного верстальщика?

Уровень сложностиСредний
Время на прочтение11 мин
Количество просмотров4.8K
image

Привет, Хабр.


Моя подруга постоянно читает новости о том, что искусственный интеллект заменит какую-то профессию. Тестировщик, программист, дизайнер, писатель и т. д. А сможет ли он заменить опытного верстальщика?


Мне стало интересно, сможет ли ChatGPT написать код, как я. Чтобы мог сказать: «Да, вот это мы допускаем в продакшен».


Добиваться этой цели я буду на примере нескольких популярных паттернов. Я уверен, что фронтендеры постоянно верстают их из проекта в проект. Ещё я честно признаюсь, что у меня мало опыта работы с такими системами. Я новичок. Так что тоже учитывайте это при чтении.


Давайте посмотрим, что в итоге получилось.

Читать дальше →

Веб-разработка на ванильном HTML, CSS и JavaScript: стилизация и сайты

Уровень сложностиСредний
Время на прочтение22 мин
Количество просмотров4.5K

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

Веб-разработка на ванильном HTML, CSS и JavaScript

Уровень сложностиСредний
Время на прочтение19 мин
Количество просмотров15K

В этой серии статей мы расскажем, как выполнять веб-разработку исключительно на ванильных технологиях. Ни инструментов, ни фреймворков, лишь HTML, CSS и JavaScript.

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

Выбрав ванильный стиль веб-разработки, мы обмениваем кратковременное удобство на такие долговременные преимущества, как простота и практически нулевая поддержка. Такой подход возможен благодаря современному уровню развития браузеров, обеспечивающих превосходную поддержку веб-стандартов.
Читать дальше →

Как фронтендеру сделать интерфейс дружелюбнее к пользователю. Коллекция HTML/CSS лайфхаков

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров15K
image

Привет, Хабр.


Мне всегда нравились красивые и удобные интерфейсы. Желая сделать лучше для пользователя, я потратил не один день. Так я начал коллекционировать HTML и CSS лайфхаки, которые улучшают впечатление пользователя от интерфейса. В итоге у меня получился внушительный список.


Сегодня хочу поделиться с вами некоторыми практиками из него. Я постарался собрать наиболее простые, чтобы вы могли быстро и безболезненно внедрить их.


Давайте посмотрим, что я вам подготовил.

Читать дальше →

Меню для отзывчивого интерфейса без скриптов

Уровень сложностиСредний
Время на прочтение12 мин
Количество просмотров3.2K

В этой статье мы расскажем как создать отзывчивое меню по принципу mobile-first, используя только HTML и CSS — без JavaScript. Полный код, используемый в этой статье, доступен в репозитории на GitHub.

Читать далее

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 12

Время на прочтение6 мин
Количество просмотров3.2K


Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильей. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.


Сегодня мы рассмотрим следующие аспекты:

  • что можно сделать лучше для пользователей с дислексией;
  • как незаметно улучшить интерфейс для пользователей с травмой кистей рук;
  • есть ли сложности с сокращениями для пользователей скринридера.

Давайте начнём!

Читать дальше →

Ближайшие события

Всё, что вы хотели знать, но стеснялись спросить о кастомных курсорах в CSS

Уровень сложностиСредний
Время на прочтение9 мин
Количество просмотров2.5K

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

Также сравним плюсы и минусы применения CSS и JavaScript для создания кастомных курсоров. Обсудим, когда стоит отказаться от курсоров по умолчанию и как учитывать потребности пользователей с ограниченными возможностями. Чтобы во всё это вникнуть, вам понадобятся базовые представления об HTML, CSS и JavaScript.

Читать далее

Вы не знаете CSS. Мои вопросы о CSS с ответами. Часть 3

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров5.3K

Хабр, привет! Я стабильно пишу здесь о CSS. Мне радостно, что моя работа вам полезна. Но хочется что-то нового. Вызывающего споры. В общем, я пришёл к формату статей в виде вопрос-ответ. Вопросы будут те, что я спрашиваю на интервью. Так что у вас будет повод сказать: «А зачем это надо?».


При составлении вопросов я хотел проверить понимание базовых моментов, которые есть в вёрстке любого проекта. Ещё будут вопросы на знание более редких аспектов и «новинок» в CSS. В общем, я хочу вас завалить, чтобы казаться супер умным! (здесь ирония).


Пожалуйста, не воспринимайте мои вопросы серьёзно. Давайте просто весело проведём время. Плюс попробуем узнать что-то новое. Ведь у каждого вопроса будет мой ответ. И вы тоже можете оставить свой в комментариях. Я обязательно буду их читать.


Так, вы готовы? Давайте посмотрим, что я вам подготовил.

Читать дальше →

Как использовать любой CSS-фреймворк в вашем проекте: Часть 4

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров2K

Bootstrap предоставляет базовую структуру, но её нужно адаптировать под ваш дизайн, чтобы избежать хаоса в стилях. Настройка даже простой кнопки требует системного подхода — с чётким пониманием уровней кастомизации и архитектуры проекта. В этой статье пошагово показано, как изменить кнопку Primary с помощью SCSS-переменных и дополнительных стилей, сохраняя чистоту и согласованность дизайн-системы.

Читать далее

BEM vs Atomic CSS или картинка по номерам

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров2.3K

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

Для начала предлагаю разобраться, о чем статья. В данной статье я попытался свести все свои знания касающиеся использования CSS и подходов (методологий) организации CSS-кода (селекторов) и нюансов использования того или иного подхода, а также провести сравнительный анализ. Как говорил Юрий Гагарин - Поехали!

Читать далее

Плавность как фича: сравниваем фреймворки по анимации UI на реальных кейсах

Уровень сложностиСложный
Время на прочтение4 мин
Количество просмотров3.9K

UI-анимации — это не только про красоту, но и про восприятие, структуру и даже скорость. В этой статье рассматриваются популярные фреймворки для создания анимаций в интерфейсах: CSS, Framer Motion, GSAP и Motion One. Сравнение проводится на реальных кейсах с кодом, примерами и субъективным мнением, где каждый инструмент показывает свои сильные и слабые стороны. В конце — небольшие выводы и неожиданные результаты.

Читать далее

Улучшаем тексты в вебе при помощи text-wrap: pretty

Уровень сложностиПростой
Время на прочтение12 мин
Количество просмотров2.1K

В новом Safari Technology Preview реализовано значение text-wrap: pretty, обеспечивающее беспрецедентный уровень чёткости типографики в вебе. Давайте рассмотрим возможности WebKit-версии pretty, а затем сравним её с balance и другими значениями text-wrap, чтобы лучше понять, когда какие следует выбирать.

Идеи о том, что «хорошо» для типографики произрастают из эпохи, когда набор производился вручную при помощи металла, дерева и чернил. Наборщики тщательно выбирали, где должно находится слово: в конце строки, в начале другой или его нужно разбить дефисом. Их усилия повышали понятность текстов, снижали напряжение глаз и просто увеличивали удовольствие от чтения. Хотя восприятие красоты может быть субъективным, в мире существуют и глубоко укоренившиеся типографские традиции для разных языков и написаний. Эти традиции через века несут человеческую культуру от поколения к поколению.

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

Одним из решений может стать text-wrap:pretty. Оно предназначено для обеспечения нового уровня качества типографики в вебе благодаря использованию учитывающих абзацы алгоритмов.

Читать далее

Как использовать любой CSS-фреймворк в вашем проекте: Часть 3

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров2.2K

Цвета — одна из самых важных частей любой дизайн-системы — и также одна из самых сложных. Если с ними обращаться неправильно, это приведёт к путанице и несогласованности в дальнейшем. Чтобы этого избежать, вам нужна чёткая, хорошо структурированная цветовая система, которая остаётся согласованной во всём проекте.

Если всё сделано правильно, вы сможете разрабатывать и поддерживать весь проект, используя только 6–8 основных цветов и их оттенков.

Читать далее
1
23 ...