В силу очевидной мегалитической направленности нашего сайта, пример css-арта у нас будет тоже из той же серии. Рисуем дольмен и дольменную группу. Повторяю, никаких изображений здесь не используется, даже для фона, и уж тем более для распорок... В css-верстке это все не нужно. Работа получилась почти кроссбраузерная - иллюстрации группы дольменов и отдельного дольмена видны в 6-м iexplorer и Firefox практически одинаково. Лишь в Firefox (и в других браузерах на движке gecko) дополнительно варьируется форма отверстия дольмена. А вот в Опере все расползается, и нет пока никакого желания разбираться в постоянно меняющихся предпочтениях ее разработчиков.
Совместимость достигнута чередой мелких css-хаков, которые обходят проблемы разного отношения браузеров к стандартам css. Каждый дольмен реализован как блок с уникальным именем и стандартным набором других блоков без имен, но со стилями. Все размеры выставлены относительно текущего размера шрифта браузера. Например, Вы прямо сейчас можете попробовать увеличить или уменьшить размер шрифта и посмотреть, что будет...
Таким образом, мы можем "размножать" наши css-дольмены на странице сколько угодно практически не увеличивая код - все основные настройки едины и лежат во внешней css-таблице. Надо только ставить уникальные id-имена каждого блока-дольмена, да ставить для него свой размер шрифта, коим мы регулируем размер css-дольмена.
Конечно, все это css-html извращение есть не более чем, надеюсь, забавная шутка. Рисовать реальные картинки удобнее в реальных редакторах, в которых тратишь время не на то "как", а на то "что". Однако, вот Вам реальная иллюстрация, что нормальный html вкупе с нормальным css способен к достаточно сложной графике. Если бы еще не кроссбраузерность... Тогда используя возможности "ослика" мы бы накидали сюда градиентных заливок да теней. А используя возможности Firefox, более смело вставляли кривые линии и прозрачность. Свежо предание...
Интересно, что даже используя новейшие возможности svg-графики, мы НЕ сможем получать автоматически масштабируемые изображения. Такие как здесь - в зависимости от шрифта (эластичная верстка), либо выставляя все размеры в процентах к родительскому блоку. Таким образом, несмотря ни на что, возможности даже такой css-html графики в некоторых ключевых свойствах векторных приложений гораздо более удобны.
Я уже не говорю, что легким нажатием на клавиатуру в нескольких местах мы тривиально сможем придать любой css-картинке любую динамику. Если есть возможность, взгляните на использование свойства "hover" для нижнего css-дольмена (только Firefox). Попросту поводите по нему мышкой. Так может пора писать графические css-html-редакторы?
Что меня особенно поразило уже в процессе конструирования сих css-иллюстраций, так это широчайшие возможности по поблочному использованию этой самой css-картинки. Т.е. к каждому элементу мы можем писать свои комментарии, назначать события, вводить css и javascript-анимацию. Широчайшие возможности для структурных рисунков! И все это богатство - просто так, без дополнительных плагинов, кодов поддержки, кривых расширений...
А вот еще одна попытка сработать иллюстрацию, но с заметно большим использованием возможностей браузеров от gecko по соответствию css3. В CSS третьей версии есть возможность делать сглаженные углы, причем даже по двум радиусам сразу. На, похоже, аппетиты разработчиков стандарта здесь оказались слишком крутыми и этот момент никто реализовывать не стал - скорее всего, не нашли достаточно быстрого алгоритма. А вот в браузерах на gecko сглаженные углы по одному радиусу введены давно. Что мы особенно нагло и используем в следующей картинке так называемого "корытообразного" дольмена. К сожалению, пользователи даже самой последней версии IExplorer-а не смогут вкусить всех прелестей. Реализация же кривизны через патологическое размножение javascript-ом дополнительных html-элементов показалась мне некоторым извращением. Которое все равно не даст той самой масштабируемости, присущей css-иллюстрациям.
Продолжим... Под конец мы попробуем еще сильнее отбросить совместимость, раз уж решили показывать "криволинейные" корытообразные (высеченные из дикой скалы) дольмены. Да, конечно, не просто дольмены, а css-дольмены. В Firefox Вы увидите три css-мегалита: плиточный дольмен, в центре и справа - те самые корытообразные. Смешно... но на каждый корытообразный css-дольмен ушло всего 211 байт html-кода при наличии общих css-настроек в отдельном css-файле (без специальных title-ов).
Наверное, имеет смысл также взглянуть на css-картинки с пирамидами в разделе мегалитов.
Да практически ничего нет. Вот, например, несколько css-картинок для iexplorer-а , с вольготным применением эксплорерных фильтров, чего я не делал для совместимости. А вот css-галерея из Великобритании. Правда, местами для фона битмепные картинки все-таки использовались.
Краевед.