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

CSS *

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

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

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

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

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

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

Читать далее

Новости

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

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

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


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


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


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

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

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

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

В четвертой части мы рассматриваем процесс кастомизации кнопки Primary в Bootstrap с точки зрения построения дизайн-системы. Пошагово описаны уровни кастомизации, а также способы внесения изменений через переменные и стили для сохранения чистой архитектуры.

Читать далее

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

Неизвестно полезный CSS. Часть 8

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


Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.


Сегодня мы рассмотрим:

  • как можно избежать длинных значений для свойства transform;
  • можно ли побороть неоднозначность медиа-запросов;
  • малоизвестное и полезное свойство при работе с «гридами»;
  • какой нюанс вы можете не знать про свойство align-content;
  • древнейшее свойство, помогающее улучшить взаимодействие пользователя клавиатуры с интерфейсом.

Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

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

Скрываем без JavaScript элементы, требующие JavaScript

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

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

Небольшой контекст: я сейчас разрабатываю небольшую кнопочку «Share», которую можно вставлять в посты и с лёгкостью делиться ими, если мне захочется. Взгляните, как она сейчас выглядит без JavaScript:  

Читать далее

Адаптивная вёрстка с учётом размера шрифта пользователя и брейкпоинты

Уровень сложностиПростой
Время на прочтение19 мин
Количество просмотров3.2K
На эту статью меня вдохновил вопрос из раздела Q&A «Как выбрать «опорные точки» перехода ширины экрана для стилей страниц сайта?». Занимаясь в последнее время адаптивной вёрсткой, я пришёл к нескольким выводам, которыми и хочу с вами здесь поделиться. Заодно разберём некоторые полезные (и не очень) техники для адаптивной вёрстки, и пересоберём Bootstrap с их учётом.


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

CodeCraft Academy: Как я создаю открытую платформу для обучения программированию

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

Привет, Хабр! Я yukk1ro, и сегодня хочу рассказать о своем проекте, который призван сделать обучение программированию более доступным и эффективным.

Читать далее

Адаптивная flex-сетка на CSS: разбираем реализацию на атомы

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

Наверное, каждый, кто сталкивался с frontend`ом, хотя бы раз использовал адаптивную flex-сетку на N-ном количестве колонок. В данной статье мы не станем рассматривать область применения такого подхода, его плюсы и минусы, а разберем теорию и напишем собственное решение, с брейкпоинтами и настраиваемым спейсингом!

Данная статья, в первую очередь, будет полезна новичкам, однако надеюсь, что и опытные разработчики найдут в ней что-то интересное. Для упрощения жизни, будем использовать SCSS, продублировав CSS «под спойлер».

Читать далее

Зачем изучать создание сайтов и что для этого нужно знать

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

Начнем с того, что в настоящее время огромное количество (а если точнее, то 5,5 миллиарда за 2024 год) пользователей по всему Интернету регулярно посещают различные сайты и веб‑страницы в поисках нужной им информации. И Вы в том числе.

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

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

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

Читать далее

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

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

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


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


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


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


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

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

Obsidian: все что нужно знать о Callout

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

В этой статье я подробно расскажу о возможностях использования Callout в Obsidian, покажу существующие решения, а также объясню, как создавать свои собственные, индивидуальные типы Callout-блоков.

Рассмотрим при чем здесь цитаты (Blackquotes).

Дополнительно поделюсь полезными надстройками и шаблонами

Читать далее

Интерактивные метки на изображении JS

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

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

Данный скрипт позволяет создавать адаптивные изображения с интерактивными метками. Скрипт по умолчанию поддерживает до 50 меток на изображении.

Читать далее

Snake, альтернатива Slick slider на чистом JavaScript

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

Для создания современных сайтов разработчики все чаще стали пользоваться реактивными фреймворками или чистым JavaScript, отказываясь при этом от библиотеки jQuery. Однако остаются плагины, от которых не так просто отказаться. К таким относится Slick slider. Он очень удобен в использовании и сочетает в себе все необходимые для создания каруселей опции.

Читать далее

Верстка для ленивых: как перестать бояться CSS и начать верстать как супергерой

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

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

Читать далее

Магия CSS на практике: советы по вёрстке от гика. Часть 6

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


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


Сегодня мы рассмотрим:

  • мой подход к написанию стилей для динамической сетки без использования БЭМ-модификаторов;
  • как я перестал писать свойство text-decoration со значением none для элемента <button>;
  • способ для вычисления значения свойства width в зависимости от контента элемента;
  • почему вам стоит удалить все стили с использованием псевдо-класса :focus.

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

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

Локаторы. Стратегии поиска веб-элементов

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

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

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