Карусель закладок блоггера #2 — CSS он-лайн

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

[snap url=http://www.colorzilla.com/gradient-editor/ alt=»css генератор»]Итак, первое, что мы рассмотрим — CSS генераторы градиентов. Как вы наверняка знаете, для использования градиента (то есть плавного перетекания одного цвета в другой) не обязательно использовать изображение, можно обойтись и средствами CSS — технология CSS3, поддерживаемая большинством современных браузеров, это позволяет. И этом нам поможет сервис www.colorzilla.com/gradient-editor. Настройки примерно как в фотошопе, можно выбрать любой оттенок и густоту градиента, скопировать автоматически создающиеся стили и использовать их в файле стилей style.css

[snap url=http://dobrovoi.ru/files/buttonmaker/index.html alt=»css генератор кнопок»]Следующий полезный сервис — css генератор кнопок dobrovoi.ru/files/buttonmaker/index.html. Тут можно полностью настроить стиль отображения кнопки при наведении и нажатии — шрифты, бордюр, градиент фона и т.д. Сразу же можно видеть результат проделанной работы, а код стиля получить при нажатии на сгенерированную кнопку в предпросмотре. Если этот сайт не нравится, есть еще один похожий — www.cssbuttongenerator.com, который также поможет детально настроить ваши кнопочки.

[snap url=http://www.css3.me alt=»css генератор блоков»] Следующие два сервиса помогут сделать привлекательные блоки — с полупрозрачными тенями, разнообразными бордерами и закругленными углами. Первый из них www.css3.me — интерфейс в комментариях не нуждается, все просто и понятно. Чтобы сгенерировать css код надо нажать на кнопку «Get the Code». И другой — немного посложнее www.css3maker.com — тут уже можно задать отдельно тени для текста, шрифт, наклона блока и текста и несколько других дополнительных параметров — попробуйте, Вам понравится.

[snap url=http://www.spritecow.com/ alt=»css генератор спрайтов»] Еще один полезный инструмент — автоматическое формирование так называемых спрайтов — это когда одна большая картинка содержит в себе несколько графических элементов для сайта, например разные кнопки, и загрузившись один раз в разных местах страницы выводятся разные ее части, грубо говоря, в качестве какой-нибудь стандартной кнопки — правый нижний угол картинки, а для кнопки при наведении мышки — левый верхний (например, может пригодиться при создании кнопки наверх для сайта). Для этого необходимо в качестве фона для кнопки указывать в стилях различные координаты этого изображения, и чтобы не делать это вручную, мы будем использовать сервис www.spritecow.com. Работает он очень просто — загружается большая спрайт-картинка, на ней выделяется та часть, которую вы хотите использовать в качестве кнопки и скрипт автоматически генерирует координаты этой выделенной области. Также похожий сервис вы найдете здесь — csssprites.com, хотя первый мне нравится больше.





[snap url=http://www.cssmenumaker.com alt=»css генератор меню»] И, наконец, последнее, о чем хотел рассказать в этой заметке, это CSS генератор меню. Сервис находится по адресу www.cssmenumaker.com и позволяет из нескольких предложенных вариантов сделать свое меню.

Вот такой список сервисов типа «генератор CSS» кодов, которые не требуют установки дополнительных программ на комп и пригодятся при оформлении своего блога. Но, как вы понимаете, никакой онлайн сервис не заменит ручной работы. разумеется, если вы владеете версткой самостоятельно, то у вас гораздо больше возможностей по оформлению своего сайта. Поэтому скрипты и css генераторы это хорошо, но я советую все-таки заняться самосовершенствованием и изучать CSS на практике. В качестве помощника для этого процесса я рекомендую видеокурс Е. Попова CSS практика, который значительно сократит время освоения этого языка, направив ваши усилия в правильное русло.

CSS практика

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

Комментариев: 4

  • спасибо! полезная для меня инфа) как раз искал возможность перенести все картинки темы в спрайты но не знал как =)

    • или


      Классы в файле стилей обозначаются как «.название_класса», id — «#название_идентификатора»

Добавить комментарий