Css рисование фигур: Геометрические фигуры на CSS / Хабр

Общим требованием для многих веб-проектов является факт того, чтобы нижний колонтитул всегда был на виду в нижней части окна браузера, даже если сама страница еще очень и очень длинная. Такой эффект в наши дни достигается разными способами, но использование calc некоторыми верстальщиками считается более красивым вариантом. В данном случае, нижний колонтитул не ограничится своей высотой и даже если его содержимого мало, он все равно будет в пределах окна браузера. Самый простой пример использования calc везде, где удобно – сайт Blizzard, и нижний колонтитул есть, и плавающее меню, и не только.

Вот некоторая очень простая базовая разметка, состоящая из header, main и footer элементов.

Чтобы нижний колонтитул footer  находился в нижней части страницы, независимо от количества содержимого внутри main элемента, этот самый main элемент должен иметь минимальную высоту 100% высоты области просмотра, которая не должна превышать высоты верхнего и нижнего колонтитула вместе взятых. Рассчитывается это по формуле:

100% viewport height – (height of header + height of footer)

Переведем это в CSS (предполагается, что стили браузера уже сброшены) и получаем:

Без дополнительного стиля высота верхнего (header, заголовок) и нижнего колонтитула должна быть связана текстом внутри них. Также отметим, что использование min-height вместо height лучше тем, что если контента больше, чем в видимой области, он будет отображаться в обычном режиме.

Речь идет о достаточно частом эффекте, применяемом в отзывчивых дизайнах, когда шрифт текста изменяет свой размер в зависимости от размера окна браузера. Пример на Codepen (просто сами уменьшите/увеличьте окно браузера и увидите изменения). Его рассмотрим детальнее.

Математика в данном варианте используется для определения размеров шрифта при разной ширине области просмотра. Таким образом, получается, что размер шрифта может быть чем-то более сложным, чем просто значение в px или em единицах. Проблема с этим подходом заключается в том, что если окно просмотра становится слишком маленьким, ваш шрифт может потенциально сжиматься до неразборчивого размера. Прочитать его будет проблематично и соответственно, что допускать этого никак нельзя.

Все на том же сайте, текст уменьшился очень, но и окно браузера более сужать тоже нельзя. При этом и тот, и другой вариант – читаем и разборчив.

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

Это просто, но контроля мало. Если есть необходимость (а она обычно есть) в возможности регулирования размера шрифта, то в это уравнение добавляется больше разных переменных. Понятие «плавающего» текста (шрифтов) было введено Mike Riethmuller в его статье, что является продолжением идеи Тима Брауна (Tim Brown). Уравнение же выглядит следующим образом:

В свою очередь, Флоренс Вершельде (Florens Verschelde) позже решил глубже погрузился в тему значения математики в CSS в своей статье, выразив вычисление размера шрифта в линейной функции. Такие функции строятся в виде графиков, что значительно упрощает их осознание и визуализирует соотношение размера шрифта с размером видимой области.

Задумываясь когда-то, зачем нам школьные знания, мало кто мог тогда думать о том, что они реально могут пригодиться в такой сфере деятельности, как веб-разработка и верстка. Да и мало кто из учителей мог сказать такое или предложить, как вариант. Это если вы учились в 90-х – 2000-х годах. Теперь же, понимание и знание данного факта может кого-то обескуражить, а кого-то и не удивить вовсе.

Но творческая работа очень часто бывает связана с математикой, с расчетом масштабов и размеров, соотношением разных величин, отрисовками правильных или кривых форм. А, ведь, еще есть и правило «Золотого сечения», ссылочку на статью мы в начале оставляли.

Такой взгляд на дизайн и верстку, безусловно, дает больше интереса к изучению верстки и сильнее интригует разработчиков, вне зависимости от их профессионализма. Хотя… если просто сказать: «В верстке и дизайне важно знать математику», то ужас в глазах слушающего человека будет с вероятностью в 99%.. .

CSS-площадка: рисование различных фигур с помощью CSS

• Квадрат и прямоугольник

• Треугольники

  • пограничная собственность

• Орудие

  • Подробнее о треугольнике
• Трапеция

• Круг

  • радиус границы
  • Орудие
• Овальный
• Квадрант
• Конус
• Резюме

Квадрат и прямоугольник

Квадрат и прямоугольник — это простые формы, которые можно рисовать с помощью CSS, поскольку они являются естественными формами в Интернете.

Квадрат

 .квадрат {
  ширина: 200 пикселей;
  высота: 200 пикселей;
  цвет фона: орхидея;
} 

Прямоугольник

 .retangle {
  ширина: 200 пикселей;
  высота: 100 пикселей;
  фоновый цвет: средне-фиолетовый;
} 

Треугольники

граница свойства

Прежде чем рисовать треугольник, давайте взглянем на свойство

(Если вы не знакомы с CSS Box Model , вы можете нажать здесь).

 .box {
  ширина: 200 пикселей;
  высота: 200 пикселей;
  
  граница сверху: 10px сплошной светло-зеленый;
  граница справа: 10px сплошной средне-фиолетовый;
  нижняя граница: 10px сплошной светлый лосось;
  граница слева: однотонные мокасины 10 пикселей;
}
.содержание{
  ширина: 100%;
  высота: 100%;
  размер шрифта: 50px;
  цвет фона: небесно-голубой;
  выравнивание текста: по центру;
  высота строки: 200 пикселей;
} 

Вы видите, что границы одинаковой ширины упираются друг в друга под углом 45 градусов.

Орудие

Удалите поле содержимого (синяя область) и увеличьте ширину всех границ.

 .box {
  ширина: 0;
  высота: 0;
  
  граница сверху: 100 пикселей сплошной светло-зеленый;
  граница справа: 100 пикселей сплошной средне-фиолетовый;
  нижняя граница: 100px сплошной светлый лосось;
  граница слева: однотонные мокасины размером 100 пикселей;
} 

В итоге у нас получилось 4 треугольника.

Просто сделайте остальные цвета рамок прозрачными:

  .box {
  ширина: 0;
  высота: 0;
  
  граница сверху: 100px сплошная прозрачная;
  граница слева: 100px сплошная прозрачная;
  граница справа: 100 пикселей сплошная прозрачная;
  нижняя граница: 100px сплошной светлый лосось;
} 

Подробнее о треугольнике

Мы можем «повернуть» треугольник, установив, какая граница непрозрачна.

 .triangle1 {
  ширина: 0;
  высота: 0;
  
  граница сверху: 100px сплошная прозрачная;
  граница слева: 100px сплошной средне-фиолетовый;
  граница справа: 100 пикселей сплошная прозрачная;
  нижняя граница: 100px сплошная прозрачная;
}
.треугольник2 {
  ширина: 0 пикселей;
  высота: 0px;
  
  граница сверху: 100 пикселей сплошной светло-зеленый;
  граница слева: 100px сплошная прозрачная;
  граница справа: 100 пикселей сплошная прозрачная;
  нижняя граница: 100px сплошная прозрачная;
}
.triangle3 {
  ширина: 0;
  высота: 0;
  
  граница сверху: 100px сплошная прозрачная;
  граница слева: 100px сплошная прозрачная;
  граница справа: 100 пикселей сплошная прозрачная;
  нижняя граница: 100px сплошной светлый лосось;
}
.
  triangle4 {
  ширина: 0;
  высота: 0;
  
  граница сверху: 100px сплошная прозрачная;
  граница слева: 100px сплошная прозрачная;
  граница справа: однотонные мокасины размером 100 пикселей;
  нижняя граница: 100px сплошная прозрачная;
} 

Трапеция

Что произойдет, если мы добавим значение

 .box{
  ширина: 150 пикселей;
  высота: 0px;
  
  граница сверху: 100 пикселей сплошной светло-зеленый;
  граница слева: однотонные мокасины размером 100 пикселей;
  граница справа: 100 пикселей сплошной средне-фиолетовый;
  нижняя граница: 100px сплошной светлый лосось;
} 

Отлично, у нас получилось 4 трапеции! Как и в случае с треугольниками, мы можем получить единую трапецию, скрыв 3 границы.

 .трапеция{
  ширина: 150 пикселей;
  высота: 0px;
  
  верхняя граница: 100 пикселей прозрачная;
  граница слева: 100px сплошная прозрачная;
  граница справа: 100 пикселей сплошная прозрачная;
  нижняя граница: 100px сплошной светлый лосось;
} 

Circle

border-radius

Прежде чем мы перейдем к кругу, давайте сначала посмотрим, как работает border-radius ?

Как и многие свойства CSS, относящиеся к полям, отступам и границам, существует четыре отдельных свойства — по одному для каждого угла элемента блока — и одно сокращенное свойство.

 граница-вправо-радиус
граница-нижний-правый-радиус
граница-нижний-левый-радиус
граница-верхний-левый-радиус
border-radius 

Каждое из свойств border-radius

 граница-*-радиус: [ <длина> | <%> ] [ <длина> | <%> ]? 

На следующей диаграмме показано несколько примеров того, как могут выглядеть углы с разным радиусом:

Implement

Если мы установим border-radius: 50% (50% может быть (width/2)px) в квадрате, мы можем получить круг.

Овал

Круг создается из квадрата, овал создается из прямоугольника.

 .овал {
  ширина: 200 пикселей;
  высота: 100 пикселей;
  радиус границы: 50%;
  цвет фона: бледно-зеленый;
} 

Quadrant

Нарисовать квадрант легко, если вы научились рисовать круг, просто установите значение border-radius от 50% до 100% .

 .квадрант {
 цвет фона: глубокий небесно-голубой;
 ширина: 200 пикселей;
 высота: 200 пикселей;
 радиус границы: 100% 0 0 0;
} 

То же, что и треугольник, вы можете установить значение border-radius , чтобы «повернуть» квадрант.

Конус

Конус можно нарисовать с помощью техники треугольника и круга.

 .конус {
  ширина: 0;
  высота: 0;
  граница слева: 150px сплошная прозрачная;
  граница справа: 150 пикселей сплошная прозрачная;
  граница сверху: 200 пикселей сплошной песочно-коричневый цвет;
  радиус границы: 50%;
} 

Резюме

Вы можете найти всю реализацию в моей кодовой ручке.

Теперь ваша очередь создать собственную форму значка с помощью css.

Как нарисовать квадрат, круг, треугольник и другие формы с помощью CSS

Очень просто!! Но без ручки, карандаша или мыши рисовать фигуры только языком действительно романтично . Нет? Вот что мы собираемся сделать. В этом уроке мы покажем удобный способ рисования квадрата , прямоугольника, круга, овала и треугольника с использованием различных приемов и стратегий

Следуя этому, вы можете рисовать свои собственные формы, просто изменяя значение свойств как по душе . Давайте начнем:

Но для этого вы должны иметь простое представление о CSS, так как мы не будем здесь вдаваться в основы CSS .

Если у вас нет, начните с базовыми знаниями CSS отсюда –

• Детективный обзор CSS

Как нарисовать квадрат в CSS

Квадрат — это плоская фигура, которая имеет четыре равные прямые стороны с четырьмя прямыми углами .

Чтобы нарисовать квадрат, просто возьмите раздел . Стилизуйте его с одинаковыми значениями ширины и высоты . Чтобы сделать его видимым, установите свойство border или background . Вот и все. Вы также можете использовать элемент p вместо div .

Теперь взгляните на код и посмотрите на вывод:

КОД

<дел>