{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Техноблог, заметки с тегом: вёрстка",
    "home_page_url": "https:\/\/blog.toliklunev.ru\/tags\/vyorstka\/",
    "feed_url": "https:\/\/blog.toliklunev.ru\/tags\/vyorstka\/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": "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)"
}