Техноблог, заметки с тегом: css

Создание гибких, поддерживаемых круговых диаграмм с помощью CSS и SVG

Sat, 08 Aug 2015 20:49:49 +0400

Это перевод статьи Леи Вероу Designing Flexible, Maintainable Pie Charts With CSS and SVG

Когда дело доходит до CSS-приёмов, нет никого более упёртого и умного в поиске решений любой проблемы чем Леа Вероу. Не так давно, Леа написала, отредактировала и опубликовала Секреты CSS, реально фантастическую книгу об маленьких CSS-хитростях и приёмах для решения повседневных задач. Если вы думали, что знаете CSS достаточно хорошо, подумайте еще раз: вы будете удивлены. В этой статье, мы покажем немного крутых вещей из книги, которые были представлены также в недавнем выступлении Леи на СмешингКонф Нью-Йорк — о создании простых круговых диаграмм с помощью CSS. Пожалуйста, учтите, что некоторые демки могут не работать так, как ожидалось из-за ограниченной поддержки в браузерах. — прим. ред.

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

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

Решение, основанное на трансформациях

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

В этом месте, давайте предположим, что нам нужна круговая диаграмма, которая захардкожена под отображение 20%. Мы разберём, как сделать это более гибко позднее. Давайте стилезуем элемент под круг, который будет нашим фоном.

Фигура 1: Наша точка отсчёта (или диаграмма, отображающая 0%)

.pie {
	width: 100px; height: 100px;
	border-radius: 50%;
	background: yellowgreen;
}

Наша диаграмма будет зелёной (точнее жёлто-зелёной), с коричневой частью (#655), отображающей проценты. Мы могли бы попытаться использовать косые преобразования для процентной части, но, как показывает опыт, в итоге получается говнокод. Вместо этого, мы раскрасим левую и правую часть нашего круга в наши 2 цвета, и будем использовать вращающийся псевдо-элемент, чтобы отобразить тот процент, который нам нужен.

Чтобы раскрасить половину нашего круга коричневым, мы используем простой градиент:

background-image:
  linear-gradient(to right, transparent 50%, #655 0);

Фигура 2: Правая часть нашего круга стала коричневой, с помощью простого градиента

Как вы можете видеть, на фигуре 2 есть всё, что нам нужно. Теперь мы можем приступить к стилезации псевдо-элемента, который будет выступать в качестве маски.

.pie::before {
	content: '';
	display: block;
	margin-left: 50%;
	height: 100%;
}

Фигура 3: Псевдо-элемент, который будет действовать как маска, показан пунктирными линиями

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

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

background-color: inherit

CSS Шрифт

Tue, 26 Aug 2014 00:19:32 +0400

Большинство веб-сервисов для подготовки кастомных шрифтов к вёрстке конвертируют шрифт в 4-5 разных форматов, при том что конвертировать имеет смысл только в один формат, в woff. Woff лёгок, и поддерживается всеми современными браузерами. При этом woff имеет смысл кодировать в base64 и вставить непосредственно в css файл с помощью data:uri.

Об этом ещё в 2012 году писал Артём Поликарпов. С тех пор, как я прочитал совет Артёма, я подготавливал все шрифты вручную, т. е. конвертировал файл сначала в woff, затем кодировал в base64, затем создавал css-файл и вставлял в него всё полученное. И мечтал о сервисе, который делал бы за меня всё это автоматически. Но, к сожалению, так и не нашёл такого, и поэтому сделал сам. Собственно вот:

Открыть в новой вкладке

Плюсы шрифта в css:

нужно подключить всего один файл;
меньше запросов к серверу;
текст не прыгает при загрузке шрифта.

Минусы:

не поддерживается ИЕ ниже 9-го.

От поддержки 8-го ИЕ я отказался (рекомендую и вам), по нескольким причинам:

шрифт в формате eot (специальный формат для ИЕ), у меня не работал практически никогда, и как сделать, чтоб заработал, я понятия не имел;
человеку с ИЕ 8 будет не до вашего кастомного шрифта, из-за которого этот браузер начнёт ещё больше тормозить, да ещё и сайт из-за него грузится дольше будет, поэтому имеет смысл подобрать стандартный шрифт.

Ссылки по теме:
Ещё один способ устранить ВОШ

Как сверстать стрелку без картинок

Sun, 16 Sep 2012 23:37:27 +0400

Прочитав эту заметку, вы узнайте как сверстать вот такую симпатичную стрелочку:

«Рисуем» треугольники

Возьмём обычный бокс с бордером, для наглядности раскрасив стороны в разные цвета:

.box{
	border-style: solid;
	border-top-color: blue;
	border-right-color: green;
	border-bottom-color: yellow;
	border-left-color: red;
}

<div class="box" style="width: 200px; height: 200px; border-width: 2px"></div>

А теперь увеличим размер бордеров, одновременно уменьшив бокс:

<div class="box" style="width: 100px; height: 100px; border-width: 52px"></div>

Убёрем высоту и ширину совсем:

Треугольники готовы.

«Рисуем» стрелку

Заготовка:

.arrow{
	position: relative;
	background: #09F;
	display: inline-block;
	width: 200px;
	padding: 5px;
	color: #FFF;
}

<div class="arrow">&nbsp;</div>

Добавим знакомые нам треугольники, с помощью псевдоэлемента :after, раскрасив все в один цвет, и сделав прозрачным левый бордер:

.arrow:after{
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	right: 0;
	border: 100px solid red;
	border-left-color: transparent;
	z-index: 10;
	content: "";
}

Хитрым образом спозиционируем псевдоэлемент:

/* добавляем */
.arrow:after{
	top: 50%;
	right: -100px;
	margin-top: -100px;
}

Скроем выступы и покрасим бордеры в цвет фона:

/* добавляем */
.arrow{
	overflow: hidden;
}

.arrow:after{
	border-color: #FFF;
	border-left-color: transparent;
}

Стрелка готова, для крутости можно добавить градиент:

У метода есть 2 недостатка:

фон должен быть однородным,
по-настоящему многострочную стрелку сделать не получиться, потому-что

но вполне возможно подобрать значение правого паддинга для 2-3 строк