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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

От автора: когда свойство -webkit-line-clamp применяется к блоку текста (например, абзацу), текст можно ограничить указанным количеством строк (1 или более), и в конец последней видимой строки добавить многоточие (…). Таким образом, вы можете с помощью CSS скрыть текст, выходящий за блок. .line-clamp-3 { /* Обязательные объявления: */ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; /* Ограничиваем блок текста тремя строками */ ...

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

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

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

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

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

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

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

Относительные размеры с помощью единиц EM

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

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