Category: CSS 3

18
Сен
2020

Моя структура CSS

От автора: когда дело доходит до структурирования CSS, нет недостатка в различных соглашениях об именах, методологиях и архитектурах. Будь то BEM, OOCSS, SMACSS, ITCSS или CUBE CSS — за последние годы появилось множество различных подходов к управлению модульным CSS. Некоторые предлагают стратегии, как разбить CSS на более мелкие, более управляемые части, в то время как […]

17
Сен
2020

Четыре эффекта текста, которые оживят ваш сайт

От автора: давайте изучим четыре тонких текстовых эффекта CSS, которые могут добавить динамичности вашему сайту. Итак, без лишних слов, давайте начнем. 1. Вибрация текста при наведении Это тонкий эффект, с помощью которого мы можем задать вибрацию отдельных символов при наведении. [crayon-5f63153a01b77017486114/] Мы достигаем этого эффекта, используя атрибут преобразования, чтобы перемещать символ по оси y и […]

16
Сен
2020

Ошибки CSS на автопилоте

От автора: когда мы очень сосредоточены на работе над веб-проектом, мы часто забываем или делаем некоторые ошибки, которые могут привести к неправильному коду CSS. Я люблю называть это «ошибками на автопилоте». Ошибки такого рода, которые заставляют нас спрашивать себя: «Ой, почему я это сделал?», и их решение не займет много времени, только если вы их […]

15
Сен
2020

Вертикальное выравнивание текста в кнопках и элементах ввода

От автора: вы когда-нибудь боролись с вертикальным выравниванием содержимого интерактивных элементов? Вы не одиноки. Многие из сталкивались с этим. В этой статье мы рассмотрим, как центрировать содержимое кнопок и элементов ввода с помощью line-height, padding и flexbox. Итак, какова наша цель? Мы хотим построить систему, в которой: содержимое кнопок и элементов ввода идеально выровнено кнопки […]

14
Сен
2020

Оптимизация CSS для более быстрой загрузки страницы

От автора: не так давно я решил улучшить время загрузки своего сайта. Он уже загружался довольно быстро, но я знал, что еще есть возможности для улучшения, и одним из них была загрузка CSS. Я опишу этот процесс и покажу, как можно улучшить время загрузки. Почему время загрузки важно? Потому что время — деньги. Эта пословица […]

11
Сен
2020

Больше контроля над границами CSS с помощью background-image

От автора: у вас не так много контроля над тем, насколько большими или длинными будут штрихи или пробелы у границ border. И вы, конечно же, не можете придать штрихам наклон, затухание или анимацию! Однако вы можете сделать это с помощью некоторых уловок. Вы можете создать обычную CSS border пунктирной или точечной. Например: [crayon-5f5b1c1c73b6b315158189/] Амит Шин […]

10
Сен
2020

Современные сеточные решения CSS для распространенных проблем макета

От автора: макет и композиция — одни из самых сложных тем в CSS. Особенно когда нужна адаптивность. Мы часто прибегаем к медиа-запросам. Но добавление множества медиа-запросов для различных контрольных точек может сделать CSS неработоспособным. Однако с помощью добавления сеток мы можем преодолеть это. Они не только делают CSS более простым в обслуживании, но и улучшают […]

03
Сен
2020

Drop-Shadow: недооцененный фильтр CSS

От автора: если вы знакомы с CSS, вы, вероятно, знаете об свойстве box-shadow все. Но знаете ли вы, что существует фильтр CSS drop-shadow, который делает нечто подобное? Например, box-shadow, мы можем передать значения для x-offset, y-offset, радиуса размытия и цвета. Пример кода: [crayon-5f509bd35df60623473298/] В отличие от этого box-shadow, он не принимает параметр spread (подробнее об […]

02
Сен
2020

Подробное рассмотрение свойств Flex

От автора: вы когда-нибудь задумывались о том, как работает свойство CSS flex? Это сокращение от flex-grow, flex-shrink и flex-basis. Наиболее распространенный вариант использования, который я вижу в Интернете — flex: 1. Это возможность flex-элемента расширяться и заполнять все доступное пространство. В этой статье я подробно рассмотрю сокращенные и полные свойства и объясню, когда и для […]

28
Авг
2020

Почему макет CSS Grid не заменяет сетку фреймворка

От автора: я встречал много статей и комментариев, в которых говорилось, что пришло время заменить сетку фреймворка на CSS Grid. Я не могу полностью согласиться с этим. Сетка фреймворка — это «пакет» служебных классов, который можно использовать в любом проекте для распределения элементов по (адаптивным) столбцам и строкам. Он может включать сотни строк кода или […]

24
Авг
2020

Использование CSS для определения и переключения тем веб-сайта

От автора: благодаря спецификации Медиа-запросов уровня 5, теперь есть действительно простой способ сопоставить цветовую схему веб-сайта с тем, что пользователь выбрал в своей операционной системе в качестве предпочтительного внешнего вида. Благодаря новому медиа-запросу, который называется prefers-color-scheme, теперь вы можете адаптировать и учитывать, хочу ли я отображать контент в dark или light режимах. Это действительно просто […]

19
Авг
2020

Изучение CSS через CSS OM

От автора: для некоторых статистических данных, которые мы собираемся изучить для веб-альманаха этого года, нам может потребоваться список сокращений CSS и их полных обозначений. Сейчас это обычно делается путем сохранения структуры данных вручную или путем угадывания на основе структуры имени свойства. Но я знала, что если бы мы собирались делать это вручную, очень легко пропустить […]

17
Авг
2020

Полужирный шрифт при наведении без сдвига макета

От автора: когда вы меняете font-weight шрифта, это обычно вызывает небольшое смещение макета. Это потому, что полужирный текст часто больше и занимает больше места. Иногда это не имеет значения, например, вертикальный стек ссылок, где более широкий / полужирный текст все равно ничего не смещает. Иногда это имеет значение, например, горизонтальный ряд, где более широкий / […]

14
Авг
2020

Когда использовать inline-block?

От автора: значение display inline-block является классическим! Оно не ново, и поддержка браузеров — это не то, о чем вам стоит беспокоиться. Я уверен, что многие из нас достигают этого интуитивно. Но давайте поставим точку в этом вопросе. Для чего это на самом деле полезно? Когда вы выбираете его среди других, возможно, похожих, вариантов? Кнопки […]

13
Авг
2020

Совместное использование Flexbox и текстового многоточия

От автора: как-то меня попросили создать таблицу, содержащую список файлов, загруженных пользователями. Представьте себе таблицу, похожую на список файлов в Finder. Примерно такой список: Второй элемент таблицы mobile-phone-screenshot-long-fine-name.png, однако столбец не достаточно большой, чтобы показать полное имя файла. Вместо этого мы видим mobile-phone-sc…g-fine-name.png. В этом проекте мы решили вырезать часть конца имени файла и сохранить […]

12
Авг
2020

Несколько фонов в CSS

От автора: CSS background является одним из наиболее часто применяемых свойств CSS. Тем не менее, использование нескольких фонов до сих пор не известно многим разработчикам. Я расскажу о возможностях применения нескольких фонов и максимально эффективном использовании CSS. В этой статье я подробно рассмотрю свойство background-image и предоставлю наглядное объяснение того, как мы можем наложить несколько […]

11
Авг
2020

Анимированное, переносимое подчеркивание на чистом CSS

От автора: подчеркивание – это непростая задача. Все становится еще сложнее, если вам нужно, что-то более интересное и анимированное, чем может предложить text-decoration: underline в CSS. Есть много разных техник. К сожалению, они почти всегда имеют значительные недостатки. Я столкнулся с некоторыми из этих недостатков, когда хотел «позаимствовать» стили ссылок в посте Кэсси Эванс. У […]

07
Авг
2020

Сетки Часть 1: Использовать сетку или таблицу

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

04
Авг
2020

Три CSS альтернативы навигации в JavaScript

От автора: эй! Вам нужно создать навигацию для сайта, и вы будете работать с мобильным поведением. Какой шаблон вы выбираете? Если вы похожи на большинство людей, то, вероятно, это меню «гамбургер», при нажатии которого используется небольшой JavaScript для расширения вертикального списка навигационных ссылок. Но это не единственный вариант. В зависимости от контекста и содержимого навигации […]

03
Авг
2020

Эффект фонового фильтра с помощью CSS

От автора: мне нравятся эти маленькие посты, где какой-то хитроумный дизайн решается одной строкой CSS с использованием малоизвестного свойства. В этом случае дизайн представляет собой эффект матового стекла, а свойство CSS — backdrop-filter. Подход? Очень простой: [crayon-5f27afa082fd7398648553/] Комментарии также стоит изучить, потому что они касаются поддержки браузерами. Покрытие на самом деле довольно хорошее. Caniuse показывает […]

31
Июл
2020

Необычные свойства CSS

От автора: есть много свойств CSS, о которых некоторые не знают, или знают, но забывают использовать, когда они необходимы. Некоторые из них могут помочь не использовать JavaScript для достижения определенного результата, а некоторые могут сэкономить ваше время, помогая писать меньше CSS. Как фронтенд-разработчик, я время от времени сталкивался с такими вещами и спрашивал себя, почему […]

30
Июл
2020

Гибкие изображения в макетах с изменяющимися пропорциями

От автора: создать гибкие изображения, когда они находятся в макете, в наше время достаточно просто. Однако в более сложных интерфейсах нам часто приходится размещать изображения внутри адаптивных элементов, таких как эта карточка ниже. Пока давайте предположим, что это изображение не является семантическим содержимым, а лишь украшением. Это подходящее использование для фонового изображения. И поскольку в […]

29
Июл
2020

Порядок отрисовки CSS

От автора: как браузер определяет, в каком порядке произвести отрисовку контента? Первое предположение может состоять в том, что браузеры будут рисовать контент в порядке, указанном в DOM, который для HTML-страницы соответствует порядку, который соответствует исходному коду страницы. Мы можем построить простой пример, показывающий, что два div перекрываются в этом порядке. Мы перекрываем два div, задавая […]

28
Июл
2020

Ссылки нестандартной формы с помощью подсетки

От автора: пользовательские интерфейсы на основе карточек — это часто используемые шаблоны веб-дизайна, и нет ничего необычного в создании макета, который требует применения эффекта наведения (или выделения фокусом) для всей карточки. Есть несколько стратегий для реализации этого эффекта с помощью CSS. Но что, если наш эффект наведения ссылок должен влиять на ряд дочерних элементов, и […]

28
Июл
2020

Выравнивание изображений логотипов в CSS

От автора: как front-end разработчик, вы, возможно, работали над созданием раздела, содержащего логотипы брендов, клиентов, компаний, которые вы перечисляете. На первый взгляд эта задача может показаться простой, но она сопряжена с рядом трудностей, связанных с выравниванием и центрированием этих логотипов. Кроме того, некоторые логотипы выглядят горизонтальными, а некоторые — более вертикальными, не говоря уже о […]

27
Июл
2020

Раздвижные ряды в CSS Grid

От автора: еще один аспект редизайна meyerweb, который я хотел бы рассмотреть — это то, как я использую ряды CSS Grid для большей гибкости макета. Во-первых, давайте представим макет страницы по умолчанию здесь, на meyerweb. Это выглядит примерно так: Так просто, даже flexbox мог бы сделать это! Но это только если вещи всегда остаются такими […]

23
Июл
2020

Определение стилей контейнера макетов в CSS

От автора: контент-ориентированный веб-сайта должен иметь ограничивающую оболочку или ширину, облегчающую чтение. Чтобы достичь этого, мы можем использовать то, что называется контейнером. Использовать контейнер в CSS возможно различными способами, что может привести к возникновению некоторых проблем. В этой статье я расскажу о контейнерах макетов в CSS, как они работают, как их использовать и когда их […]

20
Июл
2020

Отладка HTML с помощью расширенных селекторов CSS

От автора: написание HTML — сложная задача. По крайней мере написание семантически обоснованного, верного HTML. Это может стать сюрпризом для тех, кто только поверхностно анализирует возможности HTML. Что может быть такого сложного в нескольких элементах, верно? По крайней мере, это не объектно-ориентированный, мультипарадигмальный язык программирования. Но как только вы начинаете копать глубже, вы понимаете, что […]

17
Июл
2020

Основы CSS: Анимация

От автора: CSS-анимация — отличный способ анимировать свойства CSS от одного значения к другому. В то время как мы можем использовать переходы для выполнения отдельных движений, анимация дает нам намного более тонкий контроль. Некоторые общие свойства, которые мы можем анимировать, включают цвета (color и background-color) и числа, такие как height и width. Ознакомьтесь с полным […]

16
Июл
2020

Несоответствия рендеринга шрифтов в браузерах

От автора: я работал над проектом, который требовал подтягивания к моему личному веб-сайту инструментов разработчика в разных браузерах. Когда я открыл Safari и заметил, насколько сильно отличается заголовок моей страницы. В Safari он был чрезвычайно жирным по сравнению с другими браузерами. Гораздо жирнее, чем я ожидал. Я посмотрел на таблицу стилей и увидел, что я […]