От автора: мой брат — новичок в области компьютерной инженерии, и в настоящее время он заканчивает свою стажировку по фронт-энд разработке. Он изучил как CSS-Grid, так и Flexbox, но столкнулся с ситуацией, которую я часто вижу. Он не может решить, когда использовать Grid, а когда Flexbox. Например, он использовал CSS-Grid для разметки заголовка веб-сайта и […]
От автора: прошло несколько лет с тех пор, как единицы измерения на основе области просмотра были впервые представлены в CSS. Они действительно являются «адаптивными единицами длины» в том смысле, что их значение меняется каждый раз, когда изменяется размер окна браузера. Если вы слышали об этих единицах раньше, но хотите узнать о них подробнее, эта статья […]
От автора: я открыла для себя CSS около десяти лет назад, пытаясь изменить внешний вид блога, который я создала. Довольно скоро я смогла кодировать классные вещи с большим количеством математических и, следовательно, более простых для понимания функций, таких как преобразования. Однако другие области CSS, такие как верстка, остаются постоянным источником боли. Этот пост посвящен проблеме, […]
От автора: работая над сайтом FordLabs, мы с моим напарником столкнулись с, казалось бы, сложной ситуацией. У нас было три элемента, которые нужно было расположить горизонтально в порядке [1] [2] [3] на экранах планшетов и на настольных компьютерах, но затем расположить вертикально в порядке [1] [3] [2] на мобильных устройствах. Хотя мы могли бы использовать […]
От автора: мне нужен был нумерованный список постов в блоге, чтобы они были перечислены от последнего к первому. Как задать обратный порядок пользовательских счетчиков CSS? Примерно так: [crayon-5efaec55a323b811225625/] Но приведенное выше — это просто текст. Я хотел сделать это с помощью семантического элемента ol. Простой способ Это можно сделать с помощью свойства HTML reversed для […]
От автора: новые псевдо-классы CSS :is() и :where() теперь поддерживаются в предварительных версиях Safari (Tech Preview 106) и Firefox (версия 78). Реализация в Chrome остается с флагом. Используйте :is(), чтобы уменьшить количество повторений Вы можете использовать псевдо-класс :is()для удаления повторений в списках селекторов. [crayon-5ef98f59d68dd534474587/] Этот функционал в основном полезен в стандартном, необработанном коде CSS. Если […]
От автора: несколько недель назад Стефан опубликовал на своем веб-сайте пост под названием Свойство CSS «content» принимает альтернативный текст, что поразило меня. Он показал, что свойство content принимает 2 значения, а не только 1, фактическое содержимое и альтернативный текст. Простой пример: [crayon-5ef44f56a5e73293130132/] Я не знал этого, и мне было интересно, есть ли еще вещи, которых […]
От автора: настраиваемые свойства CSS для каскадных переменных, давно запрошенные, но все еще недостаточно используемые, предлагают революционные возможности для совместной работы и повторного использования кода.. Переменные в CSS были крайне востребованной функцией рабочей группы CSS Консорциума World Wide Web, к которой я присоединилась в 2012 году, с самого начала группы в 1997 году. К концу […]
От автора: с тех пор, как я узнала о переменных CSS несколько лет назад, моя самая любимая функция — возможность привязывать переменные к компонентам. Но, честно говоря, я не использовала эту функцию на протяжении многих лет, пока в прошлом году я не создала собственную библиотеку шаблонов для ускорения создания прототипов и работы с клиентами. За […]
От автора: эй! Совершенно новое свойство, которое влияет на размер блока! Это важная вещь. Уже есть много способов создать блок с соотношением сторон (и я бы сказал, что это решение на основе пользовательских свойств является лучшим), но ни один из них не является особенно интуитивным и, конечно, не таким простым, как объявление одного свойства. Итак, […]
От автора: хотя мы можем применить к line-height любую единицу измерения CSS, значение без единиц измерения 1,5 является наиболее рекомендуемым способом его обработки. Для начала, пояснительное изображение о том, как высота строки применяется браузером: Как видите, высота строки распределена по разным областям: «Область контента», которая будет равна примерно 1 в высоту. «Область направляющих», то есть […]
От автора: это не самая востребованная функция, но контейнерные запросы дают возможность создавать в CSS макеты «Masonry», которые долгое время были большой проблемой для разработчиков CSS. Masonry — это такая схема, в которой элементы неравномерного размера расположены рваными рядами. Типа обычной кирпичной стены. Сам по себе макет достижим на чистом CSS, но с одной большой […]
От автора: недавно я попал в ситуацию, когда хотел показать iPhone на веб-сайте. Я хотел, чтобы пользователи могли взаимодействовать с демо-версией приложения на этом «фиктивном» телефоне, поэтому он должен был отображаться в CSS, а не изображением. Я нашел отличную библиотеку под названием marvelapp/devices.css. Библиотека реализовала нужное мне устройство с использованием чистого CSS, и они выглядели […]
От автора: я работал над проектом, для которого нужно было изображения баннера с таким аккуратным зазубренным краем вдоль нижней части. Это то, что заставило меня поломать голову, и в процессе я узнал кое-что новое! Я подумал, что опишу, как я подошел к решению этой проблемы, чтобы вы могли использовать это в своих проектах. Я начал […]
От автора: CSS line-height — это, вероятно, один из самых неправильно понимаемых, но часто используемых атрибутов. Как дизайнеры и разработчики, когда мы думаем о line-height, мы можем представить концепцию направляющих в полиграфическом дизайне — термин, достаточно интересный, который происходит от буквального помещения направляющих между строками шрифта. Направляющие и line-height, хотя и схожи, имеют некоторые важные […]
От автора: функции сравнения CSS (min(), max(), clamp()) стали поддерживаться в Firefox с 8 апреля 2020, что означает, что они теперь поддерживаются во всех основных браузерах. Эти функции CSS предоставляют способы получить динамические макеты и более гибкие компоненты дизайна. Их можно использовать для размеров контейнера, размера шрифта, отступов и многого другого. Более того, веб-дизайнерам теперь, […]
От автора: недавно наблюдался ажиотаж вокруг того, как WebKit обрабатывает CSS 100vh, по существу игнорируя нижний край окна просмотра браузера. Некоторые предложили избегать использования 100vh, другие придумали разные альтернативы для решения проблемы. Фактически, эта проблема уходит еще в давние времена, когда Николас Хойзи подал уведомление об ошибке в WebKit по этому вопросу (кратко: WebKit говорит, […]
От автора: как однажды сказал печально известный Дарт Вейдер: «Ты не знаешь силы Темной стороны». 2019 год вдохнул жизнь в слова Вейдера, когда темный режим захватил наши приложения, и им все стали повально увлекаться. От Instagram до Youtube, наши любимые приложения запрыгнули на подножку, и уже не далек день триумфа Ситхов. Что такое темный режим? […]
От автора: в данном уроке будет показано создание карусели на чистом CSS. Здесь нет JavaScript здесь вообще! Нет плагинов jQuery. Нет хаков. Просто пара новых CSS-свойств, с которыми я экспериментировал, а также немного базового HTML. Хорошо, чтобы начать, нам нужно сосредоточиться на разметке. Дизайн включает в себя левый блок навигации, состоящий из изображений, и большую […]
От автора: не так давно мы писали о темном режиме в CSS, и я думал о том, что белый текст на черном фоне всегда труднее читать, чем черный текст на белом. Подумав немного об этом, я понял, что мы можем решить эту проблему, сделав текст в темном режиме тоньше, используя переменные шрифты!. Вот пример проблемы, […]
От автора: поддерживать крупномасштабный CSS-проект сложно. За эти годы мы стали свидетелями введения различных подходов, направленных на облегчение процесса написания масштабируемого CSS. В конце концов, мы все стараемся достичь следующих двух целей: Эффективность: мы хотим сократить время, затрачиваемое на продумывание того, как все должно быть сделано, и увеличить время на то, чтобы сделать это. Согласованность: […]
От автора: я был невероятно удовлетворен ответами на новый дизайн. Итак, прежде всего, спасибо всем, кто поделился своими отзывами! Я действительно ценю вашу доброту, и я хотел бы немного отплатить за нее, рассказав о некоторых методах, которые я использовал для создания этого дизайна. Сегодня давайте поговорим о иллюстрациях в стиле старинных гравюр, размещенных между записями […]
От автора: привет всем! Дискуссии на эту тему ведутся с тех пор, как появились grid и flexbox со всеми своими интересными аспектами, заставляющими контент быстро реагировать на область просмотра. Тем не менее, это может быть пугающим для тех, кто начинает использовать такие передовые технологии CSS, как grid и flexbox, которые могут создавать привлекательные макеты — […]
От автора: недавно у нас имела место дискуссия на тему Анимация в рабочем пространстве: как вы могли бы сделать траекторию движения CSS адаптивной? Какие техники будут работать? Это заставило меня задуматься. Траектория движения CSS позволяет нам анимировать элементы вдоль пользовательских траекторий. Эти траектории следуют той же структуре, что и контуры SVG. Мы определяем контур для […]
От автора: я хочу поделиться одной техникой верстки, которую я использую в последней версии моего сайта. Ничего грандиозного, но я не видел, чтобы об этом было написано где-то еще, и я нашел это довольно полезным. Может быть, вы тоже так думаете. Я начну со следующего: большинство адаптивных макетов, над которыми я работал, имели максимальную ширину, […]
От автора: вы хотите разместить текст внутри фигуры круга с помощью HTML и CSS? Звучит безумно, верно? На самом деле, нет! Благодаря shape-outside и некоторым хитростям CSS можно сделать именно это. Тем не менее, это может быть неудобный вариант макета. Мы должны принимать во внимание множество разных вещей, таких как количество символов, количество слов, изменения […]
От автора: вот сценарий, с которым я сталкиваюсь время от времени: мне нужно создать нумерованный список, и я хочу, чтобы он был красивым. Поскольку семантический HTML важен, я использую корректный тег ol: [crayon-5ea7e1e6c7d18944884684/] Проблема в том, что «маркеры» (номера пунктов) находятся в мертвой зоне CSS-селектора. У нас нет способа стилизовать их независимо*! Я не тот […]
От автора: в течение многих лет я постоянно ссылалась на статью Мэтью Джеймса Тейлора, чтобы узнать, как разместить футер в нижней части страницы независимо от длины основного содержимого. Этот метод основывался на задании явной высоты футера, что являлось не масштабируемым, но очень хорошим решением до Flexbox. Если вы в основном имеете дело с разработкой SPA, […]
От автора: дизайн страницы просмотра Netflix остается почти неизменным в течение нескольких лет. Одним из основных компонентов является слайдер предварительного просмотра, который позволяет пользователям прокручивать содержимое и наводить курсор на элементы, чтобы увидеть увеличенный блок. Одной из уникальных характеристик пользовательского интерфейса является его поведение при наведении. Когда окно предварительного просмотра расширяется при наведении, карточки рядом […]
От автора: когда-то давно (примерно 7 лет назад) я написала плагин jQuery для вычисления столбцов одинаковой высоты. Это гарантировало, что очень специфический сценарий строки с тремя столбцами будет поддерживать поля содержимого равными по высоте, независимо от длины контента, которое они содержат. Доминирующий метод размещения в то время – float — не справлялся с этой проблемой. […]
Свежие комментарии