Главная > Шаблоны сайтов > 15 полезных CSS3 и HTML5 шаблонов и платформ

15 полезных CSS3 и HTML5 шаблонов и платформ


5 мая 2010, 13:00. Разместил: Mysterious Master
CSS3 и HTML5 уже долгое-долгое время считаются двумя самыми крутыми вещами для разработки веб-дизайна. А почему бы не считать так? Ведь все современные браузеры уже давно поддерживают эти технологии.

Ниже вы можете видеть коллекцию визуально простых шаблонов, но все они были разработаны по технологиям CSS3 и HTML5. Последними в списке идут CSS3-платформы, разработанные на HTML5.

Набор основных шаблонов HTML5

15 полезных CSS3 и HTML5 шаблонов и платформ

Эти шаблоны были разработаны человеком, вдохновленным обучаемой статьей о шаблонах на HTML5 в Smashing Magazine, несмотря даже на то, что дизайн и CSS были отредактированы разными путями.
Этот шаблон предоставляется в 4х цветах (зеленый, синий, фиолетовый и оранжевый) с возможностью без труда редактировать CSS и HTML5 (эффекты при наведении мыши, тень текста и многое другое).

* Набор основных шаблонов HTML5

CSS3-шаблон 19 от RamblingSoul

15 полезных CSS3 и HTML5 шаблонов и платформ

* Информация о шаблоне
* Демо-версия

HTML5 и CSS3 шаблон цветущей вишни

15 полезных CSS3 и HTML5 шаблонов и платформ

* Информация о шаблоне
* Демо-версия

Амперсант HTML5

15 полезных CSS3 и HTML5 шаблонов и платформ

У вас есть возможность выбрать между вариантами с двумя колонками и тремя.

* Информация о шаблоне
* Демо-версия двух колонок
* Демо-версия трех колонок

Обратно-совместимый одностраничный шаблон портфолио
(Шаблон и обучающая статья)

15 полезных CSS3 и HTML5 шаблонов и платформ

* Информация о шаблоне
* Демо-версия

Почти круглый шаблон на CSS3

15 полезных CSS3 и HTML5 шаблонов и платформ

Шаблон отображает образец того, чем может быть CSS3, особенно эти округлые углы и параметр @font-face. К тому же, есть несколько псевдо CSS-селекторов, которые используются для управления некоторыми элементами.
Шаблон отлично поддерживается в Firefox 3.5+ и Safari 4+. Все другие браузеры будут также отображать приемлемую версию дизайна.

* Информация о шаблоне

ZooCroo на HTML5 и CSS3

15 полезных CSS3 и HTML5 шаблонов и платформ

ZooCroo очень забавный и пестрый шаблон, в котором используется HTML5 и CSS3. Непонятные изображения анимированы с помощью CSS3. Если вы наведете на изображение, то оно прокрутится и будет заменено другим. Это произойдет, если ваш браузер понимает код трансформаций CSS3, конечно.

* Информация о шаблоне
* Демо-версия

Шаблон и обучающая статья по шаблону для блога в виде цветка на HTML5 и CSS3

15 полезных CSS3 и HTML5 шаблонов и платформ

В этой статье с исходными файлами шаблона, вы сможете сделать страницу блога, используя современные технологии HTML5 и CSS3. Статья нацелена на демонстрацию того, каким образом вы будете разрабатывать веб-сайты, когда закончится доработка всех спецификаций и все браузеры будут воспринимать их.

* Информация о шаблоне
* Демо-версия

Rockit на HTML5 & CSS3

15 полезных CSS3 и HTML5 шаблонов и платформ

Rockit представляет собой шаблон в два столбика на музыкальную тематику, в котором используются трансформации CSS3 для создания привлекательного эффекта Polaroid для отображения изображений. Для браузеров, которые понимают этот эффект, наведение курсора на изображение сместит его немного в сторону. Если браузер не поддерживает данную технологию, то браузеры все равно будут обрамлены в рамку Polaroid, но не будет никакой анимации.

* Информация о шаблоне
* Демо-версия

Cardeo Three на CSS3

15 полезных CSS3 и HTML5 шаблонов и платформ

Cardeo Three представляет собой бесплатный шаблон веб-сайта, разработанный на CSS3 с использованием следующих свойств: закругленные углы (без использования изображений!), а также Custom Font Replacement и Font Shadow.

* Информация о шаблоне
* Демо-версия

Beach Vaycay

15 полезных CSS3 и HTML5 шаблонов и платформ

Этот солнечный шаблон представляет собой тему путешествий с градированным фоном, в котором используется CSS3 без применения изображений. Браузеры, которые еще не поддерживают эту технологию, будут отображать вам простой цветной фон вместо градации. Этот шаблон состоит из 2х колонок и 4-х секций футера.

* Информация о шаблоне
* Демо-версия

Papery на HTML5 & CSS3

15 полезных CSS3 и HTML5 шаблонов и платформ

Papery представляет собой HTML5/CSS3-шаблон, в котором отображено все, что касается параметров face и font-face. Этот шаблон в две колонки нацелен на @font-face, показывая то, насколько весело может быть использование нестандартных шрифтов.
Можно придать акцент шрифтам за счет текстур старой бумаги, а также 3-х секционный футер, тени границ и выпадающие меню придают дизайну немного староватый но уютный внешний вид.

* Информация о шаблоне

Одностраничный шаблон на XHTML & CSS3

15 полезных CSS3 и HTML5 шаблонов и платформ

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

* Информация о шаблоне
* Демо-версия

Newsy шаблон на HTML5 и CSS3 с несколькими колонками

15 полезных CSS3 и HTML5 шаблонов и платформ

Newsy представляет собой красивый шаблон в стиле журнала или газеты. Содержимое плавно переходит с одной колонки на другую (автоматически), без каких-либо действий со стороны автора. IE отказывается распознавать несколько колонок, так что статьи будут выглядеть как и на обычном сайте в одну колонку. Но это как минимум гарантирует то, что сайт не будет выглядеть безобразно для пользователей IE.

* Информация о шаблоне
* Демо-версия

Less Framework

15 полезных CSS3 и HTML5 шаблонов и платформ

Less Framework представляет собой CSS-платформу, разработанную на HTML5. Она предназначена для разработки гибких шаблонов веб-сайтов в несколько колонок. В платформе есть сетка в 8 колонок с высотой строки в 24 пикселя, а также установки предварительно заготовленной типографии, которая идеально подходит для такого типа сетки.
Шаблоны, разрабатываемые в данной платформе отлично работают в Chrome, Safari 3.0+, Firefox 3.0+, Opera 10+ и Internet Explorer 7+. Они очень аккуратно складываются в одну колонку, если вы используете ранние версии браузеров, или просматриваете сайт посредством мобильного устройства с маленьким экраном.

* Информация и файлы для скачивания Less Framework

52Framework

15 полезных CSS3 и HTML5 шаблонов и платформ

52framework представляет собой новую CSS-платформу, которая была разработана на HTML5 не без помощи CSS3. Она поддерживает все современные браузеры, и даже IE6! Предоставим информацию о некоторых свойствах:

HTML5
* Применение всех современных тэгов HTML5: header, nav, section, article, footer и многие другие будут вскоре доступны
* Применение всех новых "!DOCTYPE html" и "html lang="en""
* Новые типы полей ввода: url, email и так далее
* Внедрение скриптов (js) посредством специального тэга
* Усовершенствованная функция сброса таблиц стилей для HTML5

CSS3
* Применение нового селектора ::selection, с помощью которого вы можете редактировать параметры выделенного текста.
* Закругленные углы для любого элемента
* Параметр text-shadow для всех текстовых элементов
* Параметр box-shadow для всех элементов таблиц

Сетка
* 16 колонок, 52 пикселя с пазами в 8 пикселей

* Информация и файлы для скачивания 52Framework
* Демо-версия
* Документация
Вернуться назад