Рубрика «css» - 24

В CSS есть ключевое слово auto, которое можно использовать при работе с различными свойствами элементов. Это — свойства, влияющие на позицию, высоту, ширину элементов. Это — свойства, предназначенные для настройки отступов элементов и других их характеристик. У меня появилось желание где-нибудь записать всё то, что я знаю об auto. Например — оформить это всё в виде материала, который мог бы стать справочником для тех, кто интересуется тонкостями использования этого ключевого слова.

Ключевое слово auto имеет особый смысл при использовании его с различными CSS-свойствами. Мы разберём особенности auto, касающиеся применения этого значения к различным свойствам.

Здесь, в первую очередь, нас будут интересовать технические детали работы auto. Поговорим мы и о том, как извлечь максимум пользы из применения этого свойства. Тут вы найдёте и заметки о сценариях использования auto, и примеры.
Читать полностью »

В CSS есть особая функция calc(), применяемая для выполнения простых вычислений. Вот пример её использования:

.main-content {
  /* Вычесть 80px из 100vh */
  height: calc(100vh - 80px);
}

Здесь с CSS-кодом, в котором используется calc(), можно поэкспериментировать.

Автор статьи, перевод которой мы сегодня публикуем, хочет рассказать обо всём, что стоит знать об этой весьма полезной функции.
Читать полностью »

Недавно меня попросили подправить один лендинг. Среди того, что я нашла в его коде, было изображение, поверх которого были расположены два перекрывающих его полупрозрачных элемента. Оба — с одними и теми же RGB-значениями цвета в свойстве background-color. Выглядело это примерно так:

<img src='myImage.jpg'/>
<div class='over1'></div>
<div class='over2'></div>

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

В результате я решила избавиться от одного из слоёв и задать параметр opacity оставшегося так, чтобы внешне изображение выглядело так же, как и прежнее. Всё это хорошо, но тут возник вопрос: как настроить параметр opacity оставшегося элемента так, чтобы результат был таким же, как при применении двух полупрозрачных слоёв?
Читать полностью »