Веб-дизайн стал более доступным, чем когда-либо, но он все еще требует много работы — и много навыков. — чтобы получить профессионально выглядящие результаты.
К счастью, вам не нужно начинать с нуля каждый раз. В Интернете доступны тысячи бесплатных CSS-шаблонов, которые охватывают современные тенденции и технологии дизайна. Вы можете использовать их в оригинальном виде или настроить их, чтобы сделать их своими.
В этом руководстве мы подробнее рассмотрим шаблоны CSS и то, где их найти.
Что такое шаблон CSS?
Шаблон CSS не просто содержит CSS: он дает вам все необходимое для создания полнофункционального веб-сайта. Когда вы загружаете один, вы обычно получаете папку, содержащую следующее:
- HTML-файлы — вы получите HTML-файл для каждой страницы сайта. Он будет содержать образец текста и изображений, которые вам нужно будет заменить на собственный контент. Вам также понадобится настроить метаданные, относящиеся к таким вещам, как описание сайта.
- Файл CSS. Обычно вы получаете один основной файл CSS, содержащий все стили для сайта, а также любые дополнительные элементы, такие как таблица стилей сброса или файл для веб-шрифтов.
- Файл Javascript — если сайт содержит функции Javascript, в идеале их следует включать в отдельный файл, а не включать в документы HTML.
- Изображения, шрифты и значки — все изображения, используемые в шаблоне, также должны быть включены. Возможно, вы захотите сохранить такие вещи, как значки и фоны, но вам придется заменить другие изображения-заполнители своими собственными. Некоторые пользовательские шрифты также могут быть включены.
В отличие от большинства других типов шаблонов, с которыми вы столкнетесь — будь то шаблоны WordPress, Excel или InDesign — шаблоны CSS требуют определенных технических знаний.
У них нет дружественного интерфейса для их редактирования, поэтому вам нужно хотя бы знать, как разобраться с HTML-документом, чтобы добавить свой собственный контент. Чтобы сделать свои собственные настройки, вам понадобятся приличные знания CSS.
Что искать в шаблоне CSS
Есть так много бесплатных шаблонов CSS на выбор. Итак, как вы знаете, что подходит именно вам? Вот несколько вещей, на которые стоит обратить внимание:
- Дизайн — очевидно, вам нужен сайт, который выглядит красиво и отражает то изображение, которое вы хотите изобразить. Но также подумайте, подходит ли шаблон для ваших нужд сейчас и в будущем. Многие для одностраничных сайтов; некоторые предназначены для нескольких страниц. Если вам нужно последнее, подумайте, может быть, вам лучше использовать CMS, например WordPress.
- Оптимизированный для мобильных устройств — использование мобильного Интернета теперь выше, чем для настольных компьютеров, поэтому важно, чтобы ваш сайт функционировал должным образом на смартфонах. Любой приличный шаблон CSS должен использовать адаптивный дизайн, чтобы сайт отлично работал на экране любого размера. Если ваш выбранный не делает, переключитесь на тот, который делает.
- Хорошо написано — скачайте шаблон и посмотрите на код, прежде чем приступить к его использованию. Он должен быть чистым, хорошо структурированным и легко редактируемым. Он также должен быть SEO-ориентированным, с правильным использованием заголовков и тегов заголовков.
- Лицензия — Обязательно проверьте лицензию для выбранного вами шаблона CSS. Многие из них доступны по лицензии Creative Commons. , но различные версии этой лицензии определяют, можете ли вы редактировать шаблон, можете ли вы использовать его в коммерческих целях, и нужно ли указывать первоначального дизайнера.
- Аддоны — некоторые разработчики шаблонов CSS предлагают свои работы на основе «freemium». Вы получаете шаблон бесплатно, но у вас есть возможность оплатить дополнительные настройки, чтобы сделать его уникальным для вашего сайта.
После всего этого давайте рассмотрим лучшие места, где можно найти бесплатные шаблоны CSS.
1. Templated.co
Эта потрясающая коллекция из более чем 800 шаблонов CSS содержит стили для каждого класса веб-сайта. Все они созданы специально для сайта, поэтому вы не должны видеть их где-либо еще.
Все шаблоны являются адаптивными и построены с использованием HTML5. Они небольшие и легкие, с дополнительными функциями Javascript, такими как лайтбокс видео или эффекты прокрутки, которые используются только там, где они добавляют реальную ценность к опыту.
2. Styleshout.com
Styleshout предлагает большой выбор бесплатных и платных шаблонов, первые из которых выпущены под лицензией Creative Commons.
Бесплатные шаблоны охватывают широкий спектр категорий, от полноценных веб-сайтов до страниц «Скоро в продаже», и даже часто пропускаемой страницы с ошибкой 404 Вы можете настроить их самостоятельно и адаптировать их к стилю вашего существующего сайта, или вы можете заплатить, чтобы заставить Styleshout сделать это за вас.
3. HTML5Up.net
Эта супер-стильная коллекция шаблонов также очень популярна. Большинство из них были загружены сотни тысяч раз, и легко понять, почему.
Все обычные категории сайта обслуживаются, например, блог и страница продукта, и есть несколько особенно приятных дизайнов для фотографов, чтобы показать свои работы. Основные шаблоны в стиле сетки чрезвычайно настраиваемы, в то время как более яркие шаблоны, как правило, используют Javascript довольно интенсивно, поэтому могут быть менее подходящими для ваших настроек.
4. Freebiesbug.com
То, что Freebiesbug испытывает недостаток в количестве, это больше, чем восполняет качество. Сайт, на котором молодые разработчики демонстрируют свои навыки, включает в себя множество высококачественных, премиум-дизайнов.
Впечатляющая коллекция бесплатных шаблонов сайта идеально подходит для агентств, фотографов, разработчиков приложений и других креативщиков. Снабженные Javascript и CSS-эффектами и анимацией, вы можете настраивать сайты, хотя они часто бывают такими приятными, что вы этого не захотите.
Кроме того, Freebiesbug.com включает в себя все виды бесплатных ресурсов для веб-дизайнеров, в том числе шрифты, фотографии, эскизы Illustrator « и PSD файлы и многое другое.
5. Free-CSS.com
Free-CSS.com — это веб-сайт без излишеств — на момент написания — около 2503 бесплатных шаблонов, а также множество премиальных шаблонов на случай, если вы все еще не можете найти то, что ищете.
С таким большим выбором, может быть немного сложно выбрать идеальный дизайн. Качество в целом хорошее, хотя 10 лет существования сайта означает, что на нем по-прежнему размещаются шаблоны, написанные на XHTML. Вы хотите избежать этого. Другое дело, чтобы убедиться, что вы проверяете лицензию для выбранного вами шаблона. Все они бесплатны, но некоторые являются общественным достоянием, некоторые Creative Commons, а некоторые используют авторскую лицензию.
6. OS-Templates.com
28 страниц бесплатных шаблонов CSS, в основном с использованием современных макетов на основе сетки на одной странице. Если вы ищете простое, то это место для поиска. Дизайн чистый, привлекательный и простой в настройке.
OS-Templates.com также предлагает большую коллекцию «базовых шаблонов». Они дают вам базовую структуру для веб-сайта в различных популярных схемах размещения (две колонки, три колонки и т. Д.), При этом они полностью не представлены. Как и использование темы по умолчанию в WordPress, пустой холст позволяет превратить ваш сайт во что угодно.
7. boag.online
Maglev — это одностраничный шаблон веб-сайта, который можно просмотреть в действии на сайте boag.online .
Это быстрый, чистый шаблон, идеально подходящий для страницы продукта. Минималистский дизайн дополнен лишь несколькими эффектами Jquery, которые помогут вам прокручивать разделы. Простой макет работает сам по себе, но он также является отличной отправной точкой для ваших собственных настроек.
8. Пиксель Будда
Шаблоны Pixel Buddha не ограничиваются веб-сайтами, они также включают в себя рассылки по электронной почте.
В любом случае, все они разработаны с использованием HTML5 и CSS3 и быстро реагируют, поэтому отлично смотрятся на любом устройстве. Основные моменты включают в себя Howdy HTML, красивый шаблон портфолио / резюме и SOHO HTML, потрясающая веб-страница электронной коммерции, которая содержит исходные PSD-файлы поверх HTML и CSS.
9. Templatemo.com
Около 500 бесплатных шаблонов доступны от Templatemo. Одними из лучших являются те, которые вырвались из системы сетки в стиле Bootstrap, чтобы попробовать что-то другое.
Большинство шаблонов просты и не перегружены, хотя такие функции, как лайтбоксы и карусели контента, включены там, где они необходимы. Нам также нравится тот факт, что по умолчанию несколько шаблонов настроены на работу с шестью страницами. Это облегчает задачу, если ваш контент не соответствует все более распространенному макету одной страницы.
10. Startbootstrap.com
Bootstrap — это невероятно популярный интерфейс, позволяющий вам создавать высококачественные веб-сайты в кратчайшие сроки. Тем не менее, это займет немного времени, чтобы узнать, где вступает Start Bootstrap.
Эта коллекция бесплатных шаблонов с открытым исходным кодом построена с использованием грид-системы Bootstrap. Есть более 30 на выбор. Некоторые полностью разработаны и предназначены для приложений, блогов и целевых страниц, в то время как другие представляют собой пустые макеты, ожидающие вашего стиля.
11. Bootswatch.com
Наконец, кое-что более практическое. Bootswatch предлагает 16 тем с открытым исходным кодом для стилей сайтов, созданных с помощью Bootstrap.
Вы можете самостоятельно создать макет своего сайта с помощью Bootstrap или загрузить один из пустых шаблонов из Start Bootstrap. Bootswatch изменяет шрифты, цвета фона и стили для кнопок, меню и других элементов. Это придает вашему сайту уникальный внешний вид, оставаясь верным ультра-чистому духу Bootstrap.
Легко собрать базовый веб-сайт с помощью Bootstrap, и Bootswatch дает ему мгновенную полировку.
Как использовать шаблоны CSS
Вообще говоря, есть два способа использования шаблонов. Вы можете использовать их как есть или использовать в качестве основы для собственного дизайна.
Опасность при использовании шаблонов заключается в том, что вы в конечном итоге получаете сайт, который идентичен чужому. Выберите популярный шаблон, и там могут быть буквально десятки тысяч идентичных сайтов. Это главный аргумент в пользу их настройки.
Шаблоны CSS — отличный способ для опытных веб-дизайнеров, которые имеют в виду базовый макет и хотят сразу перейти к его оформлению.
Они также идеально подходят для любого новичка в веб-дизайне. Если вы разбираетесь в HTML и CSS, но еще не уверены в себе и не знаете, как создать сайт с нуля, тогда CSS-шаблон станет и простым способом получить красивый сайт, и отличным инструментом обучения.
Вы можете рассматривать это как работу в процессе. Начните с переключения шрифтов и измените цветовую схему цветовую схему цветовую схему , и со временем вы можете изменить существующие элементы, добавить новые и так далее. Нет лучшего способа научиться чему-либо, чем практический практический опыт.
Используете ли вы CSS шаблоны при создании сайтов? Какие ваши любимые места, чтобы найти их? Поделитесь своим опытом и советами с нами в комментариях.