Редактор CSS Shapes для Chrome



    Спецификации CSS Shapes позволяют красиво оформить обтекание текстом на веб-странице. Средствами CSS можно создать произвольную форму, но это обычно весьма трудоёмкая задача. Новое расширение CSS Shapes Editor для Chrome кардинально облегчает процесс. Это интерактивный редактор CSS Shapes, где контуры указываются простым перетягиванием точек с помощью мыши.

    Редактор сам определяет, какие значения следует установить для circle(), inset(), ellipse() и polygon().

    После установки расширения появляется новая вкладка в панели Elements.

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



    Итоговая форма двигается, вращается и масштабируется, по желанию (окружности и эллипсы не вращаются).



    Если при нажатии на курсор удерживать Shift, то пикселы в свойствах элемента меняются на другие единицы измерения. Иногда это позволяет чуть подкорректировать CSS-контур в нужную сторону.



    Кстати, редактор работает и для CSS-масок (свойство clip-path в CSS Masking), пишет автор расширения.
    Support the author
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 17

      +13
      Это просто праздник какой то.
        +8
        Пока эта штука (shape-outside) поддеживатеся только Хромом, то толку от неё, к сожалению, мало. Хотя редактор классный. Даёшь поддержку CSS shapes в массы!
          0
          А чего гражданина минусуете? Вроде как действительно поддерживается только Chrome и Safari.
          • UFO just landed and posted this here
          +5
          Это божественно! Хочу такое для лисицы.
          • UFO just landed and posted this here
              +1
              Вы таки не поверите, но я уже голосовал.

              ^_^
              • UFO just landed and posted this here
            +1
            И буфер глубины для 3d-трансформаций, пожалуйста!
              0
              Как будто лет на 10 назад вернулся. Сразу вспомнил InDesign и как я учился делать обтекание… Только вот кнопочки AUTO нету, жаль :D
                0
                Ну вместо AUTO можно вполне использовать слой с маской — текст будет обтекать ее.
                0
                круто. напоминает расширение для бракетс -http://blogs.adobe.com/webplatform/2014/04/17/css-shapes-editor-in-brackets/
                  0
                  <оффтоп>Извините за вопрос не в тему: каким образом делаются анимированные гифки с экрана, наподобие тех, что в этом посте? Встречаю не первый раз на хабре.</оффтоп>
                  0
                  Надеюсь так никто делать не будет, читать же текст невозможно.
                    0
                    На самом деле, ущерб для восприятия от «дыр» в тексте может оказаться куда серьезнее, чем от вот таких текстовых «перешейков». И то и другое — применительно к конкретной ситуации, конечно — не абсолютная истина.

                  Only users with full accounts can post comments. Log in, please.