Приветствую пользователей блога gtalk.kz. Открываю новую серию статей-шпаргалок для эффективной верстки сайтов. Данные статьи можно смело добавлять в закладки, т. к. полезной информации будет оочень много (по крайней мере я надеюсь ). А также не забывайте поделиться с друзьями.
Сегодня я расскажу об 11 полезных сервисах, цель которых облегчить жизнь верстальщика. Думаю, Вам они понравятся, а в конце поста найдете ссылку на 38 (!) способов, как сделать закругление углов и еще пару ссылок на интересные статьи по теме.
Как всегда, сразу возьмем быка за рога и начнем
- Csstemplater.com – сервис «Генератор html + css шаблонов» от Dimox’a и molodoy по праву должен быть упомянут первым в списке, так как полезность его огромна. Данный ресурс позволяет сделать заготовку будущего шаблона, выбрав определенные опции — вуаля html + css готово и при чем в дивах. Внимание! Особо полезен ленивым Не советую пользоваться часто новичкам, привыкнуть очень легко. Настроек немного (doctype, сайдбары, высота header’a и footer’a, resert на выбор и т. д.), но их вполне хватает на заготовку шаблона/каркаса.
- Cssdesk.com – песочница для html + css. Пишите html разметку и css и смотрите как это будет выглядеть. Очень удобно, можно потренироваться с написанием кода для начинающих.
- Генератор кросс-браузерных правил/стилей CSS 3 — используйте новые возможности Css 3, а данный ресурс Вам в этом поможет.
Прокрутите вниз до класса matrix и можете настроить повороты под себя.
- Еще один генератор кросс-браузерных стилей Css 3, просто выбирайте необходимые настройки и смотрите пример. Можно делать в стиле 3D.
- Ну, чтоб уже окончательно было понятно со стиля css 3 попробуйте поюзать сайт css3generator.com. Выберите стиль из выпадающего списка и пропишите параметры, скопируйте получившийся css код и радуйтесь
- Ищете красивые кнопки для сайта? Зачем? Для этого существуют много сервисов. Например, cssbuttongenerator.com – самоназвание говорит за себя — Генератор css кнопок. Выбирайте настройки кнопки, ее будущий внешний вид и скачайте весь необходимый стиль.
- А Вы знаете, как посчитать, сколько пикселей в em? А в пунктах? Не знаете?)) А верстальщику надо бы знать. Спасибо, pxtoem.gamecoll.com, который с легкостью посчитает, сколько пикселей в Ems, пунктах и т. д. Хороший конвертор.
- Градиент, до эпохи ccs 3 верстальщикам снилось их простое использование :). Теперь это в прошлом, ведь благодаря такому ресурсу как www.colorzilla.com/gradient-editor можно с помощью css залить градиентом определенную область, а с хорошим знанием css можно и кнопку красивую написать ;). Интересно, что генерируется код не только в формате css, но и в SCSS.
- Валидность сайта важная составляющая верстки. В курсе блочная верстка с нуля, я упоминал о важности соответствия стандартам кода. Поэтому сейчас просто даю ссылки на проверку html разметки validator.w3.org/ и проверка валидности css jigsaw.w3.org/css-validator
- http://ft.vremenno.net/ – шрифтотренажер. Смотрим, как будет выглядеть тот или иной шрифт на вашем сайте, подбирайте шрифт удобный для глаз. Используются стандартные шрифты.
- Мнемоника в html — также необходима при блочной верстки сайта, например, использование знака охраны авторского права и т. д. Подробнее можно почитать и взглянуть на википедии.
Не буду Вас томить по одному сервису. Если Вам интересно, Вы можете прочитать еще о дополнительных ресурсах (полезных не только для верстки) на хабрхабр
Корректное отображение стилей css 3 для IE – css3pie.com
Бонус: А также обещанный бонус 38 способов закругления углов, очень неплохая подборка. Не изобретайте велосипед, учитесь виртуозно кататься на нем
с/у УтБ