Разметка: <nav class=»circle-menu»> <div class=»center»></div> <ul> <li><a href=»#»>1</a></li> <li><a href=»#»>2</a></li> <li><a href=»#»>3</a></li> <li><a href=»#»>4</a></li> <li><a href=»#»>4</a></li> <li><a href=»#»>6</a></li> </ul> </nav> Стили: .circle-menu { position: relative; width: 400px; height: 400px; margin: 50px auto; background-color: white; box-shadow: 0 0 3px #cccccc; } .circle-menu ul { position: absolute; width: 300px; height: 300px; margin: 50px; padding: 0; list-style: none;…Продолжить читать «Круговое меню из курса HTML-академии»

Пишем понятный код с пользовательскими свойствами CSS

Перевод More Readable CSS with CSS Custom Properties – второй статьи Серджио Гомеса о пользовательских свойствах CSS Теперь, когда вы знаете как работают пользовательские свойства CSS, можно использовать их для улучшения читаемости и облегчения поддержки кода. Важно: в статье для краткости опущены фолбэки при использовании var(), но для надёжности кода про них нужно помнить. .foo { /* для браузеров, которые не…Продолжить читать «Пишем понятный код с пользовательскими свойствами CSS»

Это перевод “CSS Custom Properties — The Basics” — первой из серии статей Серджио Гомеса о пользовательских свойствах CSS. В ней рассказываются самые основы: что такое пользовательские свойства и как ими пользоваться. Вы уже слышали о пользовательских свойствах CSS (также известных как CSS переменные) или даже имеете о них некоторое представление? Возможно, вы знаете о них из поста на developers.google.com?…Продолжить читать «Пользовательские свойства CSS. Основы»

Что поправить в верстке перед выпуском в продакшн?

Это статья — чек-лист того, что нужно не забыть поправить в любом проекте. Список полезных мелочей. Весь текст поделен на две части. Первая — про простые элементы страницы, такие как текст, кнопки, изображения, формы и другие. Вторая часть про производительность, масштабируемость, безопасность и доступность. Часть 1 Текст Размер шрифта и интерлиньяж Оптимальная высота строки (line-height)…Продолжить читать «Что поправить в верстке перед выпуском в продакшн?»

Крутой Chrome DevTools — советы и рекомендации

Взято отсюда. Check out my overview of Chrome DevTools if you’re new to them 1. Drag-and-drop in the Elements panel In the Elements panel, you can drag and drop any HTML element and change its position across the page Drag-and-drop in the Elements panel 2. Reference the currently selected element in the Console Select a node in the Elements panel,…Продолжить читать «Крутой Chrome DevTools — советы и рекомендации»

20 сайтов, где можно найти логотипы и типографику для вдохновения

Все эти замечательные сайты, представленные ниже, имеют самое непосредственное отношение к логотипам и типографике. Все они представляют собой сервисы, куда креативные дизайнеры со всего мира публикуют свои творения. И поэтому, если вы в поисках вдохновения ищете самые свежие выдающиеся логотипы и самую оригинальную типографику, то эти сайты, несомненно, то место, куда следует заглянуть. Множество красивой…Продолжить читать «20 сайтов, где можно найти логотипы и типографику для вдохновения»

Синемаграфы

Синемаграфы — фотографии, на которой происходят незначительные повторяющиеся движения. Обычно они представлены в GIF-формате и создают зрителю иллюзию просмотра видео. Их получают путём создания серии фотографий из видеозаписи с последующей обработкой в графическом редакторе, когда фотографии объединяются в беспрерывный цикл последовательных кадров так, что анимированный объект (например, болтающиеся человеческие ноги) воспринимается, как беспрерывно повторяющееся движение, в…Продолжить читать «Синемаграфы»

Источник: Студия дизайна «Чипса» Каждый проект по дизайну мы бъём на этапы. Первым идет этап анализа. Что это за этап, когда он нужен, а когда нет? Ответы на эти вопросы в данной статье. Что мы называем этапом анализа? Это этап генерации идей и создания карандашных набросков. Это первый этап по проекту. Выполняя его, мы: 1. Вникаем…Продолжить читать «Что такое этап анализа в дизайне и почему он важен в каждом проекте?»

Источник: Студия дизайна «Чипса» Узнайте как сделать эффективный сайт: коротко об этапах анализа, проектирования и дизайна. …разработка сайта с уникальным дизайном, концепцией, эффектами анимации, сложной структурой и несколькими задачами (например, такой или такой) занимает в разы больше времени и куда более сложна. Открою внутреннюю кухню — кратко расскажу, как проходят этапы анализа, проектирования и дизайна сайта при индивидуальной разработке у…Продолжить читать «Проектирование и дизайн сайта в студии «Чипса»»

Источник: Студия дизайна «Чипса» Зачем в принципе нужны прототипы, для тех, кто не знает. Они позволяют ещё до дизайна понять каким образом будут выглядеть страницы сайта, как на них будут размещены элементы, насколько удобны и понятны будут страницы. Главное — за прототипы можно посадить представителя целевой аудитории и попросить взаимодействовать с ними, предварительно погрузив в тему, определив…Продолжить читать «Создание прототипа сайта — процесс на примере стартовой страницы»