Дизайн сайта html – Бесплатные адаптивные HTML5 CSS3 шаблоны сайтов и интернет-магазинов

Крутейшие CSS и HTML примеры Material Design в действии

Мы узнали и увидели Material Design несколько месяцев назад. И конечно же этот инновационный визуальный язык от Google становится всё больше популярным. И сейчас мы можем увидеть всё больше и больше сайтом и приложений, которые используют этот стиль. 2015 год будет годом Material Design и он точно нам понравится.

А чтобы продемонстрировать на что способен этот стиль, давайте сегодня с Вами взглянем на несколько очень популярных и крутых CSS и HTML примеров в действии, то есть во всех работах присутствует анимация, и смотрится это конечно превосходно.

Огромное спасибо http://speckyboy.com и рекомендую следующее к просмотру:

Демонстрация приложений

Красивая демонстрация приложений, какие установлены на новый Android Lollipop, очень круто и профессионально смотрится.

Перейти

Анимированная сетка

Эта сетка сделана с помощью CSS, конечно же в стиле Material Design, так же плитки немного меняют цвет при наведении, а так же добавляется еле заметная тень.

Перейти

Несколько иконок

Набор из нескольких иконок с анимацией в стиле Material Design

Перейти

Анимация для презентации

Красивая анимация, которая больше подойдёт для каких либо презентаций, конечно же в стиле Material Design.

Перейти

Сетка с классным эффектом

Простая сетка с адаптивным дизайном, но её блоки имеют интересный эффект при наведении.

Перейти

Бар загрузки страницы

Интересный и анимационный бар который показывает, что страница загружается. Он выполнен в стиле Material Design и находится сверху страницы.

Перейти

Всплывающее окно при клике

Красивое и простое всплывающее окно в стиле Material Design, которое выпадает, когда пользователь кликнет на круглую иконку.

Перейти

Форма входа

Простая и стильная форма входа выполненная в стиле Material Design

Перейти

Анимация при перелистывании

Пример того как срабатывает анимация при перелистывании блоков в приложении

Перейти

Навигация

Очень красивая и простая навигация выполненная в стиле Material Design с крутой анимацией при клике.

Перейти

Меню с иконкой гамбургер

Анимационное меню с анимационной иконкой гамбургер.

Перейти

Круг загрузки

Красивый и анимационный круг загрузки на сайт или приложение

Перейти

UI от Chrome

CSS макет Chrome выполненного в стиле Material Design

Перейти

Табы

Красивые табы в стиле Material Design с классной анимацией

Перейти

beloweb.ru

30 одностраничных шаблонов на html для студии веб-дизайна / HTML шаблоны / Постовой

Сегодняшняя статья посвящена HTML шаблонам для создания одностраничника студии веб-дизайна. Каждый шаблон по своему уникален. Единого стандарта не существует и каждый может выделиться по своему. Одни выполнены с легким оформлением, другие используют анимацию, а третьи совмещают предыдущие элементы и, например, имеют нестандартные геометрические формы или дополнительные блоки. Но есть и схожие элементы, которые присутствуют почти в каждом

одностраничнике веб-студии. По сути в шаблонах можно встретить эти блоки:

• Описание
• Предоставляемые услуги и особенности
• Портфолио работ
• Список клиентов и их отзывы
• Контактная информация

Также можно встретить блок со списком сотрудников и блог с интересными новостями. Это позволит посетителю страницы узнать всю необходимую информацию о студии, расценках и приблизительных сроках исполнения (если указано) и связаться с вами, если ему все понравится.
Шаблоны созданы на HTML5, CSS3, а также jQuery и фреймворке Twitter Bootstrap. Все шаблоны адаптивные, так что сайт можно будет просмотреть на любом устройстве. Почти все шаблоны распространяются бесплатно, иногда разработчики оставляют ссылку на пожертвование в виде чашечки кофе :), но не настаивают на этом.
Приступаем к обзору, подборка получилась не малая и есть из чего выбрать. Также оставляйте комментарии, подписывайтесь на группу вконтакте и рассылку.

Смотрите также:

Conquer

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

Bright Heaven

Чистый и аккуратный шаблон. В нем есть полноэкранный слайдер изображений, masonry галерея с фильтром изображений и другие элементы.

Xenon

Бесплатный одностраничный шаблон с косыми геометрическими формами. Выполнен в красной, синей, коричневой и белой расцветке. Галерея портфолио с фильтром работ. В целом интересное решение для сайта.

Shuffle

Одностраничник для веб студии. Легкий и чистый шаблон, быстро загружается. Содержит слайдер изображений вначале и в галерее, блоки с описанием компании, услугами и контактную форму. Шаблон сделан очень качественно.

Flat Asphalt

Качественный одностраничный HTML5 шаблон в стиле Flat. Особенности: parallax-эффект, анимация при прокрутке, плоские иконки, плавная прокрутка, портфолио с фильтром работ по тематикам, Goolge Font и другое.

Drifolio

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

Photographer

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

Flex

Шаблон HTML5 с hover эффектами, портфолио с lightbox и слайдером. Также имеет полноэкранный слайдер изображений. Выполнен просто и качественно, быстро загружается и приветливо смотрится.

Dreams

Шаблон одностраничника в плоском стиле для команды разработчиков и не только. Содержит полноэкранное изображение, меню навигации с плавной прокруткой, портфолио, интересно выполненный блок «О нас».

Creative Idea

Креативный Landing page шаблон с косыми геометрическими формами. Содержит выплывающую панель навигации, портфолио, контактная форма и другие полезные блоки для веб-студии.

Molly

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

Unique

Шаблон одностраничника в современном стиле в красном, белом и черном цветах. Поддерживает Google Fonts, шрифтовые иконки Font Awesome, планую прокрутку, портфолио с фильтром работ и многое другое. Можно использовать как для студии веб-дизайна, так и для лендинга мобильных приложений или портфолио фрилансера.

Vibrant

One page шаблон в современном стиле. В описании услуг используются плоские иконки, в портфолио присутствует фильтр по разделам. Хорошо подойдет для студии веб-дизайна.

Timeline

Шаблон в зеленых цветах. Прикольная анимация и прорисовка элементов при прокрутке страницы. Легкий, чистый, быстро загружается.

Epils Agency

Одностраничник для студии веб-дизайна в плоском стиле. Содержит раскрывающееся полноэкранное меню с плавной прокруткой, портфолио с фильтром работ по разделам. плоские иконки. Активный цвет на сайте — зеленый.

Pink

Шаблон одностраничника в розовом цвете. Включает панель навигации с плавной прокруткой, lightbox портфолио с фильтром изображений. плоские иконки в блоке с услугами. Также блок с командой проекта и контактную информацию.

Spirit8

Шаблон HTML в современном стиле. Блоки с картинкой и белым фоном чередуются. Имеет полноэкранное изображение, панель навигации с плавной прокруткой, портфолио с фильтром работ по типу и блоки с описанием компании, услугами, отзывами клиентов и контактной формой.

KreFolio

Качественный одностраничник для портфолио фрилансера. Содержит полноэкранный слайдер изображений и полноэкранное меню навигации, анимацию при прокрутке и многое другое. Активный цвет шаблона — красный.

SinglePro

Тема одностраничного сайта в современном стиле. Содержит полноэкранный слайдер изображений, меню навигации с плавной прокруткой, 10 цветовых тем, портфолио с фильтром по темам, прайс цен, блог и другие полезные блоки.

Arcadia

Качественный одностраничник для студии веб-дизайна. Интересная презентация: на полноэкранном изображении печатающийся текст, что сходу привлекает внимание. Имеет выдвигающуюся слева слайд-панель навигации, анимация при наведении на элементы в услугах, портфолио, блок со списком партнеров, сотрудников комментариями клиентов и контактной формой.

Fimply

Классный, чистый шаблон одностраничника в современном стиле. Включает полноэкранный слайдер изображений, портфолио, блог, прайс цен и другие блоки.

OnePage

Одностраничник в стиле минимализм с блоками «о нас», портфолио и контактной формой. Имеет полноэкранное изображение с Parallax-эффектом. Навигация появляется сверху при прокрутке страницы. Шаблон качественный и простой.

Casablanca

Блоки с картинкой и белым фоном чередуются. У кнопок есть анимация, Содержит полноэкранное изображение, выдвигающуюся слева слайд-панель навигации и блоки about, портфолио, клиенты, услуги и контакты.

Ungart

Качественный и простой одностраничный шаблон для студии веб-дизайна. Состоит из блоков: услуги, портфолио с фильтром по темам, сотрудники со смешными карикатурами и контактная форма.

Ufolio

Одностраничный шаблон в плоском стиле. Блоки с различными фоновыми цветами. Содержит информацию «о нас», услуги, портфолио и контакты. Хорошо подойдет для landing page студии веб-дизайна.

Kasper

Одностраничный шаблон в стиле минимализм. Содержит слайдер, портфолио с фильтром разделов и приятное оформление. Хорошо подойдет для команды разработчиков.

Brandi

HTML5 шаблон одностраничника. Имеет полноэкранное изображение, блоки портфолио, команды, описания и контактной информации.

Blue

Одностраничник для студии веб-дизайна в синих оттенках. На страничке есть полноэкранный слайдер изображений, навигация с плавной прокруткой, плоские иконки с анимацией при наведении. Шаблон сделан аккуратно и качественно.

postovoy.net

Создаем простой сайт. Часть 3. Оформление с использованием CSS ‹ Asterial Web. IT блог

В последней части урока по созданию html страницы рассмотрим использование каскадных таблиц стилей — Cascading Style Sheets, сокращенно CSS. Главным назначением css является отделение внешнего оформления страницы от ее структуры, поэтому css подключается отдельным файлом, а в основном файле, определяющем структуру (в нашем случае это файл index.html), остаются лишь html-теги, отвечающие за разметку страницы.

Создадим в папке Test новый файл под названием style.css. Сначала необходимо подключить css файл в нашем основном файле index.html. После указания ссылки на файл стилей, html-файл уже сможет брать стили оформления из него. Подключение css-файлов происходит в разделе <head></head>. В первом уроке уже упоминалось, что этот раздел невидимый, и необходим для подключения стилей, скриптов, а также указания заголовка страницы, мета-тегов и прочих элементов страницы. Просто напишите между тегами <head> следующую строку:

<link rel="stylesheet" href="style.css">

Раздел <head> теперь будет выглядеть так:

<link rel="stylesheet" href="style.css">
<title>Заголовок страницы</title>
</head>

Такой путь будет работать только если файл стилей лежит в папке вместе с файлом index.html, если же он лежит в другой папке, то в ссылке надо будет указать полный путь к нему.

Итак, css подключен, теперь перенесем уже имеющиеся стили в файл style.css. Index.html будет снова выглядеть практически как во второй части урока, за исключением одной строчки, которая подключает css.

Содержимое файла index.html:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Заголовок страницы</title>
</head>
<body>
<div>
<a href="http://ссылка на сайт.ru"><img src="bird.png" alt="header"/>Шапка сайта. Добро пожаловать на мой сайт</a>
    </div>
<div>
    <p>Контент. Здесь может быть абсолютно любая информация.</p>
</div>
<div>
Футер. Подвал. Нижняя часть сайта
</div>
</body>
</html>

Содержимое файла style.css. Как видим, все стили теперь объявляются в нем:

body {
margin: 0;
padding: 0;
}

#header {
height: 200px;    
}

#content {
height: 300px;
background-color: #B0E0E6;
border: 1px solid #999;
font-size: 12pt;    
}

#footer {
height: 200px;
text-align: center;
font-size: 14pt;
}

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

Синтаксис css прост — сначала идет имя html-тега, для которого описывается оформление, а затем в фигурных скобках — непосредственно сам стиль оформления обязательно с точкой с запятой в конце каждого свойства. Глобальные теги, такие как body, html пишутся без каких-либо знаков, если мы описываем элемент, который записывали как <div>, то в начале будет решетка — #, если <div>, в начале будет точка, но в данном уроке классов нет, поэтому пока не будем говорить о них.

Если сейчас сохранить оба файла и открыть файл index.html в браузере, то мы увидим, что он не изменился. Этого и следовало ожидать, так как оформление не изменилось, а просто было перенесено в отдельный файл. Чтобы немного освоиться с каскадными таблицами стилей зададим фон для шапки и футера. Пропишем для #header новое свойство внутри фигурных скобок:

background: url('header.jpg') repeat-x;

Файл header.jpg можно скачать тут, после скачивания его следует положить в папку Test.

Также установим фон и для футера. В фигурных скобках #footer пишем:

background: url('footer.jpg') repeat-x;

Файл footer.jpg качаем тут и тоже кладем в папку с проектом.

Рядом с путем к файлу находится параметр repeat-x, который означает, что фон будет повторяться по горизонтали.
В итоге файл style.css будет иметь следующий вид:

body {
margin: 0;
padding: 0;
}

#header {
height: 200px;    
background: url('header.jpg') repeat-x;
}

#content {
height: 300px;
background-color: #B0E0E6;
border: 1px solid #999;
font-size: 12pt;    
}

#footer {
height: 200px;
background: url('footer.jpg') repeat-x;    
text-align: center;
font-size: 14pt;
}

Теперь страничка практически готова, но текст в блоке контента находится слишком близко к левой границе блока, поэтому лучше задать ему отступ. Так как текст заключен в тег <p>, значит и стиль надо прописывать тегу <p>. При этом тег <p> расположен внутри блока content, и описываться будет следующим образом:

#content p {
margin: 20px;    
}

Сохраним файл style.css, обновим страничку в браузере, и если все было сделано правильно, то вы увидите следующее:

Конечно, страница выглядит совсем простой, и ее структура примитивна, но при этом она уже может быть страницей сайта, так как имеет для этого все необходимое. Если же продолжить усовершенствовать ее структуру и оформлять с помощью css, то может выйти что-то весьма неплохое.

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

Скачать архив

Первая часть урока — Перейти

Вторая часть урока — Перейти

Возможно, вам также будут интересны статьи:

asterial.ru