{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Техноблог, заметки с тегом: css",
    "home_page_url": "https:\/\/blog.toliklunev.ru\/tags\/css\/",
    "feed_url": "https:\/\/blog.toliklunev.ru\/tags\/css\/json\/",
    "icon": "https:\/\/blog.toliklunev.ru\/user\/userpic@2x.jpg",
    "author": {
        "name": "Анатолий Лунёв",
        "url": "https:\/\/blog.toliklunev.ru\/",
        "avatar": "https:\/\/blog.toliklunev.ru\/user\/userpic@2x.jpg"
    },
    "items": [
        {
            "id": "47",
            "url": "https:\/\/blog.toliklunev.ru\/",
            "title": "Создание гибких, поддерживаемых круговых диаграмм с помощью CSS и SVG",
            "content_html": "<p><i>Это перевод статьи Леи Вероу <a href=\"http:\/\/www.smashingmagazine.com\/2015\/07\/designing-simple-pie-charts-with-css\/\">Designing Flexible, Maintainable Pie Charts With CSS and SVG<\/a><\/i><\/p>\n<p>Когда дело доходит до CSS-приёмов, нет никого более упёртого и умного в поиске решений любой проблемы чем Леа Вероу. Не так давно, Леа написала, отредактировала и опубликовала <a href=\"http:\/\/shop.oreilly.com\/product\/0636920031123.do?cmp=ex-web-books-videos-product-na_smashing_mag_excerpt\">Секреты CSS<\/a>, реально фантастическую книгу об маленьких CSS-хитростях и приёмах для решения повседневных задач. Если вы думали, что знаете CSS достаточно хорошо, подумайте еще раз: вы будете удивлены. В этой статье, мы покажем немного крутых вещей из книги, которые были представлены также в <a href=\"https:\/\/vimeo.com\/channels\/smashingconf\/132511382\">недавнем выступлении Леи на СмешингКонф Нью-Йорк<\/a> — о создании простых круговых диаграмм с помощью CSS. Пожалуйста, учтите, что некоторые демки могут не работать так, как ожидалось из-за ограниченной поддержки в браузерах. — прим. ред.<\/p>\n<p><b>Круговая диаграмма<\/b>, в простейшем случае фигура из двух цветов, традиционно была чем-то непростым для создания с помощью веб-технологий, и в тоже время невероятно удачным подспорьем для отображения информации начиная от простой статистики до прогресс-баров и таймеров. Они обычно реализовывались либо с помощью графического редактора, в этом случае создавалось <b>несколько изображений, для нескольких значений круговой диаграммы<\/b>, либо с помощью тяжелых JavaScript фреймворков, в случае более сложных диаграмм.<\/p>\n<p>И хотя добавить диаграмму не так сложно, как это было раньше, до сих пор нет простого способа. Однако есть несколько хороших, поддерживаемых реализаций, которые пригодны для использования на сегодняшний день.<\/p>\n<p><h2>Решение, основанное на трансформациях<\/h2><\/p>\n<p>Это лучшее решение в плане разметки: нам нужен только один элемент, всё остальное будет сделано с помощью псевдо-элементов, трансформаций и CSS-градиентов. Начнём с добавления элемента:<\/p>\n<pre class=\"code\"><code data-language=\"html\"><div class=\"pie\"><\/div><\/code>\n<\/pre>\n<p>В этом месте, давайте предположим, что нам нужна круговая диаграмма, которая захардкожена под отображение 20%. Мы разберём, как сделать это более гибко позднее. Давайте стилезуем элемент под круг, который будет нашим фоном.<\/p>\n<style>\r\n\t#pie-0 > div, #pie-50 > div, #pie-pseudo > div{\r\n\t\twidth: 100px;\r\n\t\theight: 100px;\r\n\t\tborder-radius: 100%;\r\n\t\tbackground: yellowgreen;\r\n\t}\r\n<\/style>\n<p><figure id=\"pie-0\"><\/p>\n<div><\/div><p><figcaption>Фигура 1: Наша точка отсчёта (или диаграмма, отображающая 0%)<\/figcaption><br \/>\n<\/figure><\/p>\n<pre class=\"code\"><code data-language=\"css\">.pie {\r\n\twidth: 100px; height: 100px;\r\n\tborder-radius: 50%;\r\n\tbackground: yellowgreen;\r\n}<\/code>\n<\/pre>\n<p>Наша диаграмма будет зелёной (точнее жёлто-зелёной), с коричневой частью (#655), отображающей проценты. Мы могли бы попытаться использовать косые преобразования для процентной части, но, как показывает опыт, в итоге получается говнокод. Вместо этого, мы раскрасим левую и правую часть нашего круга в наши 2 цвета, и будем использовать вращающийся псевдо-элемент, чтобы отобразить тот процент, который нам нужен.<\/p>\n<p>Чтобы раскрасить половину нашего круга коричневым, мы используем простой градиент:<\/p>\n<style>\r\n\t#pie-50 > div, #pie-pseudo > div{\r\n\t\tbackground-image: linear-gradient(to right, transparent 50%, #655 0);\r\n\t}\r\n<\/style>\n<pre class=\"code\"><code data-language=\"css\">background-image:\r\n  linear-gradient(to right, transparent 50%, #655 0);<\/code>\n<\/pre>\n<p><figure id=\"pie-50\"><\/p>\n<div><\/div><p><figcaption>Фигура 2: Правая часть нашего круга стала коричневой, с помощью простого градиента <\/figcaption><br \/>\n<\/figure><\/p>\n<p>Как вы можете видеть, на  фигуре 2 есть всё, что нам нужно. Теперь мы можем приступить к стилезации псевдо-элемента, который будет выступать в качестве маски.<\/p>\n<pre class=\"code\"><code data-language=\"css\">.pie::before {\r\n\tcontent: '';\r\n\tdisplay: block;\r\n\tmargin-left: 50%;\r\n\theight: 100%;\r\n}<\/code>\n<\/pre>\n<style>\r\n#pie-pseudo > div:before{\r\n\tcontent: '';\r\n\tdisplay: block;\r\n\tmargin-left: 50%;\r\n\theight: 100%;\r\n\toutline: 1px dashed;\r\n\tcolor: rgba(0, 0, 0, 0.4)\r\n}\r\n<\/style>\n<p><figure id=\"pie-pseudo\"><\/p>\n<div><\/div><p><figcaption>Фигура 3: Псевдо-элемент, который будет действовать как маска, показан пунктирными линиями<\/figcaption><br \/>\n<\/figure><\/p>\n<p>На Фигуре 3 вы можете видеть, где наш псевдо-элемент находится, по отношению к диаграмме. Сейчас он не стилизован, и нечего не перекрывает. Это всего лишь невидимый прямоугольник. Перед стилизацией уясним несколько моментов:<\/p>\n<ul>\n<li>Так как мы хотим перекрыть коричневую часть нашего круга, нам нужно применить зелёный фон к псевдо-элементу, используя<\/li>\n<\/ul>\n<pre class=\"e2-text-code\"><code>background-color: inherit<\/code><\/pre>",
            "date_published": "2015-08-08T20:49:49+04:00",
            "date_modified": "2015-08-09T18:04:01+04:00",
            "_date_published_rfc2822": "Sat, 08 Aug 2015 20:49:49 +0400",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.toliklunev.ru\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": []
            }
        },
        {
            "id": "35",
            "url": "https:\/\/blog.toliklunev.ru\/all\/cssfont\/",
            "title": "CSS Шрифт",
            "content_html": "<p>Большинство веб-сервисов для подготовки кастомных шрифтов к вёрстке конвертируют шрифт в 4-5 разных форматов, при том что конвертировать имеет смысл только в один формат, в woff. Woff лёгок, и поддерживается всеми современными браузерами. При этом woff имеет смысл кодировать в base64 и вставить непосредственно в css файл с помощью data:uri.<\/p>\n<p>Об этом ещё в 2012 году <a href=\"http:\/\/artgorbunov.ru\/bb\/soviet\/20121129\/\" target=\"_blank\">писал<\/a> Артём Поликарпов. С тех пор, как я прочитал совет Артёма, я подготавливал все шрифты вручную, т. е. конвертировал файл сначала в woff, затем кодировал в base64, затем создавал css-файл и вставлял в него всё полученное. И мечтал о сервисе, который делал бы за меня всё это автоматически. Но, к сожалению, так и не нашёл такого, и поэтому сделал сам. Собственно вот:<\/p>\n<div style=\"overflow: hidden;\"><iframe src=\"https:\/\/cssfont.toliklunev.ru\/\" frameborder=\"0\" width=\"340px\" height=\"450px\" style=\"margin-top: -87px;\"><\/iframe>\n<\/div><p><a href=\"https:\/\/cssfont.toliklunev.ru\/\" target=\"_blank\">Открыть в новой вкладке<\/a><\/p>\n<p>Плюсы шрифта в css:<\/p>\n<ul>\n<li>нужно подключить всего один файл;<\/li>\n<li>меньше запросов к серверу;<\/li>\n<li>текст не прыгает при загрузке шрифта.<\/li>\n<\/ul>\n<p>Минусы:<\/p>\n<ul>\n<li>не поддерживается ИЕ ниже 9-го.<\/li>\n<\/ul>\n<p>От поддержки 8-го ИЕ я отказался (рекомендую и вам), по нескольким причинам:<\/p>\n<ul>\n<li>шрифт в формате eot (специальный формат для ИЕ), у меня не работал практически никогда, и как сделать, чтоб заработал, я понятия не имел;<\/li>\n<li>человеку с ИЕ 8 будет не до вашего кастомного шрифта, из-за которого этот браузер начнёт ещё больше тормозить, да ещё и сайт из-за него грузится дольше будет, поэтому имеет смысл подобрать стандартный шрифт.<\/li>\n<\/ul>\n<p>Ссылки по теме:<br \/>\n<a href=\"http:\/\/habrahabr.ru\/post\/180615\/\" target=\"_blank\">Ещё один способ устранить ВОШ<\/a><\/p>\n",
            "date_published": "2014-08-26T00:19:32+04:00",
            "date_modified": "2018-03-14T22:18:24+04:00",
            "_date_published_rfc2822": "Tue, 26 Aug 2014 00:19:32 +0400",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.toliklunev.ru\/all\/cssfont\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "2",
            "url": "https:\/\/blog.toliklunev.ru\/all\/kak-sverstat-strelku-bez-kartinok\/",
            "title": "Как сверстать стрелку без картинок",
            "content_html": "<p>Прочитав эту заметку, вы узнайте как сверстать вот такую симпатичную стрелочку:<\/p>\n<iframe width=\"400\" height=\"160\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/0\/show\/light\/\"><\/iframe>\n<h2>«Рисуем» треугольники<\/h2>\n<p>Возьмём обычный бокс с бордером, для наглядности раскрасив стороны в разные цвета:<\/p>\n<iframe width=\"215\" height=\"260\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/1\/show\/\"><\/iframe>\n<pre class=\"e2-text-code\"><code>.box{\r\n\tborder-style: solid;\r\n\tborder-top-color: blue;\r\n\tborder-right-color: green;\r\n\tborder-bottom-color: yellow;\r\n\tborder-left-color: red;\r\n}<\/code><\/pre><pre class=\"e2-text-code\"><code>&lt;div class=&quot;box&quot; style=&quot;width: 200px; height: 200px; border-width: 2px&quot;&gt;&lt;\/div&gt;<\/code><\/pre><p>А теперь увеличим размер бордеров, одновременно уменьшив бокс:<\/p>\n<iframe width=\"215\" height=\"260\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/3\/show\/\"><\/iframe>\n<pre class=\"e2-text-code\"><code>&lt;div class=&quot;box&quot; style=&quot;width: 100px; height: 100px; border-width: 52px&quot;&gt;&lt;\/div&gt;<\/code><\/pre><p>Убёрем высоту и ширину совсем:<\/p>\n<iframe width=\"215\" height=\"260\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/4\/show\/\"><\/iframe>\n<pre class=\"code\"><code data-language=\"html\"><div class=\"box\" style=\"width: 0; height: 0; border-width: 102px\"><\/div><\/code>\n<\/pre>\n<p>Треугольники готовы.<\/p>\n<h2>«Рисуем» стрелку<\/h2>\n<p>Заготовка:<\/p>\n<iframe width=\"215\" height=\"80\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/5\/show\/\"><\/iframe>\n<pre class=\"e2-text-code\"><code>.arrow{\r\n\tposition: relative;\r\n\tbackground: #09F;\r\n\tdisplay: inline-block;\r\n\twidth: 200px;\r\n\tpadding: 5px;\r\n\tcolor: #FFF;\r\n}<\/code><\/pre><pre class=\"e2-text-code\"><code>&lt;div class=&quot;arrow&quot;&gt;&amp;nbsp;&lt;\/div&gt;<\/code><\/pre><p>Добавим знакомые нам треугольники, с помощью псевдоэлемента :after, раскрасив все в один цвет, и сделав прозрачным левый бордер:<\/p>\n<iframe width=\"210\" height=\"260\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/6\/show\/\"><\/iframe>\n<pre class=\"e2-text-code\"><code>.arrow:after{\r\n\twidth: 0;\r\n\theight: 0;\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tright: 0;\r\n\tborder: 100px solid red;\r\n\tborder-left-color: transparent;\r\n\tz-index: 10;\r\n\tcontent: &quot;&quot;;\r\n}<\/code><\/pre><p>Хитрым образом спозиционируем псевдоэлемент:<\/p>\n<iframe width=\"315\" height=\"265\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/7\/show\/\"><\/iframe>\n<pre class=\"e2-text-code\"><code>\/* добавляем *\/\r\n.arrow:after{\r\n\ttop: 50%;\r\n\tright: -100px;\r\n\tmargin-top: -100px;\r\n}<\/code><\/pre><p>Скроем выступы и покрасим бордеры в цвет фона:<\/p>\n<iframe width=\"210\" height=\"85\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/8\/show\/\"><\/iframe>\n<iframe width=\"210\" height=\"85\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/9\/show\/\"><\/iframe>\n<pre class=\"e2-text-code\"><code>\/* добавляем *\/\r\n.arrow{\r\n\toverflow: hidden;\r\n}\r\n\r\n.arrow:after{\r\n\tborder-color: #FFF;\r\n\tborder-left-color: transparent;\r\n}<\/code><\/pre><p>Стрелка готова, для крутости можно добавить градиент:<\/p>\n<iframe width=\"210\" height=\"85\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/10\/show\/\"><\/iframe>\n<p>У метода есть 2 недостатка:<\/p>\n<ul>\n<li>фон должен быть однородным,<\/li>\n<li>по-настоящему многострочную стрелку сделать не получиться, потому-что<\/li>\n<\/ul>\n<iframe width=\"210\" height=\"140\" frameborder=\"0\" src=\"https:\/\/fiddle.jshell.net\/codefucker\/5J6t3\/11\/show\/\"><\/iframe>\n<p>но вполне возможно подобрать значение правого паддинга для 2-3 строк<\/p>\n",
            "date_published": "2012-09-16T23:37:27+04:00",
            "date_modified": "2019-07-02T16:32:57+04:00",
            "_date_published_rfc2822": "Sun, 16 Sep 2012 23:37:27 +0400",
            "_rss_guid_is_permalink": "true",
            "_rss_guid": "https:\/\/blog.toliklunev.ru\/all\/kak-sverstat-strelku-bez-kartinok\/",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": []
            }
        }
    ],
    "_e2_version": 3254,
    "_e2_ua_string": "E2 (v3254; Aegea)"
}