Какой хороший онлайн-ресурс для CSS-шаблонов проектирования?
Может ли кто-нибудь порекомендовать хороший онлайн-ресурс по шаблонам проектирования CSS?
Я знаю, что шаблоны проектирования в контексте программного обеспечения обычно относятся к шаблонам проектирования на основе объектно-ориентированного проектирования, но я имею в виду шаблоны проектирования в более широком смысле этого термина: то есть общие, чистые решения общих проблем / задач.
Примером такого ресурса может быть этот список дизайнов таблиц, это дает вам все, что вам действительно нужно знать о том, как сделать таблицы красивыми, используя набор методов CSS.
Другими примерами распространенных проблем, которые могут иметь хорошие решения, могут быть такие, как закругленные углы на div, удобные макеты форм и т. д.
Ответы 5
I refer to A List Apart articles all the time for those sorts of things.
Они проводят много исследований методом проб и ошибок, чтобы найти действительно творческие способы решения этих общих проблем CSS самым чистым и портативным способом.
Уже упомянутый Список отдельно действительно хорош. Еще один сайт, которым я пользовался с тех пор, как начал заниматься веб-разработкой, - это SitePoint.com. Вот их Справочник CSS. Если вам нужна хорошая книга по CSS, их книга - одна из моих любимых.
Некоторые веб-сайты, посвященные шаблонам веб-дизайна, перечислены ниже.. Они специально не предоставляют HTML и / или CSS для достижения желаемых результатов, но они предоставляют примеры живых сайтов, на которых вы можете просмотреть источник (или, что еще лучше, использовать Firebug).
UI-шаблоны
Это, наверное, лучший из всех. Он разбивает вещи на категории, которые охватывают весь спектр задач дизайна веб-страниц. Среди многих других вы найдете такие категории, как облака тегов, предварительный просмотр в реальном времени и регистрация пользователей. Это действительно всеобъемлющий и хорошо организованный ресурс. В нем объясняется каждый шаблон и приводится множество примеров.
Узор Tap
Похож на UI-Patterns, хотя в настоящее время не так полон Он использует более социальный подход к сопоставлению шаблонов дизайна, позволяя пользователям создавать свои собственные категории («наборы пользователей») и заполнять их собственными подборками сайтов.
Библиотека шаблонов дизайна Yahoo
В отличие от двух других, здесь не так много примеров реальных сайтов. Он хорошо организован и достаточно обширен.
Элементы дизайна
Это блог, в котором представлены различные элементы веб-дизайна. В нем не обсуждаются закономерности, но он хорош как быстрый источник вдохновения или как средство для начала вашего собственного анализа.
Плавучий - отличная отправная точка для изучения важного атрибута CSS «float» и того, как его использовать для компоновки контента с использованием некоторых общих шаблонов, включая двухколоночные и трехколоночные жидкие макеты.
Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.
Ближайшим к «шаблону проектирования» в CSS являются общие макеты. Лучший инструмент для использования общих макетов, ширины столбцов и т. д. - 960 сетка, при 960.gs.
Посмотрите этот скринкаст, чтобы увидеть краткое вступление. Это экономит массу времени и помогает применять все распространенные шаблоны компоновки с минимальным кодом:
http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/
Все, что вам нужно сделать, это применить правильные классы и выполнить небольшую арифметику, чтобы убедиться, что все значения ширины столбцов совпадают.
Единственная книга, которую я больше всего рекомендую для CSS, - это Мастерство CSS Энди Бадда (cssmaster.com). Она немного мала, но мне она помогла больше, чем любая другая книга по CSS.