Фигуры

Как сделать диаграмму на css

Проблема

Секторные диаграммы — даже в самой простой своей двухцветной форме — всегда славились сложностью создания с помощью веб-технологий, несмотря на широкое распространение и массу вариантов использования: от представления простых статистических данных до индикаторов прогресса и таймеров. Реализации чаще всего означают создание нескольких изображений для разных значений секторной диаграммы во внешнем графическом редакторе или необходимость прибегать к помощи объемных каркасов JavaScript, предназначенных для куда более сложных диаграмм.

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

Как сделать секторную диаграмму на CSS

 

Прочитать больше

Как сделать вкладки в форме трапеций

Проблема

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

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

как сделать вкладки в форме трапеций

 

Пример вкладок в форме трапеций
В Cloud9  все открытые документы отображаются на вкладках в форме трапеций

 

В одном из предыдущих дизайнов веб-сайта https://css-tricks.com/ также фигурировали вкладки в форме трапеций, хотя они были скошены только с одной стороны
Так как все хорошо известные техники создания трапеций довольно запутанны и порождают хаотичный, сложный в поддержке код, большинство вкладок, которые мы встречаем в Сети, не имеют скошенных сторон, хотя реальные вкладки в приложениях чаще всего выглядят как раз как трапеции. Существует ли разумный и гибкий способ определять трапециевидные вкладки?

Прочитать больше

Как срезать углы на css

Проблема

Срезание углов — это не только быстрый способ достичь цели, но и популярный вариант стилизации как в печатном дизайне, так и в веб-дизайне. Чаще всего он подразумевает обрезание одного или нескольких уголков контейнера под углом 45°. В последнее время, в связи с тем, что скевоморфизм начал сдавать позиции плоскому дизайну, этот эффект пользуется особенной популярностью. Когда углы срезаются только с одной стороны и каждый из них занимает 50% высоты элемента, это создает фигуру в форме стрелки, что также часто используется в оформлении кнопок и элементов навигации типа «хлебные крошки».

как срезать угол на CSS

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

пример сайта со срезанными углами
Пример веб-сайта, где срезанный угол (нижний левый у полупрозрачного поля Find & Book) отлично вписывается в дизайн

 

Прочитать больше

Как сделать ромб на css

Проблема

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

как сделать ромб на CSS

 

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

Прочитать больше

Как создать параллелограмм на CSS

Проблема

Параллелограммы — это расширенная версия прямоугольников: их стороны параллельны, но углы не обязательно прямые. В визуальном дизайне они часто используются для придания оформлению динамичности и передачи ощущения движения.
Давайте попробуем создать ссылку, оформленную с помощью CSS в стиле скошенной кнопки. Нашей отправной точкой будет обычная плоская кнопка с очень простым оформлением. Форму скошенного прямоугольника мы придадим ей с помощью трансформации  skew(), (о трансформациях в css я писал здесь) вот так:
transform: skewX(-45deg);
Однако в результате этого содержимое кнопки также исказилось, стало некрасивым и нечитаемым. Существует ли способ создавать скошенные контейнеры так, чтобы их содержимое при этом не перекашивалось?

как создать параллелограмм на CSS

 

Прочитать больше

Как сделать гибкие эллипсы

Проблема

Вероятно, вы замечали, что любой квадратный элемент, для которого определено достаточно большое значение  border-radius , можно превратить в круг с помощью примерно такого CSS-кода:
background: #fb3;
width: 200px;
height: 200px;
border-radius: 100px; /* >= половины длины стороны */
Возможно, вы также замечали, что в подобной ситуации можно было бы указать любое значение радиуса больше  100px и все равно получить в результате круг. Причина объясняется в спецификации: Если сумма любых двух радиусов соседних рамок превышает размер поля рамки, пользовательские агенты должны пропорционально уменьшать используемые значениях всех радиусов рамки, чтобы наложения не происходило.

как создать эллипс на CSS

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

В этом случае мы хотим, чтобы на выходе получался эллипс в ситуации, когда ширина и высота не равны между собой, и круг, когда они совпадают. Однако наш предыдущий код не способен обработать такой сценарий. Результирующая фигура для случая, когда ширина больше высоты, показана на рисунке. Можно
ли в принципе создавать эллипсы с помощью  border-radius , не говоря уже о том, чтобы делать их гибкими?

Прочитать больше

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: