Демонстрация того, что может быть достигнуто визуально посредством дизайна на основе CSS. Выберите любой style sheet из списка, чтобы загрузить его в эту страницу.
Вдоль тёмной и унылой дороги валяются пережитки браузер–зависимых тэгов, несовместимых DOM-ов, и поломанной поддержки CSS.
Сегодня мы должны очистить наш ум от практики прошлого. Веб-просветление уже достигнуто благодаря неустанным усилиям людей вроде W3C, WaSP и создателей основных браузеров.
Сад css-Дзен приглашает вас расслабиться и помедитировать над важными уроками мастеров. Начните видеть. Изучите (ещё не) подтверждённые временем техники в новом бодрящем свете. Станьте едины с вебом.
Есть явная необходимость в том, чтобы CSS воспринимался серьёзно графическими дизайнерами. Сад css-Дзен намерен пробуждать, вдохновлять и поощрять участие. Для начала просмотрите существующие дизайны из списка. Клик на любом из них загрузит style sheet в эту самую страницу. Код остаётся тем же, единственная вещь, которая меняется - это внешний css-файл. Честное слово.
CSS разрешает полный и тотальный контроль над стилем гипертекстового документа. Единственный способ, которым это можно проиллюстрировать интересным образом - это показать, что может быть достигнуто, если отдать руль в руки тем, кто способен создавать прекрасное из структурного. До сих пор, большинство примеров клёвых штучек демонстрировались структуралистами и кодерами. Дизайнерам ещё только предстоит отметиться, и это должно измениться.
Пожалуйста, только графические дизайнеры. Вы правите эту страницу, так что требуются существенные навыки в CSS. Тем не менее, файлы примеров достаточно хорошо откомментированы, так что даже новички в CSS смогут использовать их в качестве отправной точки. Пожалуйста, обратите внимание на Путеводитель по материалам о CSS для продвинутых пособий и подсказок по работе с CSS.
Вы можете менять style sheet каким угодно способом, но не трогайте HTML. Это может показаться устрашающим, поначалу, если вы никогда так раньше не работали, но пройдитесь по перечисленным выше ссылкам, чтобы узнать больше, и пользуйтесь файлами примеров.
Скачайте примеры файлов с html и с css, для работы с ними локально. Когда вы закончите свой шедевр (и пожалуйста, не присылайте незаконченные работы), закачайте свой .css файл на доступный вам веб-сервер. Пришлите нам ссылку на файл, и если мы решим его использовать, мы выкачаем связанные с ним картинки. Финальные работы будут размещены на нашем сервере.
Дополнение: требуются переводчики. Если вы свободно говорите по-английски и на каком-то другом языке, то это ещё один способ поучаствовать в проекте. Пожалуйста, свяжитесь со мной насчёт деталей. Переведено Михаилом Браво
Зачем участвовать? Для признания, вдохновения и создания ресурса, на который мы все можем ссылаться при продвижении идеи дизайна на основе CSS. Это чрезвычайно необходимо, даже сегодня. Все больше и больше крупных сайтов переходят на эту технологию, но еще недостаточное их число уже перешло. Когда-нибудь эта галерея будет историческим курьёзом - но не сегодня.
Мы хотели бы видеть максимально возможное использование CSS1. Использование CSS2 должно быть ограничено только широко поддерживаемыми элементами. Сад css-Дзен представляет функциональный, практический CSS, а не последние свежайшие хитрости и трюки, которые может увидеть только 2% посетителей. Единственное реальное требование заключается в том, что ваш CSS должен валидироваться.
К сожалению, при дизайне таким образом недостатки в различных реализациях CSS проявляются особенно сильно. Разные браузеры показывают по-разному, иногда даже полностью валидный CSS, и это приводит к безумным случаям - когда починка одного ломает другое. Обратитесь к странице Ресурсы за информацией о некоторых возможных исправлениях. Полное соответствие браузеров всё ещё, в чём-то, просто мечта, и мы не ожидаем от вас попиксельно-безупречного кода для каждой платформы. Но протестируйте всё на наибольшем их количестве. Если ваш дизайн не работает хотя бы в IE5+/Win и Mozilla (используемых более чем 90% населения), скорее всего мы его не примем.
Мы просим, чтобы вы присылали оригинальные графические работы. Пожалуйста, уважайте копирайт. Пожалуйста, сведите сомнительные материалы к минимуму: показанная со вкусом нагота приемлема, явная порнография будет отвергнута.
Это обучающее упражнение, а также демонстрация. Вы сохраняете полный копирайт на вашу графику, но мы просим вас выпустить ваш CSS под лицензией Creative Commons, аналогичной нашей на этом сайте, чтобы другие могли учиться на ваших работах.
Каналы благосклонно предоставлены mediatemple