Использование функции CSS3 calc ()
5 марта 2016 | Опубликовано в css | Нет комментариев »
Вы, возможно, знаете, что с помощью препроцессоров CSS можно задавать значения размеров по специальным формулам. Но подобное можно сделать и с помощью функции CSS3 calc(). В этом уроке мы рассмотрим, как использовать эту функцию в таблице стилей.
Использование функции calc()
С помощью функции calc() можно задавать значения таких размеров, как ширина, высота, внешние и внутренние отступы, размер шрифта и т. д. Для измерений можно использовать математические действия: сложение, вычитание, деление и умножение.
Например, у нас есть блок с тремя вложенными блоками, как показано ниже:
<div class="col one">A</div> <div class="col two">B</div> <div class="col three">C</div>
С помощью функции calc() можно добиться, чтобы эти три блока выглядели, как столбцы одинаковой ширины, следующим образом:
.wrapper .col { width: calc(100% / 3); padding: 0 10px; }
Математическое действие calc(100% / 3); разделяет 100% ширины родительского блока на три, и в браузере это выглядит, как три блока равной ширины:
Посмотрите по ссылке ниже, как это работает.
Демонстрация работы – Скачать исходный код
Также Kurt Maine показал, что с помощью функции calc() очень удобно создавать адаптивную верстку.
Несколько замечаний
При использовании функции calc() стоит обратить внимание на следующие особенности:
- Вычисления проводятся слева направо.
- Сначала производятся умножение и деление, и действия в скобках.
- Приставки производителей -moz- и -webkit- нужны для старых версий браузров Firefox и Chrome.
- Для вычислений можно использовать разные единицы измерения, например: calc(50% – 10px).
- Знаки плюс и минус должны быть отделены пробелами, например, функция calc(100% -5px) вернет ошибку, так как она переводится как процент за которым следует отрицательное значение. Но пробелы не нужны для знаков умножения * и деления /.
Заключение
Раньше, без CSS3 и препроцессоров CSS, мы были ограниченны фиксированными размерами. Теперь с помощью функции calc() можно задавать размеры более гибко, за дополнительной информацией об этой функции можно обратиться к следующим источникам:
- Документация на функцию calc() – W3.org
- Жемчужины CSS3: функция calc() – Site Point
- Поддержка браузерами функции calc() – caniuse.com
Автор урока Thoriq Firdaus
Смотрите также:
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191