4 заметки с тегом

web

Сайты для поиска идей и вдохновления

Предлагаю вам познакомиться с тремя сайтами для поиска решений:

  1. Collectui.com — архив скриншотов, осень полезно для анализа.
  2. Awwwards.com — собрание сайтов получивших награду в web дизайне.
  3. Pinterest.com — пожалуй самая большая копилка решений на разные темы от садовых шлангов до планов баллистических ракет :-).
13 апреля   2017   web   ссылки
2017   web   анимация   софт

Как сделать текст по кругу в SVG

Бывают задачи, когда нужно сделать редактируемый текст по кругу.
Можно использовать средства CSS и HTML, но такие методы слишком ресурсоемкие.
Для решения предлагаю использовать SVG-технологию:

Скопируйте код и вставьте в блокнот:

<svg xmlns="http://www.w3.org/2000/svg” xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
   <defs>
      <path d="M243.2, 382.4c-74.8, 0-135.5-60.7-135.5-135.5s60.7-135.5,135.5-135.5s135.5, 60.7, 135.5, 135.5 S318, 382.4, 243.2, 382.4z" id="textcircle" />
<style>text {font-size: 20px; font-family: Arial; font-weight: 900; letter-spacing: 15px;}</style>
   </defs>
      <text dy="70" textLength="1200"><textPath xlink:href="#textcircle">Gismeteo.ru</textPath></text>
</svg>

Обратиться к элементу в коде можно через JavaScript.

2017   2016   svg   typography   web

Интересные ссылки — разработка

Опа!

  1. Компрессор для JS.
  2. Фреймворк для анимации контента.
  3. Cкрипт для проверка соединения с интернетом.
  4. URL-encoder для SVG.
  5. Статья о работе с FlexBox.
  6. Документация по Stylus.
  7. Учебник по JS.
  8. Цветовая палитра в онлайне.
  9. Сервис для проверки HTML и CSS свойств на актуальность.
  10. Символы кодом.
  11. The Elements of Typographic Style Applied to the Web.
  12. Ужиматель картинок.
  13. Заглушки для блоков на сайте.
  14. Интерактивный тур по системе контроля версий — Git
2015   2015   interface   web   интернет   ссылки