Главная » Архив меток: CSS 3

Архив меток: CSS 3

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »