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

От автора: недавно у нас имела место дискуссия на тему Анимация в рабочем пространстве: как вы могли бы сделать траекторию движения CSS адаптивной? Какие техники будут работать? Это заставило меня задуматься. Траектория движения CSS позволяет нам анимировать элементы вдоль пользовательских траекторий. Эти траектории следуют той же структуре, что и контуры SVG. Мы определяем контур для элемента, используя offset-path. .block { ...

От автора: вы хотите разместить текст внутри фигуры круга с помощью HTML и CSS? Звучит безумно, верно? На самом деле, нет! Благодаря shape-outside и некоторым хитростям CSS можно сделать именно это. Тем не менее, это может быть неудобный вариант макета. Мы должны принимать во внимание множество разных вещей, таких как количество символов, количество слов, изменения шрифта, размер шрифта, форматирование шрифта ...

От автора: вот сценарий, с которым я сталкиваюсь время от времени: мне нужно создать нумерованный список, и я хочу, чтобы он был красивым. Поскольку семантический HTML важен, я использую корректный тег ol: <ol> <li>Stop</li> <li>Drop</li> <li>Roll</li> </ol> Проблема в том, что «маркеры» (номера пунктов) находятся в мертвой зоне CSS-селектора. У нас нет способа стилизовать их независимо*! Я не тот человек, ...

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

От автора: в течение многих лет я постоянно ссылалась на статью Мэтью Джеймса Тейлора, чтобы узнать, как разместить футер в нижней части страницы независимо от длины основного содержимого. Этот метод основывался на задании явной высоты футера, что являлось не масштабируемым, но очень хорошим решением до Flexbox. Если вы в основном имеете дело с разработкой SPA, вы можете быть озадачены тем, ...

От автора: в CSS мы можем контролировать ситуацию, когда содержимое элемента слишком велико, чтобы уместиться в контейнер. Свойство для этого – overflow, это сокращение от свойств overflow-x и overflow-y. В этой статье я познакомлю вас с этими свойствами, а затем мы вместе рассмотрим некоторые концепции и варианты использования, связанные с переполнением. Вступление Чтобы использовать свойство overflow, мы должны быть уверены, ...

От автора: в CSS есть специальная функция calc() для выполнения основных математических действий. В этом руководстве мы рассмотрим практически все, что нужно знать об этой очень полезной функции. Вот пример: .main-content { /* Вычесть 80px из 100vh */ height: calc(100vh - 80px); } calc() для значений Единственное место, где вы можете использовать функцию calc() — это значения. Посмотрите эти примеры, ...

От автора: за последние десять лет CSS значительно расширился, в него добавляются все новые и новые функции. Таким образом, он постепенно становится все более сложным. CSS наших дней очень отличается от CSS десятилетия 2001–2010. Прежде чем я начну объяснять, почему миру нужны разработчики CSS, мы должны вернуться назад и рассмотреть историю CSS. История CSS В предыдущем десятилетии, когда Интернет завоевывал ...

От автора: фоновые размытые изображения — это круто. Это неоспоримый факт. В каждом пользовательском интерфейсе должно быть не менее десяти фоновых размытых изображений (желательно наложенных друг на друга), и каждый интерфейс, созданный с самого зарождения всемирной паутины, который не содержит фоновых размытых изображений, должен быть переработан в первую очередь. Это правда. Разработчики любят, когда вы показываете им дизайн с размытым ...