Создаем сайты в стиле Windows 8 с помощью Metro UI CSS
Metro UI CSS — набор стилей CSS для создания интерфейса сайта в стиле Windows 8 Metro UI. Библиотека дает возможность быстро и без затей построить оригинальный сайт.
Набор стилей разработан с использованием LESS.
5 последних добавленных сервисов в рубрике»CSS»
Бесплатный онлайн-генератор графики для продающих сайтов
С помощью генератора вы за считанные секунды сможете сгенерировать красивые кнопки, заголовки, блоки специальных предложений, а также гарантии, и все это с любым текстом, который вы сами напишите.
Продвинутый Онлайн CSS3 Генератор
EnjoyCSS — это мощный генератор CSS3 кода. Данный сервис позволит вам без единой строчки кода создать прикольные стили для пользовательского интерфейса.
Онлайн сервис для проверки кода — jsFiddle
Онлайн сервис для проверки и демонстрации идей в программировании веб ресурсов. Можно подключать различные популярные библиотеки и делиться кодом с коллегами и мировым сообществом.
Онлайн-сервис для рефакторинга CSS кода
Проект для рефакторинга и генерации нового кода для работающего сайта. Основное назначение — устранение повторений, противоречий и создание основы для дальнейшего развития проекта.
Набор онлайн генераторов для подготовки элементов интерфейса — UIParade
Отличный набор из онлайн генераторов, которые облегчат труд веб мастера. В наборе имеется 4 инструмента — для кнопок, для форм, для иконок и для лент. Настраиваем внешний вид в визуальном редакторе и копируем код в свой проект.
Metro: Навигация для сайта в стиле windows 8
Стало известно, что новая операционная система windows будет отличатся от своих предшественниц футуристическим дизайном меню пуск, и отсутствие кнопки вызова в низу панели задач, это весьма насторожило, ведь прежние удобства стали недоступны и приходится переучиваться, но есть и поклонники данного нововведения. Безусловно, что новый пуск стал весьма эффектно смотреться, появились новые возможности и естественно инновация в нестандартном оформлении. Не успела данная операционная система толком выйти, как появились интересные решение.
В данном уроке мы рассмотрим как создать навигацию для сайта в стиле metro windows 8, такой подход к организации меню отлично подойдет для оформления портфолио или персональной странички. И так, приступим.
Шаг 1. HTML
Для начала рассмотрим разметку, в которой мы подключим необходимы репозитории и веб-шрифты. С помощью класса class=»controls» создадим организацию навигации, с помощью которой можно переключать варианты разметки и прокрутки меню.
Как вы заметили, мы также используем классы для разметки изображений и заливки контуров вокруг них, все достаточно просто.
Шаг 2. CSS
Более детально на стилях и скриптах мы останавливаться не будем, более детально с ними можно ознакомится в исходниках.
Вот и все. Готово!
Подписывайтесь на нашу группу в контакте vk.com/club.ssdru
Статьи по теме jQuery
В заметке собраны потрясающие решения для реализации развернутой навигации по сайту. Выпадающие вертикальные и горизонтальные меню с огромным количеством пунктов идеально подойдут для сайтов со сложной структурой или интернет-магазинов. Помимо пунктов в этих меню в выпадающую область можно поместить другое содержимое, например изображения с описанием.
Эта простая адаптивная навигация позволяет пользователям сосредоточиться на нескольких важных пунктах меню, в то время как вся навигация по-прежнему доступна, всего одним щелчком мыши.
Навигация на сайте это неотъемлемый элемент, ведь с помощью нее пользователь с легкостью может перейти к необходимой информации, не задаваясь поиском информации теряя на это драгоценное время. Но порой необходимо поместить в меню достаточно много информации, а это не весьма удобно, ведь меню станет достаточно объемным и будет занимать много места, а это плохо скажется на визуальном оформлении сайта. Что же делать в таком случае? выход достаточно простой, нам необходимо создать выпадающее меню для сайта, которое будет отлично вписываться в дизайн сайта.
Фон является неотъемлемой частью любого сайта, красивое оформление позволяет задать тон всему ресурсу. Здесь, перед веб-мастером, стоит не простая задача, ведь необходимо подобрать правильно цвета, чтобы пользователь не терялся на сайте и информация была хорошо видна. В данном уроке мы рассмотрим пример создания замечательного анимированного фона, который будет жить своей жизнь и менять цветовую палитру, смотрится весьма удивительно, и позволяет привлечь внимание посетителей.
Раскрутка в соцсетях
В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.
Хотите уникальный сайт? Ознакомьтесь с нашими ценами!
Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка. ПОРТФОЛИО
Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.
Форма обратной связи
Все поля обязательны для заполнения!
Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика — это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа — это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!
Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.
Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.
Все, что нужно для создания веб-сайтов в стиле интерфейса Metro в Windows 8
Windows 8 уже был представлен, и всем привычный интерфейс ОС Windows был в значительной степени изменен, с появлением сеточного интерфейса Metro.
Это серьезный шаг для Microsoft, так как этот новый интерфейс будет использоваться на всех их ее платформах, включая настольные ПК, мобильные устройства, планшеты, а также веб-сайты.
Лично нам понравился интерфейс Metro, так как он совместим со многими аспектами современного веб-дизайна: не лишен простоты, предлагает нам сеточное отображение элементов (отлично подходит для адаптивных шаблонов), и он очень сплочен с любой точки зрения.
Хотя сеточные интерфейсы сейчас не в новинку, пользовательский интерфейс Metro точно вдохновит многих дизайнеров на новые идеи веб-сайтов
Если вам понравился интерфейс Metro, и вы планируете разработку нового веб-сайта, то мы хотели бы сегодня предложить вам все необходимые ресурсы для разработки шаблонов в стиле интерфейса Metro в Windows 8:
Платформы и шаблоны для веб-сайтов в стиле Metro
Metro UI CSS представляет собой отличную полноценную среду разработки (платформу) для разработки веб-сайтов в стиле Metro.
Она была разработана на LESS, и оснащена сеточной системой, стилями типографики, таблицами, формами, кнопками и изображениями.
Здесь также имеются встроенные javascript-компоненты для популярных сеток, меню, боковых панелей, гармошек, строк прогресса и многого другого.
BootMetro представляет собой нечто вроде шаблона для Twitter Bootstrap, который предлагает нам все свойства Bootstrap, но с дизайном Metro.
Это даже нечто большее, так как здесь есть пользовательские стили для сетки, панели приложения и некоторые другие компоненты.
metro-bootstrap, как и BootMetro, также представляет собой шаблон для Twitter Bootstrap.
Здесь есть все преимущества Bootstrap, и также вкрапления стилей LESS.
Это сайт-среда разработки и шаблонов для создания веб-сайтов в стиле Metro.
Здесь имеются плавные переходы и множество ячеек (RSS, Twitter, погода и так далее).
Шаблон дружит с мобильными устройствами, и также оснащен шаблоном jQuery UI.
WEB 2.0 панель управления в стиле страницы запуска Windows 8 с открытым исходным кодом (как iGoogle).
Она отображает информацию в ячейках, где каждая ячейка представляет собой мини-приложение, которое извлекает данные из внешних источников.
Проект разработан при помощи ASP.NET, но может быть импортирован в любой другой язык без труда.
PHP-скрипт галереи изображений, который способен автоматически генерировать миниатюры и отображать изображения в lightbox.
Он полностью отвечает стандартам HTML5 и CSS3.
Библиотека для создания приложений в стиле Metro посредством Visual Studio, при помощи небольшого объема кода.
Она не привязана к каким-либо JS-средам разработки.
jQuery-плагины для веб-сайтов в стиле интерфейса Metro
jq-metro – jQuery-плагин, предоставляемый с несколькими контроллерами для создания интерфейсов в стиле Metro.
На данный момент здесь имеются элементы панорамного обзора, выбора списка, переключатель, кнопки и текстовые поля.
Этот jQuery-плагин способен создавать ячейки, панель приложения, и имеет поддержку шаблонов.
Ячейки и панель приложения позволяют вам максимально настроить все под себя.
Данный плагин позволяет нам создавать сеточные интерфейсы, и только на этом он и сосредоточен.
jQuery Mobile Metro Theme предназначен для приложений, разработанных при помощи Cordova.
Он использует различные плагины для управления панелью приложения, строкой прогресса, кнопкой переключения и так далее.
Конструктор шаблонов по типу ThemeRoller для jQuery UI, направлен на создание дизайнов в стиле интерфейса Metro.
6. TileJS (не jQuery) — ссылка сдохла .
Отдельный JS-код для создания сеточного вида и применения эффекта onclick (на CSS3).
Бесплатные иконки Metro UI
Набор высокоточных иконок, созданных вручную в стиле Metro UI.
Иконки предлагаются в формате .design, в размере 48*48px (для панели приложения) и в виде файлов XAML.
Бесплатный набор из более чем 670 иконок в стиле Windows 8.
Иконки предложены в следующих форматах: 512*512px .PNG, 256*256px .ICO и в .SVG (конвертировано другим дизайнером).
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях: