Система проектирования для создания точных воссозданий старых UI

   Дополнительные примечания
   </p> <p>    </p> <details> <summary> Показать код </summary> <pre> <code> <span class="hljs-tag"> <<span class="hljs-name"> div </span> <span class="hljs-attr"> class </span> = <span class="hljs-string"> = «сложены по полю» </span> <span class="hljs-attr"> style </span> = <span class="hljs-string"> "ширина: 200 пикселей" </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> label </span> <span class="hljs-attr"> для </span> = <span class="hljs-string"> "text20" </span>> </span> Дополнительные примечания <span class="hljs-tag"> </ <span class="hljs-name"> label </span>> </span>>   <span class="hljs-tag"> <<span class="hljs-name"> textarea </span> <span class="hljs-attr"> id </span> = <span class="hljs-string"> "text20" </span> <span class="hljs-attr"> строк </span> = <span class="hljs-string"> "8" </span>> </span> </span> <span class="hljs-tag"> </ <span class="hljs-name"> текстовое поле </span>> </span> <span class="hljs-tag"> </ <span class="hljs-name"> DIV </span>> </span> </code> </pre> <p>    </details> </p></div> <p>      </p></div> <p>    </section> <section class="component"> <h3 id="dropdown"><span id="Vypadayushchee"> Выпадающее </span></h3> <p>      </p> <div>         </p> <blockquote><p>           Раскрывающийся список <em> </em> позволяет выбрать только<br />           один элемент из списка. В закрытом состоянии дисплей отображает<br />           текущее значение для контроля. Пользователь открывает список для изменения<br />           Значение.</p> <p>          </p> <footer>             — Microsoft Windows User Experience с. 175<br />           </footer> </blockquote> <p>        </p> <p>           Выпадающие списки можно отобразить с помощью опций <code> select </code> и <code> </code><br />           элементы.<br />         </p> <p>        </p> <div class="example">     <select><option> 5 — Невероятно! </option><option> 4 — Отлично! </option><option> 3 — Довольно хорошо </option><option> 2 — Не очень хорошо </option><option> 1 — Неудачно </option></select> </p> <details> <summary> Показать код </summary> <pre> <code> <span class="hljs-tag"> <<span class="hljs-name"> выбрать </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> опция </span>> </span> 5 - Невероятно! <span class="hljs-tag"> </ <span class="hljs-name"> опция </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> option </span>> </span> 4 - Отлично! <span class="hljs-tag"> </ <span class="hljs-name"> option </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> option </span>> </span> 3 - Довольно хороший <span class="hljs-tag"> </ <span class="hljs-name"> option </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> опция </span>> </span> 2 - Не так уж велика <span class="hljs-tag"> </ <span class="hljs-name"> опция </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> опция </span>> </span> 1 - Неудачная <span class="hljs-tag"> </ <span class="hljs-name"> опция </span>> </span> <span class="hljs-tag"> </ <span class="hljs-name"> выберите </span>> </span> </code> </pre> <p>    </details> </p></div> <p>        </p> <p>           По умолчанию будет выбран первый вариант. Вы можете изменить это<br />           предоставление одному из ваших элементов <code> опции </code> выбранных <code> </code><br />           атрибут.<br />         </p> <p>        </p> <div class="example">     <select><option> 5 — Невероятно! </option><option> 4 — Отлично! </option><option selected="selected"> 3 — Довольно хорошо </option><option> 2 — Не очень хорошо </option><option> 1 — Неудачно </option></select> </p> <details> <summary> Показать код </summary> <pre> <code> <span class="hljs-tag"> <<span class="hljs-name"> выбрать </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> опция </span>> </span> 5 - Невероятно! <span class="hljs-tag"> </ <span class="hljs-name"> опция </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> option </span>> </span> 4 - Отлично! <span class="hljs-tag"> </ <span class="hljs-name"> option </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> опция </span> <span class="hljs-attr"> выбрана </span>> </span> 3 - Довольно хорошая <span class="hljs-tag"> </ <span class="hljs-name"> опция </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> опция </span>> </span> 2 - Не так уж велика <span class="hljs-tag"> </ <span class="hljs-name"> опция </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> опция </span>> </span> 1 - Неудачная <span class="hljs-tag"> </ <span class="hljs-name"> опция </span>> </span> <span class="hljs-tag"> </ <span class="hljs-name"> выберите </span>> </span> </code> </pre> <p>    </details> </p></div> <p>      </p></div> <p>    </section> <h3 id="window"><span id="Okno"> Окно </span></h3> <p>    </p> <p>       Следующие компоненты иллюстрируют, как построить полные окна, используя<br />       98.css.<br />     </p> <p>    </p> <section class="component"> <h4 id="title-bar"><span id="Stroka-zagolovka"> Строка заголовка </span></h4> <p>      </p> <div>         </p> <blockquote><p>           В верхней части окна, внутри его границы, находится строка заголовка<br />           (также упоминается как заголовок или строка заголовка), который распространяется через<br />           ширина окна. Строка заголовка идентифицирует содержимое<br />           окно.</p> <p>          </p> <footer>             — Microsoft Windows User Experience с. 118<br />           </footer> </blockquote> <p>        </p> <blockquote><p>           Включите кнопки команд, связанные с общими командами<br />           Главное окно в строке заголовка. Эти кнопки действуют как ярлыки для конкретных<br />           оконные команды.</p> <p>          </p> <footer>             — Microsoft Windows User Experience с. 122<br />           </footer> </blockquote> <p>        </p> <p>           Вы можете создать полную строку заголовка, используя три класса,<br />           <code> заголовок строки </code><code> заголовок строки текста </code> и <code> заголовок панели управления </code>.<br />         </p> <p>        </p> <div class="example">     <br />     </p> <details> <summary> Показать код </summary> <pre> <code> <span class="hljs-tag"> <<span class="hljs-name"> div </span> <span class="hljs-attr"> class </span> = <span class="hljs-string"> «заголовок строки» </span>> </span>> </span> ]   <span class="hljs-tag"> <<span class="hljs-name"> div </span> <span class="hljs-attr"> class </span> = <span class="hljs-string"> "title-bar-text" </span>> </span> Панель заголовка <span class="hljs-tag"> </ <span class="hljs-name"> div </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> div </span> <span class="hljs-attr"> class </span> = <span class="hljs-string"> "заголовок панели управления" </span>> </span>     <span class="hljs-tag"> Кнопка <<span class="hljs-name"> </span> <span class="hljs-attr"> aria-label </span> = <span class="hljs-string"> Кнопка «Закрыть» </span>> </span>> <span class="hljs-tag"> </ <span class="hljs-name"> </span>> </span>> </span>   <span class="hljs-tag"> </ <span class="hljs-name"> DIV </span>> </span> <span class="hljs-tag"> </ <span class="hljs-name"> DIV </span>> </span> </code> </pre> <p>    </details> </p></div> <p>        </p> <p>           Мы используем <code> aria-label </code> для рендеринга кнопки Закрыть, чтобы<br />           Вспомогательные технологии знают цель этой кнопки. Вы также можете использовать<br />           «Свернуть» и «Свернуть», например, так:<br />         </p> <p>        </p> <div class="example">     <br />     </p> <details> <summary> Показать код </summary> <pre> <code> <span class="hljs-tag"> <<span class="hljs-name"> div </span> <span class="hljs-attr"> class </span> = <span class="hljs-string"> «заголовок строки» </span>> </span>> </span> ]   <span class="hljs-tag"> <<span class="hljs-name"> div </span> <span class="hljs-attr"> class </span> = <span class="hljs-string"> "title-bar-text" </span>> </span> Панель заголовка <span class="hljs-tag"> </ <span class="hljs-name"> div </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> div </span> <span class="hljs-attr"> class </span> = <span class="hljs-string"> "заголовок панели управления" </span>> </span>     <span class="hljs-tag"> Кнопка <<span class="hljs-name"> </span> <span class="hljs-attr"> aria-label </span> = <span class="hljs-string"> Кнопка «Свернуть» </span>> </span> <span class="hljs-tag"> </ <span class="hljs-name"> </span>> </span>> </span>     Кнопка <span class="hljs-tag"> <<span class="hljs-name"> </span> <span class="hljs-attr"> aria-label </span> = <span class="hljs-string"> «Развернуть» </span>> </span> <span class="hljs-tag"> </ <span class="hljs-name"> кнопка </span>> </span>>     <span class="hljs-tag"> Кнопка <<span class="hljs-name"> </span> <span class="hljs-attr"> aria-label </span> = <span class="hljs-string"> Кнопка «Закрыть» </span>> </span>> <span class="hljs-tag"> </ <span class="hljs-name"> </span>> </span>> </span>   <span class="hljs-tag"> </ <span class="hljs-name"> DIV </span>> </span> <span class="hljs-tag"> </ <span class="hljs-name"> DIV </span>> </span> </code> </pre> <p>    </details> </p></div> <p>      </p></div> <p>    </section> <section class="component"> <h4 id="window-contents"><span id="Soderzhimoe-okna"> Содержимое окна </span></h4> <p>      </p> <div>         </p> <blockquote><p>           Каждое окно имеет границу, которая определяет его форму.</p> <p>          </p> <footer>             — Microsoft Windows User Experience с. 118<br />           </footer> </blockquote> <p>        </p> <p>           Чтобы придать нашей строке заголовка дом, мы используем окно <code> </code><br />           учебный класс. Это обеспечивает приподнятую внешнюю и внутреннюю границу, а также некоторые<br />           обивка. Мы можем свободно изменить размер окна, указав ширину в<br />           контейнерный стиль.<br />         </p> <p>        </p> <div class="example">     <br />     </p> <details> <summary> Показать код </summary> <pre> <code> <span class="hljs-tag"> <<span class="hljs-name"> div </span> <span class="hljs-attr"> class </span> = <span class="hljs-string"> "окно" в стиле </span> <span class="hljs-attr"> <span class="hljs-attr"></span> = <span class="hljs-string"> "ширина: 300 пикселей" </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> div </span> <span class="hljs-attr"> class </span> = <span class="hljs-string"> "заголовок" </span>> </span>     <span class="hljs-tag"> <<span class="hljs-name"> div </span> <span class="hljs-attr"> class </span> = <span class="hljs-string"> "title-bar-text" </span>> </span> Полное окно <span class="hljs-tag"> </ <span class="hljs-name"> div </span>> </span>     <span class="hljs-tag"> <<span class="hljs-name"> div </span> <span class="hljs-attr"> class </span> = <span class="hljs-string"> "заголовок панели управления" </span>> </span>       <span class="hljs-tag"> Кнопка <<span class="hljs-name"> </span> <span class="hljs-attr"> aria-label </span> = <span class="hljs-string"> Кнопка «Свернуть» </span>> </span> <span class="hljs-tag"> </ <span class="hljs-name"> </span>> </span>> </span>       Кнопка <span class="hljs-tag"> <<span class="hljs-name"> </span> <span class="hljs-attr"> aria-label </span> = <span class="hljs-string"> «Развернуть» </span>> </span> <span class="hljs-tag"> </ <span class="hljs-name"> кнопка </span>> </span>>       <span class="hljs-tag"> Кнопка <<span class="hljs-name"> </span> <span class="hljs-attr"> aria-label </span> = <span class="hljs-string"> Кнопка «Закрыть» </span>> </span>> <span class="hljs-tag"> </ <span class="hljs-name"> </span>> </span>> </span>     <span class="hljs-tag"> </ <span class="hljs-name"> DIV </span>> </span>   <span class="hljs-tag"> </ <span class="hljs-name"> DIV </span>> </span> <span class="hljs-tag"> </ <span class="hljs-name"> DIV </span>> </span> </code> </pre> <p>    </details> </p></div> <p>        </p> <p>           Чтобы нарисовать содержимое окна, мы используем <code> window-body </code><br />           класс под заголовком.<br />         </p> <p>        </p> <div class="example">     </p> <div class="window" style="width: 300px">   </p> <div class="title-bar">     </p> <p> Окно с вещами в нем </p> <p>    <br />   </p></div> <p>  </p> <div class="window-body">     </p> <p> Там так много места для деятельности! </p> <p>  </p></div> </div> <p>    </p> <details> <summary> Показать код </summary> <pre> <code> <span class="hljs-tag"> <<span class="hljs-name"> div </span> <span class="hljs-attr"> class </span> = <span class="hljs-string"> "окно" в стиле </span> <span class="hljs-attr"> <span class="hljs-attr"></span> = <span class="hljs-string"> "ширина: 300 пикселей" </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> div </span> <span class="hljs-attr"> class </span> = <span class="hljs-string"> "заголовок" </span>> </span>     <span class="hljs-tag"> <<span class="hljs-name"> div </span> <span class="hljs-attr"> class </span> = <span class="hljs-string"> "title-bar-text" </span>> </span> Окно с вещами в нем <span class="hljs-tag"> </ <span class="hljs-name"> ДИВ </span>> </span>     <span class="hljs-tag"> <<span class="hljs-name"> div </span> <span class="hljs-attr"> class </span> = <span class="hljs-string"> "заголовок панели управления" </span>> </span>       <span class="hljs-tag"> Кнопка <<span class="hljs-name"> </span> <span class="hljs-attr"> aria-label </span> = <span class="hljs-string"> Кнопка «Свернуть» </span>> </span> <span class="hljs-tag"> </ <span class="hljs-name"> </span>> </span>> </span>       Кнопка <span class="hljs-tag"> <<span class="hljs-name"> </span> <span class="hljs-attr"> aria-label </span> = <span class="hljs-string"> «Развернуть» </span>> </span> <span class="hljs-tag"> </ <span class="hljs-name"> кнопка </span>> </span>>       <span class="hljs-tag"> Кнопка <<span class="hljs-name"> </span> <span class="hljs-attr"> aria-label </span> = <span class="hljs-string"> Кнопка «Закрыть» </span>> </span>> <span class="hljs-tag"> </ <span class="hljs-name"> </span>> </span>> </span>     <span class="hljs-tag"> </ <span class="hljs-name"> DIV </span>> </span>   <span class="hljs-tag"> </ <span class="hljs-name"> DIV </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> div </span> <span class="hljs-attr"> class </span> = <span class="hljs-string"> "window-body" </span>> </span>     <span class="hljs-tag"> <<span class="hljs-name"> p </span>> </span> Так много места для деятельности! <span class="hljs-tag"> </ <span class="hljs-name"> p </span>> </span>   <span class="hljs-tag"> </ <span class="hljs-name"> DIV </span>> </span> <span class="hljs-tag"> </ <span class="hljs-name"> DIV </span>> </span> </code> </pre> <p>    </details> </p></div> <p>      </p></div> <p>    </section> <section class="component"> <h3 id="tree-view"><span id="TreeView"> TreeView </span></h3> <p>      </p> <div>         </p> <blockquote><p>           <em> древовидный элемент управления </em> является специальным списком управления<br />           который отображает набор объектов в виде структуры с отступом<br />           на их логические иерархические отношения.</p> <p>          </p> <footer>             — Microsoft Windows User Experience с. 178<br />           </footer> </blockquote> <p>        </p> <p>           Чтобы отобразить дерево, используйте элемент <code> ul </code> с<br />           <code> древовидная </code> класс. Дети этого списка (<code> li </code><br />           элементы), может содержать все, что вы хотите.<br />         </p> <p>        </p> <div class="example">     </p> <ul class="tree-view"> <li> Мы можем поставить </li> <p>  </p> <li> <strong style="color: purple"> ✨ Безотносительно ✨ </strong> </li> <p>  </p> <li> Мы хотим здесь </li> </ul> <details> <summary> Показать код </summary> <pre> <code> <span class="hljs-tag"> <<span class="hljs-name"> ul </span> <span class="hljs-attr"> class </span> = <span class="hljs-string"> «древовидная структура» </span> > </span>   <span class="hljs-tag"> <<span class="hljs-name"> li </span>> </span> Мы можем поставить <span class="hljs-tag"> </ <span class="hljs-name"> li </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> li </span>> </span> <span class="hljs-tag"> <<span class="hljs-name"> strong </span> <span class="hljs-attr"> стиль </span> = <span class="hljs-string"> "цвет: фиолетовый" </span>> </span> ✨ Независимо от ✨ <span class="hljs-tag"> </ <span class="hljs-name"> сильный </span>> </span> <span class="hljs-tag"> </ <span class="hljs-name"> li </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> li </span>> </span> Мы хотим здесь <span class="hljs-tag"> </ <span class="hljs-name"> li </span>> </span> <span class="hljs-tag"> </ <span class="hljs-name"> уль </span>> </span> </code> </pre> <p>    </details> </p></div> <p>        </p> <p>           Чтобы сделать это дерево, мы можем вложить дополнительные элементы <code> ul </code><br />           (класс не требуется на них). Это даст им хорошую пунктирную<br />           границы и отступы для иллюстрации структуры дерева.<br />         </p> <p>        </p> <div class="example">     </p> <ul class="tree-view"> <li> Содержание </li> <p>  </p> <li> Что такое веб-разработка? </li> <p>  </p> <li>     CSS<br />     </p> <ul> <li> Селекторы </li> <p>      </p> <li> Специфичность </li> <p>      </p> <li> Свойство </li> <p>    </ul> </li> <p>  </p> <li>     JavaScript<br />     </li> <p>  </p> <li> HTML </li> <p>  </p> <li> Особая благодарность </li> </ul> <details> <summary> Показать код </summary> <pre> <code> <span class="hljs-tag"> <<span class="hljs-name"> ul </span> <span class="hljs-attr"> class </span> = <span class="hljs-string"> «древовидная структура» </span> > </span>   <span class="hljs-tag"> <<span class="hljs-name"> li </span>> </span> Содержание <span class="hljs-tag"> </ <span class="hljs-name"> li </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> li </span>> </span> Что такое веб-разработка? <span class="hljs-tag"> </ <span class="hljs-name"> li </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> Li </span>> </span>     CSS     <span class="hljs-tag"> <<span class="hljs-name"> уль </span>> </span>       <span class="hljs-tag"> <<span class="hljs-name"> Li </span>> </span> Селекторы <span class="hljs-tag"> </ <span class="hljs-name"> Li </span>> </span>       <span class="hljs-tag"> <<span class="hljs-name"> Li </span>> </span> Специфичность <span class="hljs-tag"> </ <span class="hljs-name"> Li </span>> </span>       <span class="hljs-tag"> <<span class="hljs-name"> Li </span>> </span> Свойства <span class="hljs-tag"> </ <span class="hljs-name"> Li </span>> </span>     <span class="hljs-tag"> </ <span class="hljs-name"> уль </span>> </span>   <span class="hljs-tag"> </ <span class="hljs-name"> Li </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> Li </span>> </span>     JavaScript     <span class="hljs-tag"> <<span class="hljs-name"> уль </span>> </span>       <span class="hljs-tag"> <<span class="hljs-name"> li </span>> </span> Избегать любой ценой <span class="hljs-tag"> </ <span class="hljs-name"> li </span>> </span>     <span class="hljs-tag"> </ <span class="hljs-name"> уль </span>> </span>   <span class="hljs-tag"> </ <span class="hljs-name"> Li </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> Li </span>> </span> HTML <span class="hljs-tag"> </ <span class="hljs-name"> Li </span>> </span>   <span class="hljs-tag"> <<span class="hljs-name"> li </span>> </span> Особая благодарность <span class="hljs-tag"> </ <span class="hljs-name"> li </span>> </span> <span class="hljs-tag"> </ <span class="hljs-name"> уль </span>> </span> </code> </pre> <p>    </details> </p></div> <p>      </p></div> <p>    </section> <h2 id="issues-contributing-etc"><span id="Problemy-vklad-i-t-D"> Проблемы, вклад и т. Д. </span></h2> <p>    </p> <p>       98.css имеет лицензию MIT.<br />     </p> <p>    </p> <p>       Обратитесь к странице проблем GitHub, чтобы увидеть ошибки<br />       в моем CSS или сообщать о новых. Я бы очень хотел видеть ваши запросы на получение данных (особенно те, которые<br />       с открытым исходным кодом!) и с радостью предоставит обзор кода. 98.css это веселый, глупый проект, и я бы хотел<br />       сделать это забавным местом для наращивания мышечной массы с открытым исходным кодом.<br />     </p> <p>    </p> <p>       Спасибо за проверку моего маленького проекта, надеюсь, сегодня он принес вам немного радости. Рассматривать<br />       в главной роли / следуя по GitHub и, возможно,<br />       подписаться на более интересные вещи в моем твиттере. 👋<br />     </p> <p>  </main> </body> </div> <span class="cp-load-after-post"></span></div><div class="post-meta wf-mobile-collapsed"><div class="entry-meta"><span class="category-link">Category: <a href="https://artforlife.ru/stati-po-dizajnu" >Статьи по дизайну</a></span><a href="https://artforlife.ru/2020/04/23" title="09:29" class="data-link" rel="bookmark"><time class="entry-date updated" datetime="2020-04-23T09:29:53+00:00">23.04.2020</time></a></div><div class="entry-tags">Теги: <a href="https://artforlife.ru/tag/ui" rel="tag">UI</a><a href="https://artforlife.ru/tag/vossozdanij" rel="tag">воссозданий</a><a href="https://artforlife.ru/tag/dlya" rel="tag">для</a><a href="https://artforlife.ru/tag/proektirovaniya" rel="tag">проектирования</a><a href="https://artforlife.ru/tag/sistema" rel="tag">Система</a><a href="https://artforlife.ru/tag/sozdaniya" rel="tag">создания</a><a href="https://artforlife.ru/tag/staryh" rel="tag">старых</a><a href="https://artforlife.ru/tag/tochnyh" rel="tag">точных</a></div></br>Пожалуйста, поставьте рейтинг статье:<div id="post-ratings-44188" class="post-ratings" itemscope itemtype="http://schema.org/Article" data-nonce="d8387585fc"><img id="rating_44188_1" src="https://artforlife.ru/wp-content/plugins/wp-postratings/images/stars/rating_off.gif" alt="1 Звезда" title="1 Звезда" onmouseover="current_rating(44188, 1, '1 Звезда');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_44188_2" src="https://artforlife.ru/wp-content/plugins/wp-postratings/images/stars/rating_off.gif" alt="2 Звезды" title="2 Звезды" onmouseover="current_rating(44188, 2, '2 Звезды');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_44188_3" src="https://artforlife.ru/wp-content/plugins/wp-postratings/images/stars/rating_off.gif" alt="3 Звезды" title="3 Звезды" onmouseover="current_rating(44188, 3, '3 Звезды');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_44188_4" src="https://artforlife.ru/wp-content/plugins/wp-postratings/images/stars/rating_off.gif" alt="4 Звезды" title="4 Звезды" onmouseover="current_rating(44188, 4, '4 Звезды');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_44188_5" src="https://artforlife.ru/wp-content/plugins/wp-postratings/images/stars/rating_off.gif" alt="5 Звезд" title="5 Звезд" onmouseover="current_rating(44188, 5, '5 Звезд');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /> (Пока оценок нет)<br /><span class="post-ratings-text" id="ratings_44188_text"></span><meta itemprop="headline" content="Система проектирования для создания точных воссозданий старых UI" /><meta itemprop="description" content=" 98.css - Система проектирования для создания точных воссозданий старых UI ]         Система проектирования для создания точных воссозданий старых интерфейсов.      Введени..." /><meta itemprop="datePublished" content="2020-04-23T09:29:53+00:00" /><meta itemprop="dateModified" content="2020-04-23T09:29:53+00:00" /><meta itemprop="url" content="https://artforlife.ru/stati-po-dizajnu/sistema-proektirovaniya-dlya-sozdaniya-tochnyh-vossozdanij-staryh-ui.html" /><meta itemprop="author" content="admin" /><meta itemprop="mainEntityOfPage" content="https://artforlife.ru/stati-po-dizajnu/sistema-proektirovaniya-dlya-sozdaniya-tochnyh-vossozdanij-staryh-ui.html" /><div style="display: none;" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="https://artforlife.ru/wp-content/uploads/2020/04/pre-sistema-proektirovaniya-dlya-sozdaniya-tochnyh-vossozdanij-staryh-ui-150x150.png" /><meta itemprop="width" content="150" /><meta itemprop="height" content="150" /></div><div style="display: none;" itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><meta itemprop="name" content="Новости искусства и дизайна" /><div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="" /></div></div></div><div id="post-ratings-44188-loading" class="post-ratings-loading"> <img src="https://artforlife.ru/wp-content/plugins/wp-postratings/images/loading.gif" width="16" height="16" class="post-ratings-image" /> Загрузка...</div></div><div class="single-share-box"><div class="share-link-description">Поделиться этой записью</div><div class="share-buttons"><a class="facebook" href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fartforlife.ru%2Fstati-po-dizajnu%2Fsistema-proektirovaniya-dlya-sozdaniya-tochnyh-vossozdanij-staryh-ui.html&t=%D0%A1%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0+%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F+%D0%B4%D0%BB%D1%8F+%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F+%D1%82%D0%BE%D1%87%D0%BD%D1%8B%D1%85+%D0%B2%D0%BE%D1%81%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B9+%D1%81%D1%82%D0%B0%D1%80%D1%8B%D1%85+UI" title="Facebook" target="_blank"><span class="soc-font-icon"></span><span class="screen-reader-text">Share with Facebook</span></a><a class="twitter" href="https://twitter.com/share?url=https%3A%2F%2Fartforlife.ru%2Fstati-po-dizajnu%2Fsistema-proektirovaniya-dlya-sozdaniya-tochnyh-vossozdanij-staryh-ui.html&text=%D0%A1%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0+%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F+%D0%B4%D0%BB%D1%8F+%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F+%D1%82%D0%BE%D1%87%D0%BD%D1%8B%D1%85+%D0%B2%D0%BE%D1%81%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B9+%D1%81%D1%82%D0%B0%D1%80%D1%8B%D1%85+UI" title="Twitter" target="_blank"><span class="soc-font-icon"></span><span class="screen-reader-text">Share with Twitter</span></a><a class="google" href="https://plus.google.com/share?url=https%3A%2F%2Fartforlife.ru%2Fstati-po-dizajnu%2Fsistema-proektirovaniya-dlya-sozdaniya-tochnyh-vossozdanij-staryh-ui.html&title=%D0%A1%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0+%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F+%D0%B4%D0%BB%D1%8F+%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F+%D1%82%D0%BE%D1%87%D0%BD%D1%8B%D1%85+%D0%B2%D0%BE%D1%81%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B9+%D1%81%D1%82%D0%B0%D1%80%D1%8B%D1%85+UI" title="Google+" target="_blank"><span class="soc-font-icon"></span><span class="screen-reader-text">Share with Google+</span></a><a class="pinterest pinit-marklet" href="//pinterest.com/pin/create/button/" title="Pinterest" target="_blank" data-pin-config="above" data-pin-do="buttonBookmark"><span class="soc-font-icon"></span><span class="screen-reader-text">Share with Pinterest</span></a><a class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fartforlife.ru%2Fstati-po-dizajnu%2Fsistema-proektirovaniya-dlya-sozdaniya-tochnyh-vossozdanij-staryh-ui.html&title=%D0%A1%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0%20%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F%20%D0%B4%D0%BB%D1%8F%20%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F%20%D1%82%D0%BE%D1%87%D0%BD%D1%8B%D1%85%20%D0%B2%D0%BE%D1%81%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B9%20%D1%81%D1%82%D0%B0%D1%80%D1%8B%D1%85%20UI&summary=&source=%D0%9D%D0%BE%D0%B2%D0%BE%D1%81%D1%82%D0%B8%20%D0%B8%D1%81%D0%BA%D1%83%D1%81%D1%81%D1%82%D0%B2%D0%B0%20%D0%B8%20%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D0%B0" title="LinkedIn" target="_blank"><span class="soc-font-icon"></span><span class="screen-reader-text">Share with LinkedIn</span></a><a class="whatsapp" href="whatsapp://send?text=%D0%A1%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0%20%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F%20%D0%B4%D0%BB%D1%8F%20%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D1%8F%20%D1%82%D0%BE%D1%87%D0%BD%D1%8B%D1%85%20%D0%B2%D0%BE%D1%81%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B9%20%D1%81%D1%82%D0%B0%D1%80%D1%8B%D1%85%20UI%20-%20https%3A%2F%2Fartforlife.ru%2Fstati-po-dizajnu%2Fsistema-proektirovaniya-dlya-sozdaniya-tochnyh-vossozdanij-staryh-ui.html" title="WhatsApp" target="_blank"rel="nofollow" data-action="share/whatsapp/share"><span class="soc-font-icon"></span><span class="screen-reader-text">Share with WhatsApp</span></a></div></div><nav class="navigation post-navigation" role="navigation"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><a class="nav-previous" href="https://artforlife.ru/stati-po-dizajnu/utechka-logotipa-xbox-series-x-imeet-nulevuyu-individualnost.html" rel="next"><i class="fa fa-angle-left" aria-hidden="true"></i><span class="meta-nav" aria-hidden="true">Предыдущая</span><span class="screen-reader-text">Предыдущая запись:</span><span class="post-title h4-size">Утечка логотипа Xbox Series X имеет нулевую индивидуальность</span></a><a class="nav-next" href="https://artforlife.ru/stati-po-dizajnu/polnoe-rukovodstvo-chast-1-zhizn-sajty-i-birzhi-frilansa-obzory-frilans-birzh-novosti-sovety-frilans-dlya-nachinayushhih-freelance-today.html" rel="prev"><i class="fa fa-angle-right" aria-hidden="true"></i><span class="meta-nav" aria-hidden="true">Следующая</span><span class="screen-reader-text">Следующая запись:</span><span class="post-title h4-size">Полное руководство. Часть 1 / Жизнь / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY</span></a></div></nav><div class="single-related-posts"><h3>Связанные записи</h3><section class="items-grid"><div class=" related-item"><article class="post-format-standard"><div class="wf-td"><a class="alignleft post-rollover" href="https://artforlife.ru/stati-po-dizajnu/niderlandskie-dizajnery-pridumali-obuv-iz-monomateriala.html" ><img class="preload-me" src="https://artforlife.ru/wp-content/uploads/2024/11/Niderlandskie-dizajnery-pridumali-obuv-iz-monomateriala-110x80.jpg" srcset="https://artforlife.ru/wp-content/uploads/2024/11/Niderlandskie-dizajnery-pridumali-obuv-iz-monomateriala-110x80.jpg 110w, https://artforlife.ru/wp-content/uploads/2024/11/Niderlandskie-dizajnery-pridumali-obuv-iz-monomateriala-220x160.jpg 220w" width="110" height="80" alt="" /></a></div><div class="post-content"><a href="https://artforlife.ru/stati-po-dizajnu/niderlandskie-dizajnery-pridumali-obuv-iz-monomateriala.html">Нидерландские дизайнеры придумали обувь из мономатериала</a><br /><time class="text-secondary" datetime="2024-11-16T03:00:52+00:00">16.11.2024</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="wf-td"><a class="alignleft post-rollover" href="https://artforlife.ru/stati-po-dizajnu/hudozhniki-s-osobennostyami-sozdali-risunki-dlya-kalendarej-prostyh-veshhej.html" ><img class="preload-me" src="https://artforlife.ru/wp-content/uploads/2024/11/Hudozhniki-s-osobennostyami-sozdali-risunki-dlya-kalendarej-Prostyh-veshhej-110x80.jpg" srcset="https://artforlife.ru/wp-content/uploads/2024/11/Hudozhniki-s-osobennostyami-sozdali-risunki-dlya-kalendarej-Prostyh-veshhej-110x80.jpg 110w, https://artforlife.ru/wp-content/uploads/2024/11/Hudozhniki-s-osobennostyami-sozdali-risunki-dlya-kalendarej-Prostyh-veshhej-220x160.jpg 220w" width="110" height="80" alt="" /></a></div><div class="post-content"><a href="https://artforlife.ru/stati-po-dizajnu/hudozhniki-s-osobennostyami-sozdali-risunki-dlya-kalendarej-prostyh-veshhej.html">Художники с особенностями создали рисунки для календарей «Простых вещей»</a><br /><time class="text-secondary" datetime="2024-11-14T22:59:47+00:00">14.11.2024</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="wf-td"><a class="alignleft post-rollover" href="https://artforlife.ru/stati-po-dizajnu/bazovye-navyki-dlya-uspeshnoj-karery-frilansera.html" ><img class="preload-me" src="https://artforlife.ru/wp-content/uploads/2024/11/Bazovye-navyki-dlya-uspeshnoj-karery-frilansera-110x80.jpg" srcset="https://artforlife.ru/wp-content/uploads/2024/11/Bazovye-navyki-dlya-uspeshnoj-karery-frilansera-110x80.jpg 110w, https://artforlife.ru/wp-content/uploads/2024/11/Bazovye-navyki-dlya-uspeshnoj-karery-frilansera-220x160.jpg 220w" width="110" height="80" alt="" /></a></div><div class="post-content"><a href="https://artforlife.ru/stati-po-dizajnu/bazovye-navyki-dlya-uspeshnoj-karery-frilansera.html">Базовые навыки для успешной карьеры фрилансера</a><br /><time class="text-secondary" datetime="2024-11-13T16:56:46+00:00">13.11.2024</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="wf-td"><a class="alignleft post-rollover" href="https://artforlife.ru/stati-po-dizajnu/8-obyazatelnyh-punktov-v-kontrakte-frilansera.html" ><img class="preload-me" src="https://artforlife.ru/wp-content/uploads/2024/11/8-obyazatelnyh-punktov-v-kontrakte-frilansera-110x80.jpg" srcset="https://artforlife.ru/wp-content/uploads/2024/11/8-obyazatelnyh-punktov-v-kontrakte-frilansera-110x80.jpg 110w, https://artforlife.ru/wp-content/uploads/2024/11/8-obyazatelnyh-punktov-v-kontrakte-frilansera-220x160.jpg 220w" width="110" height="80" alt="" /></a></div><div class="post-content"><a href="https://artforlife.ru/stati-po-dizajnu/8-obyazatelnyh-punktov-v-kontrakte-frilansera.html">8 обязательных пунктов в контракте фрилансера</a><br /><time class="text-secondary" datetime="2024-11-11T14:51:38+00:00">11.11.2024</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="wf-td"><a class="alignleft post-rollover" href="https://artforlife.ru/stati-po-dizajnu/o-chem-sprosit-klienta-19-samyh-vazhnyh-voprosov-poleznoe-sajty-i-birzhi-frilansa-obzory-frilans-birzh-novosti-sovety-frilans-dlya-nachinayushhih-freelance-today.html" ><img class="preload-me" src="https://artforlife.ru/wp-content/uploads/2024/11/O-chem-sprosit-klienta-19-samyh-vazhnyh-voprosov-110x80.png" srcset="https://artforlife.ru/wp-content/uploads/2024/11/O-chem-sprosit-klienta-19-samyh-vazhnyh-voprosov-110x80.png 110w, https://artforlife.ru/wp-content/uploads/2024/11/O-chem-sprosit-klienta-19-samyh-vazhnyh-voprosov-220x160.png 220w" width="110" height="80" alt="" /></a></div><div class="post-content"><a href="https://artforlife.ru/stati-po-dizajnu/o-chem-sprosit-klienta-19-samyh-vazhnyh-voprosov-poleznoe-sajty-i-birzhi-frilansa-obzory-frilans-birzh-novosti-sovety-frilans-dlya-nachinayushhih-freelance-today.html">О чем спросить клиента — 19 самых важных вопросов / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY</a><br /><time class="text-secondary" datetime="2024-11-07T20:39:28+00:00">07.11.2024</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="wf-td"><a class="alignleft post-rollover" href="https://artforlife.ru/stati-po-dizajnu/kak-proektirovat-hlebnye-kroshki-dlya-mobilnogo-interfejsa.html" ><img class="preload-me" src="https://artforlife.ru/wp-content/uploads/2024/11/Kak-proektirovat-hlebnye-kroshki-dlya-mobilnogo-interfejsa-110x80.png" srcset="https://artforlife.ru/wp-content/uploads/2024/11/Kak-proektirovat-hlebnye-kroshki-dlya-mobilnogo-interfejsa-110x80.png 110w, https://artforlife.ru/wp-content/uploads/2024/11/Kak-proektirovat-hlebnye-kroshki-dlya-mobilnogo-interfejsa-220x160.png 220w" width="110" height="80" alt="" /></a></div><div class="post-content"><a href="https://artforlife.ru/stati-po-dizajnu/kak-proektirovat-hlebnye-kroshki-dlya-mobilnogo-interfejsa.html">Как проектировать хлебные крошки для мобильного интерфейса</a><br /><time class="text-secondary" datetime="2024-11-05T13:04:33+00:00">05.11.2024</time></div></article></div></section></div> </article> </div><!-- #content --> <aside id="sidebar" class="sidebar"> <div class="sidebar-content widget-divider-off"> <section id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><!-- Yandex.RTB R-A-268541-1 --> <div id="yandex_rtb_R-A-268541-1"></div> <script type="text/javascript"> (function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-268541-1", renderTo: "yandex_rtb_R-A-268541-1", async: true }); }); t = d.getElementsByTagName("script")[0]; s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks"); </script> <!-- Yandex.Direct D-A-268824-2 --> <div id="yandex_direct_D-A-268824-2"></div> <script type="text/javascript"> (function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "D-A-268824-2", renderTo: "yandex_direct_D-A-268824-2", searchText: "поисковый запрос", searchPageNumber: 1 }); }); t = d.getElementsByTagName("script")[0]; s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks"); </script> </div></section><section id="uw_recent_posts_thumb-2" class="style1 widget uw_widget_wrap uw_thumb_widget"> <h3 class="uw-title"> <span>Самые свежие статьи</span> </h3> <ul class="uw-ul uw-widget-recent-posts clr style-default"> <li class="uw-widget-recent-posts-li"> <a href="https://artforlife.ru/stati-po-dizajnu/niderlandskie-dizajnery-pridumali-obuv-iz-monomateriala.html" title="Нидерландские дизайнеры придумали обувь из мономатериала" class="uw-widget-recent-posts-thumbnail"> <img src="https://artforlife.ru/wp-content/uploads/2024/11/Niderlandskie-dizajnery-pridumali-obuv-iz-monomateriala-65x65.jpg" alt="Нидерландские дизайнеры придумали обувь из мономатериала" /> </a> <a href="https://artforlife.ru/stati-po-dizajnu/niderlandskie-dizajnery-pridumali-obuv-iz-monomateriala.html" title="Нидерландские дизайнеры придумали обувь из мономатериала" class="uw-widget-recent-posts-title">Нидерландские дизайнеры придумали обувь из мономатериала</a> </li> <li class="uw-widget-recent-posts-li"> <a href="https://artforlife.ru/stati-po-dizajnu/hudozhniki-s-osobennostyami-sozdali-risunki-dlya-kalendarej-prostyh-veshhej.html" title="Художники с особенностями создали рисунки для календарей «Простых вещей»" class="uw-widget-recent-posts-thumbnail"> <img src="https://artforlife.ru/wp-content/uploads/2024/11/Hudozhniki-s-osobennostyami-sozdali-risunki-dlya-kalendarej-Prostyh-veshhej-65x65.jpg" alt="Художники с особенностями создали рисунки для календарей «Простых вещей»" /> </a> <a href="https://artforlife.ru/stati-po-dizajnu/hudozhniki-s-osobennostyami-sozdali-risunki-dlya-kalendarej-prostyh-veshhej.html" title="Художники с особенностями создали рисунки для календарей «Простых вещей»" class="uw-widget-recent-posts-title">Художники с особенностями создали рисунки для календарей «Простых вещей»</a> </li> <li class="uw-widget-recent-posts-li"> <a href="https://artforlife.ru/stati-po-dizajnu/bazovye-navyki-dlya-uspeshnoj-karery-frilansera.html" title="Базовые навыки для успешной карьеры фрилансера" class="uw-widget-recent-posts-thumbnail"> <img src="https://artforlife.ru/wp-content/uploads/2024/11/Bazovye-navyki-dlya-uspeshnoj-karery-frilansera-65x65.jpg" alt="Базовые навыки для успешной карьеры фрилансера" /> </a> <a href="https://artforlife.ru/stati-po-dizajnu/bazovye-navyki-dlya-uspeshnoj-karery-frilansera.html" title="Базовые навыки для успешной карьеры фрилансера" class="uw-widget-recent-posts-title">Базовые навыки для успешной карьеры фрилансера</a> </li> </ul> </section> </div> </aside><!-- #sidebar --> </div><!-- .wf-container --> </div><!-- .wf-wrap --> </div><!-- #main --> <!-- !Footer --> <footer id="footer" class="footer solid-bg"> <!-- !Bottom-bar --> <div id="bottom-bar" class="full-width-line" role="contentinfo"> <div class="wf-wrap"> <div class="wf-container-bottom"> <div class="wf-table wf-mobile-collapsed"> <div class="wf-td"> <div class="mini-nav wf-float-right"><div class="menu-select"><span class="customSelect1"><span class="customSelectInner">Useful Links</span></span></div></div> </div> </div> </div><!-- .wf-container-bottom --> </div><!-- .wf-wrap --> </div><!-- #bottom-bar --> </footer><!-- #footer --> <a href="#" class="scroll-top"><span class="screen-reader-text">Go to Top</span></a> </div><!-- #page --> <script type="text/javascript" id="modal"> jQuery(window).on( 'load', function(){ startclock(); }); function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false; document.cookie="time=0"; } function showtime () { var now = new Date(); var my = now.getTime() ; now = new Date(my-diffms) ; document.cookie="time="+now.toLocaleString(); timerID = setTimeout('showtime()',10000); timerRunning = true; } function startclock () { stopclock(); showtime(); } var timerID = null; var timerRunning = false; var x = new Date() ; var now = x.getTime() ; var gmt = 1731743295 * 1000 ; var diffms = (now - gmt) ; </script> <style type="text/css">.content-67384e3fcf1f6 .cp-modal-body { min-height:160px;}</style><link rel='stylesheet' type='text/css' id='cp-google-fonts' href='https://fonts.googleapis.com/css?family=Bitter|Lato|Libre+Baskerville|Montserrat|Neuton|Open+Sans|Pacifico|Raleway|Roboto|Sacramento|Varela+Round|Lato|Open Sans|Libre Baskerville|Montserrat|Neuton|Raleway|Roboto|Sacramento|Varela Round|Pacifico|Bitter'> <div data-class-id="content-67384e3fcf1f6" data-referrer-domain="" data-referrer-check="hide" data-after-content-value="50" class="cp-onload overlay-show cp-cp_id_a5ef1 cp-after-post cp-modal-global" data-overlay-class="overlay-zoomin" data-onload-delay="" data-onscroll-value="" data-exit-intent="disabled" data-closed-cookie-time="5" data-conversion-cookie-time="10" data-modal-id="cp_id_a5ef1" data-modal-style="cp_id_a5ef1" data-option="smile_modal_styles" data-custom-class="cp-cp_id_a5ef1 cp-after-post cp-modal-global" data-load-on-refresh="enabled" data-dev-mode="disabled" ></div> <div data-form-layout="" class="cp-module cp-modal-popup-container cp_id_a5ef1 cp-social-article-container"> <div class="cp-overlay close_btn_nd_overlay smile-3DRotateBottom content-67384e3fcf1f6 global_modal_container " data-placeholder-font="" data-class="content-67384e3fcf1f6" style=" background:rgba(0, 0, 0, 0.71)" data-closed-cookie-time="5" data-conversion-cookie-time="10" data-modal-id="cp_id_a5ef1" data-modal-style="cp_id_a5ef1" data-option="smile_modal_styles" data-custom-class="cp-cp_id_a5ef1 cp-after-post cp-modal-global" data-load-on-refresh="enabled" data-scheduled="false" data-timezone="3" data-timezonename="" data-placeholder-color="" data-image-position="" data-affiliate_setting ="0" data-overlay-animation = "smile-3DRotateBottom" data-tz-offset="3" > <div class="cp-modal cp-modal-custom-size" style="width:100%;height:160;max-width:550px;"> <div class="cp-animate-container" data-overlay-animation = "smile-3DRotateBottom" data-exit-animation="smile-bounceOutDown"> <div class="cp-modal-content " style="box-shadow:4px 4px 4px 0px #cbcbcb;-webkit-box-shadow:4px 4px 4px 0px #cbcbcb;-moz-box-shadow:4px 4px 4px 0px #cbcbcb;border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-style: none;border-color: rgb(0,0,0);border-width: px;border-width:5px;;"> <div class="cp-modal-body cp-social-article cp-no-padding " style=""> <div class="cp-modal-body-overlay cp_cs_overlay" style="background-color: #edf7f7;;"></div> <!-- BEFORE CONTENTS --> <div class="cp-row cp-row-center"> <div class="cp-text-container cp-row-equalized-center " > <div class="cp-title-container "> <h2 class="cp-title cp_responsive" style="color: #37474F;"><span class="cp_responsive cp_font" data-font-size="25px" style="font-size:25px;"><span data-font-size="24px"><span style="font-weight:bold;"><span style="font-family:palatino linotype;"><span style="font-style:italic;">Поделитесь статьей!</span></span></span></span></span></h2> </div> <div class="cp_social_media_wrapper cp-auto-column "> <style type="text/css" class="cp-social-css">.content-67384e3fcf1f6 .cp_social_networks i.cp_social_icon { border-radius: 5px; }.content-67384e3fcf1f6 .cp_social_networks.cp_social_left li { border-radius: 5px; }.content-67384e3fcf1f6 .cp_social_networks .cp_social_icons_container { margin-bottom: -15px!important; }.content-67384e3fcf1f6 .cp_social_networks.cp_social_autowidth .cp_social_icons_container { text-align:center; }</style><div class="cp_social_networks cp_social_autowidth cp_social_left cp_social_withcounts cp_social_withnetworknames cp-icon-style-left cp_social_flip cp-border_radius cp_flat " data-column-no ="cp_social_autowidth"> <ul class="cp_social_icons_container"><li class="cp_social_facebook"><a href="http://www.facebook.com/sharer.php?u=https://artforlife.ru/stati-po-dizajnu/sistema-proektirovaniya-dlya-sozdaniya-tochnyh-vossozdanij-staryh-ui.html" class="cp_social_share cp_social_display_count" onclick="window.open(this.href,'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');return false"><i class="cp_social_icon cp_social_icon_facebook"></i><div class="cp_social_network_label"><div class="cp_social_networkname">Facebook</div></div></a> </li><li class="cp_social_google"><a href="https://plus.google.com/share?url=https://artforlife.ru/stati-po-dizajnu/sistema-proektirovaniya-dlya-sozdaniya-tochnyh-vossozdanij-staryh-ui.html" class="cp_social_share cp_social_display_count" onclick="window.open(this.href,'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');return false"><i class="cp_social_icon cp_social_icon_google"></i><div class="cp_social_network_label"><div class="cp_social_networkname">Google</div></div></a> </li><li class="cp_social_twitter"><a href="https://twitter.com/share?url=https://artforlife.ru/stati-po-dizajnu/sistema-proektirovaniya-dlya-sozdaniya-tochnyh-vossozdanij-staryh-ui.html" class="cp_social_share cp_social_display_count" onclick="window.open(this.href,'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0');return false"><i class="cp_social_icon cp_social_icon_twitter"></i><div class="cp_social_network_label"><div class="cp_social_networkname">Twitter</div></div></a> </li></ul></div> </div> </div><!-- .col-lg-7 col-md-7 col-sm-7 col-xs-12 cp-text-container --> </div> <!-- AFTER CONTENTS --> <input type="hidden" class="cp-impress-nonce" name="cp-impress-nonce" value="0cc8aa358a"> </div><!-- .cp-modal-body --> </div><!-- .cp-modal-content --> <div class="cp-form-processing-wrap" style="border-radius: 0px;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-style: none;border-color: rgb(0,0,0);border-width: px;border-width:5px;;border-width: 0px;box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.71) inset;;"> <div class="cp-form-after-submit"> <div class ="cp-form-processing" style=""> <div class="smile-absolute-loader" style="visibility: visible;"> <div class="smile-loader"> <div class="smile-loading-bar"></div> <div class="smile-loading-bar"></div> <div class="smile-loading-bar"></div> <div class="smile-loading-bar"></div> </div> </div> </div> <div class ="cp-msg-on-submit"></div> </div> </div> <div class="cp-overlay-close cp-image-close cp-adjacent-close cp-adjacent-right" style="width: 60px"> <img class="" src="https://artforlife.ru/wp-content/plugins/convertplug/modules/modal/functions/../../assets/images/default.png" alt="close-link" /> </div> </div><!-- .cp-animate-container --> </div><!-- .cp-modal --> <!-- .affiliate link for fullscreen --> </div><!-- .cp-overlay --> </div><!-- .cp-modal-popup-container --> <script type="text/javascript" id="info-bar"> jQuery(window).on( 'load', function(){ startclock(); }); function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false; document.cookie="time=0"; } function showtime () { var now = new Date(); var my = now.getTime() ; now = new Date(my-diffms) ; document.cookie="time="+now.toLocaleString(); timerID = setTimeout('showtime()',10000); timerRunning = true; } function startclock () { stopclock(); showtime(); } var timerID = null; var timerRunning = false; var x = new Date() ; var now = x.getTime() ; var gmt = 1731743295 * 1000 ; var diffms = (now - gmt) ; </script> <script type="text/javascript" id="slidein"> jQuery(window).on( 'load', function(){ startclock(); }); function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false; document.cookie="time=0"; } function showtime () { var now = new Date(); var my = now.getTime() ; now = new Date(my-diffms) ; document.cookie="time="+now.toLocaleString(); timerID = setTimeout('showtime()',10000); timerRunning = true; } function startclock () { stopclock(); showtime(); } var timerID = null; var timerRunning = false; var x = new Date() ; var now = x.getTime() ; var gmt = 1731743295 * 1000 ; var diffms = (now - gmt) ; </script> <link rel='stylesheet' id='bsf-core-frosty-style-css' href='https://artforlife.ru/wp-content/plugins/convertplug/admin/bsf-core/assets/css/frosty.css?ver=4.8.25' type='text/css' media='all' /> <link rel='stylesheet' id='social_article-cp_id_a5ef1-css' href='https://artforlife.ru/wp-content/plugins/convertplug/modules/modal/functions/config/../../assets/demos/social_article/social_article.min.css?ver=4.8.25' type='text/css' media='all' /> <script type='text/javascript' src='https://artforlife.ru/wp-content/themes/dt-the7/js/main.min.js?ver=5.4.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var wpcf7 = {"apiSettings":{"root":"https:\/\/artforlife.ru\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"},"recaptcha":{"messages":{"empty":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u0440\u043e\u0431\u043e\u0442."}}}; /* ]]> */ </script> <script type='text/javascript' src='https://artforlife.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.0.2'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = {"visibility_show":"\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c","visibility_hide":"\u0441\u043a\u0440\u044b\u0442\u044c","width":"Auto"}; /* ]]> */ </script> <script type='text/javascript' src='https://artforlife.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript'> /* <![CDATA[ */ var ratingsL10n = {"plugin_url":"https:\/\/artforlife.ru\/wp-content\/plugins\/wp-postratings","ajax_url":"https:\/\/artforlife.ru\/wp-admin\/admin-ajax.php","text_wait":"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043d\u0435 \u0433\u043e\u043b\u043e\u0441\u0443\u0439\u0442\u0435 \u0437\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e.","image":"stars","image_ext":"gif","max":"5","show_loading":"1","show_fading":"1","custom":"0"}; var ratings_mouseover_image=new Image();ratings_mouseover_image.src="https://artforlife.ru/wp-content/plugins/wp-postratings/images/stars/rating_over.gif";; /* ]]> */ </script> <script type='text/javascript' src='https://artforlife.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.84'></script> <script type='text/javascript' src='https://artforlife.ru/wp-content/themes/dt-the7/js/legacy.min.js?ver=5.4.1'></script> <script type='text/javascript' src='https://artforlife.ru/wp-content/themes/dt-the7/js/post-type.js?ver=5.4.1'></script> <script type='text/javascript' src='https://artforlife.ru/wp-includes/js/wp-embed.min.js?ver=4.8.25'></script> <script type='text/javascript' src='https://artforlife.ru/wp-content/plugins/convertplug/admin/bsf-core/assets/js/frosty.js?ver=4.8.25'></script> <script type='text/javascript' src='https://artforlife.ru/wp-content/plugins/convertplug/modules/assets/js/idle-timer.min.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var smile_ajax = {"url":"https:\/\/artforlife.ru\/wp-admin\/admin-ajax.php"}; /* ]]> */ </script> <script type='text/javascript' src='https://artforlife.ru/wp-content/plugins/convertplug/modules/modal/assets/js/modal.min.js'></script> <script type='text/javascript' src='https://artforlife.ru/wp-content/plugins/ultimate-widgets/assets/js/scripts-min.js?ver=1.0.3'></script> <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <div class="pswp__bg"></div> <div class="pswp__scroll-wrap"> <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <div class="pswp__counter"></div> <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <button class="pswp__button pswp__button--share" title="Share"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"></div> </div> <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> </button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> </button> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div> </body> </html>