HTML шаблоны сайтов и просто примеры / приёмы верстки.
Данный материал содержит пример реализации простой красивой фотогалереи для сайта на чистом HTML5 / CSS. Изображения выводятся ненумерованным списком, при наведении на картинку курсора мышки пользователям в накладываемом поверх неё слое будет отображено описание картинки. Выглядеть все это будет примерно так, как показано на следующем скриншоте окна браузера:
Представляю вниманию читателей подборку из нескольких новых HTML шаблонов для сайта. Все страницы имеют преимущественно плоский минималистичный дизайн, что в принципе не лишает их приемлемого внешнего вида.
Для верхнего главного меню сайта доступны краткие описания. Слайдер анимирован простым съезжанием картинок справа налево. Напротив логотипа, представленного текстом есть несколько иконок социальных сетей, оформленных в общем стиле данного дизайна. Помимо главной сверстаны ещё несколько страниц, в т.ч. с типографикой.
Далее будет рассмотрен пример того, как можно прижать подвал / footer к низу страницы. Сразу отмечу, что способ этот стандартный, а значит кроссбраузерный, т.е. без всяких сомнительных CSS хаков. Даже в IE (по крайней мере в IE8) будет работать.
Посмотреть рабочий примерСмотрим скриншот:
Данный материал содержит достаточно объемный кусок CSS, который описывает пример создания объемной кнопки на HTML, реагирующей на нажатие мышкой эффектом вдавливания. Иными словами button при клике выделится цветом и чуть продавится «внутрь» веб-страницы.
Данная заметка содержит небольшой обзор готового шаблона для сайта под названием Cheese Mousso, который состоит из 4 прекрасно сверстанных веб-страниц.
На главной странице помимо двух колонок с последними новостями сайта и фотогалереей есть промо-область, где выделено место по краткое описание проекта и демонстрационный видеоролик.
Текущая заметка содержит пример разметки на HTML для получения трех-колоночной сетки с картинками, заголовками, описаниями и кнопками из ненумерованного списка с CSS фреймворком под названием Twitter Bootstrap.
Текущая заметка содержит пример верстки контактной формы для сайта средствами CSS фреймворка под названием Twitter Bootstrap. Стоит отметить, что дополнительных стилей здесь прописывать не понадобится.
Свежие комментарии