Type Folly — изумительно простой онлайн редактор CSS3 / Каскадные Таблицы Стилей / Хабрахабр

Type Folly — изумительно простой онлайн редактор CSS3

По собственной инициативе выкладываю на суд сообщества проект моего друга, со сложно выговариваемым именем Mircea Piturca.

Встречайте: Type Folly — очень простой и удобный онлайн редактор CSS. Для новичков самое оно.

UPD: Автор внес изменения и поправил баги. Спасибо Хабрасообщству.

Не зря делаю упор на простоту. Я очень плохо разбираюсь в webdev, но все поняла слету.

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

За простотой скрывается недюжий функционал:

сайт сделан на Wordpress (!);
бесплатно;
учетная запись — храните Ваши проекты;
фотошоп панели работают (перемещаются в пространстве) также как и в оригинале™ благодаря Javascript;
слои, размеры, контейнеры и т.д. и т.п. и проч.;
эффекты шрифтов (тени, размытие и т.п.);
Шрифты. Любые (при желании). Благодаря Tipekit.

Сам процесс очень напоминает работу в Adobe Illustrator. Поигравшись (по другому сказать язык не поворачивается) автоматом-пулеметом получаем серьёзный результат — готовый CSS3 + HTML.

Экспериментируйте на здоровье.

Простите за много просто.

P.S. Выложила вечерком, чтобы не лег под Хабраэффектом. Хоть и (mt), но ведь WP.
P.P.S. Не уверена, чего здесь больше — CSS или типографики. Куда разместить?

UPD: Автор благодарит всех за багрепорты и передает привет Хабрасообществу.
UPD2: Постарается исправить сегодня все, кроме проблем с Оперой.
UPD3: Спасибо всем за багрепорты, уже исправлено (цитата автора):

Right now the following should be fixed:

Rotate function Works in Opera
#gridpannel have a background and rounded corners in Opera
Panels do not jump
The Grid and Container should be in place in Ubuntu (could not checked
because I do not have it installed in here)

I'll do more works and add more features later on today (in about 5
hours). I will also look for some webfonts that supports Russian
characters and add them to the library.
Ok, I've done some changes.

Right now the following should be fixed:

Rotate function Works in Opera
#gridpannel have a background and rounded corners in Opera
Panels do not jump
The Grid and Container should be in place in Ubuntu (could not checked
because I do not have it installed in here)

I'll do more works and add more features later on today (in about 5
hours). I will also look for some webfonts that supports Russian
characters and add them to the library.

+87

21 июля 2010, 22:25

196

zaka

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

комментарии (40)

square 21 июля 2010, 23:40 #

отличная штука

zaka 21 июля 2010, 23:57 # ↑

Он еще и красавчик.

–1

Kakysha 22 июля 2010, 00:42 # ↑

в ущерб юзабельности.

rewiaca 22 июля 2010, 10:22 # ↑

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

Nesp 22 июля 2010, 10:33 # ↑

Да, интерфейс Фотошопа ему очень идет.

–2

Zitrix 22 июля 2010, 00:06 #

rotate в опере не работает, letter-spacing дробный нельзя указывать (да и текстовые контролы ведут себя очень странно)… а какое-нибудь (реальное) применение для этой штуки придумать можно?

zaka 22 июля 2010, 00:15 # ↑

rotate в опере не работает, letter-spacing дробный нельзя указывать (да и текстовые контролы ведут себя очень странно)

Передам. Спасибо.

а какое-нибудь (реальное) применение для этой штуки придумать можно?

Для новичков самое оно.

cyberjunk 22 июля 2010, 09:56 # ↑

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

arkady 22 июля 2010, 13:33 # ↑

Не согласен. На примерах учиться — очень эффективно. Я вот html изучал занимаясь чисткой кода FrontPage. И изучение VBA, уверен, начинается с кнопки «запись макроса»

olexandr17 22 июля 2010, 01:14 #

«со сложно выговариваемым именем Mircea Piturca»
румын Мирча Пицуркэ? )) Просто слышал уже и имена такие и фамилии…

Innuendo108 22 июля 2010, 04:21 # ↑

Хе, да, кстати, интересно. Имя Мирча — точно молдавское/румынское. И фамилия очень похоже на молдавскую/румынскую.

zaka 22 июля 2010, 07:16 # ↑

Румын.

–3

aL13n 22 июля 2010, 01:21 #

Зачем?

НЛО прилетело и опубликовало эту надпись здесь

Volshebnyi 22 июля 2010, 01:37 #

>> Открывая главную страницу, создается впечатление, что это изображение.
Подъезжая к станции, не с вас шляпа слетела?

stogerc 22 июля 2010, 02:19 # ↑

zanuda on
Прочитав этот комментарий, не всем будет ясен его смысл. Поэтому поясню: в предложении автора, в предложении Чехова, которое вспомнил Volshebnyi, и в первом предложении моего комментария допущена ошибка в употреблении деепричастного оборота, то есть оборот относится не к тому слову, которое на деле выполняет действие.
zanuda off

Veterinar 22 июля 2010, 02:50 # ↑

Вы всегда смысл анекдота рассказываете тем, кто не хихикнул? :)

Sabiko 10 августа 2010, 11:19 # ↑

Первое предложение вашего объяснения — это такая остроумная шутка? :)
А то не совсем очевидно, и если нет, то это уже совсем смешно.

zaka 22 июля 2010, 07:41 # ↑

Ой, спасибо.

eatart 22 июля 2010, 05:26 #

а я только блокноту доверяю, такие редакторы — не для меня

Goodkat 22 июля 2010, 12:31 # ↑

Правильно!
Код нужно писать в блокноте, набивая каждую букву, а картинки рисовать в пэйнте, попиксельно!
Видео склеивать из попиксельно нарисованных в пэйнте картинок, а звуковую дорожку к нему делать указывая частоту и амплитуду для каждого такта!

eatart 22 июля 2010, 12:51 # ↑

не, каждый такт — маловато, не качественно будет. частота сэмплирования нормальная ведь 44К Гц (:

Goodkat 22 июля 2010, 13:04 # ↑

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

eatart 22 июля 2010, 13:17 # ↑

ну, один фиг шутка удалась.

хотя шутки шутками, а у меня один знакомый нарисовал пару мультиков в пейнте и свел в муви мейкере (:

Goodkat 22 июля 2010, 13:21 # ↑

Мой одноклассник рисовал в пэйнте портреты, ещё в Windows 3.x.

fatal 22 июля 2010, 05:31 #

Я мечтал о чём-то таком уже давно. Идея была даже сделать самому, да силёнок и времени маловато оказалось.
Всё что нужно теперь — развивать. Очень хочется добавить все элементы форм.

Если проект разовьётся — будет отличный инструмент для создания набросков веб-интерфейсов.

stamir 22 июля 2010, 08:40 #

Первое, что попробовал сделать, это задать размер контейнера не в абсолютных единицах, а в процентах. Редактор позволил ввести проценты, только 100% оказались равны 100 пикселям…

Zevaka 22 июля 2010, 09:13 #

Hella Habr?! :)

zaka 22 июля 2010, 09:20 # ↑

Hello — шрифтЪ таакойс.

ZogG 22 июля 2010, 11:19 # ↑

ты сравно это о с а в слове habr

Zevaka 22 июля 2010, 11:21 # ↑

Вы еще не проснулись? Умойтесь холодной водой, выпейте крепкого чая, да улыбнитесь.

–5

acy 22 июля 2010, 09:22 #

Просто — это жопа.

puzoid 22 июля 2010, 10:54 #

Преоект найдет своего пользователя =) Удачи!

filippoff 22 июля 2010, 10:55 #

в FF3 под убунтой не оч удобно

Shokoladnizza 22 июля 2010, 11:48 #

Автору за использование движка Wordpress плюсик!

mdss 22 июля 2010, 13:04 #

почините у сбебя верстку (убунта, фф 3.6.6)
[URL=http://habreffect.ru/24f/37dc69160/Type_Follyweb_typography_tool_1279789551135.png][IMG]http://habreffect.ru/files/24f/37dc69160/Type_Follyweb_typography_tool_1279789551135.png[/IMG][/URL]

ProstoDesign 22 июля 2010, 13:15 #

Волшебно! Автору низкий поклон.

pepelsbey 22 июля 2010, 14:52 #

Расскажите вашему другу, что свойство border-radius для конкретных углов пишется без префикса так, так написано у webkit'а, а не как у moz'а.

Неправильно:

#gridpannel {
    border-radius-topleft:4px;
    border-radius-topright:4px;
    -moz-border-radius-topleft:4px;
    -moz-border-radius-topright:4px;
    -webkit-border-top-left-radius:4px;
    -webkit-border-top-right-radius:4px
    }

Правильно:

border-top-left-radius:4px;
border-top-right-radius:4px

pepelsbey 22 июля 2010, 15:02 # ↑

Ну и делать обратную совместимость для -webkit и -moz-градиентов — это, как минимум, вежливо:

.minimize {
    background-image: -moz-linear-gradient(top, #3e3e3e, #4d4d4d, #5c5c5c);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#3e3e3e), to(#4d4d4d), to(#5c5c5c));  
    }

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

zaka 22 июля 2010, 15:35 # ↑

Спасибо передам.

Каскадные Таблицы Стилей