{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Блоги: заметки с тегом css", "_rss_description": "Автоматически собираемая лента заметок, написанных в блогах на Эгее", "_rss_language": "ru", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": false, "_itunes_explicit": "no", "home_page_url": "https:\/\/www.blogengine.me\/blogs\/tags\/css\/", "feed_url": "https:\/\/www.blogengine.me\/blogs\/tags\/css\/json\/", "icon": false, "authors": [ { "name": "Илья Бирман", "url": "https:\/\/www.blogengine.me\/blogs\/", "avatar": false } ], "items": [ { "id": "120274", "url": "https:\/\/bolknote.ru\/all\/3478\/", "title": "Картинка на чистом CSS-2", "content_html": "
\n\n\n
\"Ещё<\/td>\n<\/tr>\n<\/table>\n<\/div>\n

Я тут всё это время думал как дёшево улучшить свой конвертор картинок в чистый CSS<\/a> и придумал.<\/p>\n

Выкинул «radial-gradient» и стал использовать «linear-gradient». Картинка, которая в прошлой версии занимала 164КБ, сейчас занимает 89<\/s> 79. Это уже неплохо, в сжатом (gzip) виде этот код занимает 19КБ, что всего в два с половиной раза больше, чем исходное изображение в PNG. Результат можно сильно улучшить, если отказаться от повтора цвета, но изображения с мелкими деталями (с текстом, например) пострадают.<\/p>\n

Кстати говоря, логотип студии Лебедева при конвертации из PNG (6,7КБ) уменьшился до 1,6КБ<\/s> 1,3КБ. Это уже реальная экономия, если бы не префиксы браузеров.<\/p>\n

Отказ от радиального градиента в пользу линейного позволил мне кодировать целую строку изображения одной конструкцией, что, в свою очередь, позволило сильно экономить на повторяющихся байтах (кстати, можно попробовать группировать пиксели по вертикали и горизонтали, а потом выбирать лучший вариант).<\/p>\n

Кстати этот раз «Опера», увы, не смогла показать картинку, так как, похоже, не поддерживает позиционирование для линейных градиентов.<\/p>\n

Добавлено позднее<\/b>: сделал оптимизацию, теперь конвертор делает два прогона: один просматривает пиксели по горизонтали, второй по вертикали. Выбирается тот, который даёт наименьший результат.<\/p>\n

Ключи запуска те же.<\/p>\n

<?\r\n\/\/ ffccbb → fcb\r\n\/\/ ff0000 → red\r\n\/\/ abcdef → abcdef\r\nfunction Bo_shortcolor($color) {\r\n    static $shortnames = array(\r\n        "c0c0c0" => "silver",\r\n        "808080" => "gray",\r\n        "800000" => "maroon",\r\n        "ff0000" => "red",\r\n        "800080" => "purple",\r\n        "008000" => "green",\r\n        "808000" => "olive",\r\n        "000080" => "navy",\r\n        "008080" => "teal",\r\n        "f0ffff" => "azure",\r\n        "f5f5dc" => "beige",\r\n        "ffe4c4" => "bisque",\r\n        "a52a2a" => "brown",\r\n        "ff7f50" => "coral",\r\n        "ffd700" => "gold",\r\n        "808080" => "gray",\r\n        "008000" => "green",\r\n        "808080" => "grey",\r\n        "4b0082" => "indigo",\r\n        "fffff0" => "ivory",\r\n        "f0e68c" => "khaki",\r\n        "faf0e6" => "linen",\r\n        "800000" => "maroon",\r\n        "000080" => "navy",\r\n        "808000" => "olive",\r\n        "ffa500" => "orange",\r\n        "da70d6" => "orchid",\r\n        "cd853f" => "peru",\r\n        "ffc0cb" => "pink",\r\n        "dda0dd" => "plum",\r\n        "800080" => "purple",\r\n        "ff0000" => "red",\r\n        "fa8072" => "salmon",\r\n        "a0522d" => "sienna",\r\n        "c0c0c0" => "silver",\r\n        "fffafa" => "snow",\r\n        "d2b48c" => "tan",\r\n        "008080" => "teal",\r\n        "ff6347" => "tomato",\r\n        "ee82ee" => "violet",\r\n        "f5deb3" => "wheat",\r\n    );\r\n\r\n    $c = strtolower($color);\r\n    if (isset($shortnames[$c])) {\r\n        return $shortnames[$c];\r\n    }\r\n\r\n    if ($c[0] == $c[1] && $c[2] == $c[3] && $c[4] == $c[5]) {\r\n        return '#' . $c[1] . $c[3] . $c[5];\r\n    }\r\n\r\n    return '#' . $c;\r\n}\r\n\r\nclass Bo {\r\n    public function __get($num) {\r\n        return $num ? $num . 'px' : 0;\r\n    }\r\n}\r\n\r\nfunction Bo_convert_helper($im, $lim1, $lim2, $getpix, $dotmask, $z) {\r\n    $end  = $lim1 - 1;\r\n    $dots = array();\r\n\r\n    for ($o1 = 0; $o1<$lim2; $o1++) {\r\n        $coll = array();\r\n        $prev    = null;\r\n        $start   = 0;\r\n\r\n        for ($o2 = 0; $o2<$lim1; $o2++) {\r\n            $pixel = $getpix($im, $o2, $o1);\r\n\r\n            if ($prev !== null && $prev !== $pixel || $o2 == $end) {\r\n                if ($prev !== null) {\r\n                    $color = Bo_shortcolor(vsprintf('%02x%02x%02x', $prev));\r\n\r\n                    $coll[] = "$color {$z->$start},$color {$z->$o2}";\r\n                }\r\n\r\n                if ($o2 == $end && $prev != $pixel) {\r\n                    $color = Bo_shortcolor(vsprintf('%02x%02x%02x', $pixel));\r\n                    $cell[] = "$color {$z->$o2}";\r\n                }\r\n\r\n                $start = $o2;\r\n            }\r\n\r\n            $prev = $pixel;\r\n        }\r\n\r\n        $dots[] = sprintf($dotmask, implode(',', $coll), $z->$o1);\r\n    }\r\n\r\n    return $dots;\r\n}\r\n\r\n\r\nfunction Bo_convert($filename, $prefix = '') {\r\n    $z = new Bo();\r\n\r\n    if (!file_exists($filename) && !is_readable($filename)) {\r\n        throw new Exception('File not found.');\r\n    }\r\n\r\n    $types = array(\r\n        IMAGETYPE_JPG => 'jpeg',\r\n        IMAGETYPE_PNG => 'png',\r\n        IMAGETYPE_GIF => 'gif',\r\n    );\r\n\r\n    $imagedata = @getimagesize($filename);\r\n    if (!is_array($imagedata) || !isset($imagedata[2]) || !isset($types[$imagedata[2]])) {\r\n        throw new Exception('Unknown image format');\r\n    }\r\n\r\n    $im = call_user_func("imagecreatefrom" . $types[$imagedata[2]], $filename);\r\n    $sw = $w = imagesx($im);\r\n    $sh = $h = imagesy($im);\r\n\r\n    $hfunc = create_function('$im, $x, $y', 'return imagecolorsforindex($im, imagecolorat($im, $x, $y));');\r\n    $hmask = "{$prefix}linear-gradient(0,%s) 0 %s";\r\n\r\n    $hdots = join(',', Bo_convert_helper($im, $w, $h, $hfunc, $hmask, $z));\r\n\r\n    $vfunc = create_function('$im, $y, $x', 'return imagecolorsforindex($im, imagecolorat($im, $x, $y));');\r\n    $vmask = "{$prefix}linear-gradient(90,%s) %s 0";\r\n\r\n    $vdots = join(',', Bo_convert_helper($im, $h, $w, $vfunc, $vmask, $z));\r\n\r\n    if (strlen($hdots) > strlen($vdots)) {\r\n        $dots = $vdots;\r\n        $sw = 1;\r\n    } else {\r\n        $dots = $hdots;\r\n        $sh = 1;\r\n    }\r\n\r\n    return <<<HTML\r\n<head>\r\n<title>$filename converted in background by Evgeny Stepanischev \/\/bolknote.ru<\/title>\r\n<style text="text\/css">\r\n    div {\r\n        background: $dots;\r\n        background-repeat: no-repeat;\r\n        {$prefix}background-size: {$sw}px {$sh}px;\r\n        background-size: {$sw}px {$sh}px;\r\n        width: {$w}px; height: {$h}px;\r\n    }\r\n<\/style>\r\n<body>\r\n<div><\/div>\r\n<\/body>\r\nHTML;\r\n}\r\n\r\nif ($_SERVER['argc'] < 2) {\r\n    echo <<<HELP\r\nImage to background CSS convertor v2 by Evgeny Stepanischev. \/\/bolknote.ru Nov 2011\r\n\r\nUsage: {$_SERVER['argv'][0]} filename [prefix]\r\n\r\nfilename  - image file name (PNG, JPEG or GIF)\r\nprefix    - your browser name (Opera, IE, FF, Safari, Chrome)\r\n\r\nHELP;\r\nexit;\r\n}\r\n\r\n$browsers = array(\r\n    'ie'     => '-ms-',\r\n    'opera'  => '-o-',\r\n    'safari' => '-webkit-',\r\n    'chrome' => '-webkit-',\r\n    'chromium' => '-webkit-',\r\n    'ff' => '-moz-',\r\n    'firefox' => '-moz-',\r\n);\r\n\r\nif (isset($_SERVER['argv'][2])) {\r\n    $type = strtolower($_SERVER['argv'][2]);\r\n    $prefix = isset($browsers[$type]) ? $browsers[$type] : '-' . $type . '-';\r\n} else {\r\n    $prefix = '';\r\n}\r\n\r\ntry {\r\n    echo Bo_convert($_SERVER['argv'][1], $prefix);\r\n} catch (Exception $e) {\r\n    echo "Error: ", $e->getMessage(), "\\n";\r\n    exit(1);\r\n};<\/code><\/pre>",
            "date_published": "2011-11-12T01:24:00+05:00",
            "date_modified": "2023-06-07T17:41:14+05:00",
            "tags": [
                "css",
                "php",
                "программирование"
            ],
            "author": {
                "name": "Евгений Степанищев",
                "url": "https:\/\/bolknote.ru\/",
                "avatar": "https:\/\/bolknote.ru\/pictures\/userpic\/userpic@2x.jpg?1760600028"
            },
            "_date_published_rfc2822": "Sat, 12 Nov 2011 01:24:00 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "120274",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": null,
                "og_images": []
            }
        },
        {
            "id": "130909",
            "url": "https:\/\/bolknote.ru\/all\/1436\/",
            "title": "Фокусы с GIF, прозрачность и hover",
            "content_html": "