Возможно, самый крутой аспект изучения внешнего интерфейса — это способность увидеть, как работают самые яркие умы в отрасли.
В отличие от серверных технологий, скрывающихся на их веб-серверах, мы все можем свободно бродить по сети, «заглядывая под капот» любого сайта или веб-приложения, которые могут заинтриговать нас. «Просмотр источника» стал центральным в том, как мы учимся и становимся лучше.
Сегодня с такими игровыми площадками, как JSBin , Dabblet и Codepen , все становится проще, чем когда-либо прежде. Лучшие люди в мире передают нам свои идеи в красивых окнах. Часто все, что нам нужно, это красиво созданный фрагмент кода, который мы можем настроить или изменить в соответствии с темой нашего бренда.
Чтобы помочь, мы прошли через Codepen, чтобы составить краткий список полезных, готовых к использованию фрагментов кода. Если вы ищете изящные способы украсить свой сайт, то вы попали по адресу!
1. Перспективная панель загрузки преобразования
Хотя нашей первой целью всегда является сокращение или устранение времени загрузки, иногда их невозможно полностью избежать. Все больше дизайнов сайтов используют исключительно CSS-панели загрузки, которые используют аккуратные спецэффекты.
Если вы действительно хотите привлечь внимание посетителей, вы можете настроить загрузчик статуса, который использует CSS-преобразование перспективы. Проще говоря, этот тег позволяет отображать связанный элемент под небольшим углом к перспективе зрителя.
TRON Spinner . Разветвленный от Simurai ) Pen
Вы бы так не думали, но при использовании для создания круглой полосы загрузки свойство преобразования перспективы дает индикатору уникальную и привлекательную эстетику, которая отдает дань уважения Трону . Этот фрагмент кода был создан известным дизайнером пользовательского интерфейса и мастером CSS Simurai , так что вы знаете, что это надежный CSS.
2. Параллакс Старфилд
Анимированные фоны, которые постоянно находятся в движении в сочетании с методами дизайна параллакса, лучше подходят для работы с более сложной анимацией JavaScript. Вам все еще нужно будет полагаться на JavaScript для более сложных вещей, но вы будете рады узнать, что теперь возможно создавать простые анимированные фоны с движением в CSS3.
Этот фрагмент кода Saransh Sinha позволяет вам развернуть анимированный фон звездного неба для вашей страницы или сайта. Это без изображения, используя CSS-тени и градиентные эффекты для отображения объектов и CSS3-анимацию, чтобы заставить их двигаться, в отличие от изображений.
Параллакс Звездный фон в CSS . Разветвленный от пера Саранша
Это возможно благодаря средам с открытым исходным кодом, таким как Compass , SASS и HAML. Вы даже можете сделать еще один шаг вперед и создать собственные спрайты для использования в своем анимированном фоне.
Демонстрация Саранша кажется мне идеальным вариантом для страницы «Скоро появится», стартового экрана или даже страницы 404.
Примечание:
Если вас что-то беспокоит в физике этого демо, есть веская причина. С технической точки зрения в параллаксе меньшие (предположительно, дальше) звезды должны двигаться медленнее, чем более крупные, более близкие звезды. Здесь они не
Однако это можно легко исправить, изменив значение «animation» под объектом «# stars2». Более конкретно, вы можете изменить число в этом фрагменте: «animStar 100s linear бесконечный». Чем меньше число, тем быстрее будут фоновые звезды. Мы рекомендуем установить значение от 10 до 30 с. Если вы хотите, вы также можете исправить это, выполнив противоположное и ускорив объект «#stars».
Конечно, вы можете сделать так, чтобы звезды скользили вбок, как будто вы летите на X-wing, если хотите.
3. Чистая CSS Карусель
Хотя до сих пор JavaScript почти всегда использовался для питания таких компонентов, как слайдеры или карусели, сегодня CSS3 предлагает нам жизнеспособные и полезные варианты. Переходные анимации просты с помощью CSS, но для записи и реагирования на вводимые пользователем данные — так называет их «компьютерная наука об изменениях в состоянии» — всегда требовалось дополнительное прикосновение к JavaScript.
Это было до тех пор, пока кто-то не осознал, что мы можем использовать радиокнопки и селектор « :checked Наши радиокнопки даже не должны выглядеть как радиокнопки — мы можем изменить их стиль так, как нам нравится.
Разветвлено из пера Кохея Шингаи без JavaScript-карусели .
Теперь мы можем реализовать элементы пользовательского интерфейса, такие как карусель , меню в стиле рисования и раскладные панели, полностью с помощью CSS. JavaScript может быть нацелен на более сложные проблемы, и конечный результат более привлекательный и отзывчивый, чем когда-либо! И если вы стремитесь привлечь потенциальных клиентов к своему интерактивному контенту , этот тип уникальной интерактивности вдохновит людей.
4. Анимированная фотостека
В этом фрагменте Expanding Photo Stack от Miro Karilahti требуется несколько привлекательных методов анимации для отображения коллекции изображений. Несмотря на то, что он пуст, он не выглядит так, как будто использует больше, чем стандартные свойства анимации CSS3.
Разворот из стека анимированных фотографий пера miroot .
Однако, как только вы заполните поля для фотографий, вы заметите, что стопка также добавляет глубину вашей странице, поскольку каждая фотография перемещается индивидуально. Более того, необходимый HTML-код для сопровождения фрагмента удивительно прост. Он имеет один контейнер div с отдельными якорными ссылками для фотографий.
Есть ограничения для этого кода. Если вы измените количество изображений в стеке — а это не является необоснованным ожиданием — дела идут не так, как надо. При добавлении дополнительного изображения или попытке удалить одно, другие элементы не корректируются соответствующим образом.
Это кажется проблемой, которую можно исправить, используя CSS3 flexbox, чтобы заставить новые элементы работать должным образом. На самом деле, это хорошая маленькая задача для тех, кто хочет похвастаться своими флексбоксами.
Очевидно, вы можете сделать это с любым из фрагментов, обсужденных здесь!
Современный веб-дизайн постоянно развивается, и мы все получаем место в первом ряду, чтобы выбрать лучшее из того, что было создано.