Перевод статьи «10 Inspiring Ideas for Your Next Front-End Project».
Просто удивительно, что можно создать, если сочетать веб-технологии с креативностью.
Все, что вы увидите в этой статье, было создано с помощью только лишь JavaScript, HTML и CSS. Не использовались ни Photoshop, ни аналогичные инструменты, но при этом в браузере все работает отлично.
Рассматривать эти маленькие демо и играть с ними интересно, но особенно хорошо, что можно взглянуть на исходный код каждого проекта. Это позволяет не только вдохновиться замечательными идеями, но и научиться чему-то новому.
Я выбрал 10 отличных примеров проектов, опубликованных на CodePen.io в свободном доступе. CodePen — выдающаяся платформа, одним из создателей которой был Крис Койер (основатель css-tricks.com).
Создатели платформы называют CodePen социальной средой разработки (по аналогии с социальными сетями), где разработчики и инженеры могут совместно работать над проектами, демонстрировать свою работу, делиться чем-то с сообществом и создавать прототипы новых идей.
Я призываю вас изучить приведенные ниже примеры, поиграть с ними и попытаться понять, как они работают. Вы не только развлечетесь, но и узнаете много нового о творчестве в вебе.
1. Нажмите на кнопку!
Первый выбранный мной проект называется «Click the button!», его автор — Bård N Hovde, очень талантливый и творческий человек из Норвегии.
Это мой любимый Pen на CodePen, потому что он простой, но впечатляющий, имеет изюминку и поднимает мне настроение каждый раз, когда я играю с ним. Я уверен, что вам он тоже понравится.
See the Pen Click the button! by Bård N Hovde (@bnhovde) on CodePen.
2. Форма для ввода данных кредитной карты
Сегодня на многих сайтах требуется вводить данные кредитной карты в том или ином виде. Как по мне, это не всегда удобно и приятно, и главным образом — из-за того, как созданы формы.
Когда я обнаружил «Credit Card Form» Мухаммеда Эрдема (который недавно вышел на первое место по популярности среди авторов на CodePen), я был приятно удивлен. Теперь мне любопытно, почему создатели сайтов до сих пор не используют такие прекрасные формы.
Мне как пользователю просто даже интересно и приятно вводить данные своей карты в такую форму — а ведь в этом кровно заинтересован каждый владелец сайта!
See the Pen Credit Card Form — VueJs by Muhammed Erdem (@JavaScriptJunkie) on CodePen.
3. Натюрморт на чистом CSS
Эта картинка от Бена Эванса — прекрасный пример того, на что способен CSS. Я до сих пор не могу поверить, что для создания этой прекрасной картины не использовались изображения.
И это хорошее напоминание о том, чего мы можем достичь с помощью CSS! У Бена есть еще несколько примеров его CSS-магии, так что советую вам заглянуть в его профиль на CodePen.
See the Pen Pure CSS Still Life — Water and Lemons by Ben Evans (@ivorjetski) on CodePen.
4. Раскрасьте этот диван!
Кайл Веттон создал впечатляющий интерактивный Pen, в котором вы можете раскрасить диван и фон. Он легковесный и может использоваться на e-commerce сайтах по продаже мебели.
Кроме того, это хороший пример того, что можно сделать с SVG и Blend Mode (режимом смешивания).
See the Pen Color this sofa! – SVG + Blend Mode trick by Kyle Wetton (@kylewetton) on CodePen.
5. Кубик Рубика
Это больше, чем просто демонстрация веб-технологий, это настоящая онлайн-игра по мотивам головоломки, знакомой большинству читателей. Я поражаюсь той креативности и мастерству, которые продемонстрировал Boris Šehovac в этой работе.
Этот проект также вошел в число самых любимых проектов на CodePen в 2019 году, и я считаю, что целиком заслуженно!
See the Pen The Cube by Boris Šehovac (@bsehovac) on CodePen.
6. Кнопка-лицо
Не всегда впечатляющий проект бывает очень сложным. Это и показала Кэтрин Като на примере своего маленького Pen-а.
Взгляните, как мало кода потребовалось, чтобы сгенерировать эту интерактивную и забавную мордочку. Это напоминает мне о том, что временами меньше значит больше.
See the Pen Face Button by Katherine Kato (@kathykato) on CodePen.
7. Мини-плеер
Еще один Pen Мухаммеда Эрдема и еще один отличный пример того, на что способен этот парень. Если бы я был руководителем компании и искал выдающегося разработчика, я бы нанял его как можно быстрее, пока не перехватили. Хотя мнения насчет музыки в этом плеере могут быть разными, вряд ли кому-то не понравится внешний вид и ощущения от этого плеера.
See the Pen Mini Music Player — VueJS by Muhammed Erdem (@JavaScriptJunkie) on CodePen.
8. Просто волны на CSS
Daniel «Goodkatz» Östermann из Финляндии тоже показывает, что можно создать при помощи одного лишь CSS.
Представьте такой эффект на вашем личном сайте или лендинге: работы немного, а вот визуализация отличная. Легковесный и мощный — мне нравится такая комбинация!
See the Pen Simple CSS Waves | Mobile & Full width by Goodkatz (@goodkatz) on CodePen.
9. Эффекты наведения
Еще один пример того, что порой для интерактивности на сайте не нужен JavaScript. Автор этого проекта — Jhonier Riascos Zapata. Я весь день могу наводить мышку на эти карточки, потому что мне очень нравится этот Pen!
See the Pen CSS Card Hover Effects by Jhonier Riascos Zapata (@Jhonierpc) on CodePen.
10. Clip Clop Clippity Clop
(Clip Clop можно перевести как «цок-цок» — звуки копыт лошади, — прим. перев.)
Последний Pen (автор — Стив Гарднер) вы вряд ли сможете использовать в собственных проектах, но это очень, просто невероятно впечатляющая работа, созданная при помощи одного лишь CSS.
See the Pen Clip Clop Clippity Clop [CSS Only] by Steve Gardner (@ste-vg) on CodePen.
Да, вы правильно поняли, это только CSS. Ну разве не потрясающе?
Подобные примеры всегда напоминают мне о том, что следует серьезнее относиться к CSS и уделять больше времени изучению тех бесконечных возможностей, которые он предлагает.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
