#codepen дня

Модалка на чистом CSS? Да ещё с оверлеем? Реальность!

https://codepen.io/bramus/pen/KKaPJdr

Ага, Ван Дамм. Опять.

Реализована путём вкладывания dialog в details-summary блок. Оверлей же — реализован классическим способом, фиксированный псевдоэлемент.

Прекрасно.

#css #modal #details #dialog

#ссылка дня

Ищете анимированных эффектов появления? Их есть у меня!

https://www.transition.style/ — библиотека эффектов появления/скрытия элементов, в основе которой лежат clip-path-анимации. На каждый можно сослаться, чтобы продемонстрировать коллеге.

И естественно, код можно настроить и тут же быстро скопировать.

#css #animation #library #clip #clippath

#статья дня

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

Не надо так.

Тег button с нами очень давно, его нужно лишь правильно приготовить. Иначе ссылки и кнопки будут выглядеть по-разному:

1. Сбросить стили браузера
2. Унифицировать с a
3. Добавить активных состояний (:focus и :active)
4. Правильно обработать клавиатурную навигацию (:focus-visible) дабы не раздражать нежные фибры души дизайнеров, но уважать остальных людей.

В общем, к делу. Сама статья: https://fvsch.com/styling-buttons

И готовый результат (я переложу его из статьи в CodePen, добавив стили поддержки :focus-visible): https://codepen.io/alinaki/pen/LYxbvOw

#css #button #focus #focusvisible

#инструмент дня

Не нравятся create-react-app или дефолтные консольные инструменты Vue.js, но конфигурировать Webpack тоже не нравится?

Да, конфигурирование может быть простым накидыванием плагинов, а может потрепать нервы.

Но для старта можно воспользоваться https://createapp.dev/ и радоваться.

Выбираем базу, транспилятор, тестовую среду, загрузчики стилей, накидываем оптимизаций – и 💥 вы уже фронт-опс!

#webpack #snowpack #react #vue #svelte #tool

#заметка дня

На днях я узнал (точнее, глубоко вспомнил) одно интересное свойство атрибута contenteditable. Если кто не знает, этот атрибут – всё ещё лучший способ максимально быстро сделать редактор текста с форматированием. WYSIWYG, короче.

Так вот, свойство это заключается в том, что браузеры до сих пор (а на дворе 2021 год, напомню) по-разному устанавливают параметры по-умолчанию. Chrome и Safari ставят перевод строки, оборачивая текст внутри блочных и флекс-элементов в div, строчным ставит br, а Firefox просто ставит br вообще везде. IE (мир праху его) использовал p. И дальше пошло-поехало.

К счастью, это всё исправляется простым методом document.execCommand: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

Думаю, если вы соберётесь писать свой редактор хотя бы ради тренировки – это будет первое, с чего вы начнёте.

#html #javascript #contenteditable

#ссылка дня

Я не фанат подборок типа «10 лучших плагинов для…», но эта – меня покорила.

Сборник из 71 шрифтового эффекта на CSS (JS тоже есть, но мало где). Более того, многие из этих эффектов часто встречаются в различных проектах (игра с тенями и различные виды подчёркиваний, например). Есть даже реализованные на CSS шрифты.

В общем, определённо стоит вашего внимания: https://freefrontend.com/css-text-effects/

Да и весь портал неплох.

#css #font #fonts

#codepen дня

Сегодня у нас кодпен от участника сообщества @css_ru.

Передаю слово автору, @akrogu:

Рин Нохара из аниме «Наруто»:
https://codepen.io/ahmed364051/details/mdOYrRp

Многие из нас в детстве смотрели аниме «Наруто», и вдохновлялись разными образами этого аниме будь это Наруто, Саске, Итачи, но у меня в памяти навсегда останется образ простой и в то же время непосредственной девушки, которая исполняла роль миротворца в команде номер 7, любовь 90% мужчин, смотревших аниме "Наруто" — Рин Нохара ❤️

При создании Рин я использовал ванильные HTML и CSS так, как хотел создать интерес в первую очередь у новичков к web-разработке посредством рисования на css, для самодокументирования было использовано дублирование селекторов.

P.S. #сsschallengeживи

Присылайте ваши работы в @css_ru или @htmlshitchat.

#заметка дня

В общем, есть такая старая как мир техника защиты форм от ботов и спама: создать визуально скрытое поле ввода. Предполагается, что пользователи в него текст не введут, поскольку не увидят, а боты — как раз введут, глаз-то у них нет.

После чего на сервере вы проверяете форму и отсекаете данные, если поле было заполнено. Вот так вот просто.

Но есть нюанс. Даже несколько.

Скринридеры всё равно уведомят слабовидящего пользователя о таком поле, а стоит вам добавить, например, атрибут aria-hidden, как бот сходу «догадается».

Да и в целом, боты нынче не на коленке пишутся, зашифруете название класса – считают стили.

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

#captcha

#фишка дня

Одной из самых раздражающих особенностей SVG является работа с текстом. Она безумно сложна и нелогична.

Да, если преобразовать текст в кривые, можно творить чудеса (например, имитировать рукописный ввод: https://codepen.io/alinaki/pen/qoPRRE), но это лишает нас возможности изменять текст по желанию. Мягко говоря, неудобно.

Да, есть элемент text. С его помощью можно поменять размер шрифта, указать координаты размещения, трансформировать. Но вы даже фон не зададите таким образом!

А ведь так хотелось бы иметь возможность встраивать в SVG целые куски вёрстки…

Так можно же 😉

На помощь приходит элемент foreignObject!

Он фактически позволяет встроить в SVG любой другой элемент! И задача поставить фон тексту уже не кажется такой безумной, а наоборот, становится элементарной.

Важным трюком является установка высоты и ширины в 1 пиксель, при этом обязательно включение overflow: visible в CSS. Тогда вам не придётся задумываться о размерах встраиваемого объекта вообще. Иначе – обрежет.

Самая прекрасная часть: foreignObject автоматически озаботится изменением размера вашего элемента и контента в нём в зависимости от ширины SVG! Да, вы всё правильно услышали: масштабирование выполняется автоматически.

Чтобы вам не было скучно, я подготовил небольшой CodePen: https://codepen.io/alinaki/pen/PoWjdrY

На нём изображена карта России с парой городов. При наведении на город раскрывается флажок с его названием.

К сожалению, стоит установить любое значение transform или transition на содержимое foreignObject — и Safari просто перестаёт отрисовывать его. Пришлось сбросить. Ищу в трекере баг по этому поводу.

Поддержка? Ну в IE не работает, как обычно 😅 А в Safari и Firefox есть пара багов, связанных с переходами и анимацией. Но все решаемы.

#svg #foreignobject #text

#статья дня

Все любят хорошие статьи по SVG.

От базового понимания координат и viewBox, через transform к clipPath и его анимации с помощью GSAP. Вот так вот просто.

Каждый шаг стильно иллюстрирован и ёмко разжёван: https://www.cassie.codes/posts/swipey-image-grids/

#svg #viewbox #clippath #gsap

#библиотека дня

В процессе создания PDF на сервере или прямо в браузере немало боли. И далеко не всегда можно убедить заказчика обойтись режимом печати.

Задачу можно решить разными способами, но сегодня я бы хотел рассказать о библиотеке react-pdf. Она как раз обновилась до второй версии.

Во второй версии изменён процесс рендера и сама она переписана в функциональном стиле, но нас, как пользователей, интересует не это.

А интересует нас появление SVG, улучшенная поддержка CSS и новый API на хуках для использования в ваших компонентах.

Думаю, воспользуюсь ей в ближайшем проекте.

#javascript #react #pdf

#фишка дня

Давайте на минутку вернёмся к недавней статье про правильную стилизацию кнопок.

Помимо базовых стилей всегда хочется добавить немного эффектов: на наведение мыши (:hover), на фокус (:focus), на нажатие (:active).

Так вот, если с первыми двумя состояниями всё ясно, то нажатие – процесс мгновенный, т. е. длится явно меньше базовых 300 мс. Ваша анимация просто не успеет отыграть! Разве только вы не задержите кнопку мыши или тачпада нажатой.

И решение весьма неожиданное: :not(:active).

Внезапно, не правда ли? Ведь это, по факту, состояние кнопки по-умолчанию.

Так в этом и суть!

Хотим мы, например, стартовать пульсацию по клику. Сам эффект создаётся при помощи по-умолчанию скрытого псевдоэлемента, а секрет в том, что :not(:active) – это самое состояние перезапускает.

В общем, статья по поводу: https://codeburst.io/why-you-should-style-the-wrong-button-state-d4e4c2db8f7e

И CodePen, поскольку автор решил ограничиться gist’ом: https://codepen.io/alinaki/pen/wvgeWxY

#css #button #click #animation

#фишка дня

Иногда встаёт задача не просто проиллюстрировать статью, но обрезать (кропнуть) исходное изображение. И желательно так, чтобы результат был адаптивен и адекватно реагировал на масштабирование.

Джейк Арчибальд предлагает решение на SVG и foreignObject: https://jsbin.com/yiwipay/edit?html,css,output

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

#svg #img #foreignObject #crop

#codepen дня

Кажется, не было в мире более вызывающей штуки для веб-разработчиков, чем легендарный Cover Flow из Apple iTunes.

Я, честно говоря, не удивлён, что появился ещё один вариант: https://codepen.io/jh3y/pen/WNRvqJP

Вдохновение штука такая.

Прокрутка, перетаскивание, управление стрелками клавиатуры — прилагаются.

#gsap #coverflow #carousel

#заметка дня

Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.

Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.

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

Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.

По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.

Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».

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

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

#css #table #keyboard #focus #a11y

#заметка дня

Настало время просить прощения и извиняться™.

В посте про правильные анимации по клику на кнопку с использованием трюка :not(:active) я приложил видео с сердечком, а реализовал лишь эффект пульсации. Как-то неудобно получилось.

Исправляю ситуацию, ловите именно то, что было задумано изначально: https://codepen.io/alinaki/pen/RwKQpzV

По пути для кодирования SVG я воспользовался инструментом от Йоксель: https://yoksel.github.io/url-encoder/. По большому счёту, это лишь encodeURIComponent().

Кодированные таким образом SVG можно использовать в background, border-image или mask. Без демонстрации тут тоже никуда: https://codepen.io/yoksel/full/WNrLpYW

Это явно не последняя заметка про стилизацию кнопок, дам подсказку к следующей: boop.

#инструмент #css #button #svg #click #animation

#ссылка дня

Сегодня ссылка дня говорит сама за себя: https://svgontheweb.com/ru/

«SVG в вебе. Практическое руководство»

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

И каждый раз ответы – одинаковые. И не всегда верные и однозначные.

Собственно, это руководство не будет долго погружать в теорию (минимальную всё же даст), но вот рабочие примеры — предоставит. Есть официальный перевод на русский язык, а желающие могут дополнить на GitHub.

#svg #sprite #css

#фишка дня

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

Особенностей работы с ними огромное множество, но меня повеселил один интересный подход.

Итак, если установить свойству пустое значение при помощи комментария (/**/), парсер пропустит его и использует следующее определение. Получается условный оператор на коленке.

Например:

body {
  background-color:
    var(--mq-small, sandybrown)
    var(--mq-large, mediumslateblue);
}

Здесь mq означает «Media Query». Уже догадались, что будет дальше? 🤔

Правильно! Можно сбросить значение свойства до пустого по медиа-запросу! Тогда браузер просто пропустит его и применит следующее:

@media (min-width: 640px) {
  :root {
    --mq-small: /**/ ;
  }
}
@media (max-width: 639.5px) {
  :root {
    --mq-large: /**/ ;
  }
}

В общем, чтобы далеко не ходить, держите CodePen: https://codepen.io/alinaki/pen/xxgjYpb

Так можно поступать не только с медиа-запросами, но и с псевдоклассами (:hover и т. д.). Теперь вам достаточно лишь изменить значение свойства, а не перезаписывать всё правило целиком.

#библиотека дня

Рано или поздно каждый сталкивается с построением графиков и диаграмм. И так устоялось, что без JavaScript-библиотек тут никуда.

Из бесплатных и/или открытых: Recharts, Chart.js, D3 для чего похардкорней, Google Charts… Из коммерческих у всех на слуху, естественно, Highcharts.

Ещё есть интересные способы рендера диаграм в HTML и SVG, но они оба достаточно сложны и подходят, скорее, для проектов с SSR (server-side rendering), ведь сначала нужно правильно сгенерировать разметку.

Но я хочу поговорить о подходе без скриптов вообще. Одним только CSS. Семантично. С дикой скоростью отрисовки для десятков диаграмм.

Откуда возьмутся десятки диаграмм? Ну, последний год нам это прекрасно продемонстрировал.

Что такое диаграмма? Это лишь способ представления данных. Чаще всего — табличных данных. На ум приходит очевидное: нужно лишь правильно наложить стили на таблицу и бум – готово.

Но не всё так просто. До недавнего времени у нас не было рабочих инструментов для этого. CSS Grid, flex и clip-path достигли нужного уровня поддержки давно, но не было главного: простого способа передать данные в CSS. Догадываетесь, о чём речь?

Ага. Custom properties, пользовательские свойства. Переменные, если хотите. Их киллер-фичей является возможность установить значение свойства через атрибут style. Он подхватится стилями и позволит изменить вид элемента до неузнаваемости. Область применения безгранична.

Итак, меньше слов больше ссылок. Вашему вниманию предлагается Charts.css: https://chartscss.org/

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

Да, это всё ещё чуть сложнее, чем просто передать немного JSON-а, но не забывайте, что таблица – максимально семантична и в некоторых условиях может быть отображена в мини-виджетах Google и Островах Яндекса, что прекрасно для SEO.

Ну и при печати или генерации PDF можно будет легко выбрать нужный формат.

Библиотека всё ещё в разработке и самые вкусные решения впереди, присоединяйтесь!

#css #table #chart #diagram

#заметка дня

CSS-градиенты, конечно, были в своё время прорывом, вот только есть одна проблема.

Математически линейное изменение цвета и/или прозрачности глазом воспринимается слишком резким и… ранним.

Точно так же как и с transition, можно было бы применить функции плавности (easing). Правда, это потребует некоторых усилий, в стандарт CSS они пока не вошли.

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

Можно, конечно, и проще. Добавить промежуточный цвет при помощи пары остановок, т. н. подсказки перехода. Этот цвет может стать едва ли не основным: https://codepen.io/argyleink/pen/GRZoQLB

Какой бы способ вы ни применили, доверяйте своим глазам.

#css #color #gradient #easing