—»     —»   15 полезных CSS3 и HTML5 шаблонов и платформ
  Раздел: Шаблоны сайтов   Комментариев: 5  

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



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
* Демо-версия
* Документация
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Mysterious Master   Прочитано (раз): 27236   |   Оставлено комментариев: 5
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 5 мая 2010 @ 23:19
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Отличная подборка=))
Надо будет разобраться как другие применяют HTML5 и CSS3


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Комментарий #2: 5 мая 2010 @ 23:55
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1492   |   Комментариев: 177
ICQ: --- не указано ---
ITS, рады, что заинтересовало! Кстати, по вашему запросу здесь, уже найден материал. Сейчас переводчики работают. Материал ОЧЕНЬ большой, так что ждать можно не раньше следующей недели, а возможно даже через неделю, потому, что действительно огромная статья. smile
Комментарий #3: 6 мая 2010 @ 01:56
Написал: snetcher — группа: Читатели  
На сайте с: 5.05.2010   |   Публикаций: 0   |   Комментариев: 11
ICQ: 154536636
Есть смысл сравнивать 52Framework и 960.gs ?
Любопытно. Спасибо за подборку
Комментарий #4: 6 мая 2010 @ 10:37
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Mysterious Master,
Отлично, будем ждать smile .
Спасибо за быстрое реагирование.


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Комментарий #5: 14 августа 2012 @ 07:17
Написал: Prochgii — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
По моему половина из представленных шаблонов сделана в артистере (пздц и ужс) ни ногой больше на этот сайт.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


https://mimar.ru
магазин барного инвентаря
mimar.ru
Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2019    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031