Типовые модули верстки

Часто хочется в дизайне фронтэнда какого-нить скрипта применить что-то красивое, согласитесь. Поэтому я как-то озаботился поиском интересных html/css элементов, которые можно таскать за собой и применять в разных случаях.

Вот что у меня пока получилось собрать.

1. Блоки с закругленными краями.

Однотонный блок с закругленными краями с возможностью задать цвет фона.

CSS:

.box { margin-bottom: 20px; padding: 6px; background-color: #F0F0F0;}
.corners { position: relative; overflow: hidden; }
.corners em.tl, .corners em.tr, .corners em.bl, .corners em.br { position: absolute; font-size: 1px; }
.corners-2 em.tl, .corners-2 em.tr, .corners-2 em.bl, .corners-2 em.br { width: 4px; height: 4px; background-image: url(corners/corners-2.png); }
.corners-2 em.tl { left: -2px; top: -2px; } .corners-2 em.tr { right: -2px; top: -2px; } .corners-2 em.bl { left: -2px; bottom: -2px; } .corners-2 em.br { right: -2px; bottom: -2px; }
.corners-3 em.tl, .corners-3 em.tr, .corners-3 em.bl, .corners-3 em.br { width: 6px; height: 6px; background: url(corners/corners-3.png); }
.corners-3 em.tl { left: -3px; top: -3px; } .corners-3 em.tr { right: -3px; top: -3px; } .corners-3 em.bl { left: -3px; bottom: -3px; } .corners-3 em.br { right: -3px; bottom: -3px; }
.corners-4 em.tl, .corners-4 em.tr, .corners-4 em.bl, .corners-4 em.br { width: 8px; height: 8px; background: url(corners/corners-4.png); }
.corners-4 em.tl { left: -4px; top: -4px; } .corners-4 em.tr { right: -4px; top: -4px; } .corners-4 em.bl { left: -4px; bottom: -4px; } .corners-4 em.br { right: -4px; bottom: -4px; }
.corners-5 em.tl, .corners-5 em.tr, .corners-5 em.bl, .corners-5 em.br { width: 10px; height: 10px; background: url(corners/corners-5.png); }
.corners-5 em.tl { left: -5px; top: -5px; } .corners-5 em.tr { right: -5px; top: -5px; } .corners-5 em.bl { left: -5px; bottom: -5px; } .corners-5 em.br { right: -5px; bottom: -5px; }
.corners-6 em.tl, .corners-6 em.tr, .corners-6 em.bl, .corners-6 em.br { width: 12px; height: 12px; background: url(corners/corners-6.png); }
.corners-6 em.tl { left: -6px; top: -6px; } .corners-6 em.tr { right: -6px; top: -6px; } .corners-6 em.bl { left: -6px; bottom: -6px; } .corners-6 em.br { right: -6px; bottom: -6px; }
.corners-7 em.tl, .corners-7 em.tr, .corners-7 em.bl, .corners-7 em.br { width: 14px; height: 14px; background: url(corners/corners-7.png); }
.corners-7 em.tl { left: -7px; top: -7px; } .corners-7 em.tr { right: -7px; top: -7px; } .corners-7 em.bl { left: -7px; bottom: -7px; } .corners-7 em.br { right: -7px; bottom: -7px; }
.corners-8 em.tl, .corners-8 em.tr, .corners-8 em.bl, .corners-8 em.br { width: 16px; height: 16px; background: url(corners/corners-8.png); }
.corners-8 em.tl { left: -8px; top: -8px; } .corners-8 em.tr { right: -8px; top: -8px; } .corners-8 em.bl { left: -8px; bottom: -8px; } .corners-8 em.br { right: -8px; bottom: -8px; }
.corners-9 em.tl, .corners-9 em.tr, .corners-9 em.bl, .corners-9 em.br { width: 18px; height: 18px; background: url(corners/corners-9.png); }
.corners-9 em.tl { left: -9px; top: -9px; } .corners-9 em.tr { right: -9px; top: -9px; } .corners-9 em.bl { left: -9px; bottom: -9px; } .corners-9 em.br { right: -9px; bottom: -9px; }
.corners-10 em.tl, .corners-10 em.tr, .corners-10 em.bl, .corners-10 em.br { width: 20px; height: 20px; background: url(corners/corners-10.png); }
.corners-10 em.tl { left: -10px; top: -10px; } .corners-10 em.tr { right: -10px; top: -10px; } .corners-10 em.bl { left: -10px; bottom: -10px; } .corners-10 em.br { right: -10px; bottom: -10px; }

Картинки:
скачать
Папку corners положить в ту же папку, где лежит css.

Использование:

Это блок с закругленными краями радиуса 10 пикселей

Цвет блока задается параметром background-color элемента .box

Пример:

Это блок с закругленными краями радиуса 10 пикселей

Плюс этого метозда в том, что радиус закругленных уголков можно менять, просто меняя класс дива. Диапазон – от corners-2 до corners-10.

2. Закругленные кнопки (типа-макос-стайл)

Кнопки, сделанные по такой технологии можно видеть, например, в админке вордпресса.

CSS:

button{
-moz-border-radius-bottomleft:11px;
-moz-border-radius-bottomright:11px;
-moz-border-radius-topleft:11px;
-moz-border-radius-topright:11px;
-moz-box-sizing:content-box;
border-style:solid;
border-width:1px;
cursor:pointer;
font-family:"Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif; 
font-size:11px !important;
line-height:16px;
padding:2px 8px;
text-decoration:none;
background: #f2f2f2 url(button/button-white-grad.png) repeat-x scroll left top;
height: 18px;
}
button:hover { border-color:#666666; color:#000000; }
button:focus { outline-style: none; }

Картинки: скачать
Папку положить туда же где лежит css.
В принципе, можно и без них, но с градиентом кнопка смотрится получше.

Использование:


Можно button в css поменять на input[type=submit] и так же будут выглядеть все кнопки сабмита форм.

Пример:

3. Эффект вдавленного текста

Можно видеть в той же админке wp – в заголовках блоков. Работает только в современных браузерах (Chrome 2, Firefox 3.1+, Safari 4).
Рисуется белая тень в один пиксель, что вкупе с ожиданием мозга, что свет всегда светит сверху рождает иллюзию бликующей кромки вдавленных в фон букв.

CSS:

.white_shadow { text-shadow:0 1px 0 #FFFFFF; }

Если сменить белый цвет (#FFFFFF) на черный (#000000), то будет противоположный эффект – выпирающих букв.

Пример:

Mac OS properties

Firebug для IE

Оказывается, упорные пользователи IE (если такие еще остались) могут тоже приобщиться к радости веб-дизайна, поставив себе DebugBar, который обладает функционалом, схожим с FireBug-овским.

Правда, ни его, ни IE-бар от SeoQuake мне не удалось завести под Maxthon-ом..

10 лучших генераторов шаблонов

На mashable выкатили очередной обзор – 10 лучших генераторов шаблонов для сайтов. В принципе, почти ничего нового, но есть и интересный сервис – dotemplate.com .

Дизайн своими руками

Решил опубликовать подборку материалов по верстке для таких же чокнутых DIY-щиков как и я, предпочитающих все делать своими руками, а не отдавать на аутсорс. Понимаю, что это очень непродуктивно, сам уже задолбался так работать, но ничего поделать со своей натурой не могу.

Итак.

1. Статья “Современные тенденции в веб-дизайне”. Базовая инфа для новичков, в общем-то.

2. Статья “70 идей экспертов для улучшения CSS кода”. Лучше один раз потратить время и научиться работать правильно, чем придумывать велосипед для каждого сайта.

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

4. На Digg недавно выложили, а чувак с diggreader.ru перевел – 40 сайтов, напичканных вдохновением. В основном это каталоги красивых дизайнов типа cssremix.com или csselite.com . Отличные места для того, чтобы брать идеи и мелкие детали интерфейсов :)

5. Эксеншны для firefox, необходимые дизайнеру. Конечно, в первую очередь это невероятный Firebug, также могут пригодиться MeasureIt (линейка, которой можно мерять расстояния на странице), ColorZilla (стандартная пипетка – показывает цвет заданного пикселя) и ScrapBook (сохраняет страницу для последующего просмотра в офлайне).

Как делать шаблоны для blogspot.com

Роман Пушкин проводит небольшой мастеркласс тут.

gotAPI – отличный онлайновый хелп для интернет-программера

Позволю себе процитировать :

Хочу поделиться ссылкой на очень полезный и крайне удобный справочный сервис, который я использую по тысячу раз на день.

Встречайте, gotAPI.com!

Что же такое gotAPI?

gotAPI.com – quick developer reference for CSS, HTML, JavaScript, PHP, AJAX, SQL and more

Чем является gotAPI лично для меня:
1. Быстрый и очень удобный поиск нужной функции или метода для JavaScript или Python.
2. Мгновенное получение необходимой информации о свойстве CSS или о SQL-команде для PostgreSQL.
3. gotAPI позволяет мне вспоминать названия функций, медотов, свойств, команд и т.д., которые я вдруг забыл.
4. Удобный интерфейс с добавлением/удалением закладок.
5. gotAPI подсказывает ключевые слова поиска пока я набираю то, что мне нужно.

В чем идея gotAPI?
gotAPI знает много онлайновых мануалов и осуществляет быстрый поиск по ним. Это, как бы, отправная точка для поиска нужной документации. gotAPI избавляет программиста от хождения по различным докам, которые находятся на разных ресурсах.

Что “знает” gotAPI?
HTML, CSS, CSS2, JavaScript/DOM, Google GWT, Prototype.js, jQuery 1.0.3, Yahoo! UI, XML, XSL, XPath, C, C++, PHP, Ruby, RoR, Python, Perl, ActionScript, Drupal CMS, Flickr API, Prolog, MySQL, PostgreSQL, Oracle, Java, J2SE, J2EE, Struts, Hibernate, Spring, JUnit, J2ME, Apache Ant… и многое другое.

Лично я храню gotAPI на панели закладок своего браузера, чего и вам советую :-)

Как сделать шаблон для фида или дора за 10 минут

Как известно, в наш постмодернистский век “все уже придумано за нас”, поэтому вместо рождения каменного цветка посредством выдавливания из себя художника, просто займемся заимствованием и цитированием. :)

Все очень просто.

1. Устанавливаем для Firefox расширение Scrapbook (https://addons.mozilla.org/ru/firefox/addon/427) для сохранения веб-страниц.

2. Заходим в его панель (Alt-K), кнопка Инструменты -> Импорт-экспорт веб-альбомов, и настраиваем папку, куда будем сохранять страницы.

3. Заходим на сайт с понравившимся дизайном и жмем Ctrl-Shift-L , сохраняя страницу в scrapbook.

4. Снова заходим в панель (Alt-K), правая клавиша на сграбленном сайте – Инструменты – Экспортировать.

В итоге в папке экспорта мы получаем:
- html-файл страницы с относительными ссылками на изображения,
- актуальный css-файл страницы (собранный, если надо, из нескольких) и
- все изображения, которые фигурируют на странице.
То есть всё, что нужно для корректного отображения этой страницы на другом хостинге.

5. Теперь надо открыть любимый html-редактор, вырезать ненужные вещи, заменить ссылки на свои или пустые (самая продолжительная часть работы) и вставить в нужные места код фида или макросы вашего любимого дорогенератора.

Собственно, всё.