Category: CSS 3

20
Авг
2019

Почему вы обязательно должны научиться использовать CSS-in-JS

От автора: время от времени я слышу, что CSS-in-JS создает барьер для входа некоторым людям. Как и любая новая программная абстракция, CSS-in-JS предназначен для того чтобы убрать некоторые сложности из реализации более низкого уровня, в данном случае CSS.

19
Авг
2019

Работа с несколькими столбцами — CSS Multi-column Layout

От автора: несмотря на то, что он предшествовал Grid and Flexbox, Multi-column Layout в CSS представляет собой — по крайней мере, для меня — еще более радикальный отход от того, что мы обычно делаем, и как думаем о макете CSS. Разделение только одного элемента на его многоколоночное представление содержимого кажется странным, даже еретическим. Установка многостолбцового […]

16
Авг
2019

Естественно адаптивная сетка CSS с помощью minmax() и min()

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

15
Авг
2019

Использование пользовательских атрибутов CSS, сгенерированных JavaScript, в качестве механизма передачи

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

14
Авг
2019

Самый простой способ асинхронной загрузки CSS

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

13
Авг
2019

Как добавить резервный Flexbox вариант для CSS Grid

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

12
Авг
2019

Flexbox и отступы: примеры работы

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

31
Июл
2019

Flexbox justify-content: полное руководство по центрированию

От автора: Flexbox — это популярный модуль макета CSS, который помогает позиционировать элементы HTML на экране. Есть много сценариев использования, когда он может оказаться настоящей находкой; горизонтальное и вертикальное центрирование из их числа. Центрирование Flexbox justify-content решает стандартные проблемы выравнивания, с которыми вы можете столкнуться при работе с традиционной блочной моделью CSS. Это позволяет центрировать […]

29
Июл
2019

Добавление крутых эффектов с помощью режимов наложения CSS

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

05
Июл
2019

Почему большинство разработчиков боятся CSS

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

04
Июл
2019

Как сделать таблицы адаптивными с CSS

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

03
Июл
2019

CSS эффект для лендинга. Эффект воды

От автора: в этом уроке вы найдете шикарный эффект для лендинга или любого другого сайта, который реализуется с помощью плагина jQuery Ripples. Буквально за несколько строк кода вы получите интересный эффект воды, точнее, эффект водной ряби, который привязан к движению и кликам мыши. Выглядит полученный эффект – великолепно и надолго задержит посетителей сайта, которые решат […]

28
Июн
2019

CSS Grid Level 2 — subgrid вводится в Firefox

От автора: функция подсетки subgrid спецификации CSS Grid еще не реализована ни в одном браузере, но теперь она доступна для тестирования в Firefox Nightly. Это функция, которая, если вы использовали CSS Grid для макета любой сложности, скорее всего, вас очень порадует. В этой статье я собираюсь представить функцию и некоторые варианты ее использования. Так что […]

27
Июн
2019

Скролл для блока с плагином SimpleBar

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

26
Июн
2019

Архитектура CSS — структура папок и файлов

Прежде чем мы начнем, несколько слов о том, кто я. Меня зовут Элад Шехтер, и я работаю разработчиком 13 лет. Последние девять лет я работаю над архитектурой CSS / HTML. В этой статье я покажу мои рекомендации по определению архитектуры CSS, основанные на моем многолетнем опыте.

24
Июн
2019

Как правильно мыслить, чтобы писать CSS

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

20
Июн
2019

Использование метода Grid Shepherd для упорядочивания данных с CSS

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

20
Июн
2019

Переменные CSS: преимущества пользовательских свойств

От автора: Переменные CSS или «Пользовательские свойства CSS». Они позволяют работать с переменными непосредственно в CSS. Они очень полезны для уменьшения повторения в CSS, а также для создания мощных эффектов во время выполнения, таких как переключение тем. Они соответствуют принципу DRY — Don’t Repeat Yourself. С помощью переменных CSS вы можете локализовать значения и упростить начальную разработку, […]

07
Июн
2019

10 экономящих время советов по CSS, которые я освоила при использовании Sass

От автора: эти 10 советов по работе с CSS помогут вам сэкономить время и лучше взаимодействовать с командой. Иногда мы думаем, что знаем все, что нам нужно знать о SCSS, и что мы можем уделить больше времени JavaScript. Мне жаль, что я говорю это, но вы должны уделять больше внимания таблицам стилей. Я работала в […]

05
Июн
2019

Трансформация кнопки гамбургера

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

03
Июн
2019

Функция CSS для усечения многострочного текста была реализована в Firefox

От автора: когда свойство -webkit-line-clamp применяется к блоку текста (например, абзацу), текст можно ограничить указанным количеством строк (1 или более), и в конец последней видимой строки добавить многоточие (…). Таким образом, вы можете с помощью CSS скрыть текст, выходящий за блок. [crayon-5cf4ba845b13a617976447/] Примечание. Убедитесь, что элемент не имеет (нижнего) отступа, чтобы не допускать визуализации текстовых […]

03
Июн
2019

Мигающий текст на CSS

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

31
Май
2019

Правила CSS, которые сделают вашу жизнь проще

От автора: после нескольких лет написания и поддержки нескольких очень больших веб-проектов и множества более мелких, я разработал некоторую эвристики для написания поддерживаемого CSS. Я использовал для именования BEM, SMACSS и CSS Modules, хотя эта статья сама по себе не посвящена именованию. (Я склонен использовать сочетание атомарных классов и именования BEM.) Эта статья о полезных […]

29
Май
2019

Перенос на новую строку с помощью flexbox

От автора: вот проблема: если вы хотите создать макет с несколькими строками элементов, как вы можете контролировать во flexbox перенос элементов на новую строку? Предположим, вы хотите создать макет, который выглядит примерно так, с чередующимися строками из трех элементов и одним элементом на всю ширину: Распространенным способом управления позиционированием и размером flex-элементов является использование width […]

28
Май
2019

4 причины, по которым ваш z-index CSS не работает (и как это исправить)

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

27
Май
2019

О, так много способов создать строку ссылок в виде треугольных лент!

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

24
Май
2019

Создание адаптивного макета сетки CSS Grid без медиа-запросов

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

20
Май
2019

Tailwind CSS: это Bootstrap завтрашнего дня?

От автора: наверное, вам пока мало что известно о Tailwind CSS. Мы переживаем ренессанс удивительных веб-платформ и адаптивного дизайна. Адаптивные пользовательские интерфейсы в основном реализуются с помощью таких библиотек, как Bootstrap, Foundation, Bulma или старых добрых медиа-запросов. Мы с легкостью использовали эти наборы пользовательского интерфейса для реализации директив, чтобы добиться точного пользовательского интерфейса и надлежащего […]