[0pium]

(по традиции)Доброго времени суток, уважаемые пользователь Rebill.me!

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

Итак, поехали:

1. Генераторы CSS кнопок

Существует масса сервисов по созданию кнопок и мгновенному конверту их в готовый CSS код.

1й такой сервис называется dabuttonfactory

1) Пишем нужный нам текст на кнопке, выбираем нужный нам шрифт (Жирный, Курсив), его размер, цвет, а также тень, если потребуется, ее размер и цвет.
2) Выбираем Изображение или CSS код, в зависимости от того, что нам требуется, а также формат изображения.
3) Выбираем градиент кнопки, а также ее эффекты (кнопка swap - инверсия градиента, bubble effect - блик, а также рамку и тень кнопки)
4) Выставляем размер кнопки (варьирующийся или фиксированный)
5) Наша кнопка, которая изменяется моментально в зависимости от введенных настроек, что очень удобно
6) Готовый CSS код нашей кнопки

2й сервис называется cssbuttongenerator

Тут все расписывать подробно не вижу смысла, т.к. процедура очень похожа, а тем более кнопка меняется моментально в зависимости от настроек.

1) Сама кнопка, под ней ее различные цветовые настройки
2) Настройки шрифтов и их размеров, а также размеров самой кнопки

3й сервис называется css-tricks

1) Сама кнопка, меняется автоматически в зависимости от настроек (кликаем на кнопку, получаем готовый CSS код)
2) Размеры кнопки, форма кнопки, размер шрифта
3) Всевозможные настройки цветов кнопки
4) Выбор шрифта

4й сервис по созданию CSS кнопок называется css3buttongenerator

1) Всевозможные настройки по разным вкладкам, открываются по клику. Разобраться с ними не сложно, т.к. кнопка изменяется в зависимости от каждой настройки
2) Непосредственно наша кнопка
3) Готовый CSS код нашей кнопки

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

2. Сервис по скруглению углов

Следующий сервис поможет нам скруглить углы так как нам нужно, и выдаст это все в виде CSS кода, а называется он border-radius

Принцип работы очень прост, выставляем нужные нам цифры скругления углов и качаем готовый CSS код.

3. CSS песочница

Очень полезный сервис для верстальщиков cssdesk

4. Все тэги в одном месте

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

5. Градиентмэйкер CSS

Следующий сервис создан для упрощения работы версталищика с градиентами в CSS стилях. Называется сервис css-gradient

1) Выбираем направление перетекания цвета
2) Цвет 1й стороны
3) Цвет 2й стороны
4) Пример градиента с нашими настройками

Ниже идут настройки совместимости с браузерами и т.д., а дальше нужный нам CSS код:

6. Заглушки для баннеров

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

1й называется bannerfans

Он позволяет нам создать собственную заглушку, да и любой простенький статический баннер по сути... масса настроек, всех просто не описать, но достаточно просто разобраться с ними всеми.

2й сервис называется placehold (название говорит само за себя)

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

7. Генератор HTML+CSS шаблонов

Очень полезный и простой сервис по созданию легких HTML+CSS шаблонов - csstemplater. Сервис русскоязычный, поэтому описывать процедуру со скринами не имеет смысла, помоему.

8. CSS патерны

Сервис готовых патернов в виде CSS кода, называется - css3patterns. Достаточно зайти в интересующий вас патерн и скачать его код.

9. CSS работа со шрифтами

Сервис по работе со шрифтами в CSS - csstypeset

1) Вводим интересующий нас текст
2) Вводим интересующие нас настройки
3) Получаем готовый CSS код

10. Подбор шрифтов

Данный сервис будет полезен как верстальщикам, так и дизайнерам, это сервис по подбору сочетания шрифтов - font-combinator

1) Пишем интересующий нас текст в заголовках H1, H2 и body (переключаемся между ними курсором)
2) Вводим настройки каждому тексту в зависимости от того, какой из них выбран и смотрим сочетаемость

Буду дополнять эту тему, по мере нахождения новых полезных сервисов... кто что знает, не стесняемся, выкладываем!

Спасибо всем за терпение и внимание!

[Dr.Bot]

Оставлю тут:

http://sass-lang.com/
http://haml.info/

http://www.google.com/webfonts
http://www.fontsquirrel.com/

http://www.kraken.io/

http://twitter.github.com/bootstrap/
http://html5boilerplate.com/
http://960.gs/
http://foundation.zurb.com/

http://www.cssreset.com/

[0pium]

Dr.Bot гуд, спасибо... было бы неплохо хотя бы кратенькое описание написать, ну да ладно, разберемся...

[0pium]

Нашел еще 1 полезный сервис, который позволяет выбрать нужный нам цвет и сразу же получить его html-код - mainspy

[0pium]

Нашел сервис по созданию выпадающих менюшек - purecssmenu. Видео инструкция по пользованию прилагается: