http://www.permlug.org/taxonomy/term/189/ The taxonomy view with a depth of 0. ru http://www.permlug.org/node/3772/ <p>Сейчас стало модно делать закруглённые уголки у плашек на сайтах.</p> <p>Кто-то делает это методом подкладывания жёсткой картинки под содержимое. Минусы: содержимое не тянется и не масштабируется.</p> <p>Другие делают это с помощью таблиц и вложенных картинок или, более продвинутые, с помощью дивов и вложенных картинок. Минусы: большой объём HTML-кода и наличие в нём «мусора», в нашем случае — неинформативных картинок, которые ещё и подсвечиваются при выделении (попробуйте на Хабре нажать Ctrl+A).</p> <p>Недавно мой бывший коллега Владимир Токмаков (технолог студии Лебедева) предложил <a href="http://www.artlebedev.ru/tools/technogrette/html/framed/">ещё один вариант</a>, у которого есть свои преимущества (составной фон с альфа-каналом, чистота HTML-кода) и недостатки (ограничение по размеру, громоздкий CSS).</p> <p>Я же, руководствуясь соображениями чистоты кода и экономией ресурсов, решил разработать свой вариант. В процессе реализации возникла интересная проблема с браузером Internet Explorer: заключалась она в том, что при нечётной ширине контейнера (например, 301 пиксель) уголки, находящиеся справа, отступали от края контейнера на 1 пиксель.</p> <p><a href="http://www.pmob.co.uk/temp/onepxgap.htm">Решение проблемы</a> нашлось быстро, и, чуть-чуть переделав код, я получил универсальный вариант, оптимальный по чистоте кода и размеру картинок с уголками.</p> <p>Подробное описание с примерами: <a href="http://www.permlug.org/data/trash/round/" title="http://www.permlug.org/data/trash/round/">http://www.permlug.org/data/trash/round/</a><br /> В приведённом примере суммарный вес картинок с уголками составляет 752 байта, CSS-кода — 1020 байт, HTML-кода — 198 байт.</p> http://www.permlug.org/node/3772/#comments css html верстка уголки Wed, 19 Mar 2008 10:05:28 +0300 MT 3772 at http://www.permlug.org