Повспоминаем школу…Практически все дети в мире задаются вопросом, «Зачем нам надо посещать уроки математики, алгебры и геометрии? 2+2 знаем и хорошо, а тут еще и экзамены существуют, и производные, синусы с косинусами…». Некоторые дети отчаянно скучают на таких уроках, когда как другие, наоборот, даже любят решать всякие задачки и примеры с уравнениями. Но чем старше становятся дети, тем больше они начинают понимать, что некоторые математические основы действительно имеют практическое применение в их повседневной жизни, в ВУЗе, затем уже в работе. Мы не говорим об инженерии в глобальном смысле, но о повседневности. Банальный пример – «золотое сечение», используемое в рисовании и архитектуре, как минимум, и в веб-дизайне.
Вопрос, который встает перед некоторыми людьми сейчас: «Нужно ли быть отличником/хорошистом в математике, чтобы стать хорошим веб-разработчиком, поскольку с числами и вычислениями приходится оперировать весьма нередко?». И знаете, если сейчас вы думаете о том, что «хороший математик» это значит разбираться в чисто математических понятиях, таких как анализ или вычисления с несколькими переменными, которые включают в себя множество доказательств и теорем, а их решение может растянуться во всю стену (не на тетрадном двойном листочке), то мы должны признать, что эти навыки в веб-дизайне или в веб-разработке уж точно не нужны. Можно расслабиться и выдохнуть. Впрочем, некоторые практические навыки, вероятно, еще помнятся со школьной/вузовской скамьи и иногда немного применяются в контексте веб-верстки и дизайна.
Обратимся детальнее к теме статьи. Например, использование ширины border для создания треугольников подразумевает знания того, как браузер создает и отрисовывает границывообще+, так и некоторых знаний тригонометрии для понимания того, каким образом произошел сброс и изменение стиля для формы, и как можно изменить подход к отрисовке для создания совсем иной формы. В действительности это не так и сложно, просто мало кто задумывается, что лежит в основе современных возможностей.
Но давайте взглянем на некоторые аспекты веб-разработки, где математика может пригодиться.
Геометрия
Рисование фигур с помощью CSS
Геометрия способна помочь с пониманием того, как можно создавать фигуры в CSS. Возьмем простое свойство border-radius, которое используется для округления углов внешних границ элементов. Обычно верстальщики устанавливают некоторое значение и продолжают работать. И это простой, удобный и быстрый способ, никто и не спорит о нем. Но давайте посмотрим чуть ближе на это свойство.
В border-radius объединены четыре свойства, описывающих значение четырёх углов элемента: верхний левый, верхний правый и так далее, что логично, ибо из квадрата (пикселя) при этом свойстве сразу создается круг. Но особенность в том, что эти свойства может иметь два значения: радиуса по горизонтали и радиуса по вертикали. Как видно на изображении верхний радиус меньше, а потому округлость углов неодинаковая, фигура выглядит слегка «кривоватой». В тоже время, для создания идеала достаточно, как обычно, прописать 50% или указать точное значение в px и работать дальше, свёрстывая дизайн. И это основа CSS, но о ней вспоминают не всегда.
Треугольники тоже создаются весьма интересным способом. Суть в том, что при создании границ вокруг квадрата, происходит их соединение по диагонали. Если основной элемент имеет размер 0 (по ширине/высоте), то мы и видим стык четырех треугольников. Также обратите внимание на то, что поскольку так много треугольников бывает не нужно, то все остальные делаются прозрачными (transparent). Примеры мы приводили в начале нашего материала. От варианта стыка, когда центральная часть имеет размер 0, и создаются как раз обычные треугольники.
Да, опять-таки ничего сверхъестественного, но это и есть школьная база по геометрии для расчета окружностей и углов. И если внимательнее изучить CSS в целом, а не просто, как необходимый функционал для веб-верстки, то можно найти и другие интересные закономерности.
Теорема Пифагора для CSS
И она тоже есть! И само собой, что речь пойдет опять-таки о треугольниках, но не сколько об отрисовке, сколько о расчетах. В случае, когда требуется неправильный треугольник, то и может пригодиться теорема Пифагора, для того, чтобы высчитать нужные высоты. Нагляднее смотрите ниже.
Таким нехитрым способом мы применяем знания, полученные когда-то в школе в веб-верстке и веб-дизайне. А если еще и понаблюдать, как созданы CSS на разных сайтах, то тем более становится все занятнее и занятнее. Мы как раз и говорили в прошлый раз о полезности использования шаблонов и тем.
Вот банальный пример, дизайнер придумывает красивый кусочек треугольника, что смотрит вниз и будто висит на линии. Отрисовывает его в Photoshop, но ведь много картинок на сайте тоже не слишком уж и хорошо. И разработчик задумывается, как бы это описать, дабы не было бы картинкой. Здесь как раз и придется в помощь метод «стирания» ненужного.
И еще несколько интересных примеров рисования фигур с помощью CSS. Не обычных и стандартных, а уже чуть более сложных. Множественные круги, сложный цветок, лепестки (как детализация), стрелочки
Арифметика
Это кажется совершенно незначительным, но если вы делаете какой-либо отзывчивый дизайн, что в настоящее время считается обязательным, арифметика очень важна для вас. Что же она может делать и какую принести пользу, если и самим-то считать не нужно, есть же калькуляторы! Обратим свой взор на единицы и значения в CSS, поскольку их первую очередь и нужно подсчитывать. И наверно, кому-то покажется все банальным и простым снова, как и в геометрии, но именно на простом и базируются «сложные» красоты и программный код.
Числа имеют в CSS3 особое значение, как и свойства, и описываются в спецификациях CSS Values and Units Module Level 3. Ключевой функцией для нас, в данном случае, является calc(), поддерживающая четыре основные операции: сложение, вычитание, умножение и деление.
В те дни, когда веб-дизайн был фиксированным, разработчики создавали идеально-пиксельные проекты, которые работали только при просмотре на определенных видах экранов (размерах). Это было просто, быстро и сложностей не возникало. Но поскольку количество различных размеров экрана, которые пользователи используют для серфинга в Интернете, росло экспоненциально, проекты с фиксированной шириной перестали соответствовать действительности.
В такой ситуации разумнее позволить браузеру самому определять размер элементов на странице в зависимости от размера экрана монитора, используя значения ширины элементов в процентах, размеры шрифтов в em или ch, а в последнее время – единицы размеров viewport, которых несколько. Что же касается функции calc, то она «смешивает» значения разных единиц CSS, совершая, тем самым, самые каверзные вычисления, чтобы веб-разработчики могли сосредоточиться на проектировании и строительстве макетов и компонентов, которые способны радовать наши глаза. Да, звучит, будто это нечто магическое, на уровне «супер-пупер-нечто». В действительности все просто. Использование calc для выравнивания.
Посмотрим, снова, на разные варианты применения и примеры.
Плавающий нижний колонтитул
Общим требованием для многих веб-проектов является факт того, чтобы нижний колонтитул всегда был на виду в нижней части окна браузера, даже если сама страница еще очень и очень длинная. Такой эффект в наши дни достигается разными способами, но использование calc некоторыми верстальщиками считается более красивым вариантом. В данном случае, нижний колонтитул не ограничится своей высотой и даже если его содержимого мало, он все равно будет в пределах окна браузера. Самый простой пример использования calc везде, где удобно – сайт Blizzard, и нижний колонтитул есть, и плавающее меню, и не только.
Вот некоторая очень простая базовая разметка, состоящая из header, main и footer элементов.
Чтобы нижний колонтитул footer находился в нижней части страницы, независимо от количества содержимого внутри main элемента, этот самый main элемент должен иметь минимальную высоту 100% высоты области просмотра, которая не должна превышать высоты верхнего и нижнего колонтитула вместе взятых. Рассчитывается это по формуле:
100% viewport height – (height of header + height of footer)
Переведем это в CSS (предполагается, что стили браузера уже сброшены) и получаем:
Без дополнительного стиля высота верхнего (header, заголовок) и нижнего колонтитула должна быть связана текстом внутри них. Также отметим, что использование min-height вместо height лучше тем, что если контента больше, чем в видимой области, он будет отображаться в обычном режиме.
Текучая (fluid) типографика
Речь идет о достаточно частом эффекте, применяемом в отзывчивых дизайнах, когда шрифт текста изменяет свой размер в зависимости от размера окна браузера. Пример на Codepen (просто сами уменьшите/увеличьте окно браузера и увидите изменения). Его рассмотрим детальнее.
Математика в данном варианте используется для определения размеров шрифта при разной ширине области просмотра. Таким образом, получается, что размер шрифта может быть чем-то более сложным, чем просто значение в px или em единицах. Проблема с этим подходом заключается в том, что если окно просмотра становится слишком маленьким, ваш шрифт может потенциально сжиматься до неразборчивого размера. Прочитать его будет проблематично и соответственно, что допускать этого никак нельзя.
Все на том же сайте, текст уменьшился очень, но и окно браузера более сужать тоже нельзя. При этом и тот, и другой вариант – читаем и разборчив.
И вот чтобы как-то бороться с автоматически уменьшающимся размером шрифта, вновь можно обратиться к функции calc для определения этого самого минимального размера букв.
Это просто, но контроля мало. Если есть необходимость (а она обычно есть) в возможности регулирования размера шрифта, то в это уравнение добавляется больше разных переменных. Понятие «плавающего» текста (шрифтов) было введено Mike Riethmuller в его статье, что является продолжением идеи Тима Брауна (Tim Brown). Уравнение же выглядит следующим образом:
В свою очередь, Флоренс Вершельде (Florens Verschelde) позже решил глубже погрузился в тему значения математики в CSS в своей статье, выразив вычисление размера шрифта в линейной функции. Такие функции строятся в виде графиков, что значительно упрощает их осознание и визуализирует соотношение размера шрифта с размером видимой области.
Выводы
Задумываясь когда-то, зачем нам школьные знания, мало кто мог тогда думать о том, что они реально могут пригодиться в такой сфере деятельности, как веб-разработка и верстка. Да и мало кто из учителей мог сказать такое или предложить, как вариант. Это если вы учились в 90-х – 2000-х годах. Теперь же, понимание и знание данного факта может кого-то обескуражить, а кого-то и не удивить вовсе.
Но творческая работа очень часто бывает связана с математикой, с расчетом масштабов и размеров, соотношением разных величин, отрисовками правильных или кривых форм. А, ведь, еще есть и правило «Золотого сечения», ссылочку на статью мы в начале оставляли.
Такой взгляд на дизайн и верстку, безусловно, дает больше интереса к изучению верстки и сильнее интригует разработчиков, вне зависимости от их профессионализма. Хотя… если просто сказать: «В верстке и дизайне важно знать математику», то ужас в глазах слушающего человека будет с вероятностью в 99%...
