Главная > Шаблоны сайтов > 15 полезных CSS3 и HTML5 шаблонов и платформ
15 полезных CSS3 и HTML5 шаблонов и платформ5 мая 2010, 13:00. Разместил: Mysterious Master |
CSS3 и HTML5 уже долгое-долгое время считаются двумя самыми крутыми вещами для разработки веб-дизайна. А почему бы не считать так? Ведь все современные браузеры уже давно поддерживают эти технологии. Ниже вы можете видеть коллекцию визуально простых шаблонов, но все они были разработаны по технологиям CSS3 и HTML5. Последними в списке идут CSS3-платформы, разработанные на HTML5. Набор основных шаблонов HTML5 Эти шаблоны были разработаны человеком, вдохновленным обучаемой статьей о шаблонах на HTML5 в Smashing Magazine, несмотря даже на то, что дизайн и CSS были отредактированы разными путями. Этот шаблон предоставляется в 4х цветах (зеленый, синий, фиолетовый и оранжевый) с возможностью без труда редактировать CSS и HTML5 (эффекты при наведении мыши, тень текста и многое другое). * Набор основных шаблонов HTML5 CSS3-шаблон 19 от RamblingSoul * Информация о шаблоне * Демо-версия HTML5 и CSS3 шаблон цветущей вишни * Информация о шаблоне * Демо-версия Амперсант HTML5 У вас есть возможность выбрать между вариантами с двумя колонками и тремя. * Информация о шаблоне * Демо-версия двух колонок * Демо-версия трех колонок Обратно-совместимый одностраничный шаблон портфолио (Шаблон и обучающая статья) * Информация о шаблоне * Демо-версия Почти круглый шаблон на CSS3 Шаблон отображает образец того, чем может быть CSS3, особенно эти округлые углы и параметр @font-face. К тому же, есть несколько псевдо CSS-селекторов, которые используются для управления некоторыми элементами. Шаблон отлично поддерживается в Firefox 3.5+ и Safari 4+. Все другие браузеры будут также отображать приемлемую версию дизайна. * Информация о шаблоне ZooCroo на HTML5 и CSS3 ZooCroo очень забавный и пестрый шаблон, в котором используется HTML5 и CSS3. Непонятные изображения анимированы с помощью CSS3. Если вы наведете на изображение, то оно прокрутится и будет заменено другим. Это произойдет, если ваш браузер понимает код трансформаций CSS3, конечно. * Информация о шаблоне * Демо-версия Шаблон и обучающая статья по шаблону для блога в виде цветка на HTML5 и CSS3 В этой статье с исходными файлами шаблона, вы сможете сделать страницу блога, используя современные технологии HTML5 и CSS3. Статья нацелена на демонстрацию того, каким образом вы будете разрабатывать веб-сайты, когда закончится доработка всех спецификаций и все браузеры будут воспринимать их. * Информация о шаблоне * Демо-версия Rockit на HTML5 & CSS3 Rockit представляет собой шаблон в два столбика на музыкальную тематику, в котором используются трансформации CSS3 для создания привлекательного эффекта Polaroid для отображения изображений. Для браузеров, которые понимают этот эффект, наведение курсора на изображение сместит его немного в сторону. Если браузер не поддерживает данную технологию, то браузеры все равно будут обрамлены в рамку Polaroid, но не будет никакой анимации. * Информация о шаблоне * Демо-версия Cardeo Three на CSS3 Cardeo Three представляет собой бесплатный шаблон веб-сайта, разработанный на CSS3 с использованием следующих свойств: закругленные углы (без использования изображений!), а также Custom Font Replacement и Font Shadow. * Информация о шаблоне * Демо-версия Beach Vaycay Этот солнечный шаблон представляет собой тему путешествий с градированным фоном, в котором используется CSS3 без применения изображений. Браузеры, которые еще не поддерживают эту технологию, будут отображать вам простой цветной фон вместо градации. Этот шаблон состоит из 2х колонок и 4-х секций футера. * Информация о шаблоне * Демо-версия Papery на HTML5 & CSS3 Papery представляет собой HTML5/CSS3-шаблон, в котором отображено все, что касается параметров face и font-face. Этот шаблон в две колонки нацелен на @font-face, показывая то, насколько весело может быть использование нестандартных шрифтов. Можно придать акцент шрифтам за счет текстур старой бумаги, а также 3-х секционный футер, тени границ и выпадающие меню придают дизайну немного староватый но уютный внешний вид. * Информация о шаблоне Одностраничный шаблон на XHTML & CSS3 Этот бесплатный шаблон был разработан при помощи чистого кода XHTML и CSS3. Он совместим со всеми браузерами, а также отвечает стандартам SEO, и включает в себя интересный jQuery-эффект скролла. Отлично подходит в случаях, когда вам нужно что-нибудь очень быстро создать. * Информация о шаблоне * Демо-версия Newsy шаблон на HTML5 и CSS3 с несколькими колонками Newsy представляет собой красивый шаблон в стиле журнала или газеты. Содержимое плавно переходит с одной колонки на другую (автоматически), без каких-либо действий со стороны автора. IE отказывается распознавать несколько колонок, так что статьи будут выглядеть как и на обычном сайте в одну колонку. Но это как минимум гарантирует то, что сайт не будет выглядеть безобразно для пользователей IE. * Информация о шаблоне * Демо-версия Less Framework Less Framework представляет собой CSS-платформу, разработанную на HTML5. Она предназначена для разработки гибких шаблонов веб-сайтов в несколько колонок. В платформе есть сетка в 8 колонок с высотой строки в 24 пикселя, а также установки предварительно заготовленной типографии, которая идеально подходит для такого типа сетки. Шаблоны, разрабатываемые в данной платформе отлично работают в Chrome, Safari 3.0+, Firefox 3.0+, Opera 10+ и Internet Explorer 7+. Они очень аккуратно складываются в одну колонку, если вы используете ранние версии браузеров, или просматриваете сайт посредством мобильного устройства с маленьким экраном. * Информация и файлы для скачивания Less Framework 52Framework 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 * Демо-версия * Документация Вернуться назад |