alt

Сегодня хотелось представить вашему вниманию сервис - генератор CSS3. Сервис очень прост в использовании, и будет понятен человеку который не знает, ни что такое HTML, ни CSS. Найти сервис можно по этому адресу - css3.pascal-seven.de. Обычно, я не делаю обзоры на сервисы, исключение когда надо решить проблему, а сервис как раз кстати, как к примеру тут - подборка сервисов для создания кнопки без знаний фотошопa. Итак приступим непосредственно к рассмотрению функционалу сервиса.

Функционал генератора CSS3

Интерфейс довольно приятный, и включает хорошее и удобное юзабилити. Хорошим свойством является наличие настроек свойств CSS3 в сайдбаре слева. Было бы подло не показать вам саму страницу сервиса Улыбаюсь:

alt

А пока вы смотрели на интерфейс сервиса, я написал объяснения к настройкам каждого свойства (особо нужно для тех кто плох в CSS3):

  • Width / Height - Ширина / Высота (изначально он белый, на скрине сверху это ясно видно) в пикселях
  • Background-Color - в этом свойстве есть две опции:
    Заливка - заливка фона страницы с помощью функционала системы, выбираем нужный цвет в палитре (либо вписываем свой в таком виде #FFFFFF)
    Вставка URL изображения - это если вы хотите вставить собственный фон. Указываем URL на ваш паттерн и наслаждаемся увиденным.
  • Border - край элемента (бордюр), возможность выбрать ширину в пикселях, и цвет.
  • Border-Radius - округление элемента, параметры обозначаются на каждый угол, при указании единого свойства в пикселях все углы будут округлены одинаково.
  • Gradient - градиент вашего элемента, можно очень гибко настраивать, если буду описывать, то бумага не стерпит и вы не поймёте, лучше уж самим поюзать
  • Box-Shadow - тень вашего элемента. Настраивается отклонение тени вниз, вверх, вправо, влево и переключение во внутренню тень, а также размер тени
  • Transform - трансформирование вашего элемента
  • Opacity - прозрачность элемента, полезное свойство, но не везде корректно отображается
  • Font - Color / Size - размер и цвет текста в элементе
  • Text-Shadow - тень текста, можно настроить в пикселях размер отклонения, цвет, размытие.

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

Навигация генератора CSS3

Возле каждого вышеописанного свойства есть 2 кнопки, синяя и зелёная. При нажатии на зелёную разворачивается аккордеон с дополнительными настройками свойства:

alt

И синяя которая показывает отображение в браузерах - где отображается во всех браузерах, а где только от определённой версии и выше:

alt

По окончанию настройки объекта осталось только взять наш код, который можно получить при нажатии на клавишу - Get The Code в правом верхнем углу:

alt