Что такое хороший онлайн-ресурс для шаблонов дизайна CSS?

Кто-нибудь может рекомендовать хороший онлайн-ресурс для шаблонов дизайна CSS?

Я знаю, что шаблоны проектирования в программном контексте обычно относятся к шаблонам проектирования на основе OO, но я имею в виду шаблоны проектирования в более широком смысле этого термина: простые, чистые решения общих проблем/задач.

Примером такого ресурса будет этот список табличных конструкций, это дает вам все, что вам действительно нужно знать о том, как создавать таблицы выглядите хорошо, используя набор методов CSS.

Другими примерами общих проблем, которые могли бы иметь хорошие решения, были бы такие вещи, как закругленные углы на div, высокопроизводительные макеты форм и т.д.

Ответ 1

Я ссылаюсь на A List Apart статьи все время для подобных вещей. Они проводят много исследований проб и ошибок, чтобы придумать действительно творческие способы справиться с этими распространенными проблемами CSS самым чистым наиболее переносимым способом.

Ответ 2

Некоторые веб-сайты, которые адресуют шаблоны веб-дизайна, перечислены ниже. Они специально не предоставляют HTML и/или CSS для достижения желаемых результатов, но они предоставляют примеры живых сайтов, на которые вы можете посмотреть источник (или, что еще лучше, использовать Firebug).

UI-patterns

Это, наверное, лучший из группы. Это разбивает вещи на категории, которые охватывают широту задач веб-дизайна. Вы найдете такие категории, как облака тегов, предварительный просмотр в реальном времени и регистрация пользователей среди многих других. Это действительно всеобъемлющий ресурс, который хорошо организован. Он объясняет каждый шаблон и содержит множество примеров.

Pattern Tap

Подобно UI-образцам, хотя в настоящее время они не столь полные. Это требует более социального подхода к сопоставлению шаблонов проектирования, позволяя пользователям создавать свои собственные категории ( "пользовательские наборы" ) и заполнять их собственным выбором сайтов.

Yahoo Design Pattern Library

В отличие от двух других, этот не содержит много примеров реальных сайтов. Он хорошо организован и достаточно всесторонний.

Элементы дизайна

Это блог, демонстрирующий различные элементы веб-дизайна. Он не обсуждает шаблоны, но хорош как быстрый источник вдохновения или как средство для начала собственного анализа.

Ответ 3

Floatutorial - отличная отправная точка для изучения важного атрибута CSS "float" и того, как использовать его для компоновки содержимого, используя некоторые общие закономерности, включая двухстоечные и трехколонные макеты жидкостей.

Floatutorial проведет вас через основы плавающих элементов, таких как изображения, капли, следующий и задний кнопки, галереи изображений, встроенные списки и многостолбцовые макеты.

Ответ 4

Уже упомянутый A List Apart действительно хорош. Другой сайт, который я использовал с момента создания веб-разработки, - SitePoint.com. Вот их Справочник CSS. Если вы хотите хорошую книгу CSS, это один из моих любимых.

Ответ 5

Ближайшей вещью к "шаблону проектирования" в CSS являются общие макеты. Лучшим инструментом для использования общих макетов, ширины столбцов и т.д. Является 960 grid system, 960.gs

Смотрите этот скринкаст для краткого введения. Это экономит массу времени и помогает применять все общие шаблоны макета с минимальным кодом:

http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/

Все, что вам нужно сделать, это применить соответствующие классы и сделать небольшую арифметику, чтобы убедиться, что все ширины столбцов складываются.

Одна книга, которую я рекомендую больше всего для CSS, - Мастерство CSS от Andy Budd (cssmastery.com). Он несколько невелик, но он помог мне больше, чем любая другая книга CSS.