HTML шаблоны сайтов и просто примеры / приёмы верстки.


HTML шаблоны для сайта-резюме + PSD макеты

Небольшая подборка, состоящая из 5 HTML шаблонов для небольших одностраничных сайтов, которые обычно создаются под онлайн-резюме.

HTML шаблон Resume

HTML шаблон Resume

Дизайн выполнен в стиле бумажного листа формата A4, который закреплен поверх темно-синей обложки на металлической заклепке. В шаблон встроена кнопка Наверх и небольшое портфолио из картинок, всплывающих средствами JavaScript.

Скачать Просмотреть
(далее…)

Опубликовано 2-04-2013 в 15:24

Шаблоны на HTML5: часть 3

Третья часть моей небольшой подборки красивых HTML5 шаблонов для сайтов различной тематики.

1. Interio:

HTML 5 шаблон Interio

В комплекте с титульной веб-страницей к этому HTML5 шаблону идут ещё четыре макета — для контактной формы, прайс-листа, описания услуг и каталога. Центральную область домашней page занимает текстура под дерево.

Просмотреть Скачать
(далее…)

Опубликовано 26-03-2013 в 10:42

Модальные окна с Bootstrap

Данная заметка содержит небольшой пример создания простого модального окна средствами CSS-фрейморка Twitter Bootstrap и JQuery.

JQuery модальные окна

1. Подключение стилей и клиентских скриптов необходимых для работы будет выглядеть вот так:

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="http://yandex.st/jquery/1.8.3/jquery.min.js">
</script>  
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-modal.js"></script>

Небольшое примечание. Если подключите ещё и файл «bootstrap.min.js» или «bootstrap.js», тогда окно при всплытии будет через доли секунды исчезать. Причину проявления такого «бага» я не выяснял.

(далее…)

Опубликовано 20-03-2013 в 16:44

Twitter Bootstrap: оповещения

Текущая заметка содержит несколько примеров разметки HTML, которая необходима для оформления оповещений (alerts) в CSS-фреймворке Twitter Bootstrap.

Оформление информационных уведомлений в Twitter Bootstrap

(далее…)

Опубликовано 20-03-2013 в 11:35

Подсветка кода в Bootstrap

Третья часть серии материалов блога, которые посвящены примерам использования стилей и скриптов, включенных в CSS-фреймворк известный, как Twitter Bootsrap.

Посветка кода в Twitter Bootstrap

Итак, для подсветки кода вместе с бутстрап лучше всего использовать JavaScript- библиотеку Google Code Prettify.

1. Подключаем скрипты и стили, запускаем гугловский скрипт:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/prettify.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/prettify.js"></script>
<script>
jQuery(document).ready(function($) {
  var $window = $(window)
  window.prettyPrint && prettyPrint() 
})
</script>
<!--[if lt IE 9]>
  <script src="js/html5.js"></script>
<![endif]-->

(далее…)

Опубликовано 18-03-2013 в 14:26

Bootstrap: подсказки на JQuery

Вторая заметка из серии, посвященной относительно детальному знакомству с CSS-фреймворком под названием Twitter Bootstrap. Сегодня я покажу вам о том, как подключать подсказки на JQuery.

Всплывающие подсказки на JQuery с Twitter Bootstrap

Итак, tooltips в бутстрапе могут быть четырех типов в зависимости от направления их появления — right, left, top и bottom. Задаются они атрибутом data-placement у гиперссылки. С помощью data-original-title можно задавать текст во всплывающей подсказке. Ну а data-toggle="tooltip" служит для указания скрипту, что здесь не просто линк, а tooltip, — задается свойством селектора в настройках.

К моему большому сожалению пример не работает в Internet Explorer 8, — выводится ошибка, связанная с JavaScript / JQuery. Разбираться с ней мне не захотелось. Тем более, что в официальной документации к фреймворку выводится тоже самое.

(далее…)

Опубликовано 18-03-2013 в 12:05

Twitter Bootstrap — вкладки

Первая заметка из серии, посвященной детальному знакомству с CSS-фреймворком под названием Twitter Bootstrap. Сегодня я покажу читателям, как можно создавать простые горизонтальные вкладки / табы.

Bootstrap JQuery табы
(далее…)

Опубликовано 18-03-2013 в 09:47













Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты