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

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

Сегодня мы хотим показать вам, как создать очень простую страницу с эффектом предварительной загрузки используя CSS-анимации, SVG и JavaScript. Для веб-сайтов, где важно, чтобы загрузка всего или части контента отображались на экране только после полной её загрузки - страница предзагрузки может быть отличным решением в подобной ситуации. К тому же это может служить поводом для создания чего-то оригинального и интересного, чтобы хоть как-то сделать ожидание загрузки контента менее скучным для посетителя. 

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

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

Для морфинга поиска мы используем несколько эффектов, которые анимируют размеры поисковой строки, размер шрифта и некоторые другие элементы. 

Иногда мы задаёмся вопросом, как упаковать все эти возможные действия, которые у нас есть в один конкретный UI. Для кнопок выпадающего меню есть, конечно, много всяческих возможностей. Другая идея заключается в использовании взаимодействия при перетаскивании элемента. Сегодня мы хотим поделиться с вами некоторыми идеями такого рода взаимодействий. Идея состоит в том, чтобы позволить перетаскивать некий элемент, а затем показать некую droppable область, которая бы отвечала за определённые действия. Это сэкономит много места в UI и даст интересную динамику взаимодействий.

Область применения может быть самой различной, например:  категоризации и организации контента.

Сегодня мы бы хотели поделиться с вами некоторыми свежими идеями. Стили и тенденции со временем меняются, что требует реализации новых эффектов, которые соответствовали бы современному UI. Этот новый набор содержит некоторые простые анимации, а также некоторые более причудливые методы SVG морфинга для диалоговых окон.

Обратите внимание, что это данные примеры были протестированы в последних версиях браузеров.

Также обратите внимание, что IE11, похоже, не поддерживает vieport единицы в Calc (), которые мы используем для некоторых анимаций.

Сегодня я бы хотели поделиться с вами некоторыми вдохновляющими примерами эластичных svg элементов. Идея состоит в том, чтобы интегрировать SVG элемент в компоненты, а затем оживить его с одного положения в другое с упругой анимации. Использование SVG, может сделать такие вещи, как меню, кнопки, чекбоксы и другие элементы, которые можно сделать наиболее интересными при взаимодействии сними. Приятно то, что мы можем дать более "реалистичную" обратную связь при взаимодействии с пользователем. Особенно для сенсорных устройств обратная связь может быть более привлекательной. Основываясь на этой идее, мы создали несколько вдохновляющих примеров, где морфинг форм может иметь смысл.

Для анимации SVG, мы используем Snap.svg - отличная JavaScript SVG библиотека для современных браузеров.